frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add a slight fade to tab labels that overflow

Browse Source
This commit is contained in:
Nick O'Leary 2021-07-08 12:23:15 +01:00
parent 4624079be7
commit e7efa76e6d
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -674,11 +674,15 @@ RED.tabs = (function() {
}); });
} }
$('<span class="red-ui-tabs-fade"></span>').appendTo(li);
var badges = $('<span class="red-ui-tabs-badges"></span>').appendTo(li); var badges = $('<span class="red-ui-tabs-badges"></span>').appendTo(li);
if (options.onselect) { if (options.onselect) {
$('<i class="red-ui-tabs-badge-changed fa fa-circle"></i>').appendTo(badges); $('<i class="red-ui-tabs-badge-changed fa fa-circle"></i>').appendTo(badges);
$('<i class="red-ui-tabs-badge-selected fa fa-check-circle"></i>').appendTo(badges); $('<i class="red-ui-tabs-badge-selected fa fa-check-circle"></i>').appendTo(badges);
} }
if (options.onadd) { if (options.onadd) {
options.onadd(tab); options.onadd(tab);
} }

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

@ -102,10 +102,21 @@
img.red-ui-tab-icon { img.red-ui-tab-icon {
opacity: 0.2; opacity: 0.2;
} }
.red-ui-tabs-fade {
background-image: linear-gradient(to right, transparent, $tab-background-active);
}
} }
&.selected { &.selected {
&:not(.active) { &:not(.active) {
background: $tab-background-selected; background: $tab-background-selected;
.red-ui-tabs-fade {
background-image: linear-gradient(to right, transparent, $tab-background-selected);
}
.red-ui-tabs-badge-selected {
background: $tab-background-selected;
}
} }
font-weight: bold; font-weight: bold;
.red-ui-tabs-badge-selected { .red-ui-tabs-badge-selected {
@ -291,6 +302,15 @@
.red-ui-tabs.red-ui-tabs-add.red-ui-tabs-search .red-ui-tabs-add { .red-ui-tabs.red-ui-tabs-add.red-ui-tabs-search .red-ui-tabs-add {
right: 38px; right: 38px;
} }
.red-ui-tabs-fade {
position: absolute;
bottom: 0;
top: 0;
right: 0;
width: 15px;
background-image: linear-gradient(to right, transparent, $tab-background-inactive);
pointer-events: none;
}
img.red-ui-tab-icon { img.red-ui-tab-icon {