From 9a6ee023b3e19bdc7d89a10f97f26aaf22d1cc05 Mon Sep 17 00:00:00 2001 From: Mauricio Bonani Date: Sun, 3 Apr 2022 17:47:07 -0400 Subject: [PATCH 1/6] Use SVG for separator grip --- .../editor-client/src/images/grip-horizontal.png | Bin 90 -> 0 bytes .../editor-client/src/images/grip-horizontal.svg | 1 + .../@node-red/editor-client/src/images/grip.png | Bin 192 -> 0 bytes .../@node-red/editor-client/src/images/grip.svg | 1 + .../@node-red/editor-client/src/sass/editor.scss | 2 +- .../@node-red/editor-client/src/sass/panels.scss | 4 ++-- .../@node-red/editor-client/src/sass/sidebar.scss | 2 +- 7 files changed, 6 insertions(+), 4 deletions(-) delete mode 100644 packages/node_modules/@node-red/editor-client/src/images/grip-horizontal.png create mode 100644 packages/node_modules/@node-red/editor-client/src/images/grip-horizontal.svg delete mode 100644 packages/node_modules/@node-red/editor-client/src/images/grip.png create mode 100644 packages/node_modules/@node-red/editor-client/src/images/grip.svg diff --git a/packages/node_modules/@node-red/editor-client/src/images/grip-horizontal.png b/packages/node_modules/@node-red/editor-client/src/images/grip-horizontal.png deleted file mode 100644 index 7bff7b4a25a00361baf2d1fe8793bbdf10b8c989..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 90 zcmeAS@N?(olHy`uVBq!ia0vp^MnKHU!3HGR9riB)Qi`4~jv*HQ$tePeZu$mnRr)2P$UpboFyt=akR{0Hxd+761SM diff --git a/packages/node_modules/@node-red/editor-client/src/images/grip-horizontal.svg b/packages/node_modules/@node-red/editor-client/src/images/grip-horizontal.svg new file mode 100644 index 000000000..c97271fa4 --- /dev/null +++ b/packages/node_modules/@node-red/editor-client/src/images/grip-horizontal.svg @@ -0,0 +1 @@ + diff --git a/packages/node_modules/@node-red/editor-client/src/images/grip.png b/packages/node_modules/@node-red/editor-client/src/images/grip.png deleted file mode 100644 index 76c2e0d17b065fbec0fff51de3ccf539d4ef4241..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 192 zcmeAS@N?(olHy`uVBq!ia0vp^tUzqU!3HF!2nc=vQfx`y?k)`fL2$v|<&%LToCO|{ z#S9GG!XV7ZFl&wkP>{XE)7O>#K0B`Eak-aXL9AAtAw{_}Q6yHVp$q!^D)N159qL?jYEw Yz#wsvC1sY6^fr(|p00i_>zopr08} diff --git a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss index 473571042..d26536102 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss @@ -149,7 +149,7 @@ bottom: 0px; width: 7px; left: -9px; - background: $primary-background url(images/grip.png) no-repeat 50% 50%; + background: $primary-background url(images/grip.svg) no-repeat 50% 50%; cursor: col-resize; border-left: 1px solid $primary-border-color; box-shadow: -1px 0 6px $shadow; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/panels.scss b/packages/node_modules/@node-red/editor-client/src/sass/panels.scss index 1a15d3c0d..38ef78321 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/panels.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/panels.scss @@ -40,7 +40,7 @@ height: 7px; box-sizing: border-box; cursor: ns-resize; - background: $primary-background url(images/grip-horizontal.png) no-repeat 50% 50%; + background: $primary-background url(images/grip-horizontal.svg) no-repeat 50% 50%; } @@ -70,6 +70,6 @@ width: 7px; display: inline-block; cursor: ew-resize; - background: $primary-background url(images/grip.png) no-repeat 50% 50%; + background: $primary-background url(images/grip.svg) no-repeat 50% 50%; } } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss index 391ae8585..bd2677ea0 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss @@ -47,7 +47,7 @@ bottom:10px; width: 7px; // z-index: 11; - background: $primary-background url(images/grip.png) no-repeat 50% 50%; + background: $primary-background url(images/grip.svg) no-repeat 50% 50%; cursor: col-resize; } From 5619c105aaa225350cc01ce9f1b0a0ea9ef83577 Mon Sep 17 00:00:00 2001 From: Mauricio Bonani Date: Sun, 3 Apr 2022 18:00:08 -0400 Subject: [PATCH 2/6] Make separator grip themeable --- .../editor-client/src/sass/colors.scss | 2 ++ .../editor-client/src/sass/editor.scss | 18 +++++++++- .../editor-client/src/sass/panels.scss | 36 +++++++++++++++++-- .../editor-client/src/sass/sidebar.scss | 18 +++++++++- 4 files changed, 70 insertions(+), 4 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss index 92231b735..20a3b1b23 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss @@ -301,6 +301,8 @@ $group-default-label-color: #a4a4a4; $tourGuide-border: #c56c6c; $tourGuide-heading-color: #c56c6c; +$grip-color: #ccc; + // Deprecated $text-color-green: $text-color-success; $info-text-code-color: $text-color-code; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss index d26536102..dee89035a 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss @@ -149,11 +149,27 @@ bottom: 0px; width: 7px; left: -9px; - background: $primary-background url(images/grip.svg) no-repeat 50% 50%; + background-color: $primary-background; cursor: col-resize; border-left: 1px solid $primary-border-color; box-shadow: -1px 0 6px $shadow; + &:before { + content: ''; + display: block; + width: 100%; + height: 100%; + -webkit-mask-image: url(images/grip.svg); + mask-image: url(images/grip.svg); + -webkit-mask-size: auto; + mask-size: auto; + -webkit-mask-position: 50% 50%; + mask-position: 50% 50%; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + background-color: $grip-color; + } + &.red-ui-tray-resize-maximised { background: $primary-background; cursor: default; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/panels.scss b/packages/node_modules/@node-red/editor-client/src/sass/panels.scss index 38ef78321..95d9210f4 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/panels.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/panels.scss @@ -40,7 +40,23 @@ height: 7px; box-sizing: border-box; cursor: ns-resize; - background: $primary-background url(images/grip-horizontal.svg) no-repeat 50% 50%; + background-color: $primary-background; + + &:before { + content: ''; + display: block; + width: 100%; + height: 100%; + -webkit-mask-image: url(images/grip-horizontal.svg); + mask-image: url(images/grip-horizontal.svg); + -webkit-mask-size: contain; + mask-size: contain; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + background-color: $grip-color; + } } @@ -70,6 +86,22 @@ width: 7px; display: inline-block; cursor: ew-resize; - background: $primary-background url(images/grip.svg) no-repeat 50% 50%; + background-color: $primary-background; } + + &:before { + content: ''; + display: block; + width: 100%; + height: 100%; + -webkit-mask-image: url(images/grip.svg); + mask-image: url(images/grip.svg); + -webkit-mask-size: contain; + mask-size: contain; + -webkit-mask-position: 50% 50%; + mask-position: 50% 50%; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + background-color: $grip-color; + } } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss index bd2677ea0..18b186bad 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss @@ -47,8 +47,24 @@ bottom:10px; width: 7px; // z-index: 11; - background: $primary-background url(images/grip.svg) no-repeat 50% 50%; + background-color: $primary-background; cursor: col-resize; + + &:before { + content: ''; + display: block; + width: 100%; + height: 100%; + -webkit-mask-image: url(images/grip.svg); + mask-image: url(images/grip.svg); + -webkit-mask-size: auto; + mask-size: auto; + -webkit-mask-position: 50% 50%; + mask-position: 50% 50%; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + background-color: $grip-color; + } } .red-ui-sidebar-closed > #red-ui-sidebar { display: none; } From 2f77596034bd7d23e7faad84b5737b8b41d7252f Mon Sep 17 00:00:00 2001 From: Mauricio Bonani Date: Sun, 3 Apr 2022 18:04:15 -0400 Subject: [PATCH 3/6] Make icons flow themeable --- .../@node-red/editor-client/src/sass/colors.scss | 2 ++ .../@node-red/editor-client/src/sass/tab-info.scss | 14 ++++++++++---- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss index 20a3b1b23..e8e4eda4d 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss @@ -303,6 +303,8 @@ $tourGuide-heading-color: #c56c6c; $grip-color: #ccc; +$icons-flow-color: #808080; + // Deprecated $text-color-green: $text-color-success; $info-text-code-color: $text-color-code; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss index 72422f350..9c63f2119 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss @@ -530,10 +530,16 @@ div.red-ui-info-table { } .red-ui-icons-flow { - background-image: url('images/subflow_tab.svg'); - background-repeat: no-repeat; - background-size: contain; - filter: brightness(2.5); + mask-image: url(images/subflow_tab.svg); + -webkit-mask-image: url(images/subflow_tab.svg); + mask-position: center; + -webkit-mask-position: center; + mask-size: contain; + -webkit-mask-size: contain; + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + background-color: $icons-flow-color; + // filter: brightness(2.5); } .red-ui-info-toolbar { From 96d15b75050c5a97482b597e2ece1c614cca5dff Mon Sep 17 00:00:00 2001 From: Mauricio Bonani Date: Sun, 3 Apr 2022 18:06:16 -0400 Subject: [PATCH 4/6] Make spinner themeable --- .../@node-red/editor-client/src/sass/base.scss | 13 ++++++++++--- .../@node-red/editor-client/src/sass/colors.scss | 2 ++ .../editor-client/src/sass/ui/common/treeList.scss | 11 +++++++++-- 3 files changed, 21 insertions(+), 5 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/sass/base.scss b/packages/node_modules/@node-red/editor-client/src/sass/base.scss index b4d538794..c22a1d606 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/base.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/base.scss @@ -142,9 +142,16 @@ body { line-height: 14px; vertical-align: text-top; margin-top: 0px; - background: url(images/spin.svg) no-repeat 50% 50%; - background-size: contain - } + -webkit-mask-image: url(images/spin.svg); + mask-image: url(images/spin.svg); + -webkit-mask-size: contain; + mask-size: contain; + -webkit-mask-position: 50% 50%; + mask-position: 50% 50%; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + background-color: $spinner-color; + } .red-ui-font-code { font-family: $monospace-font; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss index e8e4eda4d..e414476b0 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss @@ -305,6 +305,8 @@ $grip-color: #ccc; $icons-flow-color: #808080; +$spinner-color: #999; + // Deprecated $text-color-green: $text-color-success; $info-text-code-color: $text-color-code; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss index beba6b047..5f1d27037 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss @@ -135,6 +135,13 @@ } .red-ui-treeList-spinner { height: 32px; - background: url(images/spin.svg) 50% 50% no-repeat; - background-size: auto 20px; + -webkit-mask-image: url(images/spin.svg); + mask-image: url(images/spin.svg); + -webkit-mask-size: auto 20px; + mask-size: auto 20px; + -webkit-mask-position: 50% 50%; + mask-position: 50% 50%; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + background-color: $spinner-color; } From e97f4c405489e70e260c97a19a370930bd96aa36 Mon Sep 17 00:00:00 2001 From: Mauricio Bonani Date: Sun, 3 Apr 2022 18:09:08 -0400 Subject: [PATCH 5/6] Make tab icon themeable --- .../editor-client/src/js/ui/common/tabs.js | 2 +- .../editor-client/src/sass/colors.scss | 2 ++ .../editor-client/src/sass/tabs.scss | 27 ++++++++++++------- 3 files changed, 20 insertions(+), 11 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js index 0541c79e0..d471d206a 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js @@ -670,7 +670,7 @@ RED.tabs = (function() { } var link = $("",{href:"#"+tab.id, class:"red-ui-tab-label"}).appendTo(li); if (tab.icon) { - $('').appendTo(link); + $('',{class:"red-ui-tab-icon", style:"mask-image: url("+tab.icon+"); -webkit-mask-image: url("+tab.icon+");"}).appendTo(link); } else if (tab.iconClass) { $('',{class:"red-ui-tab-icon "+tab.iconClass}).appendTo(link); } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss index e414476b0..138e38255 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss @@ -307,6 +307,8 @@ $icons-flow-color: #808080; $spinner-color: #999; +$tab-icon-color: #dedede; + // Deprecated $text-color-green: $text-color-success; $info-text-code-color: $text-color-code; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss b/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss index b05a3575f..b9e0f5add 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss @@ -342,21 +342,28 @@ } -img.red-ui-tab-icon { - margin-left: -8px; - margin-right: 3px; - margin-top: -2px; - opacity: 0.1; - width: 20px; - height: 20px; - vertical-align: middle; -} i.red-ui-tab-icon { opacity: 0.7; width: 18px; height: 20px; + &:not(.fa) { + display: inline-block; + margin-left: -8px; + margin-right: 3px; + margin-top: -2px; + opacity: 1; + width: 20px; + height: 20px; + vertical-align: middle; + -webkit-mask-size: contain; + mask-size: contain; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + background-color: $tab-icon-color; + } } - .red-ui-tabs-badges { position: absolute; top:0px; From c9fa5c7284a3fc0ccbb48bd73e1f3e28f136a87f Mon Sep 17 00:00:00 2001 From: Mauricio Bonani Date: Sun, 3 Apr 2022 18:11:24 -0400 Subject: [PATCH 6/6] Make typedInput themeable --- .../editor-client/src/js/ui/common/typedInput.js | 2 +- .../editor-client/src/sass/ui/common/typedInput.scss | 11 +++++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js index 2d628769e..ad983afc9 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js @@ -637,7 +637,7 @@ if (opt.icon.indexOf("<") === 0) { $(opt.icon).prependTo(op); } else if (opt.icon.indexOf("/") !== -1) { - $('',{src:mapDeprecatedIcon(opt.icon),style:"margin-right: 4px; height: 18px;"}).prependTo(op); + $('',{class:"red-ui-typedInput-icon", style:"mask-image: url("+opt.icon+"); -webkit-mask-image: url("+opt.icon+");"}).prependTo(op); } else { $('',{class:"red-ui-typedInput-icon "+opt.icon}).prependTo(op); } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss index a084fcff3..f9ffdf7b2 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss @@ -104,6 +104,17 @@ } .red-ui-typedInput-icon { margin-right: 6px; + &:not(.fa) { + -webkit-mask-size: cover; + mask-size: cover; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + background-color: $primary-text-color; + height: 14px; + width: 12px; + } } } button.red-ui-typedInput-type-select,