fix(styling): add a better search filter magnify glass icon as placeh…

…older - 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)
ghiscoding · Apr 30, 2021 · 5464824 · 5464824
1 parent f6cf14c
commit 5464824
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 2 deletions.
diff --git a/packages/common/src/global-grid-options.ts b/packages/common/src/global-grid-options.ts
@@ -97,7 +97,7 @@ export const GlobalGridOptions: GridOption = {
   defaultFilter: Filters.input,
   defaultBackendServiceFilterTypingDebounce: 500,
   enableFilterTrimWhiteSpace: false, // do we want to trim white spaces on all Filters?
-  defaultFilterPlaceholder: '&#128269;',
+  defaultFilterPlaceholder: '🔎︎',
   defaultFilterRangeOperator: OperatorType.rangeInclusive,
   defaultColumnSortFieldId: 'id',
   defaultComponentEventPrefix: '',

diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -499,6 +499,7 @@ $checkbox-selector-opacity:                           0.15 !default;
 $checkbox-selector-opacity-hover:                     0.35 !default;
 
 /* Editors */
+$editor-placeholder-color:                            #c9c9c9 !default;
 $editor-input-border-radius:                          3px !default;
 $editor-input-disabled-color:                         #ececec !default;
 $editor-input-height:                                 24px !default;

diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss
@@ -573,6 +573,7 @@
   .placeholder {
     font-family: $multiselect-placeholder-font-family;
     font-size: $header-font-size;
+    color: $editor-placeholder-color !important;
   }
 }
 .ms-filter.search-filter {
@@ -741,6 +742,9 @@ input.search-filter {
     &.compound-input {
       border-radius: $compound-filter-border-radius !important;
       border-left: none;
+      &::placeholder {
+        color: $editor-placeholder-color;
+      }
     }
   }
   input.compound-slider {
@@ -769,6 +773,9 @@ input.search-filter {
 .search-filter .flatpickr {
   input.form-control {
     border-left: none;
+    &::placeholder {
+      color: $editor-placeholder-color;
+    }
   }
 }
 .search-filter.flatpickr,
@@ -1000,6 +1007,10 @@ input.slider-filter-input[type=range] {
 .search-filter {
   height: $header-input-height;
 
+  &::placeholder {
+    color: $editor-placeholder-color;
+  }
+
   .slider-value {
     padding: 0;
     height: 100%;

diff --git a/packages/vanilla-bundle/src/salesforce-global-grid-options.ts b/packages/vanilla-bundle/src/salesforce-global-grid-options.ts
@@ -14,7 +14,6 @@ export const SalesforceGlobalGridOptions = {
     resetFormButtonIconCssClass: 'mdi mdi-refresh mdi-16px mdi-flip-h mdi-v-align-text-top'
   },
   datasetIdPropertyName: 'Id',
-  defaultFilterPlaceholder: '',
   emptyDataWarning: {
     message: `<span class="mdi mdi-alert color-warning"></span> No data to display.`,
   },