From ce53e8e726260a356a379d565c35c0d8e7f14f7a Mon Sep 17 00:00:00 2001
From: Paulo Gustavo Veiga <pveiga@wisemapping.com>
Date: Mon, 19 Mar 2012 23:29:52 -0300
Subject: [PATCH] Add tooltip to menu.

---
 mindplot/pom.xml                              |  1 +
 .../src/main/javascript/DesignerKeyboard.js   |  8 +++
 .../widget/KeyboardShortcutTooltip.js         | 71 +++++++++++++++++++
 mindplot/src/main/javascript/widget/Menu.js   | 54 +++++++++++++-
 .../src/main/javascript/widget/lightbox.css   | 49 -------------
 wise-editor/src/main/webapp/css/editor.less   |  8 +++
 wise-editor/src/main/webapp/html/drag.html    | 42 +++++------
 wise-editor/src/main/webapp/html/editor.html  | 42 +++++------
 .../src/main/webapp/html/embedded.html        | 40 +++++------
 wise-webapp/doc/Configuration.md              |  1 +
 .../src/main/webapp/WEB-INF/app.properties    | 41 ++++++++---
 .../webapp/WEB-INF/wisemapping-service.xml    |  2 +-
 12 files changed, 238 insertions(+), 121 deletions(-)
 create mode 100644 mindplot/src/main/javascript/widget/KeyboardShortcutTooltip.js
 delete mode 100644 mindplot/src/main/javascript/widget/lightbox.css

diff --git a/mindplot/pom.xml b/mindplot/pom.xml
index a5495371..8176743d 100644
--- a/mindplot/pom.xml
+++ b/mindplot/pom.xml
@@ -148,6 +148,7 @@
                                     <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/widget/" files="KeyboardShortcutTooltip.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/"
                                               files="widget/ColorPalettePanel.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/"
diff --git a/mindplot/src/main/javascript/DesignerKeyboard.js b/mindplot/src/main/javascript/DesignerKeyboard.js
index 47f53a2c..58313bb7 100644
--- a/mindplot/src/main/javascript/DesignerKeyboard.js
+++ b/mindplot/src/main/javascript/DesignerKeyboard.js
@@ -97,6 +97,14 @@ mindplot.DesignerKeyboard = new Class({
                 designer.redo();
             }.bind(this),
 
+            'ctrl+y' :function() {
+                designer.redo();
+            }.bind(this),
+
+            'meta+y' : function() {
+                designer.redo();
+            }.bind(this),
+
             'ctrl+a' : function(event) {
                 designer.selectAll();
                 event.preventDefault();
diff --git a/mindplot/src/main/javascript/widget/KeyboardShortcutTooltip.js b/mindplot/src/main/javascript/widget/KeyboardShortcutTooltip.js
new file mode 100644
index 00000000..0e1b0054
--- /dev/null
+++ b/mindplot/src/main/javascript/widget/KeyboardShortcutTooltip.js
@@ -0,0 +1,71 @@
+/*
+ *    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.KeyboardShortcutTooltip = new Class({
+    Extends: mindplot.widget.FloatingTip,
+
+    initialize : function(buttonElem, text) {
+        $assert(buttonElem, "buttonElem can not be null");
+        $assert(text, "text can not be null");
+        this._text = text;
+
+        var children = buttonElem.getChildren();
+        var tipElemId = buttonElem.id + "Tip";
+        var tipDiv = new Element('div', {id:tipElemId});
+        children[0].inject(tipDiv);
+        tipDiv.inject(buttonElem);
+
+        this.parent(tipDiv, {
+            // Content can also be a function of the target element!
+            content: this._buildContent.pass(buttonElem, this),
+            html: true,
+            position: 'bottom',
+            arrowOffset : 10,
+            center: true,
+            arrowSize: 3,
+            offset : {x:0,y:-2},
+            className: 'keyboardShortcutTip',
+            preventHideOnOver : false,
+            motionOnShow:false,
+            motionOnHide:false,
+            fx: { 'duration': '100' }
+        });
+
+        tipDiv.addEvent('click', function(e) {
+            tipDiv.fireEvent('mouseleave', e);
+        });
+    },
+
+    _buildContent : function() {
+        var result = new Element('div');
+        result.setStyles({
+            padding:'3px 0px',
+            width:'100%'
+        });
+
+        var textContainer = new Element('div', {text:this._text});
+        textContainer.setStyles({
+            width: '100%',
+            textAlign: 'center',
+            'font-weight':'bold'
+        });
+
+        textContainer.inject(result);
+        return result;
+    }
+});
\ No newline at end of file
diff --git a/mindplot/src/main/javascript/widget/Menu.js b/mindplot/src/main/javascript/widget/Menu.js
index 3014a08f..67a1f5e2 100644
--- a/mindplot/src/main/javascript/widget/Menu.js
+++ b/mindplot/src/main/javascript/widget/Menu.js
@@ -59,6 +59,8 @@ mindplot.widget.Menu = new Class({
             }
         };
         this._toolbarElems.push(new mindplot.widget.FontFamilyPanel("fontFamily", fontFamilyModel));
+        this._registerTooltip('fontFamily', "Text type");
+
 
         var fontSizeModel = {
             getValue: function() {
@@ -79,6 +81,8 @@ mindplot.widget.Menu = new Class({
             }
         };
         this._toolbarElems.push(new mindplot.widget.FontSizePanel("fontSize", fontSizeModel));
+        this._registerTooltip('fontSize', "Text size");
+
 
         var topicShapeModel = {
             getValue: function() {
@@ -99,6 +103,8 @@ mindplot.widget.Menu = new Class({
             }
         };
         this._toolbarElems.push(new mindplot.widget.TopicShapePanel("topicShape", topicShapeModel));
+        this._registerTooltip('topicShape', "Topic shape");
+
 
         // Create icon panel dialog ...
         var topicIconModel = {
@@ -110,6 +116,8 @@ mindplot.widget.Menu = new Class({
             }
         };
         this._toolbarElems.push(new mindplot.widget.IconPanel('topicIcon', topicIconModel));
+        this._registerTooltip('topicIcon', "Icon");
+
 
         // Topic color item ...
         var topicColorModel =
@@ -132,6 +140,8 @@ mindplot.widget.Menu = new Class({
             }
         };
         this._toolbarElems.push(new mindplot.widget.ColorPalettePanel('topicColor', topicColorModel, widgetsBaseUrl));
+        this._registerTooltip('topicColor', "Topic color");
+
 
         // Border color item ...
         var borderColorModel =
@@ -154,6 +164,8 @@ mindplot.widget.Menu = new Class({
             }
         };
         this._toolbarElems.push(new mindplot.widget.ColorPalettePanel('topicBorder', borderColorModel, widgetsBaseUrl));
+        this._registerTooltip('topicBorder', "Border color");
+
 
         // Font color item ...
         var fontColorModel =
@@ -176,8 +188,10 @@ mindplot.widget.Menu = new Class({
             }
         };
         this._toolbarElems.push(new mindplot.widget.ColorPalettePanel('fontColor', fontColorModel, baseUrl));
+        this._registerTooltip('fontColor', "Text color");
 
-        this._addButton('export', false, false, function() {
+
+        this._addButton('export', false, false, "Export", function() {
             var reqDialog = new MooDialog.Request('c/export.htm?mapId=' + mapId, null,
                 {'class': 'exportModalDialog',
                     closeButton:true,
@@ -191,60 +205,86 @@ mindplot.widget.Menu = new Class({
             });
             MooDialog.Request.active = reqDialog;
         });
+        this._registerTooltip('export', "Export");
+
 
         this._addButton('print', false, false, function() {
             printMap();
         });
+        this._registerTooltip('print', "Print");
 
         this._addButton('zoomIn', false, false, function() {
             designer.zoomIn();
         });
+        this._registerTooltip('zoomIn', "Zoom in");
 
         this._addButton('zoomOut', false, false, function() {
             designer.zoomOut();
         });
+        this._registerTooltip('zoomOut', "Zoom out");
+
 
         this._addButton('undoEdition', false, false, function() {
             designer.undo();
         });
+        this._registerTooltip('undoEdition', "Undo", "meta+Z");
+
 
         this._addButton('redoEdition', false, false, function() {
             designer.redo();
         });
+        this._registerTooltip('redoEdition', "Redo", "meta+Y");
+
 
         this._addButton('addTopic', true, false, function() {
             designer.createChildForSelectedNode();
         });
+        this._registerTooltip('addTopic', "Add topic", "Enter");
+
 
         this._addButton('deleteTopic', true, true, function() {
             designer.deleteCurrentNode();
         });
+        this._registerTooltip('deleteTopic', "Delete topic", "Backspace");
+
 
         this._addButton('topicLink', true, false, function() {
             designer.addLink();
         });
+        this._registerTooltip('topicLink', "Add link");
+
 
         this._addButton('topicRelation', true, false, function(event) {
             designer.showRelPivot(event);
         });
+        this._registerTooltip('topicRelation', "Relationship");
+
 
         this._addButton('topicNote', true, false, function() {
             designer.addNote();
         });
+        this._registerTooltip('topicNote', "Add note");
+
 
         this._addButton('fontBold', true, false, function() {
             designer.changeFontWeight();
         });
+        this._registerTooltip('fontBold', "Text bold", "meta+B");
+
 
         this._addButton('fontItalic', true, false, function() {
             designer.changeFontStyle();
         });
+        this._registerTooltip('fontItalic', "Text italic", "meta+I");
+
 
         var saveElem = $('save');
         if (saveElem) {
             this._addButton('save', false, false, function() {
                 this.save(saveElem, designer, true);
             }.bind(this));
+            this._registerTooltip('save', "Save", "meta+S");
+
 
             if (!readOnly) {
                 // To prevent the user from leaving the page with changes ...
@@ -269,6 +309,7 @@ mindplot.widget.Menu = new Class({
                 this.discard();
                 window.location.reload();
             }.bind(this));
+            this._registerTooltip('discard', "Discard");
         }
 
         var tagElem = $('tagIt');
@@ -404,7 +445,18 @@ mindplot.widget.Menu = new Class({
                 fn(event);
                 this.clear();
             }.bind(this), {topicAction:topic,relAction:rel});
+
             this._toolbarElems.push(button);
         }
+    },
+
+    _registerTooltip: function(buttonId, text, shortcut) {
+        if ($(buttonId)) {
+            var tooltip = text;
+            if (shortcut) {
+                tooltip = tooltip + " (" + shortcut + ")";
+            }
+            new mindplot.widget.KeyboardShortcutTooltip($(buttonId), tooltip);
+        }
     }
 });
\ No newline at end of file
diff --git a/mindplot/src/main/javascript/widget/lightbox.css b/mindplot/src/main/javascript/widget/lightbox.css
deleted file mode 100644
index 71654504..00000000
--- a/mindplot/src/main/javascript/widget/lightbox.css
+++ /dev/null
@@ -1,49 +0,0 @@
-#lightbox {
-    display: none;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    z-index: 9999;
-    width: 300px;
-    height: 300px;
-    margin: -150px 0 0 -150px;
-}
-
-#lightbox[id] {
-    position: fixed;
-}
-
-#overlay-lightbox {
-    display: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 3000px; /* IE hack */
-    height: 3000px; /* IE hack */
-    z-index: 5000;
-    /*background-color: snow;*/
-    background-color: #000;
-    -moz-opacity: 0.8;
-    opacity: .80;
-    filter: alpha(opacity = 80);
-}
-
-#overlay-lightbox[id] {
-    position: fixed;
-}
-
-#lightbox.done #lbLoadMessage {
-    display: none;
-}
-
-#lightbox.done #lbContent {
-    display: block;
-}
-
-#lightbox.loading #lbContent {
-    display: none;
-}
-
-#lightbox.loading #lbLoadMessage {
-    display: block;
-}
\ No newline at end of file
diff --git a/wise-editor/src/main/webapp/css/editor.less b/wise-editor/src/main/webapp/css/editor.less
index 4abd09b9..6043ddbd 100644
--- a/wise-editor/src/main/webapp/css/editor.less
+++ b/wise-editor/src/main/webapp/css/editor.less
@@ -51,6 +51,14 @@ div#small_error_icon {
     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
 }
 
+.keyboardShortcutTip {
+    background-color: black;
+    padding: 5px 15px;
+    color: white;
+    font-weight: bold;
+    font-size: 11px;
+}
+
 /* */
 .btn-primary {
     cursor: pointer;
diff --git a/wise-editor/src/main/webapp/html/drag.html b/wise-editor/src/main/webapp/html/drag.html
index de394295..c27162a6 100644
--- a/wise-editor/src/main/webapp/html/drag.html
+++ b/wise-editor/src/main/webapp/html/drag.html
@@ -120,75 +120,75 @@
     <div id="toolbar">
         <div id="editTab" class="tabContent">
             <div id="persist" class="buttonContainer">
-                <div id="save" class="buttonOn" title="Save">
+                <div id="save" class="buttonOn">
                     <img src="images/save.png"/>
                 </div>
-                <div id="discard" class="buttonOn" title="Discard">
+                <div id="discard" class="buttonOn">
                     <img src="images/discard.png"/>
                 </div>
-                <div id="export" class="buttonOn" title="Export">
+                <div id="export" class="buttonOn">
                     <img src="images/export.png"/>
                 </div>
             </div>
             <div id="edit" class="buttonContainer">
-                <div id="undoEdition" class="buttonOn" title="Undo Edition">
+                <div id="undoEdition" class="buttonOn">
                     <img src="images/undo.png"/>
                 </div>
-                <div id="redoEdition" class="buttonOn" title="Redo Edition">
+                <div id="redoEdition" class="buttonOn">
                     <img src="images/redo.png"/>
                 </div>
             </div>
             <div id="zoom" class="buttonContainer">
-                <div id="zoomIn" class="buttonOn" title="Zoom In">
+                <div id="zoomIn" class="buttonOn">
                     <img src="images/zoom-in.png"/>
                 </div>
-                <div id="zoomOut" class="buttonOn" title="Zoom Out">
+                <div id="zoomOut" class="buttonOn">
                     <img src="images/zoom-out.png"/>
                 </div>
             </div>
             <div id="node" class="buttonContainer">
-                <div id="topicShape" class="buttonExtOn" title="Topic Shape">
+                <div id="topicShape" class="buttonExtOn">
                     <img src="images/topic-shape.png"/>
                 </div>
-                <div id="addTopic" class="buttonOn" title="Add Topic">
+                <div id="addTopic" class="buttonOn">
                     <img src="images/topic-add.png"/>
                 </div>
-                <div id="deleteTopic" class="buttonOn" title="Delete">
+                <div id="deleteTopic" class="buttonOn">
                     <img src="images/topic-delete.png"/>
                 </div>
-                <div id="topicBorder" class="buttonExtOn" title="Border Color">
+                <div id="topicBorder" class="buttonExtOn">
                     <img src="images/topic-border.png"/>
                 </div>
-                <div id="topicColor" class="buttonExtOn" title="Background Color">
+                <div id="topicColor" class="buttonExtOn">
                     <img src="images/topic-color.png"/>
                 </div>
-                <div id="topicIcon" class="buttonExtOn" title="Add Icon">
+                <div id="topicIcon" class="buttonExtOn">
                     <img src="images/topic-icon.png"/>
                 </div>
-                <div id="topicNote" class="buttonOn" title="Add Note">
+                <div id="topicNote" class="buttonOn">
                     <img src="images/topic-note.png"/>
                 </div>
-                <div id="topicLink" class="buttonOn" title="Add Link">
+                <div id="topicLink" class="buttonOn">
                     <img src="images/topic-link.png"/>
                 </div>
-                <div id="topicRelation" class="buttonOn" title="Add Relationship">
+                <div id="topicRelation" class="buttonOn">
                     <img src="images/topic-relation.png"/>
                 </div>
             </div>
             <div id="font" class="buttonContainer">
-                <div id="fontFamily" class="buttonExtOn" title="Font Style">
+                <div id="fontFamily" class="buttonExtOn">
                     <img src="images/font-type.png"/>
                 </div>
-                <div id="fontSize" class="buttonExtOn" title="Font Size">
+                <div id="fontSize" class="buttonExtOn">
                     <img src="images/font-size.png"/>
                 </div>
-                <div id="fontBold" class="buttonOn" title="Bold Style">
+                <div id="fontBold" class="buttonOn">
                     <img src="images/font-bold.png"/>
                 </div>
-                <div id="fontItalic" class="buttonOn" title="Italic Style">
+                <div id="fontItalic" class="buttonOn">
                     <img src="images/font-italic.png"/>
                 </div>
-                <div id="fontColor" class="buttonExtOn" title="Font Color" style="padding-top:4px">
+                <div id="fontColor" class="buttonExtOn" style="padding-top:4px">
                     <img src="images/font-color.png"/>
                 </div>
             </div>
diff --git a/wise-editor/src/main/webapp/html/editor.html b/wise-editor/src/main/webapp/html/editor.html
index 89b9c44b..2f546168 100644
--- a/wise-editor/src/main/webapp/html/editor.html
+++ b/wise-editor/src/main/webapp/html/editor.html
@@ -47,75 +47,75 @@
     <div id="toolbar">
         <div id="editTab" class="tabContent">
             <div id="persist" class="buttonContainer">
-                <div id="save" class="buttonOn" title="Save">
+                <div id="save" class="buttonOn">
                     <img src="images/save.png"/>
                 </div>
-                <div id="discard" class="buttonOn" title="Discard">
+                <div id="discard" class="buttonOn">
                     <img src="images/discard.png"/>
                 </div>
-                <div id="export" class="buttonOn" title="Export">
+                <div id="export" class="buttonOn">
                     <img src="images/export.png"/>
                 </div>
             </div>
             <div id="edit" class="buttonContainer">
-                <div id="undoEdition" class="buttonOn" title="Undo Edition">
+                <div id="undoEdition" class="buttonOn">
                     <img src="images/undo.png"/>
                 </div>
-                <div id="redoEdition" class="buttonOn" title="Redo Edition">
+                <div id="redoEdition" class="buttonOn">
                     <img src="images/redo.png"/>
                 </div>
             </div>
             <div id="zoom" class="buttonContainer">
-                <div id="zoomIn" class="buttonOn" title="Zoom In">
+                <div id="zoomIn" class="buttonOn">
                     <img src="images/zoom-in.png"/>
                 </div>
-                <div id="zoomOut" class="buttonOn" title="Zoom Out">
+                <div id="zoomOut" class="buttonOn">
                     <img src="images/zoom-out.png"/>
                 </div>
             </div>
             <div id="node" class="buttonContainer">
-                <div id="topicShape" class="buttonExtOn" title="Topic Shape">
+                <div id="topicShape" class="buttonExtOn">
                     <img src="images/topic-shape.png"/>
                 </div>
-                <div id="addTopic" class="buttonOn" title="Add Topic">
+                <div id="addTopic" class="buttonOn">
                     <img src="images/topic-add.png"/>
                 </div>
-                <div id="deleteTopic" class="buttonOn" title="Delete">
+                <div id="deleteTopic" class="buttonOn">
                     <img src="images/topic-delete.png"/>
                 </div>
-                <div id="topicBorder" class="buttonExtOn" title="Border Color">
+                <div id="topicBorder" class="buttonExtOn">
                     <img src="images/topic-border.png"/>
                 </div>
-                <div id="topicColor" class="buttonExtOn" title="Background Color">
+                <div id="topicColor" class="buttonExtOn">
                     <img src="images/topic-color.png"/>
                 </div>
-                <div id="topicIcon" class="buttonExtOn" title="Add Icon">
+                <div id="topicIcon" class="buttonExtOn">
                     <img src="images/topic-icon.png"/>
                 </div>
-                <div id="topicNote" class="buttonOn" title="Add Note">
+                <div id="topicNote" class="buttonOn">
                     <img src="images/topic-note.png"/>
                 </div>
-                <div id="topicLink" class="buttonOn" title="Add Link">
+                <div id="topicLink" class="buttonOn">
                     <img src="images/topic-link.png"/>
                 </div>
-                <div id="topicRelation" class="buttonOn" title="Add Relationship">
+                <div id="topicRelation" class="buttonOn">
                     <img src="images/topic-relation.png"/>
                 </div>
             </div>
             <div id="font" class="buttonContainer">
-                <div id="fontFamily" class="buttonExtOn" title="Font Style">
+                <div id="fontFamily" class="buttonExtOn">
                     <img src="images/font-type.png"/>
                 </div>
-                <div id="fontSize" class="buttonExtOn" title="Font Size">
+                <div id="fontSize" class="buttonExtOn">
                     <img src="images/font-size.png"/>
                 </div>
-                <div id="fontBold" class="buttonOn" title="Bold Style">
+                <div id="fontBold" class="buttonOn">
                     <img src="images/font-bold.png"/>
                 </div>
-                <div id="fontItalic" class="buttonOn" title="Italic Style">
+                <div id="fontItalic" class="buttonOn">
                     <img src="images/font-italic.png"/>
                 </div>
-                <div id="fontColor" class="buttonExtOn" title="Font Color" style="padding-top:4px">
+                <div id="fontColor" class="buttonExtOn" style="padding-top:4px">
                     <img src="images/font-color.png"/>
                 </div>
             </div>
diff --git a/wise-editor/src/main/webapp/html/embedded.html b/wise-editor/src/main/webapp/html/embedded.html
index b29e229e..425863c3 100644
--- a/wise-editor/src/main/webapp/html/embedded.html
+++ b/wise-editor/src/main/webapp/html/embedded.html
@@ -57,72 +57,72 @@
     <div id="toolbar">
         <div id="editTab" class="tabContent">
             <div id="persist" class="buttonContainer">
-                <div id="save" class="buttonOn" title="Save">
+                <div id="save" class="buttonOn">
                     <img src="images/save.png"/>
                 </div>
-                <div id="discard" class="buttonOn" title="Discard">
+                <div id="discard" class="buttonOn">
                     <img src="images/discard.png"/>
                 </div>
             </div>
             <div id="edit" class="buttonContainer">
-                <div id="undoEdition" class="buttonOn" title="Undo Edition">
+                <div id="undoEdition" class="buttonOn">
                     <img src="images/undo.png"/>
                 </div>
-                <div id="redoEdition" class="buttonOn" title="Redo Edition">
+                <div id="redoEdition" class="buttonOn">
                     <img src="images/redo.png"/>
                 </div>
             </div>
             <div id="zoom" class="buttonContainer">
-                <div id="zoomIn" class="buttonOn" title="Zoom In">
+                <div id="zoomIn" class="buttonOn">
                     <img src="images/zoom-in.png"/>
                 </div>
-                <div id="zoomOut" class="buttonOn" title="Zoom Out">
+                <div id="zoomOut" class="buttonOn">
                     <img src="images/zoom-out.png"/>
                 </div>
             </div>
             <div id="node" class="buttonContainer">
-                <div id="topicShape" class="buttonExtOn" title="Topic Shape">
+                <div id="topicShape" class="buttonExtOn">
                     <img src="images/topic-shape.png"/>
                 </div>
-                <div id="addTopic" class="buttonOn" title="Add Topic">
+                <div id="addTopic" class="buttonOn">
                     <img src="images/topic-add.png"/>
                 </div>
-                <div id="deleteTopic" class="buttonOn" title="Delete">
+                <div id="deleteTopic" class="buttonOn">
                     <img src="images/topic-delete.png"/>
                 </div>
-                <div id="topicBorder" class="buttonOn" title="Border Color">
+                <div id="topicBorder" class="buttonOn">
                     <img src="images/topic-border.png"/>
                 </div>
-                <div id="topicColor" class="buttonExtOn" title="Background Color">
+                <div id="topicColor" class="buttonExtOn">
                     <img src="images/topic-color.png"/>
                 </div>
-                <div id="topicIcon" class="buttonExtOn" title="Add Icon">
+                <div id="topicIcon" class="buttonExtOn">
                     <img src="images/topic-icon.png"/>
                 </div>
-                <div id="topicNote" class="buttonOn" title="Add Note">
+                <div id="topicNote" class="buttonOn">
                     <img src="images/topic-note.png"/>
                 </div>
-                <div id="topicLink" class="buttonOn" title="Add Link">
+                <div id="topicLink" class="buttonOn">
                     <img src="images/topic-link.png"/>
                 </div>
-                <div id="topicRelation" class="buttonOn" title="Add Relationship">
+                <div id="topicRelation" class="buttonOn">
                     <img src="images/topic-relation.png"/>
                 </div>
             </div>
             <div id="font" class="buttonContainer">
-                <div id="fontFamily" class="buttonOn" title="Font Style">
+                <div id="fontFamily" class="buttonOn">
                     <img src="images/font-type.png"/>
                 </div>
-                <div id="fontSize" class="buttonExtOn" title="Font Size">
+                <div id="fontSize" class="buttonExtOn">
                     <img src="images/font-size.png"/>
                 </div>
-                <div id="fontBold" class="buttonOn" title="Bold Style">
+                <div id="fontBold" class="buttonOn">
                     <img src="images/font-bold.png"/>
                 </div>
-                <div id="fontItalic" class="buttonOn" title="Italic Style">
+                <div id="fontItalic" class="buttonOn">
                     <img src="images/font-italic.png"/>
                 </div>
-                <div id="fontColor" class="buttonExtOn" title="Fond Color" style="padding-top:4px">
+                <div id="fontColor" class="buttonExtOn" style="padding-top:4px">
                     <img src="images/font-color.png"/>
 
                 </div>
diff --git a/wise-webapp/doc/Configuration.md b/wise-webapp/doc/Configuration.md
index e69de29b..358dcf39 100644
--- a/wise-webapp/doc/Configuration.md
+++ b/wise-webapp/doc/Configuration.md
@@ -0,0 +1 @@
+# SMTP Server Configurat
diff --git a/wise-webapp/src/main/webapp/WEB-INF/app.properties b/wise-webapp/src/main/webapp/WEB-INF/app.properties
index d7c00098..6cd58562 100755
--- a/wise-webapp/src/main/webapp/WEB-INF/app.properties
+++ b/wise-webapp/src/main/webapp/WEB-INF/app.properties
@@ -21,15 +21,40 @@ database.password=
 # Mail configuration. Must be configured to enable user registration confirmation.
 ##################################################################################
 
-# SSL configuration
-# mail.smtp.socketFactory.class=javax.net.ssl.SSLSocketFactory
-mail.smtp.socketFactory.class=javax.net.DefaultSocketFactory
-mail.smtp.socketFactory.port=25
+#------------------------
+# Plain SMTP Server Configuration
+#------------------------
+#mail.smtp.socketFactory.class=javax.net.DefaultSocketFactory
+#mail.smtp.socketFactory.port=25
+#mail.smtp.auth = false
+#mail.host=localhost
+#mail.user=
+#mail.password=
+
+#------------------------
+# SSL SMTP Server Configuration
+#------------------------
+# mail.smtp.socketFactory.class=javax.net.ssl.SSLSocketFactory
+#mail.smtp.socketFactory.port=465
+#mail.smtp.auth = false
+#mail.host=localhost
+#mail.user=
+#mail.password=
+
+#------------------------
+# GMAIL SMTP Configuration
+#------------------------
+mail.smtp.socketFactory.port=587
+mail.smtp.auth = true
+mail.host=smtp.gmail.com
+mail.user=pveiga@wisemapping.com
+mail.password=p0w3rwdff
+mail.smtp.starttls.enable=true
+
+#------------------------
+# Domain address
+#------------------------
 
-mail.smtp.auth = false
-mail.host=localhost
-mail.user=
-mail.password=
 mail.registrationEmail=root@localhost
 mail.siteEmail=root@localhost
 
diff --git a/wise-webapp/src/main/webapp/WEB-INF/wisemapping-service.xml b/wise-webapp/src/main/webapp/WEB-INF/wisemapping-service.xml
index a93e24e2..637874e0 100755
--- a/wise-webapp/src/main/webapp/WEB-INF/wisemapping-service.xml
+++ b/wise-webapp/src/main/webapp/WEB-INF/wisemapping-service.xml
@@ -54,7 +54,7 @@
                 <prop key="mail.smtp.socketFactory.fallback">false</prop>
                 <prop key="mail.smtp.quitwait">false</prop>
                 <prop key="mail.smtp.debug">true</prop>
-
+                <prop key="mail.smtp.starttls.enable">${mail.smtp.starttls.enable}</prop>
             </props>
         </constructor-arg>
         <constructor-arg ref="smtpAuthenticator"/>