From 687a66344e6eaeb7caa77ab70c9da8107f50ba08 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Wed, 14 Jan 2015 22:40:45 +0000 Subject: [PATCH] Deploy menu style --- public/images/deploy-flows-o.png | Bin 0 -> 291 bytes public/images/deploy-flows.png | Bin 0 -> 386 bytes public/images/deploy-full-o.png | Bin 0 -> 289 bytes public/images/deploy-full.png | Bin 0 -> 368 bytes public/images/deploy-nodes-o.png | Bin 0 -> 290 bytes public/images/deploy-nodes.png | Bin 0 -> 392 bytes public/index.html | 4 +- public/red/main.js | 24 ++--- public/red/ui/menu.js | 43 ++++++-- public/style.css | 172 +++++++++++++++++++++++++------ 10 files changed, 192 insertions(+), 51 deletions(-) create mode 100644 public/images/deploy-flows-o.png create mode 100644 public/images/deploy-flows.png create mode 100644 public/images/deploy-full-o.png create mode 100644 public/images/deploy-full.png create mode 100644 public/images/deploy-nodes-o.png create mode 100644 public/images/deploy-nodes.png diff --git a/public/images/deploy-flows-o.png b/public/images/deploy-flows-o.png new file mode 100644 index 0000000000000000000000000000000000000000..a2f5373e29de704398495908cf4a21c4533a5e43 GIT binary patch literal 291 zcmeAS@N?(olHy`uVBq!ia0vp^(m*W4!3HE(-CjBuNU;<$;(s`s@UU=GytkL`s zJRdQ{xXzk8Np8j6?W$APc{+Nz@_Tw-3cmDUYNX?Ns|UO_4bmS}FBq>s+aNaMbKRLm zPv6)#o@keeK4sYUxc`LMGNFk}F1)zk$g+niKWxSy;YY7evz--m-4l}D={NoDUui}I i~}U&Kt=yOT^vIq zT9e-hPWXA=prIjCL07)?zzSwJ*#jWpdrLqdina2*CIO8)du1hu{ zY{J=u=y=C%bzPSlnl{@u`{qg>eyeLO5%#lfVk+BBMTG?#=O5UnYaPBld%NVe<B`4(drwy*5IihMWD>Olq+VTo zDl3QR%QUaP17hAzBJAAl;oJL|behr`rGb dCH{whW4mnK>1WYv84GkNgQu&X%Q~loCIGayY7_tf literal 0 HcmV?d00001 diff --git a/public/images/deploy-full.png b/public/images/deploy-full.png new file mode 100644 index 0000000000000000000000000000000000000000..775374d170c035aafadbe7b7a36785eba3ff1440 GIT binary patch literal 368 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdzmSQK*5Dp-y;YjHK@;M7UB8!3Q zuY)k7lg8`{prB-lYeY$Kep*R+Vo@qXd3m{BW?pu2a$-TMUVc&f>~}U&Kt*poT^vIq zT9e-hPWXA=prIjCL07)?zzSwJ*#jWpdrLqdina2*CIO8)du1hu{ zY{J=u=y=C%bzPSlnl{@u`{qg>eyeLO5%#lfVk+BBMTG?#=O5UnYaPBld%NVe<B`4(drwy*5IihMW~}U&3=E8{o-U3d z5v|E@1SkAFZ_vCjiD|YQi1Vy}|gq zt|slqx5vuNKycWk%KE{x`SLus>uXXjBtA{qkosKlG|wj458v*~x2eY8H|#LpY~)hN zX}H1ADCk+kB!2&nOBa+C4u5$4zrO8f{Cy(>AW$jdKCJ8R7o%d`5K-_QXwhN&{RVsf z{GP4Y>fYiwqjOV=%cgfP$3U}{2ALP9`F;_@3sn`9RF zsCFC50L^y}ZSG`cjuYqE!Mq|$a$?Z50|y$~fqrAV!x-Y*@??rCvmDc6K8aEWhRbZG V_bU2-*aJh2!PC{xWt~$(699FAm0SP- literal 0 HcmV?d00001 diff --git a/public/index.html b/public/index.html index fe08b753e..3be169db5 100644 --- a/public/index.html +++ b/public/index.html @@ -34,8 +34,8 @@
  • - Deploy - + Deploy +
      • diff --git a/public/red/main.js b/public/red/main.js index aa60f1f41..782f5a56a 100644 --- a/public/red/main.js +++ b/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(); diff --git a/public/red/ui/menu.js b/public/red/ui/menu.js index d826a2265..ed864b958 100644 --- a/public/red/ui/menu.js +++ b/public/red/ui/menu.js @@ -45,11 +45,27 @@ RED.menu = (function() { item = $('
    • '); } else { item = $('
    • '); - var link = $(''+ - (opt.toggle?'':'')+ - (opt.icon!==undefined?' ':"")+ - ''+opt.label+''+ - '').appendTo(item); + + var linkContent = ''+ + (opt.toggle?'':''); + if (opt.icon !== undefined) { + if (/\.png/.test(opt.icon)) { + linkContent += ' '; + } else { + linkContent += ' '; + } + } + + if (opt.sublabel) { + linkContent += ''+opt.label+''+ + ''+opt.sublabel+'' + } else { + linkContent += ''+opt.label+'' + } + + linkContent += ''; + + 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); } diff --git a/public/style.css b/public/style.css index a0aa6c8d5..c78ed0ea3 100644 --- a/public/style.css +++ b/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: " "; +}