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

Update style of nodes in palette to match workspace

Browse Source
This commit is contained in:
Nick O'Leary 2015-03-20 11:37:47 +00:00
parent eb4cadb0b5
commit 7a0ce0c957
2 changed files with 40 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public/red/ui/palette.js
View File

@ -121,17 +121,15 @@ RED.palette = (function() {
label = (typeof def.paletteLabel === "function" ? def.paletteLabel.call(def) : def.paletteLabel)||""; label = (typeof def.paletteLabel === "function" ? def.paletteLabel.call(def) : def.paletteLabel)||"";
} }
d.innerHTML = '<div class="palette_label"></div>';
$('<div/>',{class:"palette_label"+(def.align=="right"?" palette_label_right":"")}).appendTo(d);
d.className="palette_node"; d.className="palette_node";
if (def.icon) { if (def.icon) {
d.style.backgroundImage = "url(icons/"+def.icon+")"; var iconContainer = $('<div/>',{class:"palette_icon_container"+(def.align=="right"?" palette_icon_container_right":"")}).appendTo(d);
d.style.backgroundSize = "18px 27px"; $('<div/>',{class:"palette_icon",style:"background-image: url(icons/"+def.icon+")"}).appendTo(iconContainer);
if (def.align == "right") {
d.style.backgroundPosition = "95% 50%";
} else if (def.inputs > 0) {
d.style.backgroundPosition = "10% 50%";
}
} }
d.style.backgroundColor = def.color; d.style.backgroundColor = def.color;

39
public/style.css
View File

@ -281,7 +281,7 @@ span.deploy-button-group.open > #btn-deploy.disabled + a {
#palette { #palette {
background: #f3f3f3; background: #f3f3f3;
width: 140px; width: 170px;
text-align: center; text-align: center;
-webkit-user-select: none; -webkit-user-select: none;
-khtml-user-select: none; -khtml-user-select: none;
@ -391,11 +391,15 @@ span.deploy-button-group.open > #btn-deploy.disabled + a {
clear: both; clear: both;
} }
.palette_label { .palette_label {
margin: 4px 0; margin: 4px 0 4px 30px;
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
} }
.palette_label_right {
margin: 4px 30px 4px 0;
}
.palette_node { .palette_node {
cursor:move; cursor:move;
font-size:13px; font-size:13px;
@ -406,7 +410,7 @@ span.deploy-button-group.open > #btn-deploy.disabled + a {
border: 2px solid #999; border: 2px solid #999;
background-position: 5% 50%; background-position: 5% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
width: 90px; width: 120px;
background-size: contain; background-size: contain;
position: relative; position: relative;
} }
@ -427,13 +431,38 @@ span.deploy-button-group.open > #btn-deploy.disabled + a {
border: 1px solid #999; border: 1px solid #999;
} }
.palette_port_output { .palette_port_output {
left:85px; left:auto;
right: -6px;
} }
.palette_node:hover .palette_port { .palette_node:hover .palette_port {
border-color: #999; border-color: #999;
background-color: #eee; background-color: #eee;
} }
.palette_icon_container {
position: absolute;
text-align: center;
top:0;
bottom:0;
left:0;
width: 30px;
border-right: 2px solid rgba(0,0,0,0.1);
background-color: rgba(0,0,0,0.05);
}
.palette_icon_container_right {
left: auto;
right: 0;
border-right: none;
border-left: 2px solid rgba(0,0,0,0.1);
}
.palette_icon {
display: inline-block;
width: 20px;
height: 100%;
background-position: 50% 50%;
background-size: contain;
background-repeat: no-repeat;
}
#sidebar { #sidebar {
background: #fff; background: #fff;
@ -459,7 +488,7 @@ span.deploy-button-group.open > #btn-deploy.disabled + a {
#workspace { #workspace {
position: absolute; position: absolute;
margin: 0; margin: 0;
top:5px; left:160px; bottom: 10px; right: 330px; top:5px; left:190px; bottom: 10px; right: 330px;
} }
#chart-zoom-controls { #chart-zoom-controls {
position: absolute; position: absolute;