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 f27eaa0d4..0dfb72ffd 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 @@ -674,11 +674,15 @@ RED.tabs = (function() { }); } + $('').appendTo(li); + var badges = $('').appendTo(li); if (options.onselect) { $('').appendTo(badges); $('').appendTo(badges); } + + if (options.onadd) { options.onadd(tab); } 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 53358ac98..fc9c07406 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 @@ -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 {