From aba41826659844519da1ef170f0b3641a0d91af0 Mon Sep 17 00:00:00 2001 From: Ghislain Beaulac Date: Mon, 27 Apr 2020 13:27:30 -0400 Subject: [PATCH] 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 --- packages/common/src/styles/_variables.scss | 5 +- .../styles/se-slickgrid-theme-material.scss | 2 +- .../common/src/styles/slick-bootstrap.scss | 13 ++++ .../src/styles/slick-default-theme.scss | 4 +- packages/common/src/styles/slick-editors.scss | 74 ++++++++++--------- .../src/styles/slickgrid-theme-bootstrap.scss | 2 +- .../src/styles/slickgrid-theme-material.scss | 4 +- .../styles/slickgrid-theme-salesforce.scss | 3 +- 8 files changed, 63 insertions(+), 44 deletions(-) diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss index 225290730..4c461253c 100644 --- 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,7 +395,7 @@ $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; @@ -402,7 +403,7 @@ $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 index 2a5d16591..899a03ba1 100644 --- 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 index 8f0ceeba5..3a9677beb 100644 --- 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 index bca920c58..5d8057e42 100644 --- 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 index a46fb7605..1d73fb638 100644 --- 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 index 4c23477ba..da9cf9b0a 100644 --- 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 index 446973f7e..a625d2e53 100644 --- 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 index c81a758b5..85094d29e 100644 --- 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';