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 <[email protected]>
ghiscoding · Apr 28, 2020 · a746c2d · a746c2d
1 parent 0d5a150
commit a746c2d
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 1 deletion.
diff --git a/src/app/examples/grid-headermenu.component.scss b/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';

diff --git a/src/app/modules/angular-slickgrid/styles/_variables.scss b/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;

diff --git a/src/app/modules/angular-slickgrid/styles/slick-bootstrap.scss b/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;

diff --git a/src/app/modules/angular-slickgrid/styles/slick-plugins.scss b/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;