From 89fff339d53c8dd5847e2d76912cf7d4508718e5 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Sun, 23 Nov 2014 22:25:25 +0000
Subject: [PATCH] Add deploy dropdown button

---
 public/index.html |  8 +++++-
 public/style.css  | 68 +++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 67 insertions(+), 9 deletions(-)

diff --git a/public/index.html b/public/index.html
index acfcac3df..f10b69a44 100644
--- a/public/index.html
+++ b/public/index.html
@@ -32,7 +32,13 @@
 <div id="header">
     <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>
+        <span class="deploy-button-group button-group">
+            <a id="btn-deploy" class="action-deploy disabled" href="#"><i id="btn-icn-deploy" class="fa fa-download"></i> Deploy</a>
+            <a id="btn-deploy-options"  data-toggle="dropdown"  class="" href="#"><i class="fa fa-caret-down"></i></a>
+            <ul class="dropdown-menu" role="menu">
+             <li>Foo</li>
+            </ul>
+        </span>
         <a id="btn-sidemenu" class="button dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-bars"></i></a>
     </div>
 </div>
diff --git a/public/style.css b/public/style.css
index 02f1fe2c3..06e0146bc 100644
--- a/public/style.css
+++ b/public/style.css
@@ -96,25 +96,77 @@ span.logo img {
 #header .button:not(.disabled):hover {
     box-shadow: 0 0 2px #fff;
 }
+
+#btn-deploy {
+    background: #d24741;
+    color: #fff !important;
+}
+#btn-deploy + a {
+    background: #BA403B;
+    color: #fff;
+}
+#btn-deploy + a:hover {
+    background: #AD3C38;
+    color: #fff;
+}
+#btn-deploy + a:active {
+    background: #aa1f19;
+    color: #ccc;
+}
+
 #btn-deploy:not(.disabled):hover {
     background: #ca3f39;
 }
 
-#btn-deploy {
-    color: #fff !important;
-    background: #d24741;
-    box-shadow: 0 0 2px #fff;
-}
+
 #btn-deploy:not(.disabled):active {
     background: #aa1f19 !important;
-    color: #ccc !important;
-    box-shadow: 0 0 2px #999;
 }
+#btn-deploy:not(.disabled):active {
+    color: #ccc !important;
+}
+
 #btn-deploy.disabled {
     cursor: default;
-    background: #444 ;
+    background: #444;
     color: #999 !important;
 }
+#btn-deploy.disabled + a {
+    background: #666;
+    color: #ddd;
+}
+#btn-deploy.disabled + a:hover {
+    background: #555;
+    color: #ddd;
+}
+#btn-deploy.disabled + a:active {
+    background: #444;
+    color: #ddd;
+}
+
+
+.button-group {
+    display: inline-block;
+    border-radius: 3px;
+    margin: auto 10px;
+    vertical-align: middle;
+    background: #555;
+    overflow: hidden;
+    box-shadow: 0 0 2px #fff;
+    clear: both;
+}
+.button-group > a {
+    float: left;
+    line-height: 22px;
+    font-size: 14px;
+    text-decoration: none;
+    display: inline-block;
+    padding: 4px 8px;
+    color: #ccc;
+    margin: 0;
+}
+.button-group > a:last-child {
+}
 
 #btn-sidemenu {
     font-size: 20px !important;