Merge pull request #3515 from bonanitech/svg-icons

Make it easier to apply themes on SVG icons

packages/node_modules/@node-red/editor-client/src/images/grip-horizontal.svg

@@ -0,0 +1 @@
+<svg width="50" height="5" viewBox="0, 0, 50, 5" xmlns="http://www.w3.org/2000/svg"><path d="M0 1H50V4H0Z" fill="#CCC"/></svg>

packages/node_modules/@node-red/editor-client/src/images/grip.svg

@@ -0,0 +1 @@
+<svg width="5" height="50" viewBox="0, 0, 5, 50" xmlns="http://www.w3.org/2000/svg"><path d="M1 0H4V50H1Z" fill="#CCC"/></svg>

packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js

@@ -670,7 +670,7 @@ RED.tabs = (function() {
                 }
                 var link = $("<a/>",{href:"#"+tab.id, class:"red-ui-tab-label"}).appendTo(li);
                 if (tab.icon) {
-                    $('<img src="'+tab.icon+'" class="red-ui-tab-icon"/>').appendTo(link);
+                    $('<i>',{class:"red-ui-tab-icon", style:"mask-image: url("+tab.icon+"); -webkit-mask-image: url("+tab.icon+");"}).appendTo(link);
                 } else if (tab.iconClass) {
                     $('<i>',{class:"red-ui-tab-icon "+tab.iconClass}).appendTo(link);
                 }

packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js

@@ -669,7 +669,7 @@
                     if (opt.icon.indexOf("<") === 0) {
                         $(opt.icon).prependTo(op);
                     } else if (opt.icon.indexOf("/") !== -1) {
-                        $('<img>',{src:mapDeprecatedIcon(opt.icon),style:"margin-right: 4px; height: 18px;"}).prependTo(op);
+                        $('<i>',{class:"red-ui-typedInput-icon", style:"mask-image: url("+opt.icon+"); -webkit-mask-image: url("+opt.icon+");"}).prependTo(op);
                     } else {
                         $('<i>',{class:"red-ui-typedInput-icon "+opt.icon}).prependTo(op);
                     }

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%;
+        -webkit-mask-image: url(images/spin.svg);
-        background-size: contain
+        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;

packages/node_modules/@node-red/editor-client/src/sass/colors.scss

@@ -299,6 +299,14 @@ $group-default-label-color: #a4a4a4;
 $tourGuide-border: #c56c6c;
 $tourGuide-heading-color: #c56c6c;
 
+$grip-color: #ccc;
+
+$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;

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.png) 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;

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.png) 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.png) 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;
+        }
 }

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.png) 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; }

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');
+    mask-image: url(images/subflow_tab.svg);
-    background-repeat: no-repeat;
+    -webkit-mask-image: url(images/subflow_tab.svg);
-    background-size: contain;
+    mask-position: center;
-    filter: brightness(2.5);
+    -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 {

packages/node_modules/@node-red/editor-client/src/sass/tabs.scss

@@ -346,21 +346,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;

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;
+    -webkit-mask-image: url(images/spin.svg);
-    background-size: auto 20px;
+    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;
 }

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,