frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Merge pull request #3515 from bonanitech/svg-icons

Browse Source 
Make it easier to apply themes on SVG icons
This commit is contained in:
Nick O'Leary 2022-04-26 16:22:47 +01:00 committed by GitHub
commit f8d0ed7ca6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 137 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
packages/node_modules/@node-red/editor-client/src/images/grip-horizontal.png vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 90 B

1
packages/node_modules/@node-red/editor-client/src/images/grip-horizontal.svg vendored Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 127 B

BIN
packages/node_modules/@node-red/editor-client/src/images/grip.png vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 192 B

1
packages/node_modules/@node-red/editor-client/src/images/grip.svg vendored Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 127 B

2
packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js vendored
View File

@ -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);
}

2
packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js vendored
View File

@ -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);
}

11
packages/node_modules/@node-red/editor-client/src/sass/base.scss vendored
View File

@ -142,8 +142,15 @@ 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 {

8
packages/node_modules/@node-red/editor-client/src/sass/colors.scss vendored
View File

@ -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;

18
packages/node_modules/@node-red/editor-client/src/sass/editor.scss vendored
View File

@ -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;

36
packages/node_modules/@node-red/editor-client/src/sass/panels.scss vendored
View File

@ -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;
}
}

18
packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss vendored
View File

@ -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; }

14
packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss vendored
View File

@ -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 {

27
packages/node_modules/@node-red/editor-client/src/sass/tabs.scss vendored
View File

@ -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;

11
packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss vendored
View File

@ -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;
}

11
packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss vendored
View File

@ -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,