# HG changeset patch
# User veltr
# Date 1359719320 -3600
# Node ID bb63da14423953b348140c42460d8a46fc20de02
# Parent  e0f6f3c31150eda20f269c94b93db469eb90b50c
Color-related bugfixes

diff -r e0f6f3c31150 -r bb63da144239 client/css/renkan.css
--- a/client/css/renkan.css	Thu Jan 31 18:53:08 2013 +0100
+++ b/client/css/renkan.css	Fri Feb 01 12:48:40 2013 +0100
@@ -198,7 +198,7 @@
 }
 
 .Rk-Editor label {
-    display: inline-block; width: 70px;
+    float: left; width: 70px;
 }
 
 a.Rk-Edit-Goto {
@@ -222,21 +222,33 @@
     width: 225px; height: 120px; resize: none;
 }
 
-.Rk-UserColor, .Rk-Edit-Color {
-    display: inline-block; width: 1em; height: 1em; border: 1px solid #666666; margin: -2px 2px;
+.Rk-UserColor {
+    display: inline-block; width: 12px; height: 12px; border: 1px solid #666666; margin: -2px 2px;
+}
+
+.Rk-Edit-Color {
+    display: inline-block; width: 10px; height: 10px; border: 2px solid #333333; margin: -2px 2px;
+}
+
+.Rk-Edit-ColorTip {
+    display: block; width: 3px; height: 3px; background: #fff; margin: 7px 0 0 7px; cursor: pointer;
 }
 
 .Rk-Edit-ColorPicker-Wrapper {
-    display: inline-block; height: 1em; position: relative;
+    display: inline-block; position: relative;
 }
 
 .Rk-Edit-ColorPicker {
-    position: absolute; top: -2px; left: 15px; width: 60px; height: 72px; border: 1px solid #CCCCCC;
+    position: absolute; top: -2px; left: 15px; width: 96px; height: 96px; border: 1px solid #CCCCCC;
     padding: 5px 4px 4px 5px; background: #ffffff; border-radius: 5px; display: none;
 }
 
+.Rk-Edit-ColorPicker-Text {
+    color: #303080; font-weight: bold;
+}
+
 .Rk-Edit-ColorPicker li {
-    float: left; width: 14px; height: 11px; margin: 0 1px 1px 0; cursor: pointer;
+    float: left; width: 11px; height: 11px; margin: 0 1px 1px 0; cursor: pointer;
 }
 
 .Rk-ZoomButtons {
diff -r e0f6f3c31150 -r bb63da144239 client/js/main.js
--- a/client/js/main.js	Thu Jan 31 18:53:08 2013 +0100
+++ b/client/js/main.js	Fri Feb 01 12:48:40 2013 +0100
@@ -26,7 +26,7 @@
 
 Rkns._ = _;
 
-Rkns.pickerColors = ["#a80000","#ff0000","#d27979","#ffb2b2","#a36100","#f99500","#d1ac75","#fedead","#00890d","#00e016","#62ca6c","#93ff9e","#0043a8","#0065ff","#799cd2","#b2d1ff","#760093","#bb00ea","#b969cd","#eb9eff","#000000","#555555","#aaaaaa","#ffffff"];
+Rkns.pickerColors = ["#8f1919", "#a80000", "#d82626", "#ff0000", "#e87c7c", "#ff6565", "#f7d3d3", "#fecccc", "#8f5419", "#a85400", "#d87f26", "#ff7f00", "#e8b27c", "#ffb265", "#f7e5d3", "#fee5cc", "#8f8f19", "#a8a800", "#d8d826", "#feff00", "#e8e87c", "#feff65", "#f7f7d3", "#fefecc", "#198f19", "#00a800", "#26d826", "#00ff00", "#7ce87c", "#65ff65", "#d3f7d3", "#ccfecc", "#198f8f", "#00a8a8", "#26d8d8", "#00feff", "#7ce8e8", "#65feff", "#d3f7f7", "#ccfefe", "#19198f", "#0000a8", "#2626d8", "#0000ff", "#7c7ce8", "#6565ff", "#d3d3f7", "#ccccfe", "#8f198f", "#a800a8", "#d826d8", "#ff00fe", "#e87ce8", "#ff65fe", "#f7d3f7", "#feccfe", "#000000", "#242424", "#484848", "#6d6d6d", "#919191", "#b6b6b6", "#dadada", "#ffffff"];
 
 Rkns._BaseBin = function(_renkan, _opts) {
     if (typeof _renkan !== "undefined") {
diff -r e0f6f3c31150 -r bb63da144239 client/js/paper-renderer.js
--- a/client/js/paper-renderer.js	Thu Jan 31 18:53:08 2013 +0100
+++ b/client/js/paper-renderer.js	Fri Feb 01 12:48:40 2013 +0100
@@ -20,7 +20,14 @@
     _EDITOR_GRADIENT : new paper.Gradient(['#f0f0f0', '#d0d0d0']),
     _CLICKMODE_ADDNODE : 1,
     _CLICKMODE_STARTEDGE : 2,
-    _CLICKMODE_ENDEDGE : 3
+    _CLICKMODE_ENDEDGE : 3,
+    _USER_PLACEHOLDER : {
+        color: "#000000",
+        title: "(unknown user)",
+        get: function(attr) {
+            return this[attr] || false;
+        }
+    }
 }
 
 Rkns.Renderer.Utils = {
@@ -257,7 +264,7 @@
     this.circle.position = this.paper_coords;
     this.title.content = this.model.get("title");
     this.title.position = this.paper_coords.add([0, Rkns.Renderer._NODE_RADIUS + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]);
-    this.circle.strokeColor = this.model.get("color") || this.model.get("created_by").get("color") || "#000000";
+    this.circle.strokeColor = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color");
     this.edit_button.moveTo(this.paper_coords);
     this.remove_button.moveTo(this.paper_coords);
     this.link_button.moveTo(this.paper_coords);
@@ -418,7 +425,7 @@
         _p1b = _p1a.add(_delta), /* to differentiate inbound and outbound links */
         _a = _v.angle,
         _handle = _v.divide(3),
-        _color = this.model.get("color") || this.model.get("created_by").get("color") || "#000000";
+        _color = this.model.get("color") || this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color");;
     this.paper_coords = _p0b.add(_p1b).divide(2);
     this.line.strokeColor = _color;
     this.line.segments[0].point = _p0a;
@@ -592,14 +599,15 @@
     + '<p><label><%=l10n.edit_title%></label><input class="Rk-Edit-Title" type="text" value="<%=node.title%>"/></p>'
     + '<p><label><%=l10n.edit_uri%></label><input class="Rk-Edit-URI" type="text" value="<%=node.uri%>"/><a class="Rk-Edit-Goto" href="<%=node.uri%>" target="_blank"></a></p>'
     + '<p><label><%=l10n.edit_description%></label><textarea class="Rk-Edit-Description"><%=node.description%></textarea></p>'
-    + '<div class="Rk-Editor-p"><label>Node color</label><div class="Rk-Edit-ColorPicker-Wrapper"><span class="Rk-Edit-Color" style="background:<%=node.color%>;"></span><ul class="Rk-Edit-ColorPicker">'
-    + '<% print(Rkns.pickerColors.reduce(function(m,c) { return m + "<li data-color=\'" + c + "\' style=\'background: " + c + "\'></li>"},"")); %></ul></div></div>'
+    + '<div class="Rk-Editor-p"><label>Node color</label><div class="Rk-Edit-ColorPicker-Wrapper"><span class="Rk-Edit-Color" style="background:<%=node.color%>;"><span class="Rk-Edit-ColorTip"></span></span><ul class="Rk-Edit-ColorPicker">'
+    + '<% print(Rkns.pickerColors.reduce(function(m,c) { return m + "<li data-color=\'" + c + "\' style=\'background: " + c + "\'></li>"},"")); %></ul><span class="Rk-Edit-ColorPicker-Text">Choose color</span></div></div>'
     + '<p><label><%=l10n.edit_image%></label><input class="Rk-Edit-Image" type="text" value="<%=node.image%>"/><img class="Rk-Edit-ImgPreview" src="<%=node.image%>" /></p>'
     + '<p><label><%=l10n.created_by%></label> <span class="Rk-UserColor" style="background:<%=node.created_by_color%>;"></span><%=node.created_by_title%></p>'
 );
 
 Rkns.Renderer.NodeEditor.prototype.draw = function() {
-    var _model = this.node_representation.model;
+    var _model = this.node_representation.model,
+        _created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER;
     this.editor_$
         .html(this.template({
             node: {
@@ -607,9 +615,9 @@
                 uri: _model.get("uri"),
                 description: _model.get("description"),
                 image: _model.get("image") || "",
-                color: _model.get("color") || _model.get("created_by").get("color") || "#000000",
-                created_by_color: _model.get("created_by").get("color"),
-                created_by_title: _model.get("created_by").get("title")
+                color: _model.get("color") || _created_by.get("color"),
+                created_by_color: _created_by.get("color"),
+                created_by_title: _created_by.get("title")
             },
             l10n: this.renderer.renkan.l10n
         }));
@@ -643,7 +651,7 @@
     );
     this.editor_$.find(".Rk-Edit-ColorPicker li").hover(
         function() { _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color")); },
-        function() { _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || _model.get("created_by").get("color") || "#000000") }
+        function() { _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color")) }
     ).click(function() {
         _model.set("color", $(this).attr("data-color"));
         _this.redraw();
@@ -689,28 +697,31 @@
     '<h2><span class="Rk-CloseX">&times;</span><%=l10n.edit_edge%></span></h2>'
     + '<p><label><%=l10n.edit_title%></label><input class="Rk-Edit-Title" type="text" value="<%=edge.title%>"/></p>'
     + '<p><label><%=l10n.edit_uri%></label><input class="Rk-Edit-URI" type="text" value="<%=edge.uri%>"/><a class="Rk-Edit-Goto" href="<%=edge.uri%>" target="_blank"></a></p>'
-    + '<div class="Rk-Editor-p"><label>Edge color:</label><div class="Rk-Edit-ColorPicker-Wrapper"><span class="Rk-Edit-Color" style="background:<%=edge.color%>;"></span><ul class="Rk-Edit-ColorPicker">'
-    + '<% print(Rkns.pickerColors.reduce(function(m,c) { return m + "<li data-color=\'" + c + "\' style=\'background: " + c + "\'></li>"},"")); %></ul></div></div>'
-    + '<p><label><%=l10n.edit_from%></label><span class="Rk-UserColor" style="background:<%=edge.from_created_by_color%>;"></span><%=edge.from_title%></p>'
-    + '<p><label><%=l10n.edit_to%></label><span class="Rk-UserColor" style="background:<%=edge.to_created_by_color%>;"></span><%=edge.to_title%></p>'
+    + '<div class="Rk-Editor-p"><label>Edge color:</label><div class="Rk-Edit-ColorPicker-Wrapper"><span class="Rk-Edit-Color" style="background:<%=edge.color%>;"><span class="Rk-Edit-ColorTip"></span></span><ul class="Rk-Edit-ColorPicker">'
+    + '<% print(Rkns.pickerColors.reduce(function(m,c) { return m + "<li data-color=\'" + c + "\' style=\'background: " + c + "\'></li>"},"")); %></ul><span class="Rk-Edit-ColorPicker-Text">Choose color</span></div></div>'
+    + '<p><label><%=l10n.edit_from%></label><span class="Rk-UserColor" style="background:<%=edge.from_color%>;"></span><%=edge.from_title%></p>'
+    + '<p><label><%=l10n.edit_to%></label><span class="Rk-UserColor" style="background:<%=edge.to_color%>;"></span><%=edge.to_title%></p>'
     + '<p><label><%=l10n.created_by%> </label><span class="Rk-UserColor" style="background:<%=edge.created_by_color%>;"></span><%=edge.created_by_title%></p>'
 );
 
 Rkns.Renderer.EdgeEditor.prototype.draw = function() {
-    var _model = this.edge_representation.model;
+    var _model = this.edge_representation.model,
+        _from_model = _model.get("from"),
+        _to_model = _model.get("to"),
+        _created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER;
     this.editor_$
         .html(this.template({
             edge: {
                 title: _model.get("title"),
                 uri: _model.get("uri"),
                 description: _model.get("description"),
-                color: _model.get("color") || _model.get("created_by").get("color") || "#000000",
-                from_title: _model.get("from").get("title"),
-                to_title: _model.get("to").get("title"),
-                from_created_by_color: _model.get("from").get("created_by").get("color"),
-                to_created_by_color: _model.get("to").get("created_by").get("color"),
-                created_by_color: _model.get("created_by").get("color"),
-                created_by_title: _model.get("created_by").get("title")
+                color: _model.get("color") || _created_by.get("color"),
+                from_title: _from_model.get("title"),
+                to_title: _to_model.get("title"),
+                from_color: _from_model.get("color") || (_from_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"),
+                to_color: _to_model.get("color") || (_to_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"),
+                created_by_color: _created_by.get("color"),
+                created_by_title: _created_by.get("title")
             },
             l10n: this.renderer.renkan.l10n
         }));
@@ -735,7 +746,7 @@
     );
     this.editor_$.find(".Rk-Edit-ColorPicker li").hover(
         function() { _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color")); },
-        function() { _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || _model.get("created_by").get("color") || "#000000") }
+        function() { _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color")); }
     ).click(function() {
         _model.set("color", $(this).attr("data-color"));
         _this.redraw();
diff -r e0f6f3c31150 -r bb63da144239 client/render-test.html
--- a/client/render-test.html	Thu Jan 31 18:53:08 2013 +0100
+++ b/client/render-test.html	Fri Feb 01 12:48:40 2013 +0100
@@ -45,9 +45,7 @@
                             type: Rkns.Twitter.Search
                         }
                     ],
-                    user: {
-                        id: "u-iri"
-                    }
+                    user_id: "u-iri"
                 });
 /*                _renkan.project.addUser({
                     id: "u-anonymous",