feat(style): tweak Editors styling and add Sort icon hint on hover

- when column is sortable, 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. - tweak styling of some of the Editable fields like the longText and regular text editor
ghiscoding · Apr 27, 2020 · aba4182 · aba4182
1 parent c23e5d7
commit aba4182
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 44 deletions.
diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -153,6 +153,7 @@ $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.6 !default;
 
 /* Grouping Totals Formatter */
 $group-totals-formatter-color:              gray !default;
@@ -394,15 +395,15 @@ $editor-focus-box-shadow:                   inset 0 1px 1px rgba(0,0,0,.075), 0
 $date-editor-focus-border-color:            $editor-focus-border-color;
 $date-editor-focus-box-shadow:              $editor-focus-box-shadow;
 $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;
 $large-editor-textarea-width:               250px !default;
 $large-editor-button-text-align:            right !default;
 $large-editor-footer-spacing:               2px !default;
 $text-editor-border:                        1px solid #e2e2e2 !default;
-$text-editor-border-radius:                 4px !default;
+$text-editor-border-radius:                 3px !default;
 $text-editor-background:                    #ffffff !default;
 $text-editor-margin-bottom:                 2px !default;
 $text-editor-margin-left:                   -2px !default; /* negative number to cancel inside padding */

diff --git a/packages/common/src/styles/se-slickgrid-theme-material.scss b/packages/common/src/styles/se-slickgrid-theme-material.scss
@@ -15,7 +15,7 @@ $header-font-size:                      12px;
 $header-font-weight:                    500;
 $header-text-color:                     rgba(0, 0, 0, 0.87);
 $cell-font-weight:                      400;
-$cell-padding:                          8px 7.5834px;
+$cell-padding:                          8px 7px;
 $cell-odd-background-color:             #f5f5f5;
 $cell-text-color:                       rgba(0, 0, 0, 0.87);
 $header-row-filter-padding:             8px 4px;

diff --git a/packages/common/src/styles/slick-bootstrap.scss b/packages/common/src/styles/slick-bootstrap.scss
@@ -308,6 +308,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;
@@ -336,11 +347,13 @@
           content: $icon-sort-asc;
           font-family: $icon-font-family;
           font-size: $icon-sort-font-size;
+          opacity: 1;
       }
       .slick-sort-indicator-desc:before {
           content: $icon-sort-desc;
           font-family: $icon-font-family;
           font-size: $icon-sort-font-size;
+          opacity: 1;
       }
       .slick-resizable-handle {
         width: 7px;

diff --git a/packages/common/src/styles/slick-default-theme.scss b/packages/common/src/styles/slick-default-theme.scss
@@ -86,14 +86,14 @@
          padding: $cell-padding;
 
          input.editor-text {
-           width: 100%;
+           width: calc(100% + 2px); // add 2px to cancel out negative margin-left transform
            height: 100%;
            outline: 0;
            transform: translate(0, -2px);
          }
 
          input.compound-editor-text {
-           width: calc(50% - 5px);
+           width: calc(50% + 1px - 5px); // 1px (is 2px / 2) and 5px (is space between the 2 inputs)
            height: 100%;
            outline: 0;
            transform: translate(0, -2px);

diff --git a/packages/common/src/styles/slick-editors.scss b/packages/common/src/styles/slick-editors.scss
@@ -1,44 +1,48 @@
 @import './variables';
 
-.slick-cell.active  {
-	input.compound-editor-text,
-	input.editor-text {
-    border: $text-editor-border;
-    border-radius: $text-editor-border-radius;
-    background: $text-editor-background;
-    padding-bottom: $text-editor-padding-bottom;
-    padding-left: $text-editor-padding-left;
-    padding-right: $text-editor-padding-right;
-    padding-top: $text-editor-padding-top;
-    margin-left: $text-editor-margin-left;
-    margin-bottom: $text-editor-margin-bottom;
-    margin-right: $text-editor-margin-right;
-    margin-top: $text-editor-margin-top;
+.slick-row {
+  .slick-cell  {
+    &.active {
+      input.compound-editor-text,
+      input.editor-text {
+        border: $text-editor-border;
+        border-radius: $text-editor-border-radius;
+        background: $text-editor-background;
+        padding-bottom: $text-editor-padding-bottom;
+        padding-left: $text-editor-padding-left;
+        padding-right: $text-editor-padding-right;
+        padding-top: $text-editor-padding-top;
+        margin-left: $text-editor-margin-left;
+        margin-bottom: $text-editor-margin-bottom;
+        margin-right: $text-editor-margin-right;
+        margin-top: $text-editor-margin-top;
 
-    &:focus {
-      outline: 0;
-      border-color: $text-editor-focus-border-color;
-      box-shadow: $text-editor-focus-box-shadow;
-    }
+        &:focus {
+          outline: 0;
+          border-color: $text-editor-focus-border-color;
+          box-shadow: $text-editor-focus-box-shadow;
+        }
 
-    &.right {
-      margin-left: calc(#{$text-editor-margin-left + 9px});
-    }
-  }
+        &.right {
+          margin-left: calc(#{$text-editor-margin-left + 9px});
+        }
+      }
 
-  .slider-editor-input {
-    &:focus {
-      outline: 0;
-      border-color: $slider-editor-focus-border-color;
-      box-shadow: $slider-editor-focus-box-shadow;
-    }
-  }
+      .slider-editor-input {
+        &:focus {
+          outline: 0;
+          border-color: $slider-editor-focus-border-color;
+          box-shadow: $slider-editor-focus-box-shadow;
+        }
+      }
 
-  .flatpickr-alt-input.editor-text {
-    &:focus {
-      outline: 0;
-      border-color: $date-editor-focus-border-color;
-      box-shadow: $date-editor-focus-box-shadow;
+      .flatpickr-alt-input.editor-text {
+        &:focus {
+          outline: 0;
+          border-color: $date-editor-focus-border-color;
+          box-shadow: $date-editor-focus-box-shadow;
+        }
+      }
     }
   }
 }

diff --git a/packages/common/src/styles/slickgrid-theme-bootstrap.scss b/packages/common/src/styles/slickgrid-theme-bootstrap.scss
@@ -1,8 +1,8 @@
+@import './slick-default-theme';
 @import './slick-grid';
 @import './slick-controls';
 @import './slick-editors';
 @import './slick-plugins';
-@import './slick-default-theme';
 @import './slick-pagination';
 @import './slick-footer';
 @import './slickgrid-examples';

diff --git a/packages/common/src/styles/slickgrid-theme-material.scss b/packages/common/src/styles/slickgrid-theme-material.scss
@@ -5,7 +5,7 @@ $icon-font-size:                        20px;
 $group-totals-formatter-color:          #666666;
 $cell-border-top:                       none;
 $cell-font-weight:                      400;
-$cell-padding:                          8px 7.5834px;
+$cell-padding:                          8px 7px;
 $cell-odd-background-color:             #f5f5f5;
 $cell-text-color:                       rgba(0, 0, 0, 0.87);
 $header-row-filter-padding:             8px 4px;
@@ -90,12 +90,12 @@ $row-mouse-hover-color:                 #ebfaef;
 $row-selected-color:                    #d4f6d7; /*rgba(0, 149, 48, 0.2);*/
 
 @import './roboto-font';
+@import './slick-default-theme';
 @import './slick-without-bootstrap-min-styling';
 @import './slick-grid';
 @import './slick-controls';
 @import './slick-editors';
 @import './slick-plugins';
-@import './slick-default-theme';
 @import './slick-pagination';
 @import './slick-footer';
 @import './slickgrid-examples';

diff --git a/packages/common/src/styles/slickgrid-theme-salesforce.scss b/packages/common/src/styles/slickgrid-theme-salesforce.scss
@@ -81,6 +81,7 @@ $header-menu-icon-width:                18px;
 $header-menu-button-icon:               "\F0140";
 $header-menu-button-margin-right:       6px;
 $header-menu-display:                   inline-block;
+$large-editor-border-radius:            6px;
 $multiselect-icon-arrow-down:           "\F035D";
 $multiselect-icon-arrow-up:             "\F0360";
 $multiselect-icon-arrow-font-size:      $icon-font-size - 4px;
@@ -98,11 +99,11 @@ $row-selected-color:                    darken($cell-odd-background-color, 7%);
 $row-mouse-hover-color:                 rgba(128, 183, 231, 0.1);
 
 @import './slick-without-bootstrap-min-styling';
+@import './slick-default-theme';
 @import './slick-grid';
 @import './slick-controls';
 @import './slick-editors';
 @import './slick-plugins';
-@import './slick-default-theme';
 @import './slick-pagination';
 @import './slick-footer';
 @import './slickgrid-examples';