From 6c2f095a026cd06bafccf363f6b8226752429700 Mon Sep 17 00:00:00 2001 From: Ghislain Beaulac Date: Tue, 11 Aug 2020 15:16:41 -0400 Subject: [PATCH 1/3] feat(styling): find way to add colors to SVGs used by the lib --- ...grid-tree-data-hierarchical.component.scss | 33 ++++++++++++++++--- .../styles/sass-utilities.scss | 26 +++++++++++++++ 2 files changed, 54 insertions(+), 5 deletions(-) diff --git a/src/app/examples/grid-tree-data-hierarchical.component.scss b/src/app/examples/grid-tree-data-hierarchical.component.scss index 72725d4f8..7b2dd049c 100644 --- a/src/app/examples/grid-tree-data-hierarchical.component.scss +++ b/src/app/examples/grid-tree-data-hierarchical.component.scss @@ -3,11 +3,13 @@ $icon-width-mdi-plus: 14px; $icon-width-mdi-arrow-collapse: 14px; $icon-width-mdi-arrow-expand: 14px; $icon-width-mdi-close-thick: 12px; -$icon-color-mdi-file-pdf-outline: #f14668; -$icon-color-mdi-file-music-outline: #3298dc; -$icon-color-mdi-file-excel-outline: #1E9F75; -$icon-color-mdi-folder: orange; -$icon-color-mdi-folder-open: orange; + +/* You can change the SASS color via the associated variable, BUT it's better to use the filtercolor @mixing shown down below */ +// $icon-color-mdi-file-pdf-outline: #f14668; +// $icon-color-mdi-file-music-outline: #3298dc; +// $icon-color-mdi-file-excel-outline: #1E9F75; +// $icon-color-mdi-folder: orange; +// $icon-color-mdi-folder-open: #ffa500; /* make sure to add the @import the SlickGrid Theme AFTER the variables changes */ @import '../modules/angular-slickgrid/styles/slickgrid-theme-salesforce.scss'; @@ -20,3 +22,24 @@ $icon-color-mdi-folder-open: orange; height: 1.5rem; width: 1.5rem; } + +.icon.mdi-file-pdf-outline { + /** 1. use `filter` color */ + // filter: invert(62%) sepia(93%) saturate(5654%) hue-rotate(325deg) brightness(100%) contrast(90%); + + /** 2. or use the SASS @mixin that will produce the `filter` color */ + @include filtercolor(#f14668, 0.9); +} + +.icon.mdi-folder, .icon.mdi-folder-open { + @include filtercolor(#ffa500, 0.9); +} +.icon.mdi-file-music-outline { + @include filtercolor(#3298dc, 0.9); +} +.icon.mdi-file-excel-outline { + @include filtercolor(#1E9F75, 0.9); +} +.icon.mdi-file-document-outline { + @include filtercolor(#686868, 0.9); +} diff --git a/src/app/modules/angular-slickgrid/styles/sass-utilities.scss b/src/app/modules/angular-slickgrid/styles/sass-utilities.scss index 67a923636..71c85e470 100644 --- a/src/app/modules/angular-slickgrid/styles/sass-utilities.scss +++ b/src/app/modules/angular-slickgrid/styles/sass-utilities.scss @@ -6,3 +6,29 @@ $string: '%23' + $string; @return $string; } + +@mixin filtercolor($color: #000, $opacity: 1) { + $r: red($color) / 255; + $g: green($color) / 255; + $b: blue($color) / 255; + $a: $opacity; + + // grayscale fallback if SVG from data url is not supported + $lightness: lightness($color); + filter: saturate(0%) brightness(0%) invert($lightness) opacity($opacity); + + // color filter + $svg-filter-id: "filtercolor"; + filter: url('data:image/svg+xml;utf8,\ + \ + \ + \ + \ + \ + ##{$svg-filter-id}'); +} From b133aa47ba1715e44bc902362a4753e441726c08 Mon Sep 17 00:00:00 2001 From: Ghislain B Date: Tue, 11 Aug 2020 20:49:06 -0400 Subject: [PATCH 2/3] Update grid-tree-data-hierarchical.component.scss --- src/app/examples/grid-tree-data-hierarchical.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/examples/grid-tree-data-hierarchical.component.scss b/src/app/examples/grid-tree-data-hierarchical.component.scss index 7b2dd049c..59a0f5d1e 100644 --- a/src/app/examples/grid-tree-data-hierarchical.component.scss +++ b/src/app/examples/grid-tree-data-hierarchical.component.scss @@ -27,7 +27,7 @@ $icon-width-mdi-close-thick: 12px; /** 1. use `filter` color */ // filter: invert(62%) sepia(93%) saturate(5654%) hue-rotate(325deg) brightness(100%) contrast(90%); - /** 2. or use the SASS @mixin that will produce the `filter` color */ + /** 2. or use the SASS @mixin (from Angular-Slickgrid "sass-utilities.scss") that will produce the `filter` color */ @include filtercolor(#f14668, 0.9); } From 459150666d2ddc3150d4be09e836e18dcf62685e Mon Sep 17 00:00:00 2001 From: Ghislain Beaulac Date: Wed, 12 Aug 2020 08:40:54 -0400 Subject: [PATCH 3/3] refactor(styling): rename SASS mixin to recolor (original name) --- .../grid-tree-data-hierarchical.component.scss | 12 ++++++------ .../angular-slickgrid/styles/sass-utilities.scss | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/app/examples/grid-tree-data-hierarchical.component.scss b/src/app/examples/grid-tree-data-hierarchical.component.scss index 7b2dd049c..684cfe515 100644 --- a/src/app/examples/grid-tree-data-hierarchical.component.scss +++ b/src/app/examples/grid-tree-data-hierarchical.component.scss @@ -4,7 +4,7 @@ $icon-width-mdi-arrow-collapse: 14px; $icon-width-mdi-arrow-expand: 14px; $icon-width-mdi-close-thick: 12px; -/* You can change the SASS color via the associated variable, BUT it's better to use the filtercolor @mixing shown down below */ +/* You can change the SASS color via the associated variable, BUT it's better to use the recolor @mixing shown down below */ // $icon-color-mdi-file-pdf-outline: #f14668; // $icon-color-mdi-file-music-outline: #3298dc; // $icon-color-mdi-file-excel-outline: #1E9F75; @@ -28,18 +28,18 @@ $icon-width-mdi-close-thick: 12px; // filter: invert(62%) sepia(93%) saturate(5654%) hue-rotate(325deg) brightness(100%) contrast(90%); /** 2. or use the SASS @mixin that will produce the `filter` color */ - @include filtercolor(#f14668, 0.9); + @include recolor(#f14668, 0.9); } .icon.mdi-folder, .icon.mdi-folder-open { - @include filtercolor(#ffa500, 0.9); + @include recolor(#ffa500, 0.9); } .icon.mdi-file-music-outline { - @include filtercolor(#3298dc, 0.9); + @include recolor(#3298dc, 0.9); } .icon.mdi-file-excel-outline { - @include filtercolor(#1E9F75, 0.9); + @include recolor(#1E9F75, 0.9); } .icon.mdi-file-document-outline { - @include filtercolor(#686868, 0.9); + @include recolor(#686868, 0.9); } diff --git a/src/app/modules/angular-slickgrid/styles/sass-utilities.scss b/src/app/modules/angular-slickgrid/styles/sass-utilities.scss index 71c85e470..1a09924a0 100644 --- a/src/app/modules/angular-slickgrid/styles/sass-utilities.scss +++ b/src/app/modules/angular-slickgrid/styles/sass-utilities.scss @@ -7,7 +7,7 @@ @return $string; } -@mixin filtercolor($color: #000, $opacity: 1) { +@mixin recolor($color: #000, $opacity: 1) { $r: red($color) / 255; $g: green($color) / 255; $b: blue($color) / 255; @@ -18,7 +18,7 @@ filter: saturate(0%) brightness(0%) invert($lightness) opacity($opacity); // color filter - $svg-filter-id: "filtercolor"; + $svg-filter-id: "recolor"; filter: url('data:image/svg+xml;utf8,\ \ \