diff --git a/packages/node_modules/@node-red/editor-client/src/js/red.js b/packages/node_modules/@node-red/editor-client/src/js/red.js index 0a9775ca2..1014dcbe8 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/red.js +++ b/packages/node_modules/@node-red/editor-client/src/js/red.js @@ -532,7 +532,7 @@ var RED = (function() { RED.comms.connect(); $("#main-container").show(); - $(".header-toolbar").show(); + $(".red-ui-header-toolbar").show(); loadNodeList(); } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js b/packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js index 711d51444..e35852da2 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js @@ -62,7 +62,7 @@ RED.deploy = (function() { ''+ ''+ ''+ - '').prependTo(".header-toolbar"); + '').prependTo(".red-ui-header-toolbar"); RED.menu.init({id:"btn-deploy-options", options: [ {id:"deploymenu-item-full",toggle:"deploy-type",icon:"red/images/deploy-full.png",label:RED._("deploy.full"),sublabel:RED._("deploy.fullDesc"),selected: true, onselect:function(s) { if(s){changeDeploymentType("full")}}}, @@ -90,7 +90,7 @@ RED.deploy = (function() { ''+ ''+ ''+ - '').prependTo(".header-toolbar"); + '').prependTo(".red-ui-header-toolbar"); } $('#btn-deploy').on("click", function(event) { @@ -271,7 +271,7 @@ RED.deploy = (function() { var deployWasEnabled = !$("#btn-deploy").hasClass("disabled"); $("#btn-deploy").addClass("disabled"); deployInflight = true; - $("#header-shade").show(); + $("#red-ui-header-shade").show(); $("#editor-shade").show(); $("#red-ui-palette-shade").show(); $("#red-ui-sidebar-shade").show(); @@ -306,7 +306,7 @@ RED.deploy = (function() { setTimeout(function() { $(".deploy-button-content").css('opacity',1); $(".deploy-button-spinner").hide(); - $("#header-shade").hide(); + $("#red-ui-header-shade").hide(); $("#editor-shade").hide(); $("#red-ui-palette-shade").hide(); $("#red-ui-sidebar-shade").hide(); @@ -422,7 +422,7 @@ RED.deploy = (function() { } deployInflight = true; - $("#header-shade").show(); + $("#red-ui-header-shade").show(); $("#editor-shade").show(); $("#red-ui-palette-shade").show(); $("#red-ui-sidebar-shade").show(); @@ -492,7 +492,7 @@ RED.deploy = (function() { setTimeout(function() { $(".deploy-button-content").css('opacity',1); $(".deploy-button-spinner").hide(); - $("#header-shade").hide(); + $("#red-ui-header-shade").hide(); $("#editor-shade").hide(); $("#red-ui-palette-shade").hide(); $("#red-ui-sidebar-shade").hide(); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js b/packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js index 533ef513f..f2d04aa02 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js @@ -267,7 +267,7 @@ RED.notifications = (function() { ''+ ''+ ''+ - '').prependTo(".header-toolbar").hide(); + '').prependTo(".red-ui-header-toolbar").hide(); $('#btn-notifications').on("click", function() { showPersistent(); }) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js index 227bd8f3b..ea4a85117 100755 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js @@ -2226,13 +2226,13 @@ RED.projects = (function() { resizable: false, open: function(e) { $(this).parent().find(".ui-dialog-titlebar-close").hide(); - // $("#header-shade").show(); + // $("#red-ui-header-shade").show(); // $("#editor-shade").show(); // $("#red-ui-palette-shade").show(); // $("#red-ui-sidebar-shade").show(); }, close: function(e) { - // $("#header-shade").hide(); + // $("#red-ui-header-shade").hide(); // $("#editor-shade").hide(); // $("#red-ui-palette-shade").hide(); // $("#red-ui-sidebar-shade").hide(); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/search.js b/packages/node_modules/@node-red/editor-client/src/js/ui/search.js index 6bda95234..de957b3f6 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/search.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/search.js @@ -254,7 +254,7 @@ RED.search = (function() { } if (!visible) { RED.keyboard.add("*","escape",function(){hide()}); - $("#header-shade").show(); + $("#red-ui-header-shade").show(); $("#editor-shade").show(); $("#red-ui-palette-shade").show(); $("#red-ui-sidebar-shade").show(); @@ -275,7 +275,7 @@ RED.search = (function() { if (visible) { RED.keyboard.remove("escape"); visible = false; - $("#header-shade").hide(); + $("#red-ui-header-shade").hide(); $("#editor-shade").hide(); $("#red-ui-palette-shade").hide(); $("#red-ui-sidebar-shade").hide(); @@ -299,7 +299,7 @@ RED.search = (function() { - $("#header-shade").on('mousedown',hide); + $("#red-ui-header-shade").on('mousedown',hide); $("#editor-shade").on('mousedown',hide); $("#red-ui-palette-shade").on('mousedown',hide); $("#red-ui-sidebar-shade").on('mousedown',hide); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tray.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tray.js index 267929e06..68151e192 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tray.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tray.js @@ -115,7 +115,7 @@ RED.tray = (function() { } function finishBuild() { - $("#header-shade").show(); + $("#red-ui-header-shade").show(); $("#editor-shade").show(); $("#red-ui-palette-shade").show(); $(".red-ui-sidebar-shade").show(); @@ -267,7 +267,7 @@ RED.tray = (function() { done(); } if (stack.length === 0) { - $("#header-shade").hide(); + $("#red-ui-header-shade").hide(); $("#editor-shade").hide(); $("#red-ui-palette-shade").hide(); $(".red-ui-sidebar-shade").hide(); diff --git a/packages/node_modules/@node-red/editor-client/src/js/user.js b/packages/node_modules/@node-red/editor-client/src/js/user.js index 2ea4f0dc0..ff91e17c5 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/user.js +++ b/packages/node_modules/@node-red/editor-client/src/js/user.js @@ -214,7 +214,7 @@ RED.user = (function() { if (!RED.settings.editorTheme || !RED.settings.editorTheme.hasOwnProperty("userMenu")) { var userMenu = $('
  • ') - .prependTo(".header-toolbar"); + .prependTo(".red-ui-header-toolbar"); if (RED.settings.user.image) { $('').css({ backgroundImage: "url("+RED.settings.user.image+")", diff --git a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss index 34fe17609..48ff5a941 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss @@ -154,7 +154,7 @@ background: $background-color; color: $workspace-button-color; } -#red-ui-palette-shade, #editor-shade, #header-shade, #red-ui-sidebar-shade { +#red-ui-palette-shade, #editor-shade, #red-ui-header-shade, #red-ui-sidebar-shade { @include shade; z-index: 2; } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/header.scss b/packages/node_modules/@node-red/editor-client/src/sass/header.scss index e7d2170b0..f3fa9fadb 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/header.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/header.scss @@ -28,7 +28,12 @@ $headerMenuBackground: #121212; $headerMenuItemHover: #323232; $headerMenuItemDivider: #464646; -#header { + +.button { + @include disable-selection; +} + +#red-ui-header { position: absolute; top: 0; left: 0; @@ -39,254 +44,243 @@ $headerMenuItemDivider: #464646; padding: 0px 0px 0px 20px; color: #C7C7C7; font-size: 14px; -} -span.logo { - float: left; - margin-top: 5px; - font-size: 30px; - line-height: 30px; - text-decoration: none; + span.red-ui-header-logo { + float: left; + margin-top: 5px; + font-size: 30px; + line-height: 30px; + text-decoration: none; - span { - vertical-align: middle; - font-size: 16px !important; - } - img { - height: 18px; - } - - a { - color: inherit; - &:hover { - text-decoration: none; + span { + vertical-align: middle; + font-size: 16px !important; } + img { + height: 18px; + } + + a { + color: inherit; + &:hover { + text-decoration: none; + } + } + } -} - -.header-toolbar { - padding: 0; - margin: 0; - list-style: none; - float: right; - - > li { - display: inline-block; + .red-ui-header-toolbar { padding: 0; margin: 0; - position: relative; + list-style: none; + float: right; - } -} + > li { + display: inline-block; + padding: 0; + margin: 0; + position: relative; -.button { - @include disable-selection; -} - -#header .button { - min-width: 20px; - text-align: center; - line-height: 40px; - display: inline-block; - font-size: 20px; - padding: 0px 12px; - text-decoration: none; - color: #C7C7C7; - margin: auto 5px; - vertical-align: middle; - border-left: 2px solid #000; - border-right: 2px solid #000; - - &:hover { - border-color: $headerMenuItemHover; - } -} - -#header .button-group { - display: inline-block; - margin: auto 15px; - vertical-align: middle; - clear: both; -} -#header .button-group > a { - display: inline-block; - position: relative; - float: left; - line-height: 22px; - font-size: 14px; - text-decoration: none; - padding: 4px 8px; - margin: 0; -} - -.deploy-button { - background: $deployButton; - color: #eee !important; - - &:hover { - background: $deployButtonHover; + } } - &:active { - background: $deployButtonActive; - color: #ccc !important; + .button { + min-width: 20px; + text-align: center; + line-height: 40px; + display: inline-block; + font-size: 20px; + padding: 0px 12px; + text-decoration: none; + color: #C7C7C7; + margin: auto 5px; + vertical-align: middle; + border-left: 2px solid #000; + border-right: 2px solid #000; + + &:hover { + border-color: $headerMenuItemHover; + } + &:active, &.active { + background: $activeButton; + } + &:focus { + outline: none; + } } -} -.deploy-button-spinner { - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - text-align: center; - - img { - opacity: 0.8; - height: 100%; + .button-group { + display: inline-block; + margin: auto 15px; + vertical-align: middle; + clear: both; + & > a { + display: inline-block; + position: relative; + float: left; + line-height: 22px; + font-size: 14px; + text-decoration: none; + padding: 4px 8px; + margin: 0; + } } -} -#btn-deploy { + .deploy-button { + background: $deployButton; + color: #eee !important; - padding: 4px 12px; + &:hover { + background: $deployButtonHover; + } - &.disabled { - cursor: default; - background: $deployDisabledButton; - color: #999 !important; + &:active { + background: $deployButtonActive; + color: #ccc !important; + } + } + + .deploy-button-spinner { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + text-align: center; + + img { + opacity: 0.8; + height: 100%; + } + } + + #btn-deploy { + padding: 4px 12px; + &.disabled { + cursor: default; + background: $deployDisabledButton; + color: #999 !important; + + .deploy-button-content>img { + opacity: 0.3; + } + &+ #btn-deploy-options { + background: $deployDisabledButton; + color: #ddd; + } + &+ #btn-deploy-options:hover { + background: $deployDisabledButtonHover; + } + &+ #btn-deploy-options:active { + background: $deployDisabledButton; + } + } .deploy-button-content>img { - opacity: 0.3; - } - - &+ #btn-deploy-options { - background: $deployDisabledButton; - color: #ddd; - } - &+ #btn-deploy-options:hover { - background: $deployDisabledButtonHover; - } - &+ #btn-deploy-options:active { - background: $deployDisabledButton; + margin-right: 8px; } } - .deploy-button-content>img { - margin-right: 8px; + .deploy-button-group.open { + #btn-deploy-options { + background: $activeButton !important; + } } -} -.deploy-button-group.open { - #btn-deploy-options { - background: $activeButton !important; - } -} - - -#header .button { - &:active, &.active { + li.open .button { background: $activeButton; + border-color: $activeButton; } - &:focus { - outline: none; + + + ul.dropdown-menu { + background: $headerMenuBackground; + border: 1px solid rgba(0,0,0,0.2); + width: 250px !important; + margin-top: 0; + } + + ul.dropdown-menu li a { + color: #C7C7C7; + padding: 3px 40px; + } + + ul.dropdown-menu li a img { + margin-right: 10px; + padding: 4px; + border: 3px solid rgba(0,0,0,0); + } + + ul.dropdown-menu li a.active img { + border: 3px solid #777677; + } + + ul.dropdown-menu li a span.menu-label-container { + width: 180px; + vertical-align: top; + display: inline-block; + text-indent: 0px; + } + ul.dropdown-menu li a span.menu-label { + font-size: 14px; + display: inline-block; + text-indent: 0px; + } + ul.dropdown-menu li a span.menu-sublabel { + color: #aeaeae; + font-size: 13px; + display: inline-block; + text-indent: 0px; + } + + ul.dropdown-menu > li:hover > a, + ul.dropdown-menu > li:focus > a { + background: $headerMenuItemHover !important; + } + + ul.dropdown-menu li.divider { + background: $headerMenuItemDivider; + border-bottom-color: $headerMenuItemHover; + } + ul.dropdown-menu li.disabled a { + color: #666; + } + + ul.dropdown-menu > li.disabled:hover > a, + ul.dropdown-menu > li.disabled:focus > a { + background: none !important; + } + + /* Deploy menu customisations */ + ul#btn-deploy-options-submenu { + width: 300px !important; + } + ul#btn-deploy-options-submenu li a span.menu-label { + font-size: 16px; + display: inline-block; + text-indent: 0px; + } + ul#btn-deploy-options-submenu li a { + padding: 10px 30px; + color: #fff; + } + ul#btn-deploy-options-submenu li a > i.fa { + display: none !important; + } + + /* User menu customisations */ + ul#btn-usermenu-submenu li a#btn-username > .menu-label { + font-size: 16px; + color: #fff; + } + + #btn-usermenu .user-profile { + background-position: center center; + background-repeat: no-repeat; + background-size: contain; + display: inline-block; + width: 40px; + height: 35px; + vertical-align: middle; } } - -#header li.open .button { - background: $activeButton; - border-color: $activeButton; -} - - -#header ul.dropdown-menu { - background: $headerMenuBackground; - border: 1px solid rgba(0,0,0,0.2); - width: 250px !important; - margin-top: 0; -} - -#header ul.dropdown-menu li a { - color: #C7C7C7; - padding: 3px 40px; -} - -#header ul.dropdown-menu li a img { - margin-right: 10px; - padding: 4px; - border: 3px solid rgba(0,0,0,0); -} - -#header ul.dropdown-menu li a.active img { - border: 3px solid #777677; -} - -#header ul.dropdown-menu li a span.menu-label-container { - width: 180px; - vertical-align: top; - display: inline-block; - text-indent: 0px; -} -#header ul.dropdown-menu li a span.menu-label { - font-size: 14px; - display: inline-block; - text-indent: 0px; -} -#header ul.dropdown-menu li a span.menu-sublabel { - color: #aeaeae; - font-size: 13px; - display: inline-block; - text-indent: 0px; -} - -#header ul.dropdown-menu > li:hover > a, -#header ul.dropdown-menu > li:focus > a { - background: $headerMenuItemHover !important; -} - -#header ul.dropdown-menu li.divider { - background: $headerMenuItemDivider; - border-bottom-color: $headerMenuItemHover; -} -#header ul.dropdown-menu li.disabled a { - color: #666; -} - -#header ul.dropdown-menu > li.disabled:hover > a, -#header ul.dropdown-menu > li.disabled:focus > a { - background: none !important; -} - -/* Deploy menu customisations */ -#header ul#btn-deploy-options-submenu { - width: 300px !important; -} -#header ul#btn-deploy-options-submenu li a span.menu-label { - font-size: 16px; - display: inline-block; - text-indent: 0px; -} -#header ul#btn-deploy-options-submenu li a { - padding: 10px 30px; - color: #fff; -} -#header ul#btn-deploy-options-submenu li a > i.fa { - display: none !important; -} - -/* User menu customisations */ -#header ul#btn-usermenu-submenu li a#btn-username > .menu-label { - font-size: 16px; - color: #fff; -} - -#btn-usermenu .user-profile { - background-position: center center; - background-repeat: no-repeat; - background-size: contain; - display: inline-block; - width: 40px; - height: 35px; - vertical-align: middle; -} diff --git a/packages/node_modules/@node-red/editor-client/templates/index.mst b/packages/node_modules/@node-red/editor-client/templates/index.mst index e5f89ee27..10f4ada76 100644 --- a/packages/node_modules/@node-red/editor-client/templates/index.mst +++ b/packages/node_modules/@node-red/editor-client/templates/index.mst @@ -35,12 +35,12 @@ -