diff --git a/public/red/ui/palette.js b/public/red/ui/palette.js index 60cb44fe7..fba47e9b5 100644 --- a/public/red/ui/palette.js +++ b/public/red/ui/palette.js @@ -121,17 +121,15 @@ RED.palette = (function() { label = (typeof def.paletteLabel === "function" ? def.paletteLabel.call(def) : def.paletteLabel)||""; } - d.innerHTML = '
'; + + $('
',{class:"palette_label"+(def.align=="right"?" palette_label_right":"")}).appendTo(d); d.className="palette_node"; + + if (def.icon) { - d.style.backgroundImage = "url(icons/"+def.icon+")"; - d.style.backgroundSize = "18px 27px"; - if (def.align == "right") { - d.style.backgroundPosition = "95% 50%"; - } else if (def.inputs > 0) { - d.style.backgroundPosition = "10% 50%"; - } + var iconContainer = $('
',{class:"palette_icon_container"+(def.align=="right"?" palette_icon_container_right":"")}).appendTo(d); + $('
',{class:"palette_icon",style:"background-image: url(icons/"+def.icon+")"}).appendTo(iconContainer); } d.style.backgroundColor = def.color; diff --git a/public/style.css b/public/style.css index 3d1b9c252..a36a08b05 100644 --- a/public/style.css +++ b/public/style.css @@ -281,7 +281,7 @@ span.deploy-button-group.open > #btn-deploy.disabled + a { #palette { background: #f3f3f3; - width: 140px; + width: 170px; text-align: center; -webkit-user-select: none; -khtml-user-select: none; @@ -391,11 +391,15 @@ span.deploy-button-group.open > #btn-deploy.disabled + a { clear: both; } .palette_label { - margin: 4px 0; + margin: 4px 0 4px 30px; line-height: 20px; text-align: center; overflow: hidden; } +.palette_label_right { + margin: 4px 30px 4px 0; +} + .palette_node { cursor:move; font-size:13px; @@ -406,7 +410,7 @@ span.deploy-button-group.open > #btn-deploy.disabled + a { border: 2px solid #999; background-position: 5% 50%; background-repeat: no-repeat; - width: 90px; + width: 120px; background-size: contain; position: relative; } @@ -427,13 +431,38 @@ span.deploy-button-group.open > #btn-deploy.disabled + a { border: 1px solid #999; } .palette_port_output { - left:85px; + left:auto; + right: -6px; } .palette_node:hover .palette_port { border-color: #999; 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 { background: #fff; @@ -459,7 +488,7 @@ span.deploy-button-group.open > #btn-deploy.disabled + a { #workspace { position: absolute; margin: 0; - top:5px; left:160px; bottom: 10px; right: 330px; + top:5px; left:190px; bottom: 10px; right: 330px; } #chart-zoom-controls { position: absolute;