# HG changeset patch # User veltr # Date 1364230334 -3600 # Node ID 55454c900296725004150d66f896c8ad7fe1b376 # Parent b6b20e8c4a1a23dcfe57299fa535116d5f9909cc Display improvements diff -r b6b20e8c4a1a -r 55454c900296 client/css/renkan.css --- a/client/css/renkan.css Mon Mar 25 05:55:28 2013 +0100 +++ b/client/css/renkan.css Mon Mar 25 17:52:14 2013 +0100 @@ -235,20 +235,20 @@ } .Rk-Edit-Title, .Rk-Edit-URI, .Rk-Edit-Image, .Rk-Edit-Image-File, .Rk-Edit-Vocabulary { - font-size: 12px; width: 225px; + font-size: 12px; width: 250px; } .Rk-Edit-URI { - font-size: 12px; width: 205px; + font-size: 12px; width: 230px; } .Rk-Edit-ImgPreview { border: 1px solid #666; margin: 5px auto; display: block; - max-width: 100% !important; max-height: 100px !important; + max-width: 253px !important; max-height: 100px !important; } .Rk-Editor textarea { - width: 225px; height: 120px; resize: none; + width: 250px; height: 120px; resize: none; } .Rk-UserColor { @@ -304,6 +304,26 @@ padding-left: 20px; } +.Rk-Edit-Direction { + border: 1px solid #666; padding: 3px 5px; line-height: 20px; border-radius: 3px; background: #f0f0f0; cursor: pointer; +} + +.Rk-Edit-Direction:hover { + background: #c0c0c0; +} + +.Rk-Display-Title a { + text-decoration: none; color: #000000; +} + +.Rk-Display-Title a:hover { + text-decoration: underline; +} + +.Rk-Display-URI { + font-style: italic; +} + .Rk-Fold-Bins { position: absolute; top: 5px; width: 12px; text-align: center; font-size: 16px; cursor: pointer; line-height: 16px; padding: 4px; color: #ffffff; background: #666666; border-radius: 0 6px 6px 0; diff -r b6b20e8c4a1a -r 55454c900296 client/js/i18n.js --- a/client/js/i18n.js Mon Mar 25 05:55:28 2013 +0100 +++ b/client/js/i18n.js Mon Mar 25 17:52:14 2013 +0100 @@ -34,6 +34,8 @@ "Loading, please wait": "Chargement en cours, merci de patienter", "Edge color:": "Couleur :", "Node color:": "Couleur :", + "Choose color": "Choisir une couleur", + "Change edge direction": "Changer le sens du lien", "Do you really wish to remove node ": "Voulez-vous réellement supprimer le nœud ", "Do you really wish to remove edge ": "Voulez-vous réellement supprimer le lien ", "This file is not an image": "Ce fichier n'est pas une image", diff -r b6b20e8c4a1a -r 55454c900296 client/js/main.js --- a/client/js/main.js Mon Mar 25 05:55:28 2013 +0100 +++ b/client/js/main.js Mon Mar 25 17:52:14 2013 +0100 @@ -164,12 +164,10 @@ _input = this.$.find(".Rk-Web-Search-Input") _form = this.$.find(".Rk-Web-Search-Form"); Rkns._(_opts.search).each(function(_search, _key) { - console.log(_search, Rkns[_search.type]); if (Rkns[_search.type] && Rkns[_search.type].Search) { _this.search_engines.push(new Rkns[_search.type].Search(_this, _search)); } }); - console.log(_this.search_engines); _select.html( Rkns._(this.search_engines).map(function(_search, _key) { return _tmpl({ diff -r b6b20e8c4a1a -r 55454c900296 client/js/paper-renderer.js --- a/client/js/paper-renderer.js Mon Mar 25 05:55:28 2013 +0100 +++ b/client/js/paper-renderer.js Mon Mar 25 17:52:14 2013 +0100 @@ -11,10 +11,11 @@ _EDGE_DISTANCE: 3, _NODE_MAX_CHAR: 50, _EDGE_MAX_CHAR: 40, - _ARROW_LENGTH: 16, - _ARROW_WIDTH: 8, + _ARROW_LENGTH: 18, + _ARROW_WIDTH: 12, _EDITOR_ARROW_LENGTH : 20, _EDITOR_ARROW_WIDTH : 40, + _EDITOR_WIDTH : 275, _EDITOR_MARGIN : 15, _EDITOR_PADDING : 10, _EDITOR_GRADIENT : new paper.Gradient(['#f0f0f0', '#d0d0d0']), @@ -40,6 +41,9 @@ } Rkns.Renderer.Utils = { + shortenText : function(_text, _maxlength) { + return (_text.length > _maxlength ? (_text.substr(0,_maxlength) + '…') : _text); + }, drawEditBox : function(_coords, _path, _width, _xmargin, _selector) { _selector.css({ width: (_width - 2* Rkns.Renderer._EDITOR_PADDING), @@ -301,7 +305,7 @@ this.last_circle_radius = this.circle_radius; var _text = this.model.get("title") || this.renderer.renkan.translate("(untitled)"); - this.title.content = _text.length > Rkns.Renderer._NODE_MAX_CHAR ? (_text.substr(0,Rkns.Renderer._NODE_MAX_CHAR) + '…') : _text; + this.title.content = Rkns.Renderer.Utils.shortenText(_text, Rkns.Renderer._NODE_MAX_CHAR); this.title.position = this.paper_coords.add([0, this.circle_radius + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]); var _color = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"); @@ -499,6 +503,8 @@ } Rkns.Renderer.Edge.prototype.redraw = function() { + this.from_representation = this.renderer.getRepresentationByModel(this.model.get("from")); + this.to_representation = this.renderer.getRepresentationByModel(this.model.get("to")); var _p0a = this.from_representation.paper_coords, _p1a = this.to_representation.paper_coords, _v = _p1a.subtract(_p0a), @@ -534,7 +540,7 @@ } this.text.rotate(_a - this.text_angle); var _text = this.model.get("title"); - this.text.content = _text.length > Rkns.Renderer._EDGE_MAX_CHAR ? (_text.substr(0,Rkns.Renderer._EDGE_MAX_CHAR) + '…') : _text; + this.text.content = Rkns.Renderer.Utils.shortenText(_text, Rkns.Renderer._EDGE_MAX_CHAR); this.text.position = this.paper_coords.add(_textdelta); this.text_angle = _a; this.edit_button.moveTo(this.paper_coords); @@ -702,18 +708,19 @@ + '

' + '

<%-translate("Size:")%>-<%-node.size%>+

' + '
<%-translate("Node color:")%>
Choose color
' + + '<% _(Rkns.pickerColors).each(function(c) { %>
  • <% }); %><%- translate("Choose color") %>' + '' + '

    ' + '

    ' - + '

    <%-translate("Created by:")%> <%-node.created_by_title%>

    ' + + '

    <%-translate("Created by:")%> <%- Rkns.Renderer.Utils.shortenText(node.created_by_title, 25) %>

    ' ); Rkns.Renderer.NodeEditor.prototype.readOnlyTemplate = Rkns._.template( - '

    ×<%-node.title%>

    ' - + '

    <%-node.uri%>

    ' + '

    ×' + + '<% if (node.uri) { %><% } %><%-node.title%><% if (node.uri) { %><% } %>

    ' + + '<% if (node.uri) { %>

    <%-node.short_uri%>

    <% } %>' + '

    <%-node.description%>

    ' - + '

    <%-translate("Created by:")%><%-node.created_by_title%>

    ' + + '

    <%-translate("Created by:")%><%- Rkns.Renderer.Utils.shortenText(node.created_by_title, 25) %>

    ' ); Rkns.Renderer.NodeEditor.prototype.draw = function() { @@ -727,6 +734,7 @@ node: { title: _model.get("title"), uri: _model.get("uri"), + short_uri: Rkns.Renderer.Utils.shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40), description: _model.get("description"), image: _model.get("image") || "", image_placeholder: _image_placeholder, @@ -793,6 +801,7 @@ 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")); + paper.view.draw(); }); function shiftSize(n) { @@ -818,7 +827,7 @@ Rkns.Renderer.NodeEditor.prototype.redraw = function() { var _coords = this.node_representation.paper_coords; - Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 20, this.editor_$); + Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, Rkns.Renderer._EDITOR_WIDTH, 20, this.editor_$); this.editor_$.show(); paper.view.draw(); } @@ -861,19 +870,21 @@ + '"<% if (uri === edge.uri) { %> selected<% } %>><%- translate(property.label) %>' + '<% }) %><% }) %>

    <% } %>' + '
    <%-translate("Edge color:")%>
    Choose color
    ' - + '

    <%-translate("From:")%><%-edge.from_title%>

    ' - + '

    <%-translate("To:")%><%-edge.to_title%>

    ' - + '

    <%-translate("Created by:")%><%-edge.created_by_title%>

    ' + + '<% _(Rkns.pickerColors).each(function(c) { %>
  • <% }); %><%- translate("Choose color") %>' + + '

    <%- translate("Change edge direction") %>

    ' + + '

    <%-translate("From:")%><%- Rkns.Renderer.Utils.shortenText(edge.from_title, 25) %>

    ' + + '

    <%-translate("To:")%><%- Rkns.Renderer.Utils.shortenText(edge.to_title, 25) %>

    ' + + '

    <%-translate("Created by:")%><%- Rkns.Renderer.Utils.shortenText(edge.created_by_title, 25) %>

    ' ); Rkns.Renderer.EdgeEditor.prototype.readOnlyTemplate = Rkns._.template( - '

    ×<%- edge.title %>

    ' - + '

    <%-edge.uri%>

    ' + '

    ×' + + '<% if (edge.uri) { %><% } %><%-edge.title%><% if (edge.uri) { %><% } %>

    ' + + '<% if (edge.uri) { %>

    <%-edge.short_uri%>

    <% } %>' + '

    <%-edge.description%>

    ' - + '

    <%-translate("From:")%><%-edge.from_title%>

    ' - + '

    <%-translate("To:")%><%-edge.to_title%>

    ' - + '

    <%-translate("Created by:")%><%-edge.created_by_title%>

    ' + + '

    <%-translate("From:")%><%- Rkns.Renderer.Utils.shortenText(edge.from_title, 25) %>

    ' + + '

    <%-translate("To:")%><%- Rkns.Renderer.Utils.shortenText(edge.to_title, 25) %>

    ' + + '

    <%-translate("Created by:")%><%- Rkns.Renderer.Utils.shortenText(edge.created_by_title, 25) %>

    ' ); Rkns.Renderer.EdgeEditor.prototype.draw = function() { @@ -887,6 +898,7 @@ edge: { title: _model.get("title"), uri: _model.get("uri"), + short_uri: Rkns.Renderer.Utils.shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40), description: _model.get("description"), color: _model.get("color") || _created_by.get("color"), from_title: _from_model.get("title"), @@ -915,7 +927,6 @@ uri: _this.editor_$.find(".Rk-Edit-URI").val() } _model.set(_data); - _this.edge_representation.redraw(); paper.view.draw(); }).defer(); }).throttle(500); @@ -930,6 +941,13 @@ onFieldChange(); } }); + this.editor_$.find(".Rk-Edit-Direction").click(function() { + _model.set({ + from: _model.get("to"), + to: _model.get("from") + }); + _this.draw(); + }); this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover( function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); }, function() { _this.editor_$.find(".Rk-Edit-ColorPicker").hide(); } @@ -939,14 +957,14 @@ 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(); + paper.view.draw(); }); } } Rkns.Renderer.EdgeEditor.prototype.redraw = function() { var _coords = this.edge_representation.paper_coords; - Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 5, this.editor_$); + Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, Rkns.Renderer._EDITOR_WIDTH, 5, this.editor_$); this.editor_$.show(); paper.view.draw(); }