frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Add a slight fade to tab labels that overflow

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);
if (options.onselect) {
$('<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);
}
if (options.onadd) {
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 {
opacity: 0.2;
}
.red-ui-tabs-fade {
background-image: linear-gradient(to right, transparent, $tab-background-active);
}
}
&.selected {
&:not(.active) {
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;
.red-ui-tabs-badge-selected {
@ -291,6 +302,15 @@
.red-ui-tabs.red-ui-tabs-add.red-ui-tabs-search .red-ui-tabs-add {
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 {