From ec5aaa5bfb4619221066dabf679b26f5a06a283a Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Fri, 22 Aug 2014 11:07:32 +0100
Subject: [PATCH] Update header buttons

---
 public/index.html     | 10 ++---
 public/red/main.js    |  2 +-
 public/red/ui/view.js |  4 +-
 public/style.css      | 94 ++++++++++++++++++++++++++++++++++---------
 4 files changed, 81 insertions(+), 29 deletions(-)
diff --git a/public/index.html b/public/index.html
index e1efae0c7..09442abf0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -30,12 +30,10 @@
 <head>
 <body spellcheck="false">
 <div id="header">
-    <a class="logo" href="#"><img src="node-red.png"> <span class="red">Node-RED</span> </a>
-    <div class="btn-group pull-right">
-        <a id="btn-sidemenu" class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-bars"></i> <i class="fa fa-caret-down"></i></a>
-    </div>
-    <div class="btn-group pull-right">
-        <a id="btn-deploy" class="btn action-deploy disabled" href="#"><i id="btn-icn-deploy" class="fa fa-download"></i> Deploy</a>
+    <span class="logo"><img src="node-red.png"> <span>Node-RED</span></span>
+    <div class="pull-right">
+        <a id="btn-deploy" class="button action-deploy disabled" href="#"><i id="btn-icn-deploy" class="fa fa-download"></i> Deploy</a>
+        <a id="btn-sidemenu" class="button dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-bars"></i></a>
     </div>
 </div>
 <div id="main-container" class="sidebar-closed">
diff --git a/public/red/main.js b/public/red/main.js
index 18215dfb4..82d0229c3 100644
--- a/public/red/main.js
+++ b/public/red/main.js
@@ -249,7 +249,7 @@ var RED = (function() {
                 ]},
                 null,
                 {id:"btn-keyboard-shortcuts",icon:"fa fa-keyboard-o",label:"Keyboard Shortcuts",onselect:showHelp},
-                {id:"btn-help",icon:"fa fa-question",label:"Help...", href:"http://node-red.github.io/docs"}
+                {id:"btn-help",icon:"fa fa-question",label:"Help...", href:"http://nodered.org/docs"}
             ]
         });
         
diff --git a/public/red/ui/view.js b/public/red/ui/view.js
index 7a9bc0eda..c3b508cd2 100644
--- a/public/red/ui/view.js
+++ b/public/red/ui/view.js
@@ -1379,9 +1379,9 @@ RED.view = (function() {
     function setDirty(d) {
         dirty = d;
         if (dirty) {
-            $("#btn-deploy").removeClass("disabled").addClass("btn-danger");
+            $("#btn-deploy").removeClass("disabled");
         } else {
-            $("#btn-deploy").addClass("disabled").removeClass("btn-danger");
+            $("#btn-deploy").addClass("disabled");
         }
     }
 
diff --git a/public/style.css b/public/style.css
index 04f7cf552..8c37abfb2 100644
--- a/public/style.css
+++ b/public/style.css
@@ -28,7 +28,7 @@ body {
     height: 40px;
     background: #000;
     box-sizing: border-box;
-    padding: 5px 20px;
+    padding: 5px 0px 5px 20px;
 }
 
 #dropTarget {
@@ -59,34 +59,66 @@ div.btn-group, a.btn {
    user-select: none;
 }
 
-a.logo {
+span.logo {
+    pointer-events: none;
     float: left;
     font-size: 30px;
     line-height: 30px;
     text-decoration: none;
-    color: #999;
+    color: #ccc;
 }
-a.logo span {
+span.logo span {
     vertical-align: middle;
     font-size: 16px !important;
 }
-a.logo:hover span.red {
-    color: rgb(197, 112, 112) !important;
-}
-a.logo:hover {
-    color: #bbb !important;
-}
-a.logo img {
+span.logo img {
     height: 18px;
 }
+#header .button {
+    line-height: 22px;
+    display: inline-block;
+    font-size: 14px;
+    padding: 4px 12px;
+    text-decoration: none;
+    border-radius: 3px;
+    color: #ccc;
+    margin: auto 10px;
+    vertical-align: middle;
+}
+#header .button:not(.disabled):hover {
+    box-shadow: 0 0 2px #fff;
+}
+#btn-deploy:not(.disabled):hover {
+    background: #ca3f39;
+}
 
-.navbar-fixed-top {
-    position: absolute !important;
-    z-index: 100 !important;
+#btn-deploy {
+    color: #fff !important;
+    background: #d24741;
+    box-shadow: 0 0 2px #fff;
 }
-.navbar-inner > .container-fluid {
-    padding-right: 10px;
+#btn-deploy:not(.disabled):active {
+    background: #aa1f19 !important;
+    color: #ccc !important;
+    box-shadow: 0 0 2px #999;
 }
+#btn-deploy.disabled {
+    cursor: default;
+    background: #444 ;
+    color: #999 !important;
+}
+
+#btn-sidemenu {
+    font-size: 20px !important;
+}
+#btn-sidemenu:active, #btn-sidemenu.active {
+    background: #333 ;
+}
+#header .button:focus {
+    outline: none;
+}
+
+
 
 #workspace {
    margin-left: 160px;
@@ -633,6 +665,32 @@ div.node-info {
 .hidden {
     display: none;
 }
+/*
+.dropdown-menu {
+    font-size: 14px;
+    background: #000;
+}
+.dropdown-menu .divider {
+    background: #666;
+    border-bottom: #666;
+}
+.dropdown-menu>li>a {
+    color: #ddd;
+}
+.dropdown-submenu>ul {
+    border: 1px solid white;
+    border-radius: 6px !important;
+}
+.dropdown-menu li.disabled  a {
+    color: #666;
+}
+.dropdown-menu li.disabled  a:hover {
+    background: none;
+}  
+*/
+.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus, .dropdown-submenu:hover>a, .dropdown-submenu:focus>a {
+    background: #999;
+}
 
 .dropdown-menu * .fa-check {
     display: none;
@@ -660,10 +718,6 @@ div.node-info {
      white-space: normal !important;
 }
 
-.navbar-fixed-top, .navbar-fixed-bottom {
-    z-index: 1000;
-}
-
 .popover-title { display: none; }
 
 .ui-autocomplete {
