Skip to content

Commit

Permalink
feat(style): tweak Editors styling and add Sort icon hint on hover
Browse files Browse the repository at this point in the history 
- 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
  • Loading branch information
@ghiscoding-SE
ghiscoding-SE committed Apr 27, 2020
1 parent c23e5d7 commit aba4182
Show file tree
Hide file tree
Showing 8 changed files with 63 additions and 44 deletions.
5 changes: 3 additions & 2 deletions packages/common/src/styles/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 */
Expand Down
2 changes: 1 addition & 1 deletion packages/common/src/styles/se-slickgrid-theme-material.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
13 changes: 13 additions & 0 deletions packages/common/src/styles/slick-bootstrap.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions packages/common/src/styles/slick-default-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
74 changes: 39 additions & 35 deletions packages/common/src/styles/slick-editors.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/common/src/styles/slickgrid-theme-bootstrap.scss
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
4 changes: 2 additions & 2 deletions packages/common/src/styles/slickgrid-theme-material.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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';
Expand Down
3 changes: 2 additions & 1 deletion packages/common/src/styles/slickgrid-theme-salesforce.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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';
Expand Down

0 comments on commit aba4182

Please sign in to comment.