Add indeterminate state to bulk select checkbox

This commit is contained in:
Felix Niklas 2017-01-30 09:45:45 +01:00
parent 72d771ba28
commit 988071519c
7 changed files with 110 additions and 75 deletions

View file

@ -755,7 +755,7 @@ class Table extends App.Controller
checkbox: checkbox
)
table = $(table)
table.delegate('[name="bulk_all"]', 'click', (e) ->
table.delegate('[name="bulk_all"]', 'change', (e) ->
if $(e.currentTarget).prop('checked')
$(e.currentTarget).closest('table').find('[name="bulk"]').prop('checked', true)
else
@ -891,7 +891,7 @@ class Table extends App.Controller
@bulkForm.show()
# show/hide bulk action
@$('.table-overview').delegate('input[name="bulk"], input[name="bulk_all"]', 'click', (e) =>
@$('.table-overview').delegate('input[name="bulk"], input[name="bulk_all"]', 'change', (e) =>
if @$('.table-overview').find('input[name="bulk"]:checked').length == 0
@bulkForm.hide()
@bulkForm.reset()
@ -900,9 +900,21 @@ class Table extends App.Controller
)
# deselect bulk_all if one item is uncheck observ
@$('.table-overview').delegate('[name="bulk"]', 'click', (e) ->
if !$(e.target).prop('checked')
$(e.target).parents().find('[name="bulk_all"]').prop('checked', false)
@$('.table-overview').delegate('[name="bulk"]', 'change', (e) =>
bulkAll = @$('.table-overview').find('[name="bulk_all"]')
checkedCount = @$('.table-overview').find('input[name="bulk"]:checked').length
checkboxCount = @$('.table-overview').find('input[name="bulk"]').length
if checkedCount is 0
bulkAll.prop('indeterminate', false)
bulkAll.prop('checked', false)
else
if checkedCount is checkboxCount
bulkAll.prop('indeterminate', false)
bulkAll.prop('checked', true)
else
bulkAll.prop('checked', false)
bulkAll.prop('indeterminate', true)
)
getSelected: ->

View file

@ -10,6 +10,7 @@
<input type="checkbox" value="" name="bulk_all">
<%- @Icon('checkbox', 'icon-unchecked') %>
<%- @Icon('checkbox-checked', 'icon-checked') %>
<%- @Icon('checkbox-indeterminate', 'icon-indeterminate') %>
</label>
</th>
<% end %>

View file

@ -4,6 +4,7 @@
.icon-arrow-up { width: 13px; height: 7px; }
.icon-chat { width: 24px; height: 24px; }
.icon-checkbox-checked { width: 11px; height: 11px; }
.icon-checkbox-indeterminate { width: 11px; height: 11px; }
.icon-checkbox { width: 11px; height: 11px; }
.icon-checkmark { width: 16px; height: 14px; }
.icon-clipboard { width: 16px; height: 16px; }

View file

@ -1018,76 +1018,82 @@ th.align-right {
align-items: center;
justify-content: center;
position: relative;
.icon-checked {
color: black;
}
.icon-unchecked {
color: hsl(60,1%,61%);
}
.icon-indeterminate {
display: none;
color: hsl(60,1%,61%);
}
&.is-disabled {
cursor: default;
}
&.checkbox-replacement--fullscreen,
&.radio-replacement--fullscreen {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
&.checkbox-replacement--inline,
&.radio-replacement--inline {
display: inline-flex;
margin-right: 3px;
}
input {
pointer-events: none;
position: absolute;
opacity: 0;
&:disabled ~ .icon {
opacity: 0.33;
fill: none;
cursor: default;
}
&:not(:checked) ~ .icon-checked,
&:checked ~ .icon-unchecked {
display: none;
}
&:focus:not(.is-active) ~ .icon-checked,
&:focus:not(.is-active) ~ .icon-unchecked {
box-shadow: 0 0 0 2px hsl(201,62%,90%);
color: hsl(200,71%,59%);
}
&:indeterminate {
~ .icon-checked,
~ .icon-unchecked {
display: none;
}
~ .icon-indeterminate {
display: block;
}
}
}
+ .label-text {
margin-left: 0;
}
}
.checkbox-replacement.checkbox-replacement--fullscreen,
.radio-replacement.radio-replacement--fullscreen {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.checkbox-replacement.checkbox-replacement--inline,
.radio-replacement.radio-replacement--inline {
display: inline-flex;
margin-right: 3px;
}
.checkbox-replacement input,
.radio-replacement input {
pointer-events: none;
position: absolute;
opacity: 0;
}
.checkbox-replacement .icon-checked,
.radio-replacement .icon-checked {
color: black;
}
.checkbox-replacement .icon-unchecked,
.radio-replacement .icon-unchecked {
color: hsl(60,1%,61%);
}
.checkbox-replacement.is-disabled,
.radio-replacement.is-disabled {
cursor: default;
}
.checkbox-replacement input:disabled ~.icon,
.radio-replacement input:disabled ~.icon {
opacity: 0.33;
fill: none;
cursor: default;
}
.checkbox-replacement input:not(:checked) ~ .icon-checked,
.checkbox-replacement input:checked ~ .icon-unchecked,
.radio-replacement input:not(:checked) ~ .icon-checked,
.radio-replacement input:checked ~ .icon-unchecked {
display: none;
}
.checkbox-replacement input:focus:not(.is-active) ~ .icon-checked,
.checkbox-replacement input:focus:not(.is-active) ~ .icon-unchecked,
.radio-replacement input:focus:not(.is-active) ~ .icon-checked,
.radio-replacement input:focus:not(.is-active) ~ .icon-unchecked, {
box-shadow: 0 0 0 2px hsl(201,62%,90%);
color: hsl(200,71%,59%);
}
.radio-replacement input:focus ~ .icon-checked,
.radio-replacement input:focus ~ .icon-unchecked {
border-radius: 100%;
}
.checkbox-replacement + .label-text,
.radio-replacement + .label-text {
margin-left: 0;
.radio-replacement {
input:focus ~ .icon-checked,
input:focus ~ .icon-unchecked {
border-radius: 100%;
}
}
.table .checkbox-replacement,
@ -2639,7 +2645,8 @@ ol.tabs li {
}
.icon-checkbox,
.icon-checkbox-checked {
.icon-checkbox-checked,
.icon-checkbox-indeterminate {
fill: white;
}

Binary file not shown.

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 60 KiB

View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="11px" height="11px" viewBox="0 0 11 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>checkbox-indeterminate</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="checkbox-indeterminate">
<polygon id="Path-Copy" fill="#50E3C2" points="11 0 0 0 0 11 11 11"></polygon>
<path d="M0,0 L0.55,0 L10.45,0 L11,0 L11,0.55 L11,10.45 L11,11 L10.45,11 L0.55,11 L0,11 L0,10.45 L0,0.55 L0,0 Z M10,1 L1,1 L1,10 L10,10 L10,1 Z" id="Path" fill="#BD0FE1"></path>
<rect id="Rectangle" fill="#000000" x="3" y="5" width="5" height="1"></rect>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 884 B