Highlight selected panels

Add event handler and style sheet to highlight panels when selected.

Signed-off-by: Roberto Rosario <Roberto.Rosario@mayan-edms.com>

HISTORY.rst

@@ -210,6 +210,7 @@
 - Added support for selecting a document from the UI by just
   clicking on the title of the body of the card, not just on
   the checkbox next to the title.
+- Event handler to highlight panels when selected.
 
 3.1.9 (2018-11-01)
 ==================

mayan/apps/appearance/static/appearance/css/base.css

@@ -478,3 +478,8 @@ body {
 .navbar-brand {
     outline: none;
 }
+
+.panel-highlighted {
+    border: 2px solid #18bc9c;
+    box-shadow: 10px 10px 20px #000000;
+}

mayan/apps/appearance/static/appearance/js/mayan_app.js

@@ -353,6 +353,15 @@ class MayanApp {
     setupPanelSelection () {
         var app = this;
 
+        $('body').on('change', '.check-all-slave', function (event) {
+            var checked = $(event.target).prop('checked');
+            if (checked) {
+                $(this).closest('.panel-item').addClass('panel-highlighted');
+            } else {
+                $(this).closest('.panel-item').removeClass('panel-highlighted');
+            }
+        });
+
         $('body').on('click', '.panel-item', function (event) {
             var $this = $(this);
             var targetSrc = $(event.target).prop('src');