UI changes

internewshid/hid/static/hid/js/enable_multiselect.js

@@ -5,4 +5,10 @@ $(document).ready(function() {
         includeResetOption: true,
         numberDisplayed: 1
     });
+    $('#feedback-type-selector').multiselect({
+        nonSelectedText: gettext('All Types'),
+        buttonClass: 'form-control',
+        includeResetOption: true,
+        numberDisplayed: 1
+    });
 });

internewshid/hid/static/hid/js/select_all_checkbox.js

@@ -48,12 +48,18 @@
         }
 
         init();
-        
-        // Highlight single row on select 
+
+        // Highlight single row on select
         $( "input[type=checkbox]" ).click(function(event){
-            console.log('aaa');
             $( event.target ).closest( "tr" ).toggleClass('selected');
+            // Check if we have a risk class
+            if ( $(event.target).closest("div").is('[class*=risk]') ) {
+                // get the second class name containing risk
+                var risk_level = $(event.target).closest("div").attr('class').split(' ')[1];
+                // Copy the risk class from the div to the tr
+                $( event.target ).closest( "tr" ).toggleClass(risk_level);
+            }
         });
-        
+
     });
 })(jQuery);

internewshid/media/less/internews-mixins.less

 
-.box-shadow(@horizontal, @vertical, @spread:5px, @color: rgba(51,51,51,0.38)) {
+.box-shadow(@position:outset, @horizontal, @vertical, @spread:5px, @color: rgba(51,51,51,0.38)) {
      -webkit-box-shadow:@arguments;
         -moz-box-shadow:@arguments;
           -o-box-shadow:@arguments;
@@ -11,4 +11,4 @@
         -moz-box-shadow:@arguments;
           -o-box-shadow:@arguments;
              box-shadow:@arguments;
-}
\ No newline at end of file
+}

internewshid/media/less/multiselect.less

@@ -33,55 +33,73 @@ span.multiselect-native-select select {
     list-style-type: none;
     margin: 0;
     padding: 0;
-}
+    z-index: 4;
+    border: 1px solid @input-border;
+    border-radius: @input-border-radius;
+    .box-shadow(outset 0px, 0px, 5px, rgba(0,0,0,0.7));
+    .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
+
+    .input-group {
+        margin: 5px;
+        width: auto;
+    }
 
-.multiselect-container .input-group {
-    margin: 5px;
-}
+    li {
+        padding: 0;
+    }
 
-.multiselect-container .multiselect-reset .input-group {
-    width: 93%;
-}
+    li.multiselect-reset {
+        width: 93%;
+        .input-group {
+            .btn-default {
+                padding: 5px 10px;
+                font-size: @font-size-small;
+                background-color: @brand-primary;
+                color: #fff;
+                border-radius: @border-radius-large;
+                border: solid 1px @brand-primary;
+            }
+        }
+    }
 
-.multiselect-container > li {
-    padding: 0;
-}
+    > li > a.multiselect-all label {
+        font-weight: 700;
+    }
 
-.multiselect-container > li > a.multiselect-all label {
-    font-weight: 700;
-}
+    > li.multiselect-group label {
+        margin: 0;
+        padding: 3px 20px;
+        height: 100%;
+        font-weight: 700;
+    }
 
-.multiselect-container > li.multiselect-group label {
-    margin: 0;
-    padding: 3px 20px;
-    height: 100%;
-    font-weight: 700;
-}
+    > li.multiselect-group-clickable label {
+        cursor: pointer;
+    }
 
-.multiselect-container > li.multiselect-group-clickable label {
-    cursor: pointer;
-}
+    > li > a {
+        padding: 0;
 
-.multiselect-container > li > a {
-    padding: 0;
-}
+        > label {
+            margin: 0;
+            height: 100%;
+            cursor: pointer;
+            font-weight: 400;
+            padding: 3px 20px 3px 40px;
 
-.multiselect-container > li > a > label {
-    margin: 0;
-    height: 100%;
-    cursor: pointer;
-    font-weight: 400;
-    padding: 3px 20px 3px 40px;
+            &.checkbox,
+            &.radio {
+                margin: 0;
+            }
+            > input[type=checkbox] {
+                margin-bottom: 5px;
+            }
+        }
+    }
 }
 
-.multiselect-container > li > a > label.checkbox,
-.multiselect-container > li > a > label.radio {
-    margin: 0;
-}
 
-.multiselect-container > li > a > label > input[type=checkbox] {
-    margin-bottom: 5px;
-}
+
 
 .btn-group > .btn-group:nth-child(2) > .multiselect.btn {
     border-top-left-radius: 4px;
@@ -101,24 +119,7 @@ span.multiselect-native-select select {
 
 
 .multiselect-container {
-  border: 1px solid @input-border;
-  border-radius: @input-border-radius;
-  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
-  .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
-
-    > .multiselect-reset {
-        > .input-group {
-            width: auto;
-            > .btn-default {
-                padding: 5px 10px;
-                font-size: @font-size-small;
-                background-color: @brand-primary;
-                color: #fff;
-                border-radius: @border-radius-large;
-                border: solid 1px @brand-primary;
-            }
-        }
-    }
+
 }
 
 .filter-container .filters .multiselect-container .checkbox {