Update to latest Slickgrid version and add styling to checkbox selector

Author: Ghislain Beaulac

package.json

@@ -47,7 +47,7 @@
     "jquery": "^3.2.1",
     "lodash": "^4.17.4",
     "moment-mini": "^2.18.1",
-    "slickgrid": "^2.3.10",
+    "slickgrid": "^2.3.12",
     "vinyl-paths": "^2.1.0"
   },
   "devDependencies": {

src/app/modules/angular-slickgrid/styles/_variables.scss

@@ -99,6 +99,12 @@ $grid-menu-link-background-color:       #ffffff !default;
 $grid-menu-box-shadow:                  2px 2px 2px silver !default;
 $grid-menu-icon-font-size:              14px;
 
+/* Checkbox Selector / Row Selection */
+$chekbox-selector-color:                #31708F !default;
+$chekbox-selector-size:                 13px !default;
+$chekbox-selector-icon:                 "\f00c" !default;
+$chekbox-selector-opacity:              0.15 !default;
+
 /* Editors */
 $large-editor-background-color:         #ffffff !default;
 $large-editor-border:                   2px solid gray !default;

src/app/modules/angular-slickgrid/styles/slick-plugins.scss

@@ -162,57 +162,21 @@ label {
 // Checkbox Selector Plugin
 // ----------------------------------------------
 
-.slick-cell-checkboxsel {
-  border: $row-checkbox-selector-border;
-  background: $row-checkbox-selector-background;
-  /*
-  input[type="checkbox"]{
-    display:none;
-  }
-  input[type="checkbox"] + label {
-    color: #88E2E2;
-    font-size: 25px;
-    width: 25px;
-    height: 25px;
-    cursor: pointer;
-  }
-  input[type="checkbox"]:checked + label {
-    background: #fff;
-  }
-  input[type="checkbox"] + label:before {
-    display:inline-block;
-    content: "\f096";
-    cursor:pointer;
-  }
-
-  input[type="checkbox"]:checked + label:before {
-    content:"\f046";
-    position: relative;
-    left: 2px;
-  }
-  */
+.slickgrid-container input[type=checkbox] {
+  display:none;  /* to hide the checkbox itself */
 }
-#selector-all-btn.slick-selector {
-  border-right: $selector-border-right !important;
-  .selector-checkbox {
-    opacity: 0.1;
-    font-size: ($font-size-base-value + 2px) !important;
-  }
-  .selected {
-    .selector-checkbox {
-      opacity: 1;
-    }
-  }
-}
-.slick-selector {
-  border-right: $selector-border-right !important;
-  .selector-checkbox {
-    opacity: 0.1;
-    font-size: ($font-size-base-value + 2px) !important;
+.slickgrid-container input[type=checkbox] + label:before {
+   font-family: $icon-font-family;
+   color: $chekbox-selector-color;
+   font-weight: bold;
+   display: inline-block;
+   content: $chekbox-selector-icon;
+   font-size: $chekbox-selector-size;
+   cursor: pointer;
+ }
+ .slickgrid-container input[type=checkbox] + label:before {
+   opacity: $chekbox-selector-opacity; /* unchecked icon */
   }
-}
-.slick-selector.selected {
-  .selector-checkbox {
-    opacity: 1;
+ .slickgrid-container input[type=checkbox]:checked + label:before {
+   opacity: 1; /* checked icon */
   }
-}