Editor working .

mindplot/pom.xml

@@ -192,10 +192,6 @@
                                     <filelist dir="${basedir}/src/main/javascript/widget/" files="LinkEditor.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/widget/" files="FloatingTip.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/widget/" files="LinkIconTooltip.js"/>
-
-
-                                    <filelist dir="${basedir}/src/main/javascript/"
-                                              files="widget/ColorPickerPanel.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/"
                                               files="widget/ColorPalettePanel.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/"

mindplot/src/main/javascript/CentralTopic.js

@@ -100,11 +100,11 @@ mindplot.CentralTopic = new Class({
     },
 
     _defaultBackgroundColor : function() {
-        return "#f7f7f7";
+        return "rgb(80,157,192)";
     },
 
     _defaultBorderColor : function() {
-        return "#023BB9";
+        return "rgb(57,113,177)";
     },
 
     _defaultFontStyle : function() {
@@ -113,7 +113,7 @@ mindplot.CentralTopic = new Class({
             size: 10,
             style:"normal",
             weight:"bold",
-            color:"#023BB9"
+            color:"#ffffff"
         };
     }
 });

mindplot/src/main/javascript/ConnectionLine.js

@@ -43,7 +43,7 @@ mindplot.ConnectionLine = new Class({
             }
             line.setStroke(1, 'solid', strokeColor);
         }
-
+        line.setFill(mindplot.ConnectionLine.getStrokeColor());
         this._line2d = line;
     },
 

mindplot/src/main/javascript/LinkIcon.js

@@ -25,7 +25,7 @@ mindplot.LinkIcon = new Class({
 
 
         this.parent(mindplot.LinkIcon.IMAGE_URL);
-        this._noteModel = linkModel;
+        this._linksModel = linkModel;
         this._topic = topic;
 
         this._registerEvents();
@@ -44,7 +44,7 @@ mindplot.LinkIcon = new Class({
     },
 
     getModel : function() {
-        return this._noteModel;
+        return this._linksModel;
     },
 
     remove : function() {
@@ -52,6 +52,6 @@ mindplot.LinkIcon = new Class({
         actionDispatcher.removeLinkFromTopic(this._topic.getId());
     }
 });
-mindplot.LinkIcon.IMAGE_URL = "../images/world_link.png";
+mindplot.LinkIcon.IMAGE_URL = "../nicons/links.png";
 
  

mindplot/src/main/javascript/NodeGraph.js

@@ -103,11 +103,10 @@ mindplot.NodeGraph = new Class({
             this._onFocus = focus;
             var outerShape = this.getOuterShape();
             if (focus) {
-                outerShape.setFill('#c7d8ff');
+                outerShape.setFill(mindplot.Topic.OUTER_SHAPE_ATTRIBUTES_FOCUS.fillColor);
                 outerShape.setOpacity(1);
 
             } else {
-                // @todo: node must not know about the topic.
                 outerShape.setFill(mindplot.Topic.OUTER_SHAPE_ATTRIBUTES.fillColor);
                 outerShape.setOpacity(0);
             }

mindplot/src/main/javascript/NoteIcon.js

@@ -22,7 +22,7 @@ mindplot.NoteIcon = new Class({
         $assert(topic, 'topic can not be null');
 
         this.parent(mindplot.NoteIcon.IMAGE_URL);
-        this._noteModel = noteModel;
+        this._linksModel = noteModel;
         this._topic = topic;
 
         this._registerEvents();
@@ -52,7 +52,7 @@ mindplot.NoteIcon = new Class({
                 });
                 title.inject(result);
 
-                var text = new Element('div', {text:this._noteModel.getText()});
+                var text = new Element('div', {text:this._linksModel.getText()});
                 text.setStyles({
                         'white-space': 'pre-wrap',
                         'word-wrap': 'break-word'
@@ -74,7 +74,7 @@ mindplot.NoteIcon = new Class({
     },
 
     getModel : function() {
-        return this._noteModel;
+        return this._linksModel;
     },
 
     remove : function() {
@@ -83,5 +83,5 @@ mindplot.NoteIcon = new Class({
     }
 });
 
-mindplot.NoteIcon.IMAGE_URL = "../images/note.png";
+mindplot.NoteIcon.IMAGE_URL = "../nicons/notes.png";
 

mindplot/src/main/javascript/ShrinkConnector.js

@@ -21,7 +21,7 @@ mindplot.ShirinkConnector = new Class({
 
         var elipse = new web2d.Elipse(mindplot.Topic.prototype.INNER_RECT_ATTRIBUTES);
         this._elipse = elipse;
-        elipse.setFill('#f7f7f7');
+        elipse.setFill('rgb(62,118,179)');
 
         elipse.setSize(mindplot.Topic.CONNECTOR_WIDTH, mindplot.Topic.CONNECTOR_WIDTH);
         elipse.addEvent('click', function(event) {

mindplot/src/main/javascript/Topic.js

@@ -207,7 +207,6 @@ mindplot.Topic = new Class({
         else {
             $assert(false, "Unsupported figure type:" + type);
         }
-
         result.setPosition(0, 0);
         return result;
     },
@@ -1198,5 +1197,6 @@ mindplot.Topic = new Class({
 
 
 mindplot.Topic.CONNECTOR_WIDTH = 6;
-mindplot.Topic.OUTER_SHAPE_ATTRIBUTES = {fillColor:'#dbe2e6',stroke:'1 solid #77555a',x:0,y:0};
-mindplot.Topic.INNER_RECT_ATTRIBUTES = {stroke:'0.5 solid'};
+mindplot.Topic.OUTER_SHAPE_ATTRIBUTES = {fillColor:'rgb(252,235,192)',stroke:'1 dot rgb(241,163,39)',x:0,y:0};
+mindplot.Topic.OUTER_SHAPE_ATTRIBUTES_FOCUS = {fillColor:'rgb(244,184,45)',x:0,y:0};
+mindplot.Topic.INNER_RECT_ATTRIBUTES = {stroke:'2 solid'};

mindplot/src/main/javascript/widget/ColorPalettePanel.js

@@ -67,36 +67,33 @@ mindplot.widget.ColorPalettePanel = new Class({
             elem.addEvent('click', function() {
                 var color = elem.getStyle("background-color");
                 model.setValue(color);
-            });
-        });
+                this.hide();
+            }.bind(this));
+        }.bind(this));
 
         return content;
     },
 
-    show : function() {
-        if (!this.isVisible()) {
+    _updateSelectedItem : function() {
+        var panelElem = this.getPanelElem();
 
-            var panelElem = this.getPanelElem();
+        // Clear selected cell based on the color  ...
+        var tdCells = panelElem.getElements("td[class='palette-cell palette-cell-selected']");
+        tdCells.forEach(function(elem) {
+            elem.className = 'palette-cell';
+        });
 
-            // Clear selected cell based on the color  ...
-            var tdCells = panelElem.getElements("td[class='palette-cell palette-cell-selected']");
-            tdCells.forEach(function(elem) {
-                elem.className = 'palette-cell';
-            });
-
-            // Mark the cell as selected ...
-            var colorCells = panelElem.getElements('div[class=palette-colorswatch]');
-            var model = this.getModel();
-            var modelValue = model.getValue();
-            colorCells.forEach(function(elem) {
-                var color = elem.getStyle("background-color");
-                if (modelValue == color) {
-                    elem.parentNode.className = 'palette-cell palette-cell-selected';
-                }
-            });
-        }
-        this.parent();
+        // Mark the cell as selected ...
+        var colorCells = panelElem.getElements('div[class=palette-colorswatch]');
+        var model = this.getModel();
+        var modelValue = model.getValue();
+        colorCells.forEach(function(elem) {
+            var color = elem.getStyle("background-color");
+            if (modelValue == color) {
+                elem.parentNode.className = 'palette-cell palette-cell-selected';
+            }
+        });
+        return panelElem;
     }
 
-
 });

mindplot/src/main/javascript/widget/ColorPickerPanel.js

@@ -1,49 +0,0 @@
-/*
- *    Copyright [2011] [wisemapping]
- *
- *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
- *   It is basically the Apache License, Version 2.0 (the "License") plus the
- *   "powered by wisemapping" text requirement on every single page;
- *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the license at
- *
- *       http://www.wisemapping.org/license
- *
- *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
- *   limitations under the License.
- */
-
-mindplot.widget.ColorPickerPanel = new Class({
-    Extends: mindplot.widget.ToolbarPaneItem,
-    initialize : function(buttonId, model) {
-        this.parent(buttonId, model);
-        this._mooRainbow = new MooRainbow(buttonId, {
-            id: buttonId,
-            imgPath: '../images/',
-            startColor: [255, 255, 255],
-            onInit: function() {
-                this.fireEvent("show");
-            }.bind(this),
-            onChange: function(color) {
-                this.getModel().setValue(color.hex);
-            }.bind(this),
-            onComplete: function() {
-                this.hide();
-            }.bind(this)
-        });
-    },
-
-    show : function() {
-        this.parent();
-        this._mooRainbow.show();
-    },
-
-    hide : function() {
-        this.parent();
-        this._mooRainbow.hide();
-
-    }
-});

mindplot/src/main/javascript/widget/FloatingTip.js

@@ -43,12 +43,12 @@ mindplot.widget.FloatingTip = new Class({
 
     initialize: function(element, options) {
         this.setOptions(options);
-        this.boundShow = function(event) {
-            this.show(event, element);
+        this.boundShow = function() {
+            this.show(element);
         }.bind(this);
 
-        this.boundHide = function(event) {
-            this.hide(event, element);
+        this.boundHide = function() {
+            this.hide(element);
         }.bind(this);
 
         if (!['top', 'right', 'bottom', 'left', 'inside'].contains(this.options.position))
@@ -65,7 +65,7 @@ mindplot.widget.FloatingTip = new Class({
         element.store('hasEvents', true);
     },
 
-    show: function(event, element) {
+    show: function(element) {
         var old = element.retrieve('floatingtip');
         if (old) if (old.getStyle('opacity') == 1) {
             clearTimeout(old.retrieve('timeout'));
@@ -74,17 +74,20 @@ mindplot.widget.FloatingTip = new Class({
         var tip = this._create(element);
         if (tip == null)
             return this;
+
         element.store('floatingtip', tip);
         this._animate(tip, 'in');
+
         if (this.options.preventHideOnOver) {
             tip.addEvent(this.options.showOn, this.boundShow);
             tip.addEvent(this.options.hideOn, this.boundHide);
         }
+
         this.fireEvent('show', [tip, element]);
         return this;
     },
 
-    hide: function(event, element) {
+    hide: function(element) {
         var tip = element.retrieve('floatingtip');
         if (!tip) {
             if (this.options.position == 'inside') {

mindplot/src/main/javascript/widget/IconPanel.js

@@ -22,6 +22,11 @@ mindplot.widget.IconPanel = new Class({
         this.parent(buttonId, model);
     },
 
+    _updateSelectedItem : function() {
+        return this.getPanelElem();
+
+    },
+
     buildPanel: function() {
         var content = new Element('div', {'class':'toolbarPanel','id':'IconsPanel'});
         content.setStyles({width:253,height:200,padding:5});

mindplot/src/main/javascript/widget/LinkIconTooltip.js

@@ -29,7 +29,8 @@ mindplot.widget.LinkIconTooltip = new Class({
             arrowOffset : 10,
             center: true,
             arrowSize: 15,
-            offset : {x:10,y:20}
+            offset : {x:10,y:20},
+            className: 'linkTip'
         });
     },
 

mindplot/src/main/javascript/widget/ListToolbarPanel.js

@@ -28,27 +28,27 @@ mindplot.widget.ListToolbarPanel = new Class({
         var menuElems = this.getPanelElem().getElements('div');
         menuElems.forEach(function(elem) {
             elem.addEvent('click', function(event) {
-                var value = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
-                this.getModel().setValue(value);
                 event.stopPropagation();
                 this.hide();
+
+                var value = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
+                this.getModel().setValue(value);
             }.bind(this));
         }.bind(this));
     },
 
-    show : function() {
-        if (!this.isVisible()) {
-            var menuElems = this.getPanelElem().getElements('div');
-            var value = this.getModel().getValue();
-            menuElems.forEach(function(elem) {
-                var elemValue = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
-                if (elemValue == value)
-                    elem.className = "toolbarPanelLinkSelectedLink";
-                else
-                    elem.className = "toolbarPanelLink";
-            });
-
-            this.parent();
-      }
+    _updateSelectedItem : function() {
+        var panelElem = this.getPanelElem();
+        var menuElems = panelElem.getElements('div');
+        var value = this.getModel().getValue();
+        menuElems.forEach(function(elem) {
+            var elemValue = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
+            $assert(elemValue,"elemValue can not be null");
+            if (elemValue == value)
+                elem.className = "toolbarPanelLinkSelectedLink";
+            else
+                elem.className = "toolbarPanelLink";
+        });
+        return panelElem;
     }
 });

mindplot/src/main/javascript/widget/Menu.js

@@ -359,20 +359,20 @@ mindplot.widget.Menu = new Class({
             })
         }.bind(this));
 
-        designer.addEvent("modelUpdate", function(event) {
-            if (event.undoSteps > 0) {
-                $("undoEdition").setStyle("background-image", "url(../images/file_undo.png)");
-            } else {
-                $("undoEdition").setStyle("background-image", "url(../images/file_undo_dis.png)");
-            }
-
-            if (event.redoSteps > 0) {
-                $("redoEdition").setStyle("background-image", "url(../images/file_redo.png)");
-            } else {
-                $("redoEdition").setStyle("background-image", "url(../images/file_redo_dis.png)");
-            }
-
-        });
+//        designer.addEvent("modelUpdate", function(event) {
+//            if (event.undoSteps > 0) {
+//                $("undoEdition").setStyle("background-image", "url(../nicons/undo.png)");
+//            } else {
+//                $("undoEdition").setStyle("background-image", "url(../nicons/undo.png)");
+//            }
+//
+//            if (event.redoSteps > 0) {
+//                $("redoEdition").setStyle("background-image", "url(../nicons/redo.png)");
+//            } else {
+//                $("redoEdition").setStyle("background-image", "url(../nicons/redo.png)");
+//            }
+//
+//        });
     },
 
     addButton:function (buttonId, topic, rel, fn) {

mindplot/src/main/javascript/widget/ToolbarItem.js

@@ -24,8 +24,9 @@ mindplot.widget.ToolbarItem = new Class({
         this._buttonId = buttonId;
         this._fn = fn;
         this._options = options;
+        this._enable = false;
         this.enable();
-//        this._tip = this._registerTip();
+//        this._registerTip();
 
     },
 

mindplot/src/main/javascript/widget/ToolbarPaneItem.js

@@ -21,6 +21,7 @@ mindplot.widget.ToolbarPaneItem = new Class({
     initialize : function(buttonId, model) {
         $assert(buttonId, "buttonId can not be null");
         $assert(model, "model can not be null");
+        this._model = model;
         var fn = function() {
             // Is the panel being displayed ?
             if (this.isVisible()) {
@@ -31,19 +32,46 @@ mindplot.widget.ToolbarPaneItem = new Class({
 
         }.bind(this);
         this.parent(buttonId, fn, {topicAction:true,relAction:false});
-        this._model = model;
-        this._panelId = this._init().id;
+        this._panelElem = this._init();
+        this._visible = false;
     },
 
     _init:function () {
         // Load the context of the panel ...
         var panelElem = this.buildPanel();
-        panelElem.setStyle('cursor','default');
+        panelElem.setStyle('cursor', 'default');
         var buttonElem = this.getButtonElem();
 
-        // Add panel content ..
-        panelElem.setStyle('display', 'none');
-        panelElem.inject(buttonElem);
+        var item = this;
+        this._tip = new mindplot.widget.FloatingTip(buttonElem, {
+            html: true,
+            position: 'bottom',
+            arrowOffset : 5,
+            center: true,
+            arrowSize: 7,
+            showDelay: 0,
+            hideDelay: 0,
+            content: function() {
+                return item._updateSelectedItem();
+            }.bind(this),
+            className: 'toolbarPaneTip',
+            motionOnShow:false,
+            motionOnHide:false,
+            motion: 0,
+            distance: 0,
+            showOn: 'xxxx',
+            hideOn: 'xxxx',
+            preventHideOnOver:true,
+            offset: {x:-4,y:0}
+        });
+
+        this._tip.addEvent('hide', function() {
+            this._visible = false
+        }.bind(this));
+
+        this._tip.addEvent('show', function() {
+            this._visible = true
+        }.bind(this));
 
         return panelElem;
     },
@@ -53,34 +81,55 @@ mindplot.widget.ToolbarPaneItem = new Class({
     },
 
     getPanelElem : function() {
-        return $(this._panelId);
+        return this._panelElem;
     }.protect(),
 
     show : function() {
         if (!this.isVisible()) {
             this.parent();
-            this.getButtonElem().className = 'buttonActive';
-            this.getPanelElem().setStyle('display', 'block');
+            this._tip.show(this.getButtonElem());
+            this.getButtonElem().className = 'buttonExtActive';
         }
     },
 
     hide : function() {
         if (this.isVisible()) {
-            this.getButtonElem().className = 'buttonOn';
-            this.getPanelElem().setStyle('display', 'none');
             this.parent();
+            this._tip.hide(this.getButtonElem());
+            this.getButtonElem().className = 'buttonExtOn';
         }
     },
 
     isVisible : function() {
-        return this.getPanelElem().getStyle('display') == 'block';
+        return this._visible;
     },
 
-    disable: function() {
+    disable : function() {
         this.hide();
-        this.parent();
+        var elem = this.getButtonElem();
+        if (this._enable) {
+            elem.removeEvent('click', this._fn);
+            elem.removeClass('buttonExtOn');
+
+            // Todo: Hack...
+            elem.removeClass('buttonOn');
+
+            elem.addClass('buttonExtOff');
+            this._enable = false;
+        }
     },
 
+    enable : function() {
+        var elem = this.getButtonElem();
+        if (!this._enable) {
+            elem.addEvent('click', this._fn);
+            elem.removeClass('buttonExtOff');
+            elem.addClass('buttonExtOn');
+            this._enable = true;
+        }
+    },
+
+
     buildPanel : function() {
         throw "Method must be implemented";
     }.protect()

wise-doc/src/main/webapp/css/editor2.css

@@ -1,8 +1,8 @@
 @import "/mindplot/src/main/javascript/widget/lightbox.css";
 @import "/mindplot/src/main/javascript/libraries/moodialog/css/MooDialog.css";
 
-@header-height : 70px;
-@header-toolbar-height : 30px;
+@header-height : 75px;
+@header-toolbar-height : 35px;
 @header-info-height : @header-height - @header-toolbar-height;
 
 /* Common Default Style */
@@ -247,9 +247,22 @@ h4 {
 /********************************************************************************/
 
 div#header {
-    background-color: #000000;
     width: 100%;
     height: @header-height;
+    background: #393939; /* Old browsers */
+    background: -moz-linear-gradient(top, #393939 0%, #000000 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #393939), color-stop(100%, #000000)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top, #393939 0%, #000000 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top, #393939 0%, #000000 100%); /* Opera11.10+ */
+    background: -ms-linear-gradient(top, #393939 0%, #000000 100%); /* IE10+ */
+    background: linear-gradient(top, #393939 0%, #000000 100%); /* W3C */
+}
+
+div#headerLogo {
+    background: url(../nicons/logo-small.png) no-repeat center top;
+    height: 40px;
+    width: 80px;
+    float: left;
 }
 
 div#headerInfo {
@@ -258,66 +271,90 @@ div#headerInfo {
     color: white;
 }
 
+div#headerActions {
+    text-align: right;
+    margin-top: 13px;
+    padding-right: 10px;
+    color: white;
+    float: right;
+}
+
+div#headerActions span {
+    border-bottom: 3px solid rgb(247, 201, 49);
+}
+
+div#headerMapTitle {
+    width: 200px;
+    height:(@header-info-height ) - 13;
+    text-align: left;
+    padding-top: 13px;
+    padding-left: 50px;
+    color: white;
+    float: left;
+    font-style: italic;
+}
+
+div#headerMapTitle span {
+    padding: 4px 50px ;
+    border: 1px solid rgb(90, 90, 90);
+    background-color: rgb(45, 45, 45);
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
+}
+
 div#toolbar {
     width: 100%;
     height: @header-toolbar-height;
-    background: whiteSmoke;
-    border-top: 1px solid #E5E5E5;
+    background-image: linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
+    background-image: -o-linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
+    background-image: -moz-linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
+    background-image: -webkit-linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
+    background-image: -ms-linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
+
+    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.47, rgb(229, 227, 209)), color-stop(0.87, rgb(252, 250, 237)));
+    border-bottom: 3px double rgb(190, 190, 190);
+    border-top: 1px solid rgb(190, 190, 190);
 }
 
 div#toolbar .buttonContainer {
     height: @header-toolbar-height;
     float: left;
-    color: black;
-    border: 1px solid #BBB4D6;
+    /*color: black;*/
+    /*border: 1px solid #BBB4D6;*/
     margin-left: 5px;
 }
 
+/******************************************************************************************/
+/* Buttons*/
+/******************************************************************************************/
+
 div#toolbar .buttonOn, div#toolbar .buttonOff, div#toolbar .buttonActive, div#toolbar .buttonOn:hover {
-    width: 30px;
-    height: @header-toolbar-height;
+    width: 28px;
+    height: 28px;
     float: left;
     text-align: center;
+    z-index: 4;
+    margin-top: 3px;
+    padding-top: 2px;
+    padding-left: 2px;
 }
 
-div#toolbar .buttonOn:hover, div#toolbar .buttonActive {
-    margin: 0;
-    cursor: pointer;
-    border: 1px solid #d3d3d3;
+div#toolbar .buttonOn:hover {
     cursor: pointer;
     opacity: 1;
+    background: url(../nicons/btn-bg-hover.png) no-repeat center top;
 }
 
 div#toolbar .buttonOn {
-    margin: 1px;
     opacity: 0.8;
+    background: url(../nicons/btn-bg-normal.png) no-repeat center top;
 }
 
 div#toolbar .buttonOff {
-    margin: 1px;
     opacity: 0.4;
-}
-
-div#toolbar .button img {
-    height: @header-toolbar-height;
-    border: 0;
-}
-
-div#saveButton {
-    background: url(../images/save.png) no-repeat center top;
-}
-
-div#undoEdition {
-    background: url(../images/file_undo_dis.png) no-repeat center top;
-}
-
-div#redoEdition {
-    background: url(../images/file_redo_dis.png) no-repeat center top;
-}
-
-div#export {
-    background: url(../images/file_export.png) no-repeat center top;
-    position: relative;
+    background: url(../nicons/btn-bg-normal.png) no-repeat center top;
 }
 
 div#exportAnchor {
@@ -328,101 +365,149 @@ div#exportAnchor {
     left: 0;
 }
 
-div#zoomIn {
-    background: url(../images/zoom_in.png) no-repeat center top;
-}
-
-div#zoomOut {
-    background: url(../images/zoom_out.png) no-repeat center top;
-}
-
-div#addTopic {
-    background: url(../images/topic_add.png) no-repeat center top;
-}
-
-div#deleteTopic {
-    background: url(../images/topic_delete.png) no-repeat center top;
-}
-
-div#topicColor {
-    background: url(../images/topic_bgcolor.png) no-repeat center top;
-    z-index: 4;
-}
-
-div#topicIcon {
-    background: url(../images/topic_icon.png) no-repeat center top;
-    z-index: 4;
-}
-
-div#topicNote {
-    background: url(../images/note.png) no-repeat center top;
-    z-index: 4;
-}
-
-div#topicNote {
-    background: url(../images/topic_icon.png) no-repeat center top;
-    z-index: 4;
-}
-
-div#topicLink {
-    background: url(../images/topic_link.png) no-repeat center top;
-    z-index: 4;
-}
-
-div#topicNote {
-    background-image: url(../images/note.png);
-    z-index: 4;
-}
-
-div#topicBorder {
-    background: url(../images/topic_border.png) no-repeat center top;
-}
-
-div#fontFamily {
-    background: url(../images/font_type.png) no-repeat center top;
-}
-
-div#topicShape {
-    background: url(../images/topic_shape.png) no-repeat center top;
-}
-
-div#fontBold {
-    background: url(../images/font_bold.png) no-repeat center top;
-}
-
-div#fontItalic {
-    background: url(../images/font_italic.png) no-repeat center top;
-}
-
-div#fontColor {
-    background: url(../images/font_color.png) no-repeat center top;
-    z-index: 4;
-}
-
-div#fontSize {
+div#toolbar .buttonExtOn, div#toolbar .buttonExtOff, div#toolbar .buttonExtActive, div#toolbar .buttonExtOn:hover {
+    width: 40px;
+    height: 28px;
     float: left;
-    background: url(../images/font_size.png) no-repeat center top;
+    text-align: left;
+    z-index: 4;
+    margin-top: 3px;
+    padding-top: 2px;
+    padding-left: 5px;
 }
 
-div#font-size {
-    font-size: 10px;
+div#toolbar .buttonExtOn:hover {
+    opacity: 1;
+    background: url(../nicons/btne-bg-hover.png) no-repeat center top;
+
 }
 
-div#shareIt {
-    background: url(../images/collab_share.png) no-repeat center top;
+div#toolbar .buttonExtActive {
+    opacity: 1;
+    background: url(../nicons/btne-bg-selected.png) no-repeat center top;
+
 }
 
-div#publishIt {
-    background: url(../images/collab_publish.png) no-repeat center top;
+div#toolbar .buttonExtOn {
+    opacity: 0.8;
+    background: url(../nicons/btne-bg-normal.png) no-repeat center top;
 }
 
-div#tagIt {
-    background: url(../images/collab_tag.png) no-repeat center top;
+div#toolbar .buttonExtOff {
+    opacity: 0.4;
+    background: url(../nicons/btne-bg-normal.png) no-repeat center top;
 }
 
+div#exportAnchor {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+
+/*div#saveButton {*/
+/*background: url(../nicons/save.png) no-repeat center top;*/
+/*}*/
+
+/*div#undoEdition {*/
+/*background: url(../nicons/undo.png) no-repeat center top;*/
+/*}*/
+
+/*div#redoEdition {*/
+/*background: url(../nicons/redo.png) no-repeat center top;*/
+/*}*/
+
+/*div#export {*/
+/*background: url(../nicons/export.png) no-repeat center top;*/
+/*}*/
+
+/*div#zoomIn {*/
+/*background: url(../nicons/zoom-in.png) no-repeat center top;*/
+/*}*/
+
+/*div#zoomOut {*/
+/*background: url(../nicons/zoom-out.png) no-repeat center top;*/
+/*}*/
+
+/*div#addTopic {*/
+/*background: url(../nicons/topic-add.png) no-repeat center top;*/
+/*}*/
+
+/*div#deleteTopic {*/
+/*background: url(../nicons/topic-delete.png) no-repeat center top;*/
+/*}*/
+
+/*div#topicColor {*/
+/*background: url(../nicons/topic-color.png) no-repeat center top;*/
+/*}*/
+
+/*div#topicIcon {*/
+/*background: url(../nicons/topic-icon.png) no-repeat center top;*/
+/*}*/
+
+/*div#topicNote {*/
+/*background: url(../nicons/note.png) no-repeat center top;*/
+/*}*/
+
+/*div#topicNote {*/
+/*background: url(../nicons/topic-icon.png) no-repeat center top;*/
+/*z-index: 4;*/
+/*}*/
+
+/*div#topicLink {*/
+/*background: url(../nicons/topic-link.png) no-repeat center top;*/
+/*z-index: 4;*/
+/*}*/
+
+/*div#topicNote {*/
+/*background-image: url(../nicons/note.png);*/
+/*z-index: 4;*/
+/*}*/
+
+/*div#topicBorder {*/
+/*background: url(../nicons/topic-border.png) no-repeat center top;*/
+/*}*/
+
+/*div#fontFamily {*/
+/*background: url(../nicons/font-type.png) no-repeat center top;*/
+/*}*/
+
+/*div#topicShape {*/
+/*background: url(../nicons/topic-shape.png) no-repeat center top;*/
+/*}*/
+
+/*div#fontBold {*/
+/*background: url(../nicons/font-bold.png) no-repeat center top;*/
+/*}*/
+
+/*div#fontItalic {*/
+/*background: url(../nicons/font-italic.png) no-repeat center top;*/
+/*}*/
+
+/*div#fontColor {*/
+/*background: url(../nicons/font-color.png) no-repeat center top;*/
+/*}*/
+
+/*div#fontSize {*/
+/*background: url(../nicons/font-size.png) no-repeat center top;*/
+/*}*/
+
+/*div#shareIt {*/
+/*background: url(../nicons/share.png) no-repeat center top;*/
+/*}*/
+
+/*div#publishIt {*/
+/*background: url(../nicons/publish.png) no-repeat center top;*/
+/*}*/
+
+/*div#tagIt {*/
+/*background: url(../nicons/tag.png) no-repeat center top;*/
+/*}*/
+
 div#topicRelation {
     width: 56px;
-    background: url(../images/topic_relationship.png) no-repeat center top;
+    background: url(../nicons/topic-relation.png) no-repeat center top;
     z-index: 4;
 }
 
@@ -435,20 +520,20 @@ div#colorPalette {
     top: 89px;
 }
 
-.toolbarPanel {
-    z-index: 4;
-    top: @header-height+3;
-    -moz-transition: opacity 0.218s ease 0s;
-    background: none repeat scroll 0 0 #FFFFFF;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-    cursor: default;
-    font-size: 13px;
-    margin: 0;
-    outline: medium none;
-    padding: 0 0 6px;
-    position: absolute;
-}
+/*.toolbarPanel {*/
+/*z-index: 4;*/
+/*top: @header-height;*/
+/*-moz-transition: opacity 0.218s ease 0s;*/
+/*background: none repeat scroll 0 0 #FFFFFF;*/
+/*border: 1px solid rgba(0, 0, 0, 0.2);*/
+/*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);*/
+/*cursor: default;*/
+/*font-size: 13px;*/
+/*margin: 0;*/
+/*outline: medium none;*/
+/*padding: 0 0 6px;*/
+/*position: absolute;*/
+/*}*/
 
 div.toolbarPanelLink, div.toolbarPanelLinkSelectedLink {
     cursor: pointer;
@@ -473,7 +558,7 @@ div#mindplot {
 }
 
 div#workspaceContainer {
-    background: url(../images/grid.gif) bottom left repeat !important;
+    /*background: url(../images/grid.gif) bottom left repeat !important;*/
 }
 
 div#small_error_icon {
@@ -495,17 +580,117 @@ div#small_error_icon {
     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
 }
 
-.toolbarTip {
-    background-color: black;
-    padding: 5px 5px;
-    color: #f5f5f5;
+.linkTip {
+    background-color: #dfcf3c;
+    padding: 5px 15px;
+    color: #666666;
     /*font-weight: bold;*/
     /*width: 100px;*/
-    font-size: 11px;
+    font-size: 13px;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
 }
 
+.toolbarPaneTip {
+    background-color: rgb(228, 226, 210);
+    padding: 5px 5px;
+    color: #f5f5f5;
+    /*font-weight: bold;*/
+    /*width: 100px;*/
+    font-size: 11px;
+    -moz-border-radius: 60px;
+    -webkit-border-radius: 6px;
+    border-radius: 6px;
+    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
+    border: 3px double rgb(190, 190, 190);
+}
 
+.toolbarTip {
+    background-color: #000000;
+    padding: 5px 5px;
+    color: #f5f5f5;
+    /*font-weight: bold;*/
+    /*width: 100px;*/
+    font-size: 11px;
+}
+
+/* */
+.btn-primary {
+    cursor: pointer;
+    display: inline-block;
+    padding: 5px 14px 6px;
+    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+    color: #333;
+    font-size: 13px;
+    line-height: normal;
+    border: 1px solid #ccc;
+    border-bottom-color: #bbb;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -webkit-transition: 0.1s linear all;
+    -moz-transition: 0.1s linear all;
+    -ms-transition: 0.1s linear all;
+    -o-transition: 0.1s linear all;
+    transition: 0.1s linear all;
+    color: #ffffff;
+    background-color: #0064cd;
+    background-repeat: repeat-x;
+    background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
+    background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
+    background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
+    background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
+    background-image: -o-linear-gradient(top, #049cdb, #0064cd);
+    background-image: linear-gradient(top, #049cdb, #0064cd);
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+    border-color: #0064cd #0064cd #003f81;
+    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+}
+
+.btn-primary:hover {
+    background-position: 0 -15px;
+    text-decoration: none;
+}
+
+.btn-secondary {
+    cursor: pointer;
+    display: inline-block;
+    background-color: #e6e6e6;
+    background-repeat: no-repeat;
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
+    background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+    background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
+    background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+    background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+    background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+    padding: 5px 14px 6px;
+    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+    color: #333;
+    font-size: 13px;
+    line-height: normal;
+    border: 1px solid #ccc;
+    border-bottom-color: #bbb;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -webkit-transition: 0.1s linear all;
+    -moz-transition: 0.1s linear all;
+    -ms-transition: 0.1s linear all;
+    -o-transition: 0.1s linear all;
+    transition: 0.1s linear all;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+
+.btn-secondary:hover {
+    background-position: 0 -15px;
+    text-decoration: none;
+}

wise-doc/src/main/webapp/html/editor.html

@@ -8,18 +8,16 @@
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <![endif]-->
     <!--<script type="text/javascript" src="http://docs.google.com/brix/static/api/js/jsapi.nocache.js"></script>-->
-
+    <script type='text/javascript' src='../js/less-1.1.3.min.js'></script>
     <link rel="stylesheet/less" type="text/css" href="../css/editor2.css"/>
-    <link rel="stylesheet" type="text/css" href='/mindplot/src/main/javascript/libraries/moodialog/css/MooDialog.css'/>
 
+    <link rel="stylesheet" type="text/css" href='/mindplot/src/main/javascript/libraries/moodialog/css/MooDialog.css'/>
     <script type='text/javascript'
             src='https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js'></script>
-    <script type='text/javascript' src='../js/less-1.1.3.min.js'></script>
 
     <script type='text/javascript'
             src='/mindplot/src/main/javascript/libraries/mootools/mootools-more-1.3.2.1-yui.js'></script>
     <script type='text/javascript' src='/core-js/target/classes/core.js'></script>
-
     <script type="text/javascript">
 
         //Google-Brix framework load callback function
@@ -119,35 +117,76 @@
 
 <div id="header">
     <div id="headerInfo">
-          Algo a aca ....
+        <div id="headerActions">
+            <span>MyWiseMappigs</span> | <span>Settings</span> | <span>Logout</span>
+        </div>
+        <div id="headerLogo"></div>
+        <div id="headerMapTitle">Title: <span>Hola</span></div>
     </div>
     <div id="toolbar">
         <div id="editTab" class="tabContent">
             <div id="file" class="buttonContainer">
-                <div id="undoEdition" class="buttonOn" title="Undo Edition"></div>
-                <div id="redoEdition" class="buttonOn" title="Redo Edition"></div>
+                <div id="undoEdition" class="buttonOn" title="Undo Edition">
+                    <img src="../nicons/undo.png"/>
+                </div>
+                <div id="redoEdition" class="buttonOn" title="Redo Edition">
+                    <img src="../nicons/redo.png"/>
+                </div>
             </div>
             <div id="zoom" class="buttonContainer">
-                <div id="zoomIn" class="buttonOn" title="Zoom In"></div>
-                <div id="zoomOut" class="buttonOn" title="Zoom Out"></div>
+                <div id="zoomIn" class="buttonOn" title="Zoom In">
+                    <img src="../nicons/zoom-in.png"/>
+                </div>
+                <div id="zoomOut" class="buttonOn" title="Zoom Out">
+                    <img src="../nicons/zoom-out.png"/>
+                </div>
             </div>
             <div id="node" class="buttonContainer">
-                <div id="topicShape" class="buttonOn" title="SYMB_TOPIC_SHAPE"></div>
-                <div id="addTopic" class="buttonOn" title="SYMB_ TOPIC_ADD"></div>
-                <div id="deleteTopic" class="buttonOn" title="Delete"></div>
-                <div id="topicBorder" class="buttonOn" title="Boder Color"></div>
-                <div id="topicColor" class="buttonOn" title="Background Color"></div>
-                <div id="topicIcon" class="buttonOn" title="Add Icon"></div>
-                <div id="topicNote" class="buttonOn" title="Add Note"></div>
-                <div id="topicLink" class="buttonOn" title="Add Link"></div>
-                <div id="topicRelation" class="buttonOn" title="Add Relationship"></div>
+                <div id="topicShape" class="buttonExtOn" title="Topic Shape">
+                    <img src="../nicons/topic-shape.png"/>
+                </div>
+                <div id="addTopic" class="buttonOn" title="Add Topic">
+                    <img src="../nicons/topic-add.png"/>
+                </div>
+                <div id="deleteTopic" class="buttonOn" title="Delete">
+                    <img src="../nicons/topic-delete.png"/>
+                </div>
+                <div id="topicBorder" class="buttonOn" title="Border Color">
+                    <img src="../nicons/topic-border.png"/>
+                </div>
+                <div id="topicColor" class="buttonExtOn" title="Background Color">
+                    <img src="../nicons/topic-color.png"/>
+                </div>
+                <div id="topicIcon" class="buttonExtOn" title="Add Icon">
+                    <img src="../nicons/topic-icon.png"/>
+                </div>
+                <div id="topicNote" class="buttonOn" title="Add Note">
+                    <img src="../nicons/topic-note.png"/>
+                </div>
+                <div id="topicLink" class="buttonOn" title="Add Link">
+                    <img src="../nicons/topic-link.png"/>
+                </div>
+                <div id="topicRelation" class="buttonOn" title="Add Relationship">
+                    <img src="../nicons/topic-relation.png"/>
+                </div>
             </div>
             <div id="font" class="buttonContainer">
-                <div id="fontFamily" class="buttonOn" title="Font Style"></div>
-                <div id="fontSize" class="buttonOn" title="Font Size"></div>
-                <div id="fontBold" class="buttonOn" title="Bold Style"></div>
-                <div id="fontItalic" class="buttonOn" title="Italic Style"></div>
-                <div id="fontColor" class="buttonOn" title="Fond Color"></div>
+                <div id="fontFamily" class="buttonOn" title="Font Style">
+                    <img src="../nicons/font-type.png"/>
+                </div>
+                <div id="fontSize" class="buttonExtOn" title="Font Size">
+                    <img src="../nicons/font-size.png"/>
+                </div>
+                <div id="fontBold" class="buttonOn" title="Bold Style">
+                    <img src="../nicons/topic-border.png"/>
+                </div>
+                <div id="fontItalic" class="buttonOn" title="Italic Style">
+                    <img src="../nicons/font-italic.png"/>
+                </div>
+                <div id="fontColor" class="buttonExtOn" title="Fond Color">
+                    <img src="../nicons/font-color.png"/>
+
+                </div>
             </div>
         </div>
     </div>

wise-webapp/src/main/webapp/css/editor2.css

@@ -0,0 +1,699 @@
+@import "widget/lightbox.css";
+@import "libraries/moodialog/css/MooDialog.css";
+
+
+
+/* Common Default Style */
+html {
+    overflow: hidden;
+}
+
+body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
+    margin: 0;
+    padding: 0;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+fieldset, img {
+    border: 0;
+}
+
+address, caption, cite, code, dfn, em, strong, th, var {
+    font-style: normal;
+    font-weight: normal;
+}
+
+ol, ul {
+    list-style: none;
+}
+
+caption, th {
+    text-align: left;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-size: 100%;
+    font-weight: normal;
+}
+
+q:before, q:after {
+    content: '';
+}
+
+abbr, acronym {
+    border: 0;
+}
+
+/**
+ * Percents could work for IE, but for backCompat purposes, we are using keywords.
+ * x-small is for IE6/7 quirks mode.
+ *
+ */
+body {
+    font: 13px arial, helvetica, clean, sans-serif;
+    font-size: small;
+    font: x-small;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+}
+
+table {
+    font-size: inherit;
+    font-size: 100%;
+}
+
+/**
+ * 99% for safari; 100% is too large
+ */
+select, input, textarea {
+    font: 99% arial, helvetica, clean, sans-serif;
+}
+
+/**
+ * Bump up !IE to get to 13px equivalent
+ */
+pre, code {
+    font: 115% monospace;
+    font-size: 100%;
+}
+
+/**
+ * Default line-height based on font-size rather than "computed-value"
+ * see: http://www.w3.org/TR/CSS21/visudet.html#line-height
+ */
+
+body * {
+    line-height: 1.22em;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font: normal 80% "trebuchet ms", verdana, arial, helvetica, sans-serif;
+    background-color: #fff;
+}
+
+img {
+    border: 0;
+}
+
+form {
+    padding: 0;
+    margin: 0;
+}
+
+p {
+    margin: 5px 0 5px 0;
+}
+
+ul {
+    list-style-position: inside;
+}
+
+a:link, a:visited {
+    font: bold 100%;
+    text-decoration: underline;
+    color: black;
+}
+
+a:hover, a:active {
+    font: bold 100%;
+    text-decoration: underline;
+    color: black;
+}
+
+h2 {
+    font-size: 160%;
+    color: #8e9181;
+}
+
+h1 {
+    font-style: normal;
+    font-size: 180%;
+    color: white;
+    padding-bottom: 2px;
+}
+
+h3 {
+    /* use as subhead on main body */
+    clear: left;
+    font-style: normal;
+    font-size: 130%;
+    color: #6b6f5b;
+}
+
+h4 {
+    /* use as headers in footer */
+    font-weight: bold;
+    font-size: 120%;
+    border-bottom: 1px solid #8e9181;
+    color: #e2e3dd;
+    padding-bottom: 10px;
+    width: 400px;
+}
+
+/**********************************************************/
+/* End: Common Default Style */
+/**********************************************************/
+
+/**********************************************************/
+/* Error Dialog ... */
+/**********************************************************/
+
+#waitDialog {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    height: 200px;
+}
+
+#waitingContainer, #errorContainer {
+    position: relative;
+    top: 80px;
+    height: 120px; /*background: whitesmoke;*/
+    background: #FEFEFE;
+    opacity: .99;
+    padding: 15px;
+    width: 100%;
+    border: 1px solid;
+    border-color: #a9a9a9;
+
+}
+
+#errorContainer {
+    width: 400px;
+    border: 1px solid red;
+}
+
+#waitingContainer .loadingText {
+    position: relative;
+    top: 50%;
+    margin-top: -35px;
+    font-size: 30px;
+    font-weight: bold;
+    vertical-align: text-bottom;
+    height: 30px;
+    float: left;
+}
+
+#errorContainer .loadingText {
+    position: relative;
+    top: 50%;
+    margin-top: -80px;
+    font-size: 15px;
+    font-weight: bold;
+    vertical-align: text-bottom;
+    height: 30px;
+    float: right;
+    padding-left: 120px;
+}
+
+#waitingContainer .loadingIcon {
+    position: relative;
+    background: url(../images/loadingIcon.gif) no-repeat;
+    top: 50%;
+    margin-top: -65px;
+    height: 100px;
+    width: 121px;
+    float: left;
+    clear: both;
+}
+
+#errorContainer .loadingIcon {
+    position: relative;
+    background: url(../images/errorIcon.png) no-repeat;
+    top: 50%;
+    margin-top: -65px;
+    height: 100px;
+    width: 121px;
+    float: left;
+    clear: both;
+}
+
+/********************************************************************************/
+/* Toolbar Styles */
+/********************************************************************************/
+
+div#header {
+    width: 100%;
+    height: 75px;
+    background: #393939; /* Old browsers */
+    background: -moz-linear-gradient(top, #393939 0%, #000000 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #393939), color-stop(100%, #000000)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top, #393939 0%, #000000 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top, #393939 0%, #000000 100%); /* Opera11.10+ */
+    background: -ms-linear-gradient(top, #393939 0%, #000000 100%); /* IE10+ */
+    background: linear-gradient(top, #393939 0%, #000000 100%); /* W3C */
+}
+
+div#headerLogo {
+    background: url(../nicons/logo-small.png) no-repeat center top;
+    height: 40px;
+    width: 80px;
+    float: left;
+}
+
+div#headerInfo {
+    width: 100%;
+    height: 45px;
+    color: white;
+}
+
+div#headerActions {
+    text-align: right;
+    margin-top: 13px;
+    padding-right: 10px;
+    color: white;
+    float: right;
+}
+
+div#headerActions span {
+    border-bottom: 3px solid rgb(247, 201, 49);
+}
+
+div#headerActions a {
+    color: white;
+    text-decoration: none;
+}
+
+div#headerMapTitle {
+    width: 200px;
+    height:(45 ) - 13;
+    text-align: left;
+    padding-top: 13px;
+    padding-left: 50px;
+    color: white;
+    float: left;
+    font-style: italic;
+}
+
+div#headerMapTitle span {
+    padding: 4px 50px;
+    border: 1px solid rgb(90, 90, 90);
+    background-color: rgb(45, 45, 45);
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
+}
+
+div#toolbar {
+    width: 100%;
+    height: 35px;
+    background-image: linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
+    background-image: -o-linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
+    background-image: -moz-linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
+    background-image: -webkit-linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
+    background-image: -ms-linear-gradient(bottom, rgb(229, 227, 209) 47%, rgb(252, 250, 237) 87%);
+
+    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.47, rgb(229, 227, 209)), color-stop(0.87, rgb(252, 250, 237)));
+    border-bottom: 3px double rgb(190, 190, 190);
+    border-top: 1px solid rgb(190, 190, 190);
+}
+
+div#toolbar .buttonContainer {
+    height: 35px;
+    float: left;
+    /*color: black;*/
+    /*border: 1px solid #BBB4D6;*/
+    margin-left: 5px;
+}
+
+/******************************************************************************************/
+/* Buttons*/
+/******************************************************************************************/
+
+div#toolbar .buttonOn, div#toolbar .buttonOff, div#toolbar .buttonActive, div#toolbar .buttonOn:hover {
+    width: 28px;
+    height: 28px;
+    float: left;
+    text-align: center;
+    z-index: 4;
+    margin-top: 3px;
+    padding-top: 2px;
+    padding-left: 2px;
+}
+
+div#toolbar .buttonOn:hover {
+    cursor: pointer;
+    opacity: 1;
+    background: url(../nicons/btn-bg-hover.png) no-repeat center top;
+}
+
+div#toolbar .buttonOn {
+    opacity: 0.8;
+    background: url(../nicons/btn-bg-normal.png) no-repeat center top;
+}
+
+div#toolbar .buttonOff {
+    opacity: 0.4;
+    background: url(../nicons/btn-bg-normal.png) no-repeat center top;
+}
+
+div#exportAnchor {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+
+div#toolbar .buttonExtOn, div#toolbar .buttonExtOff, div#toolbar .buttonExtActive, div#toolbar .buttonExtOn:hover {
+    width: 40px;
+    height: 28px;
+    float: left;
+    text-align: left;
+    z-index: 4;
+    margin-top: 3px;
+    padding-top: 2px;
+    padding-left: 5px;
+}
+
+div#toolbar .buttonExtOn:hover {
+    opacity: 1;
+    background: url(../nicons/btne-bg-hover.png) no-repeat center top;
+
+}
+
+div#toolbar .buttonExtActive {
+    opacity: 1;
+    background: url(../nicons/btne-bg-selected.png) no-repeat center top;
+
+}
+
+div#toolbar .buttonExtOn {
+    opacity: 0.8;
+    background: url(../nicons/btne-bg-normal.png) no-repeat center top;
+}
+
+div#toolbar .buttonExtOff {
+    opacity: 0.4;
+    background: url(../nicons/btne-bg-normal.png) no-repeat center top;
+}
+
+div#exportAnchor {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+
+/*div#saveButton {*/
+/*background: url(../nicons/save.png) no-repeat center top;*/
+/*}*/
+
+/*div#undoEdition {*/
+/*background: url(../nicons/undo.png) no-repeat center top;*/
+/*}*/
+
+/*div#redoEdition {*/
+/*background: url(../nicons/redo.png) no-repeat center top;*/
+/*}*/
+
+/*div#export {*/
+/*background: url(../nicons/export.png) no-repeat center top;*/
+/*}*/
+
+/*div#zoomIn {*/
+/*background: url(../nicons/zoom-in.png) no-repeat center top;*/
+/*}*/
+
+/*div#zoomOut {*/
+/*background: url(../nicons/zoom-out.png) no-repeat center top;*/
+/*}*/
+
+/*div#addTopic {*/
+/*background: url(../nicons/topic-add.png) no-repeat center top;*/
+/*}*/
+
+/*div#deleteTopic {*/
+/*background: url(../nicons/topic-delete.png) no-repeat center top;*/
+/*}*/
+
+/*div#topicColor {*/
+/*background: url(../nicons/topic-color.png) no-repeat center top;*/
+/*}*/
+
+/*div#topicIcon {*/
+/*background: url(../nicons/topic-icon.png) no-repeat center top;*/
+/*}*/
+
+/*div#topicNote {*/
+/*background: url(../nicons/note.png) no-repeat center top;*/
+/*}*/
+
+/*div#topicNote {*/
+/*background: url(../nicons/topic-icon.png) no-repeat center top;*/
+/*z-index: 4;*/
+/*}*/
+
+/*div#topicLink {*/
+/*background: url(../nicons/topic-link.png) no-repeat center top;*/
+/*z-index: 4;*/
+/*}*/
+
+/*div#topicNote {*/
+/*background-image: url(../nicons/note.png);*/
+/*z-index: 4;*/
+/*}*/
+
+/*div#topicBorder {*/
+/*background: url(../nicons/topic-border.png) no-repeat center top;*/
+/*}*/
+
+/*div#fontFamily {*/
+/*background: url(../nicons/font-type.png) no-repeat center top;*/
+/*}*/
+
+/*div#topicShape {*/
+/*background: url(../nicons/topic-shape.png) no-repeat center top;*/
+/*}*/
+
+/*div#fontBold {*/
+/*background: url(../nicons/font-bold.png) no-repeat center top;*/
+/*}*/
+
+/*div#fontItalic {*/
+/*background: url(../nicons/font-italic.png) no-repeat center top;*/
+/*}*/
+
+/*div#fontColor {*/
+/*background: url(../nicons/font-color.png) no-repeat center top;*/
+/*}*/
+
+/*div#fontSize {*/
+/*background: url(../nicons/font-size.png) no-repeat center top;*/
+/*}*/
+
+/*div#shareIt {*/
+/*background: url(../nicons/share.png) no-repeat center top;*/
+/*}*/
+
+/*div#publishIt {*/
+/*background: url(../nicons/publish.png) no-repeat center top;*/
+/*}*/
+
+/*div#tagIt {*/
+/*background: url(../nicons/tag.png) no-repeat center top;*/
+/*}*/
+
+div#topicRelation {
+    width: 56px;
+    background: url(../nicons/topic-relation.png) no-repeat center top;
+    z-index: 4;
+}
+
+div#colorPalette {
+    border: 1px solid #bbb4d6;
+    display: none;
+    position: absolute;
+    z-index: 4;
+    width: 160px;
+    top: 89px;
+}
+
+/*.toolbarPanel {*/
+/*z-index: 4;*/
+/*top: 75px;*/
+/*-moz-transition: opacity 0.218s ease 0s;*/
+/*background: none repeat scroll 0 0 #FFFFFF;*/
+/*border: 1px solid rgba(0, 0, 0, 0.2);*/
+/*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);*/
+/*cursor: default;*/
+/*font-size: 13px;*/
+/*margin: 0;*/
+/*outline: medium none;*/
+/*padding: 0 0 6px;*/
+/*position: absolute;*/
+/*}*/
+
+div.toolbarPanelLink, div.toolbarPanelLinkSelectedLink {
+    cursor: pointer;
+    color: black;
+    margin: 1px;
+    cursor: pointer;
+    font-size: 12px;
+    padding: 5px 15px;
+}
+
+div.toolbarPanelLink:hover, div.toolbarPanelLinkSelectedLink {
+    cursor: pointer;
+    background-color: #efefef;
+}
+
+div#mindplot {
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 100%;
+    border: 0;
+}
+
+div#workspaceContainer {
+    /*background: url(../images/grid.gif) bottom left repeat !important;*/
+}
+
+div#small_error_icon {
+    padding-left: 18px;
+    min-height: 16px;
+    background: url(../images/error_icon.png) bottom left no-repeat !important;
+}
+
+.notesTip {
+    background-color: #dfcf3c;
+    padding: 5px 15px;
+    color: #666666;
+    /*font-weight: bold;*/
+    /*width: 100px;*/
+    font-size: 13px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
+}
+
+.linkTip {
+    background-color: #dfcf3c;
+    padding: 5px 15px;
+    color: #666666;
+    /*font-weight: bold;*/
+    /*width: 100px;*/
+    font-size: 13px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
+}
+
+.toolbarPaneTip {
+    background-color: rgb(228, 226, 210);
+    padding: 5px 5px;
+    color: #f5f5f5;
+    /*font-weight: bold;*/
+    /*width: 100px;*/
+    font-size: 11px;
+    -moz-border-radius: 60px;
+    -webkit-border-radius: 6px;
+    border-radius: 6px;
+    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
+    border: 3px double rgb(190, 190, 190);
+}
+
+.toolbarTip {
+    background-color: #000000;
+    padding: 5px 5px;
+    color: #f5f5f5;
+    /*font-weight: bold;*/
+    /*width: 100px;*/
+    font-size: 11px;
+}
+
+/* */
+.btn-primary {
+    cursor: pointer;
+    display: inline-block;
+    padding: 5px 14px 6px;
+    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+    color: #333;
+    font-size: 13px;
+    line-height: normal;
+    border: 1px solid #ccc;
+    border-bottom-color: #bbb;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -webkit-transition: 0.1s linear all;
+    -moz-transition: 0.1s linear all;
+    -ms-transition: 0.1s linear all;
+    -o-transition: 0.1s linear all;
+    transition: 0.1s linear all;
+    color: #ffffff;
+    background-color: #0064cd;
+    background-repeat: repeat-x;
+    background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
+    background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
+    background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
+    background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
+    background-image: -o-linear-gradient(top, #049cdb, #0064cd);
+    background-image: linear-gradient(top, #049cdb, #0064cd);
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+    border-color: #0064cd #0064cd #003f81;
+    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+}
+
+.btn-primary:hover {
+    background-position: 0 -15px;
+    text-decoration: none;
+}
+
+.btn-secondary {
+    cursor: pointer;
+    display: inline-block;
+    background-color: #e6e6e6;
+    background-repeat: no-repeat;
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
+    background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+    background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
+    background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+    background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+    background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+    padding: 5px 14px 6px;
+    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+    color: #333;
+    font-size: 13px;
+    line-height: normal;
+    border: 1px solid #ccc;
+    border-bottom-color: #bbb;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -webkit-transition: 0.1s linear all;
+    -moz-transition: 0.1s linear all;
+    -ms-transition: 0.1s linear all;
+    -o-transition: 0.1s linear all;
+    transition: 0.1s linear all;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+
+.btn-secondary:hover {
+    background-position: 0 -15px;
+    text-decoration: none;
+}

wise-webapp/src/main/webapp/js/editor.js

@@ -25,164 +25,10 @@ Asset.javascript('../js/mindplot-min.js', {
 var designer = null;
 /* JavaScript tabs changer */
 
-// CSS helper functions
-CSS = {
-    // Adds a class to an element.
-    AddClass: function (e, c) {
-        if (!e.className.match(new RegExp("\\b" + c + "\\b", "i")))
-            e.className += (e.className ? " " : "") + c;
-    },
-
-    // Removes a class from an element.
-    RemoveClass: function (e, c) {
-        e.className = e.className.replace(new RegExp(" \\b" + c + "\\b|\\b" + c + "\\b ?", "gi"), "");
-    }
-};
-
-// Functions for handling tabs.
-Tabs = {
-    // Changes to the tab with the specified ID.
-    GoTo: function (contentId, skipReplace) {
-        // This variable will be true if a tab for the specified
-        // content ID was found.
-        var foundTab = false;
-
-        // Get the TOC element.
-        var toc = $("toc");
-        if (toc) {
-            var lis = toc.getElementsByTagName("li");
-            for (var j = 0; j < lis.length; j++) {
-                var li = lis[j];
-
-                // Give the current tab link the class "current" and
-                // remove the class from any other TOC links.
-                var anchors = li.getElementsByTagName("a");
-                var anchors = li.getElementsByTagName("a");
-                for (var k = 0; k < anchors.length; k++) {
-                    if (anchors[k].hash == "#" + contentId) {
-                        CSS.AddClass(li, "current");
-                        foundTab = true;
-                        break;
-                    } else {
-                        CSS.RemoveClass(li, "current");
-                    }
-                }
-            }
-        }
-
-        // Show the content with the specified ID.
-        var divsToHide = [];
-        var divs = document.getElementsByTagName("div");
-        for (var i = 0; i < divs.length; i++) {
-            var div = divs[i];
-
-            if (div.className.match(/\btabContent\b/i)) {
-                if (div.id == "_" + contentId)
-                    div.style.display = "block";
-                else {
-                    divsToHide.push(div);
-                }
-            }
-        }
-
-        // Hide the other content boxes.
-        for (var i = 0; i < divsToHide.length; i++)
-            divsToHide[i].style.display = "none";
-
-        // Change the address bar.
-        if (!skipReplace) window.location.replace("#" + contentId);
-    },
-
-    OnClickHandler: function (e) {
-        // Stop the event (to stop it from scrolling or
-        // making an entry in the history).
-        if (!e) e = window.event;
-        if (e.preventDefault) e.preventDefault(); else e.returnValue = false;
-
-        // Get the name of the anchor of the link that was clicked.
-        Tabs.GoTo(this.hash.substring(1));
-    },
-
-    Init: function () {
-        if (!document.getElementsByTagName) {
-            return;
-        }
-
-        // Attach an onclick event to all the anchor links on the page.
-        var anchors = document.getElementsByTagName("a");
-        for (var i = 0; i < anchors.length; i++) {
-            var a = anchors[i];
-            if (a.hash) {
-                a.onclick = Tabs.OnClickHandler;
-            }
-        }
-
-        var contentId;
-        if (window.location.hash)
-            contentId = window.location.hash.substring(1);
-
-        var divs = document.getElementsByTagName("div");
-        for (var i = 0; i < divs.length; i++) {
-            var div = divs[i];
-
-            if (div.className.match(/\btabContent\b/i)) {
-                if (!contentId) contentId = div.id;
-                div.id = "_" + div.id;
-            }
-        }
-
-        if (contentId)
-            Tabs.GoTo(contentId, true);
-    }
-};
-
-if (document.createStyleSheet) {
-    var style = document.createStyleSheet();
-    style.addRule("div.tabContent", "display: none;");
-    style.addRule("div" + contentId, "display: block;");
-} else {
-    var head = document.getElementsByTagName("head")[0];
-    if (head) {
-        var style = document.createElement("style");
-        style.setAttribute("type", "text/css");
-        style.appendChild(document.createTextNode("div.tabContent { display: none; }"));
-        style.appendChild(document.createTextNode("div" + contentId + " { display: block; }"));
-        head.appendChild(style);
-    }
-}
-
-// Hook up the OnLoad event to the tab initialization function.
-Tabs.Init();
-
-// Hide the content while waiting for the onload event to trigger.
-var contentId = window.location.hash || "#Introduction";
-
 function setUpToolbar(designer, isTryMode) {
 
     var menu = new mindplot.widget.Menu(designer, 'toolbar');
 
-    if ($('helpButton') != null) {
-        var helpPanel = new Panel({panelButton:$('helpButton'), backgroundColor:'black'});
-        helpPanel.setContent(Help.buildHelp(helpPanel));
-    }
-
-    if ($('helpButtonFirstSteps') != null) {
-        var firstStepsPanel = $('helpButtonFirstSteps')
-        firstStepsPanel.addEvent('click', function(event) {
-            var firstStepWindow = window.open("firststeps.htm", "WiseMapping", "width=100px, height=100px");
-            firstStepWindow.focus();
-            firstStepWindow.moveTo(0, 0);
-            firstStepWindow.resizeTo(screen.availWidth, screen.availHeight);
-        });
-    }
-
-    if ($('helpButtonKeyboard') != null) {
-        var keyboardPanel = $('helpButtonKeyboard')
-        keyboardPanel.addEvent('click', function(event) {
-            MOOdalBox.open('keyboard.htm', 'KeyBoard Shortcuts', '500px 400px', false)
-        });
-    }
-
     // Autosave ...
     if (!isTryMode) {
         (function() {
@@ -210,7 +56,6 @@ function setUpToolbar(designer, isTryMode) {
 
 }
 
-
 function buildDesigner(editorProperties, isTryMode) {
     $assert(editorProperties, "editorProperties can not be null");
 

wise-webapp/src/main/webapp/jsp/mindmapEditor.jsp

@@ -13,14 +13,16 @@
     <!--[if lt IE 9]>
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <![endif]-->
-
-    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
     <title><spring:message code="SITE.TITLE"/> - ${mindmap.title} </title>
-    <link rel="stylesheet" type="text/css" href="../css/editor.css"/>
+    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
+
+    <script type='text/javascript' src='../js/less-1.1.3.min.js'></script>
+    <link rel="stylesheet" type="text/css" href="../css/editor2.css"/>
 
     <script type='text/javascript'
             src='https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js'></script>
     <script type='text/javascript' src='../js/libraries/mootools/mootools-more-1.3.2.1-yui.js'></script>
+
     <script type="text/javascript" src="../dwr/engine.js"></script>
     <script type="text/javascript" src="../dwr/interface/LoggerService.js"></script>
     <script type='text/javascript' src='../js/core.js'></script>
@@ -60,9 +62,6 @@
 
 </head>
 <body>
-<jsp:include page="editorHeader.jsp">
-    <jsp:param name="onlyActionHeader" value="true"/>
-</jsp:include>
 
 <form method="post" id="printForm" name="printForm" action='<c:url value="export.htm"/>' style="height:100%;"
       target="${mindmap.title}">
@@ -75,7 +74,7 @@
     <div id="waitingContainer">
         <div class="loadingIcon"></div>
         <div class="loadingText">
-            <spring:message code="EDITOR.LOADING"/>
+            Loading ...
         </div>
     </div>
 </div>
@@ -84,7 +83,7 @@
     <div id="errorContainer">
         <div class="loadingIcon"></div>
         <div class="loadingText">
-            <spring:message code="EDITOR.ERROR_LOADING"/>
+            Unexpected error loading your map :(
         </div>
     </div>
 </div>
@@ -119,223 +118,110 @@
     <div id="paletteHeader"></div>
 </div>
 
-<div id="toolbar">
-    <div id="editTab" class="tabContent">
-        <div id="file" class="buttonContainer" title="<spring:message code="FILE"/>">
-            <fieldset>
-                <legend>
-                    <spring:message code="FILE"/>
-                </legend>
-                <div id="saveButton" class="buttonOn" title="<spring:message code="SAVE"/>">
-                    <div class="toolbarLabel"><p><spring:message code="SAVE"/></p></div>
-                </div>
-                <div id="discardButton" class="buttonOn" title="<spring:message code="CLOSE"/>">
-                    <div class="toolbarLabel"><p><spring:message code="CLOSE"/></p></div>
-                </div>
-                <div id="undoEdition" class="buttonOn" title="<spring:message code="UNDO_EDITION"/>">
-                    <div class="toolbarLabel"><p><spring:message code="UNDO"/></p></div>
-                </div>
-                <div id="redoEdition" class="buttonOn" title="<spring:message code="REDO_EDITION"/>">
-                    <div class="toolbarLabel"><p><spring:message code="REDO"/></p></div>
-                </div>
+<div id="header">
+    <div id="headerInfo">
+        <div id="headerActions">
 
-                <div id="print" class="buttonOn" title="<spring:message code="PRINT"/>" onclick="printMap();">
-                    <div class="toolbarLabel"><p><spring:message code="PRINT"/></p></div>
-                </div>
-
-                <div id="export" class="buttonOn" title="<spring:message code="EXPORT"/>">
-                    <div class="toolbarLabel"><p><spring:message code="EXPORT"/></p></div>
-                    <a id="exportAnchor" href="export.htm?mapId=${mindmap.id}" rel="moodalbox 600px 400px"
-                       title="<spring:message code="EXPORT_DETAILS"/>">
-                    </a>
-                </div>
-            </fieldset>
+            <spring:message code="WELCOME"/>, ${principal.firstname}|<span><a
+                href="${pageContext.request.contextPath}/c/mymaps.htm"><spring:message code="MY_WISEMAPS"/></a></span> |
+            <span><a href="${pageContext.request.contextPath}/c/settings.htm" rel="moodalbox 400px 250px wizard"
+                     title="<spring:message code="SETTINGS_DETAIL"/>"><spring:message code="SETTINGS"/></a></span>
+            | <span><a href="${pageContext.request.contextPath}/c/logout.htm" title="<spring:message code="LOGOUT"/>">
+            <spring:message code="LOGOUT"/>
+        </a></span>
         </div>
-        <div id="zoom" class="buttonContainer" title="Zoom In">
-            <fieldset>
-                <legend>
-                    <spring:message code="ZOOM"/>
-                </legend>
-                <div id="zoomIn" class="buttonOn" title="<spring:message code="ZOOM_IN"/>">
-                    <div class="toolbarLabel"><p><spring:message code="IN"/></p></div>
-                </div>
-                <div id="zoomOut" class="buttonOn" title="<spring:message code="ZOOM_OUT"/>">
-                    <div class="toolbarLabel"><p><spring:message code="OUT"/></p></div>
-                </div>
-            </fieldset>
+        <div id="headerLogo"></div>
+        <div id="headerMapTitle">Title: <span>Hola</span></div>
+    </div>
+    <div id="toolbar">
+        <div id="persist" class="buttonContainer">
+            <div id="save" class="buttonOn" title="Save">
+                <img src="../nicons/save.png"/>
+            </div>
+            <div id="discart" class="buttonOn" title="Discart">
+                <img src="../nicons/discart.png"/>
+            </div>
         </div>
-        <div id="node" class="buttonContainer" title="Node Properties">
-            <fieldset>
-                <legend>
-                    <spring:message code="TOPIC"/>
-                </legend>
-                <div id="topicShape" class="buttonOn" title="<spring:message code="TOPIC_SHAPE"/>">
-                    <div class="toolbarLabel"><p><spring:message code="SHAPE"/></p></div>
-                </div>
-                <div id="addTopic" class="buttonOn" title="<spring:message code="TOPIC_ADD"/>">
-                    <div class="toolbarLabel"><p><spring:message code="ADD"/></p></div>
-                </div>
-                <div id="deleteTopic" class="buttonOn" title="<spring:message code="TOPIC_DELETE"/>">
-                    <div class="toolbarLabel"><p><spring:message code="DELETE"/></p></div>
-                </div>
-                <div id="topicBorder" class="buttonOn" title="<spring:message code="TOPIC_BORDER_COLOR"/>">
-                    <div class="toolbarLabel"><p><spring:message code="BORDER"/></p></div>
-                </div>
-                <div id="topicColor" class="buttonOn" title="<spring:message code="TOPIC_BACKGROUND_COLOR"/>">
-                    <div class="toolbarLabel"><p><spring:message code="COLOR"/></p></div>
-                </div>
-                <div id="topicIcon" class="buttonOn" title="<spring:message code="TOPIC_ICON"/>">
-                    <div class="toolbarLabel"><p><spring:message code="ICON"/></p></div>
-                </div>
-                <div id="topicNote" class="buttonOn" title="<spring:message code="TOPIC_NOTE"/>">
-                    <div class="toolbarLabel"><p><spring:message code="NOTE"/></p></div>
-                </div>
-                <div id="topicLink" class="buttonOn" title="<spring:message code="TOPIC_LINK"/>">
-                    <div class="toolbarLabel"><p><spring:message code="LINK"/></p></div>
-                </div>
-                <div id="topicRelation" class="topicRelation buttonOn"
-                     title="<spring:message code="TOPIC_RELATIONSHIP"/>">
-                    <div class="relationshiplabel toolbarLabel"><p><spring:message code="TOPIC_RELATIONSHIP"/></p></div>
-                </div>
-            </fieldset>
+        <div id="edit" class="buttonContainer">
+            <div id="undoEdition" class="buttonOn" title="Undo Edition">
+                <img src="../nicons/undo.png"/>
+            </div>
+            <div id="redoEdition" class="buttonOn" title="Redo Edition">
+                <img src="../nicons/redo.png"/>
+            </div>
         </div>
-        <div id="font" class="buttonContainer" title="Font Properties">
-            <fieldset>
-                <legend>
-                    <spring:message code="FONT"/>
-                </legend>
-                <div id="fontFamily" class="buttonOn" title="<spring:message code="FONT_TYPE"/>">
-                    <div class="toolbarLabel"><p><spring:message code="TYPE"/></p></div>
-                </div>
-                <div id="fontSize" class="buttonOn" title="<spring:message code="FONT_SIZE"/>">
-                    <div class="toolbarLabel"><p><spring:message code="SIZE"/></p></div>
-                </div>
-                <div id="fontBold" class="buttonOn" title="<spring:message code="FONT_BOLD"/>">
-                    <div class="toolbarLabel"><p><spring:message code="BOLD"/></p></div>
-                </div>
-                <div id="fontItalic" class="buttonOn" title="<spring:message code="FONT_ITALIC"/>">
-                    <div class="toolbarLabel"><p><spring:message code="ITALIC"/></p></div>
-                </div>
-                <div id="fontColor" class="buttonOn" title="<spring:message code="FONT_COLOR"/>">
-                    <div class="toolbarLabel"><p><spring:message code="COLOR"/></p></div>
-                </div>
-            </fieldset>
+        <div id="zoom" class="buttonContainer">
+            <div id="zoomIn" class="buttonOn" title="Zoom In">
+                <img src="../nicons/zoom-in.png"/>
+            </div>
+            <div id="zoomOut" class="buttonOn" title="Zoom Out">
+                <img src="../nicons/zoom-out.png"/>
+            </div>
         </div>
-        <div id="share" class="buttonContainer" title="Share Properties">
-            <c:choose>
-                <c:when test="${editorTryMode==false}">
-                    <fieldset>
-                        <legend>
-                            <spring:message code="COLLABORATION"/>
-                        </legend>
-                        <a id="tagAnchor" href="tags.htm?mapId=${mindmap.id}" rel="moodalbox 400px 200px wizard"
-                           title="<spring:message code="TAGS_DETAILS"/>">
-                            <div id="tagIt" class="buttonOn" title="<spring:message code="TAG"/>">
-                                <div class="toolbarLabel"><p><spring:message code="TAG"/></p></div>
-                            </div>
-                        </a>
-                        <c:choose>
-                            <c:when test="${mindmap.owner==user}">
-                                <a id="shareAnchor" href="<c:out value="${shareMap}"/>&amp;mapId=${mindmap.id}"
-                                   rel="moodalbox 780px 530px wizard" title="<spring:message code="SHARE_DETAILS"/>">
-                                    <div id="shareIt" class="buttonOn" title="<spring:message code="COLLABORATION"/>">
-                                        <div class="toolbarLabel"><p><spring:message code="SHARE"/></p></div>
-                                    </div>
-                                </a>
-                                <a id="publishAnchor" href="publish.htm?mapId=${mindmap.id}"
-                                   rel="moodalbox 600px 400px wizard"
-                                   title="<spring:message code="PUBLISH_MSG"/>">
-                                    <div id="publishIt" class="buttonOn" title="<spring:message code="PUBLISH"/>">
-                                        <div class="toolbarLabel"><p><spring:message code="PUBLISH"/></p></div>
-                                    </div>
-                                </a>
-                            </c:when>
-                        </c:choose>
-                        <a id="historyAnchor" href="history.htm?action=list&amp;mapId=${mindmap.id}"
-                           rel="moodalbox 600px 400px wizard" title="<spring:message code="HISTORY_MSG"/>">
-                            <div id="history" class="buttonOn" title="<spring:message code="HISTORY_MSG"/>">
-                                <div class="toolbarLabel"><p><spring:message code="HISTORY"/></p></div>
-                            </div>
-                        </a>
-                    </fieldset>
-                </c:when>
-                <c:otherwise>
-                    <fieldset>
-                        <legend>
-                            <spring:message code="COLLABORATION"/>
-                        </legend>
-                        <div id="tagIt" class="buttonOn" title="<spring:message code="TAG"/>">
-                            <div class="toolbarLabel"><p><spring:message code="TAG"/></p></div>
-                        </div>
-                        <div id="shareIt" class="buttonOn" title="<spring:message code="COLLABORATE"/>">
-                            <div class="toolbarLabel"><p><spring:message code="SHARE"/></p></div>
-                        </div>
-                        <div id="publishIt" class="buttonOn" title="<spring:message code="PUBLISH"/>">
-                            <div class="toolbarLabel"><p><spring:message code="PUBLISH"/></p></div>
-                        </div>
-                        <div id="history" class="buttonOn" title="<spring:message code="HISTORY_MSG"/>">
-                            <div class="toolbarLabel"><p><spring:message code="HISTORY"/></p></div>
-                        </div>
-                    </fieldset>
-                </c:otherwise>
-            </c:choose>
+        <div id="node" class="buttonContainer">
+            <div id="topicShape" class="buttonExtOn" title="Topic Shape">
+                <img src="../nicons/topic-shape.png"/>
+            </div>
+            <div id="addTopic" class="buttonOn" title="Add Topic">
+                <img src="../nicons/topic-add.png"/>
+            </div>
+            <div id="deleteTopic" class="buttonOn" title="Delete">
+                <img src="../nicons/topic-delete.png"/>
+            </div>
+            <div id="topicBorder" class="buttonOn" title="Border Color">
+                <img src="../nicons/topic-border.png"/>
+            </div>
+            <div id="topicColor" class="buttonExtOn" title="Background Color">
+                <img src="../nicons/topic-color.png"/>
+            </div>
+            <div id="topicIcon" class="buttonExtOn" title="Add Icon">
+                <img src="../nicons/topic-icon.png"/>
+            </div>
+            <div id="topicNote" class="buttonOn" title="Add Note">
+                <img src="../nicons/topic-note.png"/>
+            </div>
+            <div id="topicLink" class="buttonOn" title="Add Link">
+                <img src="../nicons/topic-link.png"/>
+            </div>
+            <div id="topicRelation" class="buttonOn" title="Add Relationship">
+                <img src="../nicons/topic-relation.png"/>
+            </div>
+        </div>
+        <div id="font" class="buttonContainer">
+            <div id="fontFamily" class="buttonOn" title="Font Style">
+                <img src="../nicons/font-type.png"/>
+            </div>
+            <div id="fontSize" class="buttonExtOn" title="Font Size">
+                <img src="../nicons/font-size.png"/>
+            </div>
+            <div id="fontBold" class="buttonOn" title="Bold Style">
+                <img src="../nicons/topic-border.png"/>
+            </div>
+            <div id="fontItalic" class="buttonOn" title="Italic Style">
+                <img src="../nicons/font-italic.png"/>
+            </div>
+            <div id="fontColor" class="buttonExtOn" title="Fond Color">
+                <img src="../nicons/font-color.png"/>
+            </div>
+        </div>
+           <div id="collaboration" class="buttonContainer">
+            <div id="tag" class="buttonOn" title="Tag">
+                <img src="../nicons/tag.png"/>
+            </div>
+            <div id="share" class="buttonExtOn" title="Share">
+                <img src="../nicons/share.png"/>
+            </div>
+            <div id="publish" class="buttonOn" title="Publish">
+                <img src="../nicons/public.png"/>
+            </div>
+            <div id="history" class="buttonOn" title="History">
+                <img src="../nicons/history.png"/>
+            </div>
         </div>
     </div>
 </div>
 
 <div id="mindplot"></div>
-
-<div id="footerEditor">
-    <div style="position:absolute; top:0px; width:100%">
-        <a href="${pageContext.request.contextPath}/c/home.htm">
-            <div id="logo"></div>
-        </a>
-
-        <div id='msgLoggerContainer' class="msgLoggerContainer">
-            <div id="msgStart"></div>
-            <div id='msgLogger'></div>
-            <div id="msgEnd"></div>
-        </div>
-    </div>
-    <div id="helpButtonKeyboard"
-         style="text-align:center; width:100px; height:20px; background-color:#f5f5f5; border: 1px solid #BBB6D6; cursor:pointer; padding-left:5px; margin-left:3px;float:left;">
-        <div style="float:left; position:relative; top:50%; margin-top:-8px; margin-left:5px;"><img
-                src="../images/help.png"/></div>
-        <div style="float:left; position:relative; top:50%; margin-top:-8px; margin-left:4px;">Shortcuts</div>
-    </div>
-</div>
-<c:if test="${editorTryMode==true}">
-    <div id="tryEditorWarning" class="sb">
-        <div class="close" id="tryClose"
-             style="position:absolute;">
-        </div>
-        <div>
-            <h1>Warning</h1>
-            This is a demo editor. That's why you won't be able to save your changes.
-            If you want to start creating your maps, <a href="userRegistration.htm">
-            <spring:message code="JOIN_NOW"/></a>. Registration is free and takes just a moment.
-        </div>
-    </div>
-    <script type="text/javascript">
-        // Register close event ...
-        var tryElem = $('tryEditorWarning');
-        tryElem.addClass('drag').makeDraggable();
-        $('tryClose').addEvent('click', function(event) {
-            tryElem.setStyle('visibility', 'hidden');
-        });
-
-    </script>
-</c:if>
-<div id="ffoxworkarround" style="display:none;"><input id="ffoxWorkarroundInput" type="text"></div>
-<c:if test="${editorTryMode==false}">
-    <script type="text/javascript" src="../dwr/interface/MapEditorService.js"></script>
-</c:if>
 <script type="text/javascript" src="../js/editor.js"></script>
-<%--<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
-</script>
-<script type="text/javascript">
-    _uacct = "UA-2347723-1";
-    urchinTracker();
-</script>--%>
 </body>
 </html>