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 · dc87beb · dc87beb
1 parent 49437d8
commit dc87beb
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 45 deletions.
diff --git 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<GridOption> = {
   defaultFilter: Filters.input,
   defaultBackendServiceFilterTypingDebounce: 500,
   enableFilterTrimWhiteSpace: false, // do we want to trim white spaces on all Filters?
-  defaultFilterPlaceholder: '&#128269;',
+  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
@@ -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
@@ -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%;