From dc87bebae76278923fa925724cc852932ca902db Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Fri, 30 Apr 2021 12:09:07 -0400 Subject: [PATCH] fix(styling): add a better search filter magnify glass icon as placeholder - by using directly the unicode character we can make it monochrome instead of having a completely different styling between browsers (chrome was gray while firefox was previously colored, now they both look exactly the same monochrome icon) --- .../angular-slickgrid/global-grid-options.ts | 2 +- .../angular-slickgrid/styles/_variables.scss | 1 + .../styles/slick-plugins.scss | 99 ++++++++++--------- 3 files changed, 57 insertions(+), 45 deletions(-) diff --git a/src/app/modules/angular-slickgrid/global-grid-options.ts b/src/app/modules/angular-slickgrid/global-grid-options.ts index 8e8e64774..02d6cd062 100644 --- a/src/app/modules/angular-slickgrid/global-grid-options.ts +++ b/src/app/modules/angular-slickgrid/global-grid-options.ts @@ -78,7 +78,7 @@ export const GlobalGridOptions: Partial = { defaultFilter: Filters.input, defaultBackendServiceFilterTypingDebounce: 500, enableFilterTrimWhiteSpace: false, // do we want to trim white spaces on all Filters? - defaultFilterPlaceholder: '🔍', + defaultFilterPlaceholder: '🔎︎', defaultFilterRangeOperator: OperatorType.rangeInclusive, editable: false, enableAutoResize: true, diff --git a/src/app/modules/angular-slickgrid/styles/_variables.scss b/src/app/modules/angular-slickgrid/styles/_variables.scss index 9dc27ff19..668b45e64 100644 --- a/src/app/modules/angular-slickgrid/styles/_variables.scss +++ b/src/app/modules/angular-slickgrid/styles/_variables.scss @@ -489,6 +489,7 @@ $checkbox-selector-opacity: 0.15 !default; $checkbox-selector-opacity-hover: 0.35 !default; /* Editors */ +$editor-placeholder-color: #c9c9c9 !default; $editor-input-height: 24px !default; $editor-focus-border-color: lighten($primary-color, 10%) !default; $editor-focus-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px rgba(lighten($primary-color, 3%), .3) !default; diff --git a/src/app/modules/angular-slickgrid/styles/slick-plugins.scss b/src/app/modules/angular-slickgrid/styles/slick-plugins.scss index 446e25617..ef2b7abf1 100644 --- a/src/app/modules/angular-slickgrid/styles/slick-plugins.scss +++ b/src/app/modules/angular-slickgrid/styles/slick-plugins.scss @@ -60,7 +60,8 @@ .slick-cell-menu-item { cursor: pointer; - display: block; + display: flex; + align-items: center; border: $cell-menu-item-border; border-radius: $cell-menu-item-border-radius; font-size: $cell-menu-item-font-size; @@ -69,7 +70,6 @@ margin: 0; width: $cell-menu-item-width; height: $cell-menu-item-height; - vertical-align: middle; &:hover { border: $cell-menu-item-hover-border; @@ -280,33 +280,33 @@ } .slick-header-button { - /** - * This makes all "float:right" elements after it that spill over to the next line - * display way below the lower boundary of the column thus hiding them. - */ - float: right; - vertical-align: top; - margin: 1px; - margin-bottom: 100px; - height: 15px; - width: 15px; - background-repeat: no-repeat; - background-position: center center; - cursor: pointer; -} - -.slick-header-button-hidden { - width: 0; - margin-right: -8px; - - -webkit-transition: 0.2s width; - -ms-transition: 0.2s width; - transition: 0.2s width; -} - -.slick-header-column:hover > .slick-header-button { - width: 15px; -} + /** + * This makes all "float:right" elements after it that spill over to the next line + * display way below the lower boundary of the column thus hiding them. + */ + float: right; + vertical-align: top; + margin: 1px; + margin-bottom: 100px; + height: 15px; + width: 15px; + background-repeat: no-repeat; + background-position: center center; + cursor: pointer; + } + + .slick-header-button-hidden { + width: 0; + margin-right: -8px; + + -webkit-transition: 0.2s width; + -ms-transition: 0.2s width; + transition: 0.2s width; + } + + .slick-header-column:hover > .slick-header-button { + width: 15px; + } // ---------------------------------------------- // Header Menu Plugin - Excel-like header @@ -537,6 +537,7 @@ border-radius: $checkbox-selector-icon-border-radius; } } + .slick-group { .slick-cell-checkboxsel { text-align: left; @@ -576,6 +577,7 @@ .placeholder { font-family: $multiselect-placeholder-font-family; font-size: $header-font-size; + color: $editor-placeholder-color !important; } } .ms-filter.search-filter { @@ -742,12 +744,29 @@ input.search-filter { &.compound-input { border-radius: $compound-filter-border-radius !important; border-left: none; + &::placeholder { + color: $editor-placeholder-color; + } } } input.compound-slider { border-left: none !important; } } +.slickgrid-container { + .slick-headerrow { + .slick-headerrow-columns { + .slick-headerrow-column { + .input-group-prepend + .flatpickr { + input.compound-input { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } + } + } + } +} // ---------------------------------------------- // Date Picker Filter @@ -756,6 +775,9 @@ input.search-filter { .search-filter .flatpickr { input.form-control { border-left: none; + &::placeholder { + color: $editor-placeholder-color; + } } } .search-filter.flatpickr, @@ -790,21 +812,6 @@ input.flatpickr.form-control { background-color: $flatpickr-bgcolor; } } -.slickgrid-container { - .slick-headerrow { - .slick-headerrow-columns { - .slick-headerrow-column { - .input-group-prepend + .flatpickr { - input { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - } - } - } - } -} - // ---------------------------------------------- // Draggable Grouping Plugin @@ -999,6 +1006,10 @@ input.slider-filter-input[type=range] { .search-filter { height: $header-input-height; + &::placeholder { + color: $editor-placeholder-color; + } + .slider-value { padding: 0; height: 100%;