Add indeterminate state to bulk select checkbox

app/assets/javascripts/app/controllers/ticket_overview.coffee

@@ -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) ->
+    @$('.table-overview').delegate('[name="bulk"]', 'change', (e) =>
-      if !$(e.target).prop('checked')
+      bulkAll = @$('.table-overview').find('[name="bulk_all"]')
-        $(e.target).parents().find('[name="bulk_all"]').prop('checked', false)
+      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: ->

app/assets/javascripts/app/views/generic/table.jst.eco

@@ -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 %>

app/assets/stylesheets/svg-dimensions.css

@@ -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; }

app/assets/stylesheets/zammad.scss

@@ -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.radio-replacement--fullscreen {
+  input:focus ~ .icon-checked,
-  position: absolute;
+  input:focus ~ .icon-unchecked {
-  left: 0;
+    border-radius: 100%;
-  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;
 }
 
 .table .checkbox-replacement,
@@ -2639,7 +2645,8 @@ ol.tabs li {
 }
 
 .icon-checkbox,
-.icon-checkbox-checked {
+.icon-checkbox-checked,
+.icon-checkbox-indeterminate {
   fill: white;
 }
 

public/assets/images/icons/checkbox-indeterminate.svg

@@ -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>