From 7a0ce0c95722f6eac1366c379aef6ae9f9890855 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Fri, 20 Mar 2015 11:37:47 +0000
Subject: [PATCH] Update style of nodes in palette to match workspace

---
 public/red/ui/palette.js | 14 ++++++--------
 public/style.css         | 39 ++++++++++++++++++++++++++++++++++-----
 2 files changed, 40 insertions(+), 13 deletions(-)

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 = '<div class="palette_label"></div>';
+            
+            $('<div/>',{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 = $('<div/>',{class:"palette_icon_container"+(def.align=="right"?" palette_icon_container_right":"")}).appendTo(d);
+                $('<div/>',{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;