Namespace all header css

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

packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js

@@ -62,7 +62,7 @@ RED.deploy = (function() {
                 '</span>'+
               '</a>'+
               '<a id="btn-deploy-options" data-toggle="dropdown" class="deploy-button" href="#"><i class="fa fa-caret-down"></i></a>'+
-              '</span></li>').prependTo(".header-toolbar");
+              '</span></li>').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() {
                  '<img src="red/images/spin.svg"/>'+
                 '</span>'+
               '</a>'+
-              '</span></li>').prependTo(".header-toolbar");
+              '</span></li>').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();

packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js

@@ -267,7 +267,7 @@ RED.notifications = (function() {
                 '<a id="btn-notifications" class="button" href="#">'+
                 '<i class="fa fa-warning"></i>'+
                 '</a>'+
-                '</li>').prependTo(".header-toolbar").hide();
+                '</li>').prependTo(".red-ui-header-toolbar").hide();
             $('#btn-notifications').on("click", function() {
                 showPersistent();
             })

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();

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

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();

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 = $('<li><a id="btn-usermenu" class="button hide" data-toggle="dropdown" href="#"></a></li>')
-                    .prependTo(".header-toolbar");
+                    .prependTo(".red-ui-header-toolbar");
                 if (RED.settings.user.image) {
                     $('<span class="user-profile"></span>').css({
                         backgroundImage: "url("+RED.settings.user.image+")",

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

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,9 +44,8 @@ $headerMenuItemDivider: #464646;
     padding: 0px 0px 0px 20px;
     color: #C7C7C7;
     font-size: 14px;
-}
 
-span.logo {
+    span.red-ui-header-logo {
         float: left;
         margin-top: 5px;
         font-size: 30px;
@@ -63,9 +67,9 @@ span.logo {
             }
         }
 
-}
+    }
 
-.header-toolbar {
+    .red-ui-header-toolbar {
         padding: 0;
         margin: 0;
         list-style: none;
@@ -78,13 +82,9 @@ span.logo {
             position: relative;
 
         }
-}
+    }
 
-.button {
+    .button {
-    @include disable-selection;
-}
-
-#header .button {
         min-width: 20px;
         text-align: center;
         line-height: 40px;
@@ -101,15 +101,20 @@ span.logo {
         &:hover {
             border-color: $headerMenuItemHover;
         }
-}
+        &:active, &.active {
+            background: $activeButton;
+        }
+        &:focus {
+            outline: none;
+        }
+    }
 
-#header .button-group {
+    .button-group {
         display: inline-block;
         margin: auto 15px;
         vertical-align: middle;
         clear: both;
-}
+        & > a {
-#header .button-group > a {
             display: inline-block;
             position: relative;
             float: left;
@@ -118,9 +123,10 @@ span.logo {
             text-decoration: none;
             padding: 4px 8px;
             margin: 0;
-}
+        }
+    }
 
-.deploy-button {
+    .deploy-button {
         background: $deployButton;
         color: #eee !important;
 
@@ -132,9 +138,9 @@ span.logo {
             background: $deployButtonActive;
             color: #ccc !important;
         }
-}
+    }
 
-.deploy-button-spinner {
+    .deploy-button-spinner {
         position: absolute;
         left: 0;
         top: 0;
@@ -146,12 +152,10 @@ span.logo {
             opacity: 0.8;
             height: 100%;
         }
-}
+    }
-
-#btn-deploy {
 
+    #btn-deploy {
         padding: 4px 12px;
-
         &.disabled {
             cursor: default;
             background: $deployDisabledButton;
@@ -160,7 +164,6 @@ span.logo {
             .deploy-button-content>img {
                 opacity: 0.3;
             }
-
             &+ #btn-deploy-options {
                 background: $deployDisabledButton;
                 color: #ddd;
@@ -176,112 +179,102 @@ span.logo {
         .deploy-button-content>img {
             margin-right: 8px;
         }
-}
+    }
 
-.deploy-button-group.open {
+    .deploy-button-group.open {
         #btn-deploy-options {
             background: $activeButton !important;
         }
-}
-
-
-#header .button {
-    &:active, &.active {
-        background: $activeButton;
     }
-    &:focus {
-        outline: none;
-    }
-}
 
-#header li.open .button {
+    li.open .button {
         background: $activeButton;
         border-color: $activeButton;
-}
+    }
 
 
-#header ul.dropdown-menu {
+    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 {
+    ul.dropdown-menu li a {
         color: #C7C7C7;
         padding: 3px 40px;
-}
+    }
 
-#header ul.dropdown-menu li a img {
+    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 {
+    ul.dropdown-menu li a.active img {
         border: 3px solid #777677;
-}
+    }
 
-#header ul.dropdown-menu li a span.menu-label-container {
+    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 {
+    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 {
+    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,
+    ul.dropdown-menu > li:hover > a,
-#header ul.dropdown-menu > li:focus > a {
+    ul.dropdown-menu > li:focus > a {
         background: $headerMenuItemHover !important;
-}
+    }
 
-#header ul.dropdown-menu li.divider {
+    ul.dropdown-menu li.divider {
         background: $headerMenuItemDivider;
         border-bottom-color: $headerMenuItemHover;
-}
+    }
-#header ul.dropdown-menu li.disabled a {
+    ul.dropdown-menu li.disabled a {
         color: #666;
-}
+    }
 
-#header ul.dropdown-menu > li.disabled:hover > a,
+    ul.dropdown-menu > li.disabled:hover > a,
-#header ul.dropdown-menu > li.disabled:focus > a {
+    ul.dropdown-menu > li.disabled:focus > a {
         background: none !important;
-}
+    }
 
-/* Deploy menu customisations */
+    /* Deploy menu customisations */
-#header ul#btn-deploy-options-submenu {
+    ul#btn-deploy-options-submenu {
         width: 300px !important;
-}
+    }
-#header ul#btn-deploy-options-submenu li a span.menu-label {
+    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 {
+    ul#btn-deploy-options-submenu li a {
         padding: 10px 30px;
         color: #fff;
-}
+    }
-#header ul#btn-deploy-options-submenu li a > i.fa {
+    ul#btn-deploy-options-submenu li a > i.fa {
         display: none !important;
-}
+    }
 
-/* User menu customisations */
+    /* User menu customisations */
-#header ul#btn-usermenu-submenu li a#btn-username > .menu-label {
+    ul#btn-usermenu-submenu li a#btn-username > .menu-label {
         font-size: 16px;
         color: #fff;
-}
+    }
 
-#btn-usermenu .user-profile {
+    #btn-usermenu .user-profile {
         background-position: center center;
         background-repeat: no-repeat;
         background-size: contain;
@@ -289,4 +282,5 @@ span.logo {
         width: 40px;
         height: 35px;
         vertical-align: middle;
+    }
 }

packages/node_modules/@node-red/editor-client/templates/index.mst

@@ -35,12 +35,12 @@
 
 </head>
 <body spellcheck="false">
-<div id="header">
+<div id="red-ui-header">
-    <span class="logo">{{#header.url}}<a href="{{.}}">{{/header.url}}{{#header.image}}<img src="{{.}}">{{/header.image}} <span>{{ header.title }}</span>{{#header.url}}</a>{{/header.url}}</span>
+    <span class="red-ui-header-logo">{{#header.url}}<a href="{{.}}">{{/header.url}}{{#header.image}}<img src="{{.}}">{{/header.image}} <span>{{ header.title }}</span>{{#header.url}}</a>{{/header.url}}</span>
-    <ul class="header-toolbar hide">
+    <ul class="red-ui-header-toolbar hide">
         <li><a id="btn-sidemenu" class="button" data-toggle="dropdown" href="#"><i class="fa fa-bars"></i></a></li>
     </ul>
-    <div id="header-shade" class="hide"></div>
+    <div id="red-ui-header-shade" class="hide"></div>
 </div>
 <div id="main-container" class="sidebar-closed hide">
     <div id="workspace">