Merge pull request #2521 from /issues/2505

Issue #2505 - Custom checkbox & flexbox order to move checked labels up

Author: magsout

webcompat/static/css/src/label-editor.css

@@ -33,6 +33,8 @@
 
 /* list category */
 .label-editor-list {
+  display: flex;
+  flex-direction: column;
   max-height: 18.75em;
   -webkit-overflow-scrolling: touch;
   overflow-x: hidden;
@@ -52,9 +54,22 @@
   cursor: pointer;
   display: block;
   margin: 0;
+  order: 2;
   padding: calc(var(--unit-space) * .75) calc(var(--unit-space) * .5);
 }
 
+.label-editor-list-item .small {
+  vertical-align: middle;
+}
+
+.label-editor-list-item::before {
+  content: "☐";
+  display: inline-block;
+  font-size: 1.5em;
+  margin-top: -4px;
+  vertical-align: middle;
+}
+
 .label-editor-list-item:last-child {
   border-bottom: 1px solid #ddd;
 }
@@ -64,14 +79,27 @@
 .label-editor-list-item.focused {
   border-color: Highlight;
   border-style: solid;
-  border-width: 2px;
+  border-width: 2px 2px 2px 4px;
   outline: none;
 }
 
 /* checkbox */
 .label-editor-list-item-checkbox {
+  clip: rect(0 0 0 0);
+  height: 0;
   margin: 0;
   padding: 0;
+  position: absolute;
+  visibility: hidden;
+  width: 0;
+}
+
+.label-editor-list-item-checkbox:checked + .label-editor-list-item::before {
+  content: "︎☑︎";
+}
+
+.label-editor-list-item-checkbox:checked + .label-editor-list-item {
+  order: 1;
 }
 
 /* Launch Category Editor */

webcompat/static/js/lib/editor.js

@@ -118,7 +118,7 @@ issues.CategoryEditorView = Backbone.View.extend({
     // hide the non-filter matches
     _.each(toHide, function(name) {
       $("input[name=" + escape(name) + "]")
-        .closest(".label-editor-list-item")
+        .next(".label-editor-list-item")
         .hide();
     });
   }, 100),

webcompat/templates/web_modules/label-editor.jst

@@ -11,12 +11,13 @@
   </div>
   <div class="label-editor-list" tabindex="-1">
     <% _.each(labels, function(label) { %>
-      <label class="label-editor-list-item label-<%= label.remoteName %>" tabindex="0">
-        <input class="label-editor-list-item-checkbox"
-               type="checkbox" name="<%= label.name %>"
-               data-color="<%=label.color%>"
-               data-remotename="<%= label.remoteName %>"
-               tabindex="-1">
+      <input class="label-editor-list-item-checkbox"
+              type="checkbox" name="<%= label.name %>"
+              id="label-<%= label.remoteName %>"
+              data-color="<%=label.color%>"
+              data-remotename="<%= label.remoteName %>"
+              tabindex="-1">
+      <label class="label-editor-list-item label-<%= label.remoteName %>" for="label-<%= label.remoteName %>" tabindex="0">
         <span class="small"><%= label.name %></span>
       </label>
     <% }); %>