Deploy menu style

public/index.html

@@ -34,8 +34,8 @@
     <div class="pull-right">
         <ul class="header-toolbar">
             <li><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> <span>Deploy</span></a>
-                    <!-- <a id="btn-deploy-options"  data-toggle="dropdown"  class="" href="#"><i class="fa fa-caret-down"></i></a> -->
+                    <a id="btn-deploy" class="action-deploy disabled" href="#"><img id="btn-icn-deploy" src="images/deploy-full-o.png"> <span>Deploy</span></a>
+                    <a id="btn-deploy-options"  data-toggle="dropdown"  class="" href="#"><i class="fa fa-caret-down"></i></a>
                 </span></li>
             <li><a id="btn-sidemenu" class="button" data-toggle="dropdown" href="#"><i class="fa fa-bars"></i></a></li>
         <ul>

public/red/main.js

@@ -16,9 +16,9 @@
 var RED = (function() {
 
     var deploymentTypes = {
-        "full":"Deploy",
-        "nodes":"Deploy changed nodes",
-        "flows":"Deploy changed flows"
+        "full":{label:"Deploy",img:"images/deploy-full-o.png"},
+        "nodes":{label:"Deploy modified nodes",img:"images/deploy-nodes-o.png"},
+        "flows":{label:"Deploy modified flows",img:"images/deploy-flows-o.png"}
     }
     var deploymentType = "full";
     
@@ -294,7 +294,8 @@ var RED = (function() {
     
     function changeDeploymentType(type) {
         deploymentType = type;
-        $("#btn-deploy span").text(deploymentTypes[type]);
+        $("#btn-deploy img").attr("src",deploymentTypes[type].img);
+        //$("#btn-deploy span").text(deploymentTypes[type].label);
     }
     
     $(function() {
@@ -330,14 +331,13 @@ var RED = (function() {
             ]
         });
         
-        //RED.menu.init({id:"btn-deploy-options",
-        //    options: [
-        //        {id:"btn-deploy-select",label:"Select deployment type"},
-        //        {id:"btn-deploy-full",icon:null,label:"Full deploy",tip:"Deploys all nodes",onselect:function() { changeDeploymentType("full")}},
-        //        {id:"btn-deploy-node",icon:null,label:"Deploy changed nodes",tip:"Deploys all nodes that have been changed",onselect:function() { changeDeploymentType("nodes")}},
-        //        {id:"btn-deploy-flow",icon:null,label:"Deploy changed flows",tip:"Deploys all nodes in flows that contain changes",onselect:function() { changeDeploymentType("flows")}}
-        //    ]
-        //});
+        RED.menu.init({id:"btn-deploy-options",
+            options: [
+                {id:"btn-deploy-full",toggle:"deploy-type",icon:"images/deploy-full.png",label:"Full",sublabel:"Deploys everything in the workspace",onselect:function(s) { if(s){changeDeploymentType("full")}}},
+                {id:"btn-deploy-flow",toggle:"deploy-type",icon:"images/deploy-flows.png",label:"Modified Flows",sublabel:"Only deploys flows that contain changed nodes", onselect:function(s) {if(s){changeDeploymentType("flows")}}},
+                {id:"btn-deploy-node",toggle:"deploy-type",icon:"images/deploy-nodes.png",label:"Modified Nodes",sublabel:"Only deploys nodes that have changed",onselect:function(s) { if(s){changeDeploymentType("nodes")}}}
+            ]
+        });
 
         RED.keyboard.add(/* ? */ 191,{shift:true},function(){showHelp();d3.event.preventDefault();});
         loadSettings();

public/red/ui/menu.js

@@ -45,11 +45,27 @@ RED.menu = (function() {
             item = $('<li class="divider"></li>');
         } else {
             item = $('<li></li>');
-            var link = $('<a '+(opt.id?'id="'+opt.id+'" ':'')+'tabindex="-1" href="#">'+
-                (opt.toggle?'<i class="fa fa-check pull-right"></i>':'')+
-                (opt.icon!==undefined?'<i class="'+(opt.icon?opt.icon:'" style="display: inline-block;"')+'"></i> ':"")+
-                '<span class="menu-label">'+opt.label+'</span>'+
-                '</a>').appendTo(item);
+            
+            var linkContent = '<a '+(opt.id?'id="'+opt.id+'" ':'')+'tabindex="-1" href="#">'+
+                (opt.toggle?'<i class="fa fa-check pull-right"></i>':'');
+            if (opt.icon !== undefined) {
+                if (/\.png/.test(opt.icon)) {
+                    linkContent += '<img src="'+opt.icon+'"/> ';
+                } else {
+                    linkContent += '<i class="'+(opt.icon?opt.icon:'" style="display: inline-block;"')+'"></i> ';
+                }
+            }
+            
+            if (opt.sublabel) {
+                linkContent += '<span class="menu-label-container"><span class="menu-label">'+opt.label+'</span>'+
+                               '<span class="menu-sublabel">'+opt.sublabel+'</span></span>'
+            } else {
+                linkContent += '<span class="menu-label">'+opt.label+'</span>'
+            }
+            
+            linkContent += '</a>';
+                
+            var link = $(linkContent).appendTo(item);
 
             menuItems[opt.id] = opt;
 
@@ -59,7 +75,22 @@ RED.menu = (function() {
                         return;
                     }
                     if (opt.toggle) {
-                        setSelected(opt.id, !isSelected(opt.id));
+                        var selected = isSelected(opt.id);
+                        if (typeof opt.toggle === "string") {
+                            if (!selected) {
+                                for (var m in menuItems) {
+                                    if (menuItems.hasOwnProperty(m)) {
+                                        var mi = menuItems[m];
+                                        if (mi.id != opt.id && opt.toggle == mi.toggle) {
+                                            setSelected(mi.id,false);
+                                        }
+                                    }
+                                }
+                                setSelected(opt.id,true);
+                            }
+                        } else {
+                            setSelected(opt.id, !selected);
+                        }
                     } else {
                         opt.onselect.call(opt);
                     }

public/style.css

@@ -1,5 +1,5 @@
 /**
- * Copyright 2013, 2014 IBM Corp.
+ * Copyright 2013, 2015 IBM Corp.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -113,29 +113,29 @@ span.logo img {
 }
 
 #btn-deploy {
-    background: #d24741;
+    background: #8C101C; /*#d24741;*/
     color: #fff !important;
 }
 #btn-deploy + a {
-    background: #BA403B;
+    background: #8C101C; /*#BA403B;*/
     color: #fff;
 }
 #btn-deploy + a:hover {
-    background: #AD3C38;
+    background: #6E0A1E; /*#AD3C38;*/
     color: #fff;
 }
 #btn-deploy + a:active {
-    background: #aa1f19;
+    background: #4C0A17; /*#aa1f19;*/
     color: #ccc;
 }
 
 #btn-deploy:not(.disabled):hover {
-    background: #ca3f39;
+    background: #6E0A1E; /*#ca3f39;*/
 }
 
 
 #btn-deploy:not(.disabled):active {
-    background: #aa1f19 !important;
+    background: #4C0A17 /*#aa1f19*/ !important;
 }
 #btn-deploy:not(.disabled):active {
     color: #ccc !important;
@@ -146,8 +146,9 @@ span.logo img {
     background: #444;
     color: #999 !important;
 }
+
 #btn-deploy.disabled + a {
-    background: #666;
+    background: #444;
     color: #ddd;
 }
 #btn-deploy.disabled + a:hover {
@@ -159,6 +160,12 @@ span.logo img {
     color: #ddd;
 }
 
+#btn-deploy img {
+    margin-right: 8px;
+}
+#btn-deploy.disabled img {
+    opacity: 0.3;
+}
 
 .button-group {
     display: inline-block;
@@ -192,6 +199,11 @@ span.logo img {
 #header .button:focus {
     outline: none;
 }
+li.open #btn-sidemenu {
+    background: #666 ;
+}
+
+
 
 #workspace-toolbar .button {
     line-height: 18px;
@@ -806,29 +818,7 @@ 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;
 }
@@ -846,7 +836,9 @@ div.node-info {
 }
 /** Fix for unreachable dropdown menu **/
 .dropdown-menu  {
+    border-radius: 0;
     width: 200px !important;
+    margin-left: 0px !important;
 }
 .dropdown-menu > li > a > i {
     width: 10px;
@@ -1137,3 +1129,121 @@ i.spinner {
     display: none;
 }
 
+/*
+ul#btn-deploy-options-submenu {
+    background: black;
+    border-radius: 0;
+    width: 300px !important;
+}
+
+ul#btn-deploy-options-submenu li a {
+    padding: 10px 30px;
+    color: white;
+}
+
+ul#btn-deploy-options-submenu li a img {
+    margin-right: 10px;
+    padding: 4px;
+    border: 3px solid rgba(0,0,0,0);
+}
+
+ul#btn-deploy-options-submenu li a.active img {
+    border: 3px solid #777677;
+}
+
+ul#btn-deploy-options-submenu li a span.menu-label-container {
+    width: 180px;
+    vertical-align: top;
+    display: inline-block;
+    text-indent: 0px;
+}
+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 span.menu-sublabel {
+    color: #aeaeae;
+    font-size: 13px;
+    display: inline-block;
+    text-indent: 0px;
+}
+
+ul#btn-deploy-options-submenu li a:hover {
+    background: #323232;
+}
+*/
+
+#header ul.dropdown-menu {
+    background: black;
+    width: 300px !important;
+}
+
+#header ul.dropdown-menu li a {
+    color: white;
+    padding: 8px 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: 13px;
+    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 a:hover {
+    background: #323232;
+}
+
+#header ul.dropdown-menu li.divider {
+    background: #5A5A5A;
+    border-bottom-color: #464646;
+}
+
+/* Deploy menu customisations */
+#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: white;
+}
+.dropdown-submenu>a:after {
+    display: none;
+}
+.dropdown-submenu>a:before {
+display: block;
+float: left;
+width: 0;
+height: 0;
+margin-top: 5px;
+margin-left: -35px;
+border-color: transparent;
+border-right-color: #ccc;
+border-style: solid;
+border-width: 5px 5px 5px 0;
+content: " ";
+}