Working on the new editor ...

mindplot/src/main/javascript/DesignerKeyboard.js

@@ -64,6 +64,10 @@ mindplot.DesignerKeyboard = new Class({
                 designer.createChildForSelectedNode();
             }.bind(this),
 
+            'meta+enter' : function() {
+                designer.createChildForSelectedNode();
+            }.bind(this),
+
             'ctrl+z' : function() {
                 designer.undo();
             }.bind(this),

mindplot/src/main/javascript/NoteIcon.js

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

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

@@ -37,6 +37,7 @@ mindplot.widget.FloatingTip = new Class({
         hideDelay: 250,
         className: 'floating-tip',
         offset: {x: 0, y: 0},
+        preventHideOnOver: true,
         fx: { 'duration': 'short' }
     },
 
@@ -75,9 +76,10 @@ mindplot.widget.FloatingTip = new Class({
             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;
     },

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

@@ -44,7 +44,11 @@ mindplot.widget.IconPanel = new Class({
                     id:iconId,
                     src:mindplot.ImageIcon.prototype._getImageUrl(iconId)
                 });
-                img.setStyles({width:16,height:16,padding:"0px 2px"}).inject(familyContent);
+                img.setStyles({width:16,
+                    height:16,
+                    padding:"0px 2px",
+                    cursor: 'pointer'
+                }).inject(familyContent);
 
                 var panel = this;
                 var model = this.getModel();

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

@@ -26,7 +26,6 @@ mindplot.widget.Menu = new Class({
         this._designer = designer;
         this._toolbarElems = [];
         this._containerId = containerId;
-        this._toolbarDisabled = false;
 
         // Stop event propagation ...
         $(this._containerId).addEvent('click', function(event) {
@@ -181,15 +180,15 @@ mindplot.widget.Menu = new Class({
         this._toolbarElems.push(new mindplot.widget.ColorPalettePanel('fontColor', fontColorModel, baseUrl));
 
         this.addButton('zoomIn', false, false, function() {
-            designer.zoomIn()
+            designer.zoomIn();
         });
 
         this.addButton('zoomOut', false, false, function() {
-            designer.zoomOut()
+            designer.zoomOut();
         });
 
         this.addButton('undoEdition', false, false, function() {
-            designer.undo()
+            designer.undo();
         });
 
         this.addButton('redoEdition', false, false, function() {
@@ -327,7 +326,10 @@ mindplot.widget.Menu = new Class({
                 if (button.isTopicAction() && button.isRelAction()) {
                     disable = rels.length == 0 && topics.length == 0;
 
-                } else if (button.isTopicAction() && topics.length == 0) {
+                } else if (!button.isTopicAction() && !button.isRelAction()) {
+                    disable = false;
+                }
+                else if (button.isTopicAction() && topics.length == 0) {
                     disable = true;
                 } else if (button.isRelAction() && rels.length == 0) {
                     disable = true;
@@ -335,9 +337,10 @@ mindplot.widget.Menu = new Class({
 
                 if (disable) {
                     button.disable();
+                } else {
+                    button.enable();
                 }
 
-
             })
         }.bind(this));
 
@@ -375,15 +378,15 @@ mindplot.widget.Menu = new Class({
     addButton:function (buttonId, topic, rel, fn) {
         // Register Events ...
         var button = new mindplot.widget.ToolbarItem(buttonId, function(event) {
-            this.clear();
             fn(event);
+            this.clear();
         }.bind(this), {topicAction:topic,relAction:rel});
         this._toolbarElems.push(button);
     },
 
     clear : function() {
-        this._toolbarElems.forEach(function(elem) {
+        this._toolbarElems.forEach(function(item) {
-            elem.hide();
+            item.hide();
         });
     }
 });

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

@@ -38,7 +38,7 @@ mindplot.widget.Monitor = new Class({
     },
 
     logMessage : function(msg, msgKind) {
-        console.log(userMsg);
+        console.log(msg);
     }
 });
 

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

@@ -24,6 +24,28 @@ mindplot.widget.ToolbarItem = new Class({
         this._buttonId = buttonId;
         this._fn = fn;
         this._options = options;
+        this.enable();
+//        this._tip = this._registerTip();
+
+    },
+
+    _registerTip: function() {
+
+        return  new mindplot.widget.FloatingTip($(this._buttonId), {
+            html: false,
+            position: 'bottom',
+            arrowOffset : 5,
+            center: true,
+            arrowSize: 5,
+            showDelay: 500,
+            hideDelay: 0,
+            className: 'toolbarTip',
+            motionOnShow:false,
+            motionOnHide:false,
+            motion: 0,
+            distance: 0,
+            preventHideOnOver:false
+        });
     },
 
     getButtonElem : function() {
@@ -66,5 +88,9 @@ mindplot.widget.ToolbarItem = new Class({
             elem.addClass('buttonOn');
             this._enable = true;
         }
-    }
+    },
+
+    getTip : function() {
+        return this._tip;
+    }.protect()
 });

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

@@ -38,6 +38,7 @@ mindplot.widget.ToolbarPaneItem = new Class({
     _init:function () {
         // Load the context of the panel ...
         var panelElem = this.buildPanel();
+        panelElem.setStyle('cursor','default');
         var buttonElem = this.getButtonElem();
 
         // Add panel content ..
@@ -51,12 +52,6 @@ mindplot.widget.ToolbarPaneItem = new Class({
         return this._model;
     },
 
-    getButtonElem : function() {
-        var elem = $(this._buttonId);
-        $assert(elem, "Could not find element for " + this._buttonId);
-        return elem;
-    }.protect(),
-
     getPanelElem : function() {
         return $(this._panelId);
     }.protect(),

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

@@ -1,667 +0,0 @@
-@import "common.css";
-@import "/mindplot/src/main/javascript/widget/lightbox.css";
-@import "/mindplot/src/main/javascript/libraries/moodialog/css/MooDialog.css";
-
-html {
-    overflow: hidden;
-}
-
-body {
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
-    user-select: none;
-}
-
-#waitDialog {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    height: 200px;
-}
-
-#firstHeader {
-    width: 100%;
-}
-
-#subHeader {
-    position: absolute;
-    width: 100%;
-    height: 55px;
-    top: 30px;
-}
-
-#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;
-}
-
-#infoContainer {
-    float: left;
-}
-
-#infoContainer {
-    float: left;
-    padding-left: 5px;
-}
-
-#title {
-    position: relative;
-    left: 120px;
-    top: 80px;
-}
-
-#operationsContainer {
-    font-size: 12px;
-    float: right;
-    padding: 0 5px;
-}
-
-#operationsContainer a {
-    padding: 0 5px;
-}
-
-#user {
-    font-weight: bold;
-    margin-right: 5px;
-}
-
-#toolbar {
-    width: 100%;
-    height: 25px;
-    color: #ffffff;
-    border-bottom: 2px solid black;
-    position: absolute;
-    top: 0;
-}
-
-div#toolbar .buttonContainer {
-    height: 44px;
-    float: left;
-    color: black;
-}
-
-.buttonContainer fieldset {
-    border: 1px solid #BBB4D6;
-    padding: 2px 2px 4px;
-    margin: 8px 1px 1px;
-}
-
-.buttonContainer legend {
-    padding: 0.2em 0.5em;
-    border: 1px solid #BBB4D6;
-    background-color: #F5F5F5;
-    color: #BBB4D6;
-    font-size: 11px;
-    text-align: right;
-    margin: 0;
-    -moz-margin-start: 7px;
-    -moz-margin-end: 7px;
-}
-
-div#toolbar .buttonOn, div#toolbar .buttonOff, div#toolbar .buttonActive, div#toolbar .buttonOn:hover {
-    width: 32px;
-    height: 36px;
-    float: left;
-    margin: 0 2px 2px 2px;
-    text-align: center;
-}
-
-div#toolbar .buttonOn:hover, div#toolbar .buttonActive {
-    margin: 0 1px;
-    cursor: pointer;
-    border: 1px solid black;
-    border-top-color: white;
-    border-left-color: white;
-    cursor: pointer;
-}
-
-div#toolbar .buttonOff {
-    opacity: 0.4;
-}
-
-div#toolbar .button img {
-    width: 30px;
-    height: 30px;
-    border: 0;
-}
-
-div#toolbar .toolbarLabel {
-    position: relative;
-    top: 55%;
-    text-align: center;
-    width: 34px;
-    height: 10px;
-    font-size: 10px;
-}
-
-.mapSeparator {
-    width: 1px;
-    height: 20px;
-    background-color: #166D66;
-    float: left;
-    margin: 5px 3px;
-}
-
-div#file, div#zoom, div#node, div#font, div#share {
-    position: absolute;
-    top: -6px;
-    left: 3px;
-}
-
-div#zoom {
-    left: 84px;
-}
-
-div#node {
-    left: 165px;
-}
-
-div#font {
-    left: 522px; /*left:581px;*/
-}
-
-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;
-}
-
-#export {
-    background: url(../images/file_export.png) no-repeat center top;
-    position: relative;
-}
-
-#exportAnchor {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-}
-
-div#zoomIn {
-    background: url(../images/zoom_in.png) no-repeat center top;
-}
-
-#zoomOut {
-    background: url(../images/zoom_out.png) no-repeat center top;
-}
-
-#addTopic {
-    background: url(../images/topic_add.png) no-repeat center top;
-}
-
-#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;
-}
-
-#topicBorder {
-    background: url(../images/topic_border.png) no-repeat center top;
-    width: 30px;
-}
-
-#fontFamily {
-    background: url(../images/font_type.png) no-repeat center top;
-}
-
-#topicShape {
-    background: url(../images/topic_shape.png) no-repeat center top;
-    width: 30px;
-}
-
-#fontBold {
-    background: url(../images/font_bold.png) no-repeat center top;
-}
-
-#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;
-}
-
-#fontSize {
-    float: left;
-    background: url(../images/font_size.png) no-repeat center top;
-}
-
-#font-size {
-    font-size: 10px;
-}
-
-.wiseToolbarButton {
-    float: left;
-    height: 16px;
-    cursor: pointer;
-    font-size: 10px;
-    font-weight: bold;
-    margin-right: 15px;
-}
-
-#shareIt {
-    background: url(../images/collab_share.png) no-repeat center top;
-}
-
-#publishIt {
-    background: url(../images/collab_publish.png) no-repeat center top;
-}
-
-#tagIt {
-    background: url(../images/collab_tag.png) no-repeat center top;
-}
-
-#colorPalette {
-    border: 1px solid #bbb4d6;
-    display: none;
-    position: absolute;
-    z-index: 4;
-    width: 160px;
-    top: 89px;
-}
-
-#paletteHeader {
-    background-color: #E5E5E5;
-    height: 4px;
-}
-
-.toolbarPanel {
-    color: black;
-    border-color: #CCC #666 #666 #CCC;
-    border-style: solid;
-    border-width: 1px;
-    background: white;
-    padding: 2px;
-    display: none;
-    position: absolute;
-    z-index: 4;
-    top: 53px;
-    text-align: left;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
-    user-select: none;
-}
-
-div.toolbarPanelLink {
-    cursor: pointer;
-    color: black;
-    font-weight: bold;
-    padding: 0 3px 0 4px;
-    margin: 1px;
-    cursor: pointer;
-    font-size: 12px;
-    font-weight: bold;
-}
-
-div.toolbarPanelLink:hover {
-    cursor: pointer;
-    font-weight: bold;
-    background-color: #c3def5;
-}
-
-div.toolbarPanelLinkSelectedLink {
-    cursor: pointer;
-    color: white;
-    font-weight: bold;
-    padding: 0 3px 0 4px;
-    margin: 1px;
-    background-color: #c3def5;
-}
-
-/* ------------- Footer Styles -------------------------*/
-div#footerEditor {
-    position: absolute;
-    height: 60px;
-    width: 100%;
-    background: #E5E5E5;
-    border-top: 1px solid #bbb4d6;
-    bottom: 0;
-}
-
-#logo {
-    height: 50px;
-    width: 80px;
-    float: right;
-    margin: 5px;
-    background: url(../images/logo-vsmall.png) no-repeat right top;
-}
-
-#footerEditor .msgLoggerContainer {
-    position: relative;
-    width: 550px;
-    height: 36px;
-    left: 50%;
-    margin-left: -300px;
-    top: 10px;
-    opacity: 0;
-    visibility: hidden;
-}
-
-div#msgStart {
-    float: left;
-    height: 36px;
-    width: 16px;
-    background: url(../images/footerStart.png) no-repeat right top;
-}
-
-div#msgEnd {
-    float: left;
-    height: 36px;
-    width: 16px;
-    background: url(../images/footerEnd.png) no-repeat right top;
-
-}
-
-div#msgLogger {
-    float: left;
-    height: 36px;
-    width: 500px;
-    background: url(../images/footerBody.png) repeat-x right top;
-    text-align: center;
-    white-space: nowrap;
-    padding: 5px;
-    font-size: 13px;
-    font-weight: bold;
-}
-
-/** Tab labels */
-div#tabsHolder {
-    width: 100%;
-    height: 20px;
-}
-
-div#tabs {
-    float: left;
-}
-
-div.tabContent {
-    clear: left;
-    width: 100%;
-    height: 50px;
-    border-bottom: 1px solid #bbb4d6;
-    border-top: 1px solid #bbb4d6;
-    background: #E5E5E5;
-    display: none;
-    position: absolute;
-    left: 0;
-}
-
-ol#toc {
-    height: 2em;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-ol#toc li {
-    float: left;
-    margin: 0 1px 0 0;
-    border: 0;
-}
-
-ol#toc a {
-    background: #fff url(../images/tab4.png);
-    color: #008;
-    display: block;
-    float: left;
-    height: 25px;
-    padding-left: 10px;
-    text-decoration: none;
-}
-
-ol#toc a:hover {
-    background-color: #fff;
-    background-position: 0 -121px;
-}
-
-ol#toc a:hover span {
-    background-position: 100% -121px;
-}
-
-ol#toc li.current a {
-    background-color: #fff;
-    background-position: 0 -61px;
-    color: #008;
-    font-weight: bold;
-}
-
-ol#toc li.current span {
-    background-position: 100% -61px;
-}
-
-ol#toc span {
-    background: #fff url(../images/tab4.png) 100% 0;
-    display: block;
-    line-height: 2em;
-    padding-right: 10px;
-}
-
-#mindplot {
-    position: relative;
-    top: 53px;
-    left: 0;
-    width: 100%;
-    border: 0;
-}
-
-#workspaceContainer {
-    background: url(../images/grid.gif) bottom left repeat !important;
-}
-
-div#mapInfo {
-    float: right;
-    color: #008;
-    padding-right: 5px;
-    height: 25px;
-    white-space: nowrap;
-}
-
-span#mapName {
-    font-size: 15px;
-    font-weight: bold;
-}
-
-span#lastSaved {
-    font-size: 10px;
-}
-
-.label {
-    border: none;
-    color: #ffffff;
-    font-weight: bold;
-}
-
-.label :hover {
-    cursor: pointer;
-}
-
-#tryEditorWarning {
-    position: absolute;
-    margin: 20px auto;
-    width: 300px;
-    right: 10px;
-    top: 100px;
-    padding: 20px;
-    opacity: 0.9;
-    cursor: move;
-    background-color: #69686F;
-    filter: alpha(opacity = 90);
-    color: #000c8f;
-}
-
-#tryEditorWarning a {
-    color: white;
-    font-weight: bold;
-}
-
-#tryEditorWarning h1 {
-    color: #f5f5f5;
-    font-weight: bold;
-    margin-bottom: 5px;
-    font-size: 15px;
-}
-
-div#helpContainer {
-    position: absolute;
-    margin: 20px auto;
-    z-index: 3;
-    opacity: 0.9;
-    width: 220px;
-    top: 100px;
-    left: 10px;
-    color: #000c8f;
-    padding: 20px;
-    cursor: move;
-    background-color: #69686F;
-    filter: alpha(opacity = 90);
-}
-
-div#helpContent h1 {
-    font-weight: bold;
-    color: #f5f5f5;
-    font-size: 15px;
-}
-
-div#helpContent h2 {
-    font-weight: bold;
-    padding: 20px 0 10px 0;
-    color: #bfbfbf;
-}
-
-div.close {
-    position: absolute;
-    height: 12px;
-    width: 12px;
-    top: 7px;
-    right: 10px;
-    cursor: pointer;
-    background: url(../images/close12_1.gif) bottom left no-repeat !important;
-}
-
-div#helpContent li {
-    font-family: arial, helvetica, sans-serif;
-    list-style-type: disc;
-    margin-left: 12px;
-    font-size: 11px;
-}
-
-div#small_error_icon {
-    padding-left: 18px;
-    min-height: 16px;
-    background: url(../images/error_icon.png) bottom left no-repeat !important;
-}
-
-div#toolbar .topicRelation {
-    width: 56px;
-    background: url(../images/topic_relationship.png) no-repeat center top;
-    z-index: 4;
-}
-
-div#toolbar .topicRelation:hover {
-    width: 56px;
-    background: url(../images/topic_relationship.png) no-repeat center top;
-    z-index: 4;
-}
-
-div#toolbar .relationshiplabel {
-    width: 56px;
-}

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

@@ -0,0 +1,511 @@
+@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-info-height : @header-height - @header-toolbar-height;
+
+/* 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 {
+    background-color: #000000;
+    width: 100%;
+    height: @header-height;
+}
+
+div#headerInfo {
+    width: 100%;
+    height: @header-info-height;
+    color: white;
+}
+
+div#toolbar {
+    width: 100%;
+    height: @header-toolbar-height;
+    background: whiteSmoke;
+    border-top: 1px solid #E5E5E5;
+}
+
+div#toolbar .buttonContainer {
+    height: @header-toolbar-height;
+    float: left;
+    color: black;
+    border: 1px solid #BBB4D6;
+    margin-left: 5px;
+}
+
+div#toolbar .buttonOn, div#toolbar .buttonOff, div#toolbar .buttonActive, div#toolbar .buttonOn:hover {
+    width: 30px;
+    height: @header-toolbar-height;
+    float: left;
+    text-align: center;
+}
+
+div#toolbar .buttonOn:hover, div#toolbar .buttonActive {
+    margin: 0;
+    cursor: pointer;
+    border: 1px solid #d3d3d3;
+    cursor: pointer;
+    opacity: 1;
+}
+
+div#toolbar .buttonOn {
+    margin: 1px;
+    opacity: 0.8;
+}
+
+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;
+}
+
+div#exportAnchor {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    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 {
+    float: left;
+    background: url(../images/font_size.png) no-repeat center top;
+}
+
+div#font-size {
+    font-size: 10px;
+}
+
+div#shareIt {
+    background: url(../images/collab_share.png) no-repeat center top;
+}
+
+div#publishIt {
+    background: url(../images/collab_publish.png) no-repeat center top;
+}
+
+div#tagIt {
+    background: url(../images/collab_tag.png) no-repeat center top;
+}
+
+div#topicRelation {
+    width: 56px;
+    background: url(../images/topic_relationship.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: @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;
+}
+
+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);
+}
+
+.toolbarTip {
+    background-color: black;
+    padding: 5px 5px;
+    color: #f5f5f5;
+    /*font-weight: bold;*/
+    /*width: 100px;*/
+    font-size: 11px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
+}
+
+

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

@@ -9,11 +9,13 @@
     <![endif]-->
     <!--<script type="text/javascript" src="http://docs.google.com/brix/static/api/js/jsapi.nocache.js"></script>-->
 
-    <link rel="stylesheet" type="text/css" href="../css/editor.css"/>
+    <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'/>
 
     <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>
@@ -114,138 +116,44 @@
 <div id="colorPalette">
     <div id="paletteHeader"></div>
 </div>
-<div id="toolbar">
+
+<div id="header">
+    <div id="headerInfo">
+          Algo a aca ....
+    </div>
+    <div id="toolbar">
         <div id="editTab" class="tabContent">
-        <div id="file" class="buttonContainer" title="SYMB_ FILE">
+            <div id="file" class="buttonContainer">
-            <fieldset>
+                <div id="undoEdition" class="buttonOn" title="Undo Edition"></div>
-                <div id="undoEdition" class="buttonOn" title="Undo Edition">
+                <div id="redoEdition" class="buttonOn" title="Redo Edition"></div>
-                    <div class="toolbarLabel">
-                        <p>Undo</p>
             </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>
-                <div id="redoEdition" class="buttonOn" title="Redo Edition">
+            <div id="node" class="buttonContainer">
-                    <div class="toolbarLabel">
+                <div id="topicShape" class="buttonOn" title="SYMB_TOPIC_SHAPE"></div>
-                        <p>Redo</p>
+                <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>
+            <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>
-            </fieldset>
-        </div>
-        <div id="zoom" class="buttonContainer" title="Zoom">
-            <fieldset>
-                <div id="zoomIn" class="buttonOn" title="Zoom In">
-                    <div class="toolbarLabel">
-                        <p>In</p>
-                    </div>
-                </div>
-                <div id="zoomOut" class="buttonOn" title="Zoom Out">
-                    <div class="toolbarLabel">
-                        <p>Out</p>
-                    </div>
-                </div>
-            </fieldset>
-        </div>
-        <div id="node" class="buttonContainer" title="Node Properties">
-            <fieldset>
-                <div id="topicShape" class="buttonOn comboButton" title="SYMB_TOPIC_SHAPE">
-                    <div class="toolbarLabel">
-                        <p>Shape</p>
-                    </div>
-                </div>
-                <div id="addTopic" class="buttonOn" title="SYMB_ TOPIC_ADD">
-                    <div class="toolbarLabel">
-                        <p>Add</p>
-                    </div>
-                </div>
-                <div id="deleteTopic" class="buttonOn" title="SYMB_ TOPIC_DELETE">
-                    <div class="toolbarLabel">
-                        <p>Delete</p>
-                    </div>
-                </div>
-                <div id="topicBorder" class="buttonOn" title="SYMB_ TOPIC_BORDER_COLOR">
-                    <div class="toolbarLabel">
-                        <p>Border</p>
-                    </div>
-                </div>
-                <div id="topicColor" class="buttonOn" title="Background Color">
-                    <div class="toolbarLabel">
-                        <p>Color</p>
-                    </div>
-                </div>
-                <div id="topicIcon" class="buttonOn" title="Change Icon">
-                    <div class="toolbarLabel">
-                        <p>Icon</p>
-                    </div>
-                </div>
-                <div id="topicNote" class="buttonOn" title="Add Note">
-                    <div class="toolbarLabel">
-                        <p>Note</p>
-                    </div>
-                </div>
-                <div id="topicLink" class="buttonOn" title="Add Link">
-                    <div class="toolbarLabel">
-                        <p>Link</p>
-                    </div>
-                </div>
-                <div id="topicRelation" class="topicRelation buttonOn" title="Add Relationship">
-                    <div class="relationshiplabel toolbarLabel">
-                        <p>Relationship</p>
-                    </div>
-                </div>
-            </fieldset>
-        </div>
-        <div id="font" class="buttonContainer" title="Font Properties">
-            <fieldset>
-                <div id="fontFamily" class="buttonOn comboButton" title="Font Style">
-                    <div class="toolbarLabel">
-                        <p>Style</p>
-                    </div>
-                </div>
-                <div id="fontSize" class="buttonOn comboButton" title="Font Size">
-                    <div class="toolbarLabel">
-                        <p>Size</p>
-                    </div>
-                </div>
-                <div id="fontBold" class="buttonOn" title="Bold Style">
-                    <div class="toolbarLabel">
-                        <p>Bold</p>
-                    </div>
-                </div>
-                <div id="fontItalic" class="buttonOn" title="Italic Style">
-                    <div class="toolbarLabel">
-                        <p>Italic</p>
-                    </div>
-                </div>
-                <div id="fontColor" class="buttonOn comboButton" title="Fond Color">
-                    <div class="toolbarLabel">
-                        <p>Color</p>
-                    </div>
-                </div>
-            </fieldset>
         </div>
     </div>
 </div>
 
 <div id="mindplot"></div>
-
-<div id="footerEditor">
-    <div style="position:absolute; top:0; width:100%">
-        <a href="http://www.wisemapping.com/">
-            <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>
 <script type="text/javascript" src="../js/editor.js"></script>
 </body>
 </html>

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

@@ -29,7 +29,7 @@ function buildDesigner() {
     var editorProperties = {zoom:0.85,saveOnLoad:true,collab:collab};
     designer = new mindplot.Designer(editorProperties, container);
     designer.setViewPort({
-        height: parseInt(window.innerHeight - 112), // Footer and Header
+        height: parseInt(window.innerHeight-70), // Footer and Header
         width:  parseInt(window.innerWidth)
     });
 
@@ -110,120 +110,3 @@ if (localEnv) {
         }
     });
 }
-
-// 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);
-    }
-};
-
-// 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";

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

@@ -622,19 +622,6 @@ ol#toc span {
     background: url(../images/grid.gif) bottom left repeat !important;
 }
 
-div#mapInfo {
-    float: right;
-    color: #008;
-    padding-right: 5px;
-    height: 25px;
-    white-space: nowrap;
-}
-
-span#mapName {
-    font-size: 15px;
-    font-weight: bold;
-}
-
 span#lastSaved {
     font-size: 10px;
 }