Improve node editor

mindplot/src/main/javascript/libraries/moodialog/Overlay.js

@@ -24,7 +24,7 @@ var Overlay = new Class({
 		id: 'overlay',
 		color: '#000',
 		duration: 500,
-		opacity: 0.5,
+		opacity: 0.8,
 		zIndex: 5000/*,
 		onClick: $empty,
 		onClose: $empty,

mindplot/src/main/javascript/libraries/moodialog/css/MooDialog.css

@@ -1,95 +1,95 @@
 /* Created by Arian Stolwijk <http://www.aryweb.nl> */
 
 .MooDialog {
-/*	position: fixed;*/
+    position: fixed;
-	width: 300px;
+    top: 50%;
-	height: 100px;
+    left: 50%;
-	position: fixed;
+    z-index: 11000;
-	margin: -150px 0 0 -150px;
+    width: 400px;
-	top: 50%;
+    margin: -250px 0 0 -250px;
-	left: 50%;
+    background-color: #ffffff;
-	z-index: 50000;
+    border: 1px solid #999;
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    *border: 1px solid #999;
+    /* IE6-7 */
 
-	background: #eef5f8;
+    -webkit-border-radius: 6px;
-	color: black;
+    -moz-border-radius: 6px;
-	padding: 10px;
+    border-radius: 6px;
-	border-radius: 7px;
+    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-	-moz-border-radius: 7px;
+    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-	-webkit-border-radius: 7px;
+    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-	border-radius: 7px;
+    -webkit-background-clip: padding-box;
-	-moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.8);
+    -moz-background-clip: padding-box;
-	-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.8);
+    background-clip: padding-box;
-	box-shadow: 1px 1px 5px rgba(0,0,0,0.8);
+    padding: 30px;
 }
 
 .MooDialogTitle {
-	padding-top: 30px;
+    padding-top: 50px;
 }
 
 .MooDialog .content {
-	height: 100px;
+    height: 100px;
 }
 
 .MooDialog .title {
-	position: absolute;
+    position: absolute;
-	top: 0;
+    top: 0;
-	left: 0;
+    left: 0;
-	right: 0;
+    right: 0;
-	padding: 3px 20px;
+    border-bottom: 1px solid #a1aec5;
-	background: #b7c4dc;
+    font-weight: bold;
-	border-bottom: 1px solid #a1aec5;
+    text-shadow: 1px 1px 0 #fff;
-	font-weight: bold;
+    /*color: black;*/
-	text-shadow: 1px 1px 0 #fff;
+    border-bottom: 1px solid #eee;
-	color: black;
+    padding: 5px 30px;
-	border-radius: 7px;
+    font-size: 18px
-	-moz-border-radius: 7px;
-	-webkit-border-radius: 7px;
 }
 
 .MooDialog .close {
-	background: url(dialog-close.png) no-repeat;
+    background: url(dialog-close.png) no-repeat;
-	width: 16px;
+    width: 16px;
-	height: 16px;
+    height: 16px;
-	display: block;
+    display: block;
-	cursor: pointer;
+    cursor: pointer;
-	top: -5px;
+    top: 8px;
-	left: -5px;
+    left: 420px;
-	position: absolute;
+    position: absolute;
 }
 
 .MooDialog .buttons {
-	text-align: right;
+    text-align: right;
-	margin: 0;
+    margin: 0;
-	padding: 0;
+    padding: 0;
-	border: 0;
+    border: 0;
-	background: none;
+    background: none;
 }
 
 .MooDialog .iframe {
-	width: 100%;
+    width: 100%;
-	height: 100%;
+    height: 100%;
 }
 
 .MooDialog .textInput {
-	width: 200px;
+    width: 200px;
-	float: left;
+    float: left;
 }
 
 .MooDialog .MooDialogAlert,
 .MooDialog .MooDialogConfirm,
 .MooDialog .MooDialogPrompt,
 .MooDialog .MooDialogError {
-	background: url(dialog-warning.png) no-repeat;
+    background: url(dialog-warning.png) no-repeat;
-	padding-left: 40px;
+    padding-left: 40px;
-	min-height: 40px;
+    min-height: 40px;
 }
 
 .MooDialog .MooDialogConfirm,
 .MooDialog .MooDialogPromt {
-	background: url(dialog-question.png) no-repeat;
+    background: url(dialog-question.png) no-repeat;
 }
 
 .MooDialog .MooDialogError {
-	background: url(dialog-error.png) no-repeat;
+    background: url(dialog-error.png) no-repeat;
 }
-

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

@@ -386,4 +386,4 @@ mindplot.widget.Menu = new Class({
             elem.hide();
         });
     }
-});
+});

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

@@ -22,7 +22,7 @@ mindplot.widget.NoteEditor = new Class({
         $assert(model, "model can not be null");
         var panel = this._buildPanel(model);
         this.parent({
-            closeButton:false,
+            closeButton:true,
             destroyOnClose:true,
             title:'Note',
             onInitialize: function(wrapper) {
@@ -69,7 +69,8 @@ mindplot.widget.NoteEditor = new Class({
         if (model.getValue() != null)
             textArea.value = model.getValue();
 
-        textArea.setStyles({'width':280, 'height':65});
+        textArea.setStyles({'width':'100%', 'height':80,resize: 'none'
+        });
         textArea.inject(form);
 
         // Add buttons ...

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

@@ -346,20 +346,58 @@ div#printLogo {
 }
 
 .btn-primary {
-    background: #3399CC;
+  cursor: pointer;
-    border: 1px solid #006699;
+  display: inline-block;
-    color: #FFFFFF;
+  background-color: #e6e6e6;
-    font-family: arial, helvetica, sans-serif;
+  background-repeat: no-repeat;
-    font-size: 92%;
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
-    font-style: normal;
+  background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
-    font-variant: normal;
+  background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
-    font-weight: bold;
+  background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
-    line-height: normal;
+  background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
-    overflow: visible;
+  background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
-    padding: 2px 8px 1px;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
-    vertical-align: middle;
+  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);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
+  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;
+  /*color: #333;*/
+  text-decoration: none;
+}
+
+
 div#paypal {
     float: left;
     margin: -29px;

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

@@ -185,7 +185,7 @@
                         <p>Link</p>
                     </div>
                 </div>
-                <div id="topicRelation" class="topicRelation button" title="Add Relationship">
+                <div id="topicRelation" class="topicRelation buttonOn" title="Add Relationship">
                     <div class="relationshiplabel toolbarLabel">
                         <p>Relationship</p>
                     </div>

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

@@ -18,6 +18,99 @@
 
 var designer = null;
 
+function buildDesigner() {
+
+    var container = $('mindplot');
+    container.setStyles({
+        height: parseInt(screen.height),
+        width:  parseInt(screen.width)
+    });
+
+    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
+        width:  parseInt(window.innerWidth)
+    });
+
+    var menu = new mindplot.widget.Menu(designer, 'toolbar');
+
+    //  If a node has focus, focus can be move to another node using the keys.
+    designer._cleanScreen = function() {
+        menu.clear()
+    };
+    return designer;
+}
+
+//######################### Libraries Loading ##################################
+function JSPomLoader(pomUrl, callback) {
+    console.log("POM Load URL:" + pomUrl);
+    var jsUrls;
+    var request = new Request({
+        url: pomUrl,
+        method: 'get',
+        onRequest: function() {
+            console.log("loading ...");
+        },
+        onSuccess: function(responseText, responseXML) {
+
+            // Collect JS Urls ...
+            var concatRoot = responseXML.getElementsByTagName('concat');
+            var fileSetArray = Array.filter(concatRoot[0].childNodes, function(elem) {
+                return elem.nodeType == Node.ELEMENT_NODE
+            });
+
+            jsUrls = new Array();
+            Array.each(fileSetArray, function(elem) {
+                    var jsUrl = elem.getAttribute("dir") + elem.getAttribute("files");
+                    jsUrls.push(jsUrl.replace("${basedir}", pomUrl.substring(0, pomUrl.lastIndexOf('/'))));
+                }
+            );
+
+            // Load all JS dynamically ....
+            jsUrls = jsUrls.reverse();
+
+            function jsRecLoad(urls) {
+                if (urls.length == 0) {
+                    if ($defined(callback))
+                        callback();
+                } else {
+                    var url = urls.pop();
+                    Asset.javascript(url, {
+                        onLoad: function() {
+                            jsRecLoad(urls)
+                        }
+                    });
+                }
+            }
+
+            jsRecLoad(jsUrls);
+        },
+        onFailure: function() {
+            console.log('Sorry, your request failed :(');
+        }
+    });
+    request.send();
+
+}
+
+var localEnv = true;
+if (localEnv) {
+    Asset.javascript("../../../../../web2d/target/classes/web2d.svg-min.js", {
+        onLoad: function() {
+            JSPomLoader('../../../../../mindplot/pom.xml', function() {
+                $(document).fireEvent('loadcomplete', 'mind')
+            });
+        }
+    });
+} else {
+    Asset.javascript("../js/mindplot-min.js", {
+        onLoad:function() {
+            $(document).fireEvent('loadcomplete', 'mind')
+        }
+    });
+}
+
 // CSS helper functions
 CSS = {
     // Adds a class to an element.
@@ -129,116 +222,8 @@ Tabs = {
     }
 };
 
-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 buildDesigner() {
-
-    var container = $('mindplot');
-    container.setStyles({
-        height: parseInt(screen.height),
-        width:  parseInt(screen.width)
-    });
-
-    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
-        width:  parseInt(window.innerWidth)
-    });
-
-    var menu = new mindplot.widget.Menu(designer, 'toolbar');
-
-    //  If a node has focus, focus can be move to another node using the keys.
-    designer._cleanScreen = function() {
-        menu.clear()
-    };
-    return designer;
-}
-
-//######################### Libraries Loading ##################################
-function JSPomLoader(pomUrl, callback) {
-    console.log("POM Load URL:" + pomUrl);
-    var jsUrls;
-    var request = new Request({
-        url: pomUrl,
-        method: 'get',
-        onRequest: function() {
-            console.log("loading ...");
-        },
-        onSuccess: function(responseText, responseXML) {
-
-            // Collect JS Urls ...
-            var concatRoot = responseXML.getElementsByTagName('concat');
-            var fileSetArray = Array.filter(concatRoot[0].childNodes, function(elem) {
-                return elem.nodeType == Node.ELEMENT_NODE
-            });
-
-            jsUrls = new Array();
-            Array.each(fileSetArray, function(elem) {
-                    var jsUrl = elem.getAttribute("dir") + elem.getAttribute("files");
-                    jsUrls.push(jsUrl.replace("${basedir}", pomUrl.substring(0, pomUrl.lastIndexOf('/'))));
-                }
-            );
-
-            // Load all JS dynamically ....
-            jsUrls = jsUrls.reverse();
-
-            function jsRecLoad(urls) {
-                if (urls.length == 0) {
-                    if ($defined(callback))
-                        callback();
-                } else {
-                    var url = urls.pop();
-                    Asset.javascript(url, {
-                        onLoad: function() {
-                            jsRecLoad(urls)
-                        }
-                    });
-                }
-            }
-
-            jsRecLoad(jsUrls);
-        },
-        onFailure: function() {
-            console.log('Sorry, your request failed :(');
-        }
-    });
-    request.send();
-
-}
-
-var localEnv = true;
-if (localEnv) {
-    Asset.javascript("../../../../../web2d/target/classes/web2d.svg-min.js", {
-        onLoad: function() {
-            JSPomLoader('../../../../../mindplot/pom.xml', function() {
-                $(document).fireEvent('loadcomplete', 'mind')
-            });
-        }
-    });
-} else {
-    Asset.javascript("../js/mindplot-min.js", {
-        onLoad:function() {
-            $(document).fireEvent('loadcomplete', 'mind')
-        }
-    });
-}

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

@@ -159,26 +159,27 @@ div#toolbar .buttonContainer {
     -moz-margin-end: 7px;
 }
 
-div#toolbar .button {
+div#toolbar .buttonOn, div#toolbar .buttonOff, div#toolbar .buttonActive, div#toolbar .buttonOn:hover {
     width: 32px;
     height: 36px;
     float: left;
     margin: 0 2px 2px 2px;
-    cursor: pointer;
     text-align: center;
 }
 
-div#toolbar .button:hover {
+div#toolbar .buttonOn:hover, div#toolbar .buttonActive {
-    width: 32px;
-    height: 36px;
-    float: left;
     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;
@@ -739,19 +740,3 @@ div#toolbar .topicRelation:hover {
 div#toolbar .relationshiplabel {
     width: 56px;
 }
-
-div#toolbar .buttonActive {
-    width: 32px;
-    height: 36px;
-    float: left;
-    margin: 0 1px;
-    cursor: pointer;
-    border: 1px solid black;
-    border-top-color: white;
-    border-left-color: white;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
-    user-select: none;
-}

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

@@ -126,24 +126,24 @@
                 <legend>
                     <spring:message code="FILE"/>
                 </legend>
-                <div id="saveButton" class="button" title="<spring:message code="SAVE"/>">
+                <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="button" title="<spring:message code="CLOSE"/>">
+                <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="button" title="<spring:message code="UNDO_EDITION"/>">
+                <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="button" title="<spring:message code="REDO_EDITION"/>">
+                <div id="redoEdition" class="buttonOn" title="<spring:message code="REDO_EDITION"/>">
                     <div class="toolbarLabel"><p><spring:message code="REDO"/></p></div>
                 </div>
 
-                <div id="print" class="button" title="<spring:message code="PRINT"/>" onclick="printMap();">
+                <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="button" title="<spring:message code="EXPORT"/>">
+                <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"/>">
@@ -156,10 +156,10 @@
                 <legend>
                     <spring:message code="ZOOM"/>
                 </legend>
-                <div id="zoomIn" class="button" title="<spring:message code="ZOOM_IN"/>">
+                <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="button" title="<spring:message code="ZOOM_OUT"/>">
+                <div id="zoomOut" class="buttonOn" title="<spring:message code="ZOOM_OUT"/>">
                     <div class="toolbarLabel"><p><spring:message code="OUT"/></p></div>
                 </div>
             </fieldset>
@@ -169,31 +169,31 @@
                 <legend>
                     <spring:message code="TOPIC"/>
                 </legend>
-                <div id="topicShape" class="button" title="<spring:message code="TOPIC_SHAPE"/>">
+                <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="button" title="<spring:message code="TOPIC_ADD"/>">
+                <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="button" title="<spring:message code="TOPIC_DELETE"/>">
+                <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="button" title="<spring:message code="TOPIC_BORDER_COLOR"/>">
+                <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="button" title="<spring:message code="TOPIC_BACKGROUND_COLOR"/>">
+                <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="button" title="<spring:message code="TOPIC_ICON"/>">
+                <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="button" title="<spring:message code="TOPIC_NOTE"/>">
+                <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="button" title="<spring:message code="TOPIC_LINK"/>">
+                <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 button"
+                <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>
@@ -204,19 +204,19 @@
                 <legend>
                     <spring:message code="FONT"/>
                 </legend>
-                <div id="fontFamily" class="button" title="<spring:message code="FONT_TYPE"/>">
+                <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="button" title="<spring:message code="FONT_SIZE"/>">
+                <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="button" title="<spring:message code="FONT_BOLD"/>">
+                <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="button" title="<spring:message code="FONT_ITALIC"/>">
+                <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="button" title="<spring:message code="FONT_COLOR"/>">
+                <div id="fontColor" class="buttonOn" title="<spring:message code="FONT_COLOR"/>">
                     <div class="toolbarLabel"><p><spring:message code="COLOR"/></p></div>
                 </div>
             </fieldset>
@@ -230,7 +230,7 @@
                         </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="button" title="<spring:message code="TAG"/>">
+                            <div id="tagIt" class="buttonOn" title="<spring:message code="TAG"/>">
                                 <div class="toolbarLabel"><p><spring:message code="TAG"/></p></div>
                             </div>
                         </a>
@@ -238,14 +238,14 @@
                             <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="button" title="<spring:message code="COLLABORATION"/>">
+                                    <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="button" title="<spring:message code="PUBLISH"/>">
+                                    <div id="publishIt" class="buttonOn" title="<spring:message code="PUBLISH"/>">
                                         <div class="toolbarLabel"><p><spring:message code="PUBLISH"/></p></div>
                                     </div>
                                 </a>
@@ -253,7 +253,7 @@
                         </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="button" 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>
@@ -264,16 +264,16 @@
                         <legend>
                             <spring:message code="COLLABORATION"/>
                         </legend>
-                        <div id="tagIt" class="button" title="<spring:message code="TAG"/>">
+                        <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="button" title="<spring:message code="COLLABORATE"/>">
+                        <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="button" title="<spring:message code="PUBLISH"/>">
+                        <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="button" 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>
                     </fieldset>