Add indeterminate state to bulk select checkbox
This commit is contained in:
Felix Niklas
parent
72d771ba28
commit
988071519c
7 changed files with 110 additions and 75 deletions
|
|
@ -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: ->
|
||||
|
|
|
|||
|
|
@ -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 %>
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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 |
14
public/assets/images/icons/checkbox-indeterminate.svg
Normal file
14
public/assets/images/icons/checkbox-indeterminate.svg
Normal 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 |
Loading…
Reference in a new issue