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,254 +44,243 @@ $headerMenuItemDivider: #464646;
     padding: 0px 0px 0px 20px;
     color: #C7C7C7;
     font-size: 14px;
-}
 
-span.logo {
+    span.red-ui-header-logo {
-    float: left;
+        float: left;
-    margin-top: 5px;
+        margin-top: 5px;
-    font-size: 30px;
+        font-size: 30px;
-    line-height: 30px;
+        line-height: 30px;
-    text-decoration: none;
+        text-decoration: none;
 
-    span {
+        span {
-        vertical-align: middle;
+            vertical-align: middle;
-        font-size: 16px !important;
+            font-size: 16px !important;
-    }
-    img {
-        height: 18px;
-    }
-
-    a {
-        color: inherit;
-        &:hover {
-            text-decoration: none;
         }
+        img {
+            height: 18px;
+        }
+
+        a {
+            color: inherit;
+            &:hover {
+                text-decoration: none;
+            }
+        }
+
     }
 
-}
+    .red-ui-header-toolbar {
-
-.header-toolbar {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    float: right;
-
-    > li {
-        display: inline-block;
         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 {
+    .button {
-        background: $deployButtonActive;
+        min-width: 20px;
-        color: #ccc !important;
+        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 {
+    .button-group {
-    position: absolute;
+        display: inline-block;
-    left: 0;
+        margin: auto 15px;
-    top: 0;
+        vertical-align: middle;
-    right: 0;
+        clear: both;
-    bottom: 0;
+        & > a {
-    text-align: center;
+            display: inline-block;
-
+            position: relative;
-    img {
+            float: left;
-        opacity: 0.8;
+            line-height: 22px;
-        height: 100%;
+            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 {
+        &:active {
-        cursor: default;
+            background: $deployButtonActive;
-        background: $deployDisabledButton;
+            color: #ccc !important;
-        color: #999 !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;
+            margin-right: 8px;
-        }
-
-        &+ #btn-deploy-options {
-            background: $deployDisabledButton;
-            color: #ddd;
-        }
-        &+ #btn-deploy-options:hover {
-            background: $deployDisabledButtonHover;
-        }
-        &+ #btn-deploy-options:active {
-            background: $deployDisabledButton;
         }
     }
 
-    .deploy-button-content>img {
+    .deploy-button-group.open {
-        margin-right: 8px;
+        #btn-deploy-options {
+            background: $activeButton !important;
+        }
     }
-}
 
-.deploy-button-group.open {
+    li.open .button {
-    #btn-deploy-options {
-        background: $activeButton !important;
-    }
-}
-
-
-#header .button {
-    &:active, &.active {
         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;
-}

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">