frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Add deploy dropdown button

Browse Source
This commit is contained in:
Nick O'Leary 2014-11-23 22:25:25 +00:00
parent e11abd2508
commit 89fff339d5
2 changed files with 67 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/index.html
View File

@ -32,7 +32,13 @@
<div id="header"> <div id="header">
<span class="logo"><img src="node-red.png"> <span>Node-RED</span></span> <span class="logo"><img src="node-red.png"> <span>Node-RED</span></span>
<div class="pull-right"> <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> <a id="btn-sidemenu" class="button dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-bars"></i></a>
</div> </div>
</div> </div>

68
public/style.css
View File

@ -96,25 +96,77 @@ span.logo img {
#header .button:not(.disabled):hover { #header .button:not(.disabled):hover {
box-shadow: 0 0 2px #fff; 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 { #btn-deploy:not(.disabled):hover {
background: #ca3f39; background: #ca3f39;
} }
#btn-deploy {
color: #fff !important;
background: #d24741;
box-shadow: 0 0 2px #fff;
}
#btn-deploy:not(.disabled):active { #btn-deploy:not(.disabled):active {
background: #aa1f19 !important; background: #aa1f19 !important;
color: #ccc !important;
box-shadow: 0 0 2px #999;
} }
#btn-deploy:not(.disabled):active {
color: #ccc !important;
}
#btn-deploy.disabled { #btn-deploy.disabled {
cursor: default; cursor: default;
background: #444 ; background: #444;
color: #999 !important; 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 { #btn-sidemenu {
font-size: 20px !important; font-size: 20px !important;