feat(style): add Sort icon hint on hover when column is sortable (#435)

- we now show a hint while hovering the column. It helps identify if the hovering column is sortable or not, if user doesn't want this behavior he can simply change the SASS variable to opacity of 0.

Co-authored-by: Ghislain Beaulac <ghislain.beaulac@se.com>

Author: ghiscoding

src/app/examples/grid-headermenu.component.scss

@@ -3,6 +3,7 @@ $header-menu-button-border-width:         0px 1px;
 $header-menu-button-icon:                 "\f0d7";
 $header-menu-button-width:                16px;
 $header-menu-button-padding:              10px 0 0 3px;
+$sort-indicator-hint-opacity:             0;
 
 /* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
 @import '../modules/angular-slickgrid/styles/slickgrid-theme-bootstrap.scss';

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

@@ -123,13 +123,15 @@ $autocomplete-z-index:	                    1000 !default;
 $icon-sort-asc:                             "\f0d8" !default;
 $icon-sort-desc:                            "\f0d7" !default;
 $icon-sort-color:                           rgb(76, 128, 190) !default;
+$icon-sort-font-size:                       $icon-font-size !default;
 $icon-sort-position-right:                  10px !default;
 $icon-sort-position-top:                    ((15px * $header-row-count) - 15px) !default;
 $sort-indicator-number-font-size:           10px !default;
 $sort-indicator-number-width:               8px !default;
 $sort-indicator-number-left:                auto !default;
 $sort-indicator-number-right:               0px !default;
 $sort-indicator-number-top:                 (13px * $header-row-count) !default;
+$sort-indicator-hint-opacity:               0.5 !default;
 
 /* Grouping Totals Formatter */
 $group-totals-formatter-color:              gray !default;
@@ -304,6 +306,7 @@ $header-menu-button-bg-color:               #ffffff !default;
 $header-menu-border:                        1px solid #BFBDBD !default;
 $header-menu-button-border:                 $header-menu-border !default;
 $header-menu-button-border-width:           0px !default;
+$header-menu-button-height:                 35px !default;
 $header-menu-button-icon:                   "\f13a" !default;
 $header-menu-button-padding:                0px !default;
 $header-menu-border-radius:                 2px !default;
@@ -333,7 +336,7 @@ $checkbox-selector-opacity-hover:           0.35 !default;
 
 /* Editors */
 $large-editor-background-color:             #ffffff !default;
-$large-editor-border:                       2px solid gray !default;
+$large-editor-border:                       2px solid #a0a0a0 !default;
 $large-editor-text-padding:                 5px !default;
 $large-editor-border-radius:                8px !default;
 $large-editor-textarea-height:              80px !default;

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

@@ -299,6 +299,17 @@
         color: $slickgridHoverHeaderColor;
       }
 
+      /* when sorting is possible and there's not yet a sort applied on the column
+       we could display the sort ascending icon (with an opacity) as a hint */
+      &.ui-sortable-handle.ui-state-hover:not(.slick-header-column-sorted) {
+        .slick-sort-indicator:before {
+          content: $icon-sort-asc;
+          font-family: $icon-font-family;
+          font-size: $icon-sort-font-size;
+          opacity: $sort-indicator-hint-opacity;
+        }
+      }
+
       .slick-sort-indicator {
         background: none;
         font-family: $icon-font-family;

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

@@ -268,6 +268,7 @@
   cursor: pointer;
   display: none;
   position: absolute;
+  height: $header-menu-button-height;
   border: $header-menu-button-border;
   border-width: $header-menu-button-border-width;
   padding: $header-menu-button-padding;