Fix toolbar strange resize.

2024-11-22 06:07:57 +01:00 · 2011-08-10 23:13:13 -03:00 · 2011-08-10 23:13:13 -03:00 · d27d15e162
commit d27d15e162
parent 37734ea95c
15 changed files with 104 additions and 582 deletions
--- a/mindplot/pom.xml
+++ b/mindplot/pom.xml
@ -179,17 +179,18 @@
                                    <filelist dir="${basedir}/src/main/javascript/"
                                              files="widget/ColorPalettePanel.js"/>
                                    <filelist dir="${basedir}/src/main/javascript/"
-                                              files="widget/IconPanel.js"/>
-                                    <filelist dir="${basedir}/src/main/javascript/"
-                                              files="widget/ToolbarPanel.js"/>
+                                              files="widget/ListToolbarPanel.js"/>
                                    <filelist dir="${basedir}/src/main/javascript/"
                                              files="widget/FontFamilyPanel.js"/>
                                    <filelist dir="${basedir}/src/main/javascript/"
                                              files="widget/FontSizePanel.js"/>
                                    <filelist dir="${basedir}/src/main/javascript/"
                                              files="widget/TopicShapePanel.js"/>
+                                    <filelist dir="${basedir}/src/main/javascript/"
+                                              files="widget/IconPanel.js"/>
                                    <filelist dir="${basedir}/src/main/javascript/"
                                              files="widget/Menu.js"/>
+
                                    <filelist dir="${basedir}/src/main/javascript/" files="footer.js"/>
                                </concat>

--- a/mindplot/src/main/javascript/Issue.txt
+++ b/mindplot/src/main/javascript/Issue.txt
@ -1,25 +0,0 @@
-
-Pablo
----------
-
-Paulo
------
-* El mouse over se rompe una vez que se hace el select de algun node. Debe estar rompiendo el
- lister o algo parecido.
-** Evitar los cambios de size inecesarios y posicion inecesarios, de esta manera menos flick. Esto en el updater.
-* Queda un ratro raro cuando se hace drag and drop en explorer.
-
-
-
-Later
-------
-* Cuanto mas grande el grafo, mas lento de hace el primer momento del drag. Con lo cual, es conveniente reutilizar los
-nodos en vez de borrarlos.
-* Menu contextual para agregar nodos.
-* Es necesario manejar para los central topic to main topic correctamente el concepto de height.
-
-
-
-From: RelationshipLine
- Falta topic...
-XMLMindmapSerializer_Beta
--- a/mindplot/src/main/javascript/Topic.js
+++ b/mindplot/src/main/javascript/Topic.js
@ -686,8 +686,14 @@ mindplot.Topic = new Class({

        // Focus events ...
        var mouseDown = function(event) {
-            topic.setOnFocus(true);
-        };
+            var value = true;
+            if ((event.metaKey && Browser.Platform.mac) || (event.ctrlKey && !Browser.Platform.mac)) {
+                value = !this.isOnFocus();
+                event.stopPropagation();
+                event.preventDefault();
+            }
+            topic.setOnFocus(value);
+        }.bind(this);
        elem.addEventListener('mousedown', mouseDown);
    },

--- a/mindplot/src/main/javascript/widget/ColorPalettePanel.js
+++ b/mindplot/src/main/javascript/widget/ColorPalettePanel.js
@ -20,19 +20,9 @@ mindplot.widget.ColorPalettePanel = new Class({
    Extends: mindplot.widget.ToolbarItem,

    initialize : function(buttonId, model, baseUrl) {
+        this._baseUrl = baseUrl;
        this.parent(buttonId, model);
        $assert(baseUrl, "baseUrl can not be null");
-
-        this.getButtonElem().addEvent('click', function() {
-            // Is the panel being displayed ?
-            if (this.isVisible()) {
-                this.hide();
-            } else {
-                this.show();
-            }
-
-        }.bind(this));
-        this._baseUrl = baseUrl;
    },

    _load : function() {
@ -65,17 +55,13 @@ mindplot.widget.ColorPalettePanel = new Class({
        return mindplot.widget.ColorPalettePanel._panelContent;
    },

-    _init : function() {
-        if (!this._panelContent) {
-            var buttonElem = this.getButtonElem();

-            // Add panel content ..
-            var panelElem = this.buildPanel();
-            panelElem.setStyle('display', 'none');
-            panelElem.inject(buttonElem);
+    buildPanel: function() {
+        var content = new Element("div", {'class':'toolbarPanel','id': this._buttonId + 'colorPalette'});
+        content.innerHTML = this._load();

        // Register on toolbar elements ...
-            var colorCells = panelElem.getElements('div[class=palette-colorswatch]');
+        var colorCells = content.getElements('div[class=palette-colorswatch]');
        var model = this.getModel();
        colorCells.forEach(function(elem) {
            elem.addEvent('click', function() {
@ -83,28 +69,14 @@ mindplot.widget.ColorPalettePanel = new Class({
                model.setValue(color);
            });
        });
-            this._panelId = panelElem.id;
-            this._panelContent = true;
-        }

-    },
-
-    buildPanel: function() {
-        var content = new Element("div", {'class':'toolbarPanel','id': this._buttonId + 'colorPalette'});
-        content.innerHTML = this._load();
        return content;
    },

-    _getPanelElem : function () {
-        this._init();
-        return $(this._panelId);
-    },
-
    show : function() {
        if (!this.isVisible()) {

-            this.parent();
-            var panelElem = this._getPanelElem();
+            var panelElem = this.getPanelElem();

            // Clear selected cell based on the color  ...
            var tdCells = panelElem.getElements("td[class='palette-cell palette-cell-selected']");
@ -122,20 +94,9 @@ mindplot.widget.ColorPalettePanel = new Class({
                    elem.parentNode.className = 'palette-cell palette-cell-selected';
                }
            });
-
-            // Finally, display the dialog ...
-            panelElem.setStyle('display', 'block');
        }
-    },
-
-    hide : function() {
-        if (this.isVisible()) {
        this.parent();
-            this._getPanelElem().setStyle('display', 'none');
    }
-    },

-    isVisible : function() {
-        return this._getPanelElem().getStyle('display') == 'block';
-    }
+
 });
--- a/mindplot/src/main/javascript/widget/FontFamilyPanel.js
+++ b/mindplot/src/main/javascript/widget/FontFamilyPanel.js
@ -17,7 +17,7 @@
 */

 mindplot.widget.FontFamilyPanel = new Class({
-    Extends : mindplot.widget.ToolbarPanel,
+    Extends : mindplot.widget.ListToolbarPanel,
    initialize : function(buttonId, model) {
        this.parent(buttonId, model);
    },
--- a/mindplot/src/main/javascript/widget/FontSizePanel.js
+++ b/mindplot/src/main/javascript/widget/FontSizePanel.js
@ -17,7 +17,7 @@
 */

 mindplot.widget.FontSizePanel = new Class({
-    Extends : mindplot.widget.ToolbarPanel,
+    Extends : mindplot.widget.ListToolbarPanel,
    initialize : function(buttonId, model) {
        this.parent(buttonId, model);
    },
--- a/mindplot/src/main/javascript/widget/IconPanel.js
+++ b/mindplot/src/main/javascript/widget/IconPanel.js
@ -17,101 +17,15 @@
 */

 mindplot.widget.IconPanel = new Class({
-    Extends:mindplot.widget.ToolbarItem,
-    Implements:[Options],
-    options:{
-        width:253,
-        initialWidth:0,
-        height:200,
-        panel:null,
-        onStart:Class.empty,
-        state:'close'
-    },
-
-    initialize:function(buttonId, model) {
+    Extends: mindplot.widget.ToolbarItem,
+    initialize : function(buttonId, model) {
        this.parent(buttonId, model);
-        this.options.content = this._build();
-        this.init();
    },

-    init:function() {
-        var panel = new Element('div');
-        var buttonElem = this.getButtonElem();
+    buildPanel: function() {
+        var content = new Element('div', {'class':'toolbarPanel','id':'IconsPanel'});
+        content.setStyles({width:253,height:200,padding:5});

-        var coord = buttonElem.getCoordinates();
-        var top = buttonElem.getTop() + coord.height + 7;
-        var left = buttonElem.getLeft() - 6;
-
-        panel.setStyles({
-                width:this.options.initialWidth,
-                height:0,
-                position:'absolute',
-                top:top,
-                left:left,
-                background:'#ffffff',
-                'border-color':'#CCC #666 #666 #CCC;',
-                zIndex:20,
-                overflow:'hidden'}
-        );
-
-        this.options.panel = panel;
-        this.options.content.inject(panel);
-
-        this.options.content.addEvent('click', function() {
-            this.hide();
-        }.bind(this));
-
-        panel.setStyle('opacity', 0);
-        panel.inject($(document.body));
-        this.registerOpenPanel();
-    },
-
-    show:function() {
-        this.parent();
-        if (this.options.state == 'close') {
-            if (!$defined(this.options.panel)) {
-                this.init();
-            }
-
-            var panel = this.options.panel;
-            panel.setStyles({
-                border: '1px solid #636163',
-                opacity:100,
-                height:this.options.height,
-                width:this.options.width
-            });
-            this.fireEvent('onStart');
-            this.registerClosePanel();
-            this.options.state = 'open';
-        }
-    },
-
-    hide:function() {
-        this.parent();
-        if (this.options.state == 'open') {
-            // Magic, disappear effect ;)
-            this.options.panel.setStyles({border: '1px solid transparent', opacity:0});
-            this.registerOpenPanel();
-            this.options.state = 'close';
-        }
-    },
-
-    registerOpenPanel:function() {
-        this.getButtonElem().removeEvents('click');
-        this.getButtonElem().addEvent('click', function() {
-            this.show();
-        }.bind(this));
-    },
-
-    registerClosePanel:function() {
-        this.getButtonElem().removeEvents('click');
-        this.getButtonElem().addEvent('click', function() {
-            this.hide();
-        }.bind(this));
-    } ,
-
-    _build : function() {
-        var content = new Element('div').setStyles({width:253,height:200,padding:5});
        var count = 0;
        for (var i = 0; i < mindplot.ImageIcon.prototype.ICON_FAMILIES.length; i = i + 1) {
            var familyIcons = mindplot.ImageIcon.prototype.ICON_FAMILIES[i].icons;
@ -136,5 +50,4 @@ mindplot.widget.IconPanel = new Class({
        }
        return content;
    }
-
 });
--- a/mindplot/src/main/javascript/widget/ListToolbarPanel.js
+++ b/mindplot/src/main/javascript/widget/ListToolbarPanel.js
@ -16,27 +16,16 @@
 *   limitations under the License.
 */

-mindplot.widget.ToolbarPanel = new Class({
+mindplot.widget.ListToolbarPanel = new Class({
    Extends: mindplot.widget.ToolbarItem,
    initialize : function(buttonId, model) {
        this.parent(buttonId, model);
-        this._panelId = this.initPanel();
+        this._initPanel();
    },

-    buildPanel : function() {
-        throw "Method must be implemented";
-    }.protect(),
-
-    initPanel: function () {
-        var panelElem = this.buildPanel();
-        var buttonElem = this.getButtonElem();
-
-        // Add panel content ..
-        panelElem.setStyle('display', 'none');
-        panelElem.inject(buttonElem);
-
+    _initPanel: function () {
        // Register on toolbar elements ...
-        var menuElems = panelElem.getElements('div');
+        var menuElems = this.getPanelElem().getElements('div');
        menuElems.forEach(function(elem) {
            elem.addEvent('click', function(event) {
                var value = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
@ -45,24 +34,11 @@ mindplot.widget.ToolbarPanel = new Class({
                this.hide();
            }.bind(this));
        }.bind(this));
-
-        // Font family event handling ....
-        buttonElem.addEvent('click', function(event) {
-
-            // Is the panel being displayed ?
-            if (this.isVisible()) {
-                this.hide();
-            } else {
-                this.show();
-            }
-        }.bind(this));
-        return panelElem.id;
    },

    show : function() {
        if (!this.isVisible()) {
-            this.parent();
-            var menuElems = $(this._panelId).getElements('div');
+            var menuElems = this.getPanelElem().getElements('div');
            var value = this.getModel().getValue();
            menuElems.forEach(function(elem) {
                var elemValue = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
@ -71,18 +47,8 @@ mindplot.widget.ToolbarPanel = new Class({
                else
                    elem.className = "toolbarPanelLink";
            });
-            $(this._panelId).setStyle('display', 'block');
-        }
-    },

-    hide : function() {
-        if (this.isVisible()) {
            this.parent();
-            $(this._panelId).setStyle('display', 'none');
      }
-    },
-
-    isVisible : function() {
-        return $(this._panelId).getStyle('display') == 'block';
    }
 });
--- a/mindplot/src/main/javascript/widget/ToolbarItem.js
+++ b/mindplot/src/main/javascript/widget/ToolbarItem.js
@ -23,6 +23,30 @@ mindplot.widget.ToolbarItem = new Class({
        $assert(model, "model can not be null");
        this._model = model;
        this._buttonId = buttonId;
+        this._panelId = this._init().id;
+    },
+
+    _init:function () {
+        // Load the context of the panel ...
+        var panelElem = this.buildPanel();
+        var buttonElem = this.getButtonElem();
+
+        // Add panel content ..
+        panelElem.setStyle('display', 'none');
+        panelElem.inject(buttonElem);
+
+        // Add events for button click ...
+        this.getButtonElem().addEvent('click', function() {
+            // Is the panel being displayed ?
+            if (this.isVisible()) {
+                this.hide();
+            } else {
+                this.show();
+            }
+
+        }.bind(this));
+
+        return panelElem;
   },

    getModel : function() {
@ -31,19 +55,36 @@ mindplot.widget.ToolbarItem = new Class({

    getButtonElem : function() {
        var elem = $(this._buttonId);
-        $assert(elem,"Could not find element for " + this._buttonId);
+        $assert(elem, "Could not find element for " + this._buttonId);
        return elem;
    }.protect(),

-    show : function() {
-        this.fireEvent('show');
+    getPanelElem : function() {
+        return $(this._panelId);
+    }.protect(),

-        // Mark the button as active...
+    show : function() {
+        if (!this.isVisible()) {
+            this.fireEvent('show');
            this.getButtonElem().className = 'buttonActive';
+            this.getPanelElem().setStyle('display', 'block');
+        }
    },

    hide : function() {
-        this.fireEvent('hide');
+        if (this.isVisible()) {
            this.getButtonElem().className = 'button';
+            this.getPanelElem().setStyle('display', 'none');
+            this.fireEvent('hide');
        }
+    },
+
+    isVisible : function() {
+        return this.getPanelElem().getStyle('display') == 'block';
+    },
+
+    buildPanel : function() {
+        throw "Method must be implemented";
+    }.protect()
+
 });
--- a/mindplot/src/main/javascript/widget/TopicShapePanel.js
+++ b/mindplot/src/main/javascript/widget/TopicShapePanel.js
@ -17,7 +17,7 @@
 */

 mindplot.widget.TopicShapePanel = new Class({
-    Extends : mindplot.widget.ToolbarPanel,
+    Extends : mindplot.widget.ListToolbarPanel,
    initialize : function(buttonId, model) {
        this.parent(buttonId, model);
    },
--- a/wise-doc/src/main/webapp/css/editor.css
+++ b/wise-doc/src/main/webapp/css/editor.css
@ -164,10 +164,6 @@ div#toolbar .button {
    user-select: none;
 }

-div#toolbar .comboButton {
-    width: 34px;
-}
-
 div#toolbar .button:hover {
    width: 32px;
    height: 36px;
@ -200,10 +196,6 @@ div#toolbar .buttonActive {
    user-select: none;
 }

-div#toolbar .comboButton:hover {
-    width: 34px;
-}
-
 div#toolbar .button img {
    width: 30px;
    height: 30px;
@ -242,29 +234,13 @@ div#node {
 }

 div#font {
-    left: 532px; /*left:581px;*/
-}
-
-div#share {
-    left: 874px; /*left:777px;*/
+    left: 522px; /*left:581px;*/
 }

 div#saveButton {
    background: url(../images/save.png) no-repeat center top;
 }

-div#discardButton {
-    background: url(../images/close.png) no-repeat center top;
-}
-
-div#history {
-    background: url(../images/history.png) no-repeat center top;
-}
-
-div#print {
-    background: url(../images/file_printer.png) no-repeat center top;
-}
-
 div#undoEdition {
    background: url(../images/file_undo_dis.png) no-repeat center top;
 }
@ -443,69 +419,6 @@ div.toolbarPanelLinkSelectedLink {
    background-color: #c3def5;
 }

-div#actionsContainer {
-    position: absolute;
-    z-index: 50;
-    top: 35px;
-    width: 190px;
-    right: 0;
-    margin: 10px;
-    float: left;
-}
-
-#actionsContainer .button {
-    float: right;
-    font-size: 12px;
-    font-weight: bold;
-    white-space: nowrap;
-    color: #ffffff;
-    cursor: pointer;
-    margin: 2px;
-    z-index: 4;
-}
-
-#actionsContainer .button:hover {
-    color: blue;
-}
-
-#actionsContainer .mainButton {
-    float: right;
-    font-size: 12px;
-    font-weight: bold;
-    white-space: nowrap;
-    color: #ffffff;
-    cursor: pointer;
-    margin: 2px;
-    z-index: 4;
-}
-
-#actionsContainer a {
-    text-decoration: none;
-}
-
-#actionsContainer .buttonStart {
-    width: 6px;
-    height: 25px;
-    background: url(../images/btnStart2.png) no-repeat left top;
-    float: left;
-}
-
-#actionsContainer .buttonBody {
-    background: url(../images/btnBody2.png);
-    float: left;
-    height: 18px;
-    padding: 5px 5px 0;
-    text-align: center;
-    color: black;
-}
-
-#actionsContainer .buttonEnd {
-    width: 7px;
-    height: 23px;
-    background: url(../images/btnEnd2.png) no-repeat right top;
-    float: left;
-}
-
 /* ------------- Footer Styles -------------------------*/
 div#footerEditor {
    position: absolute;
--- a/wise-doc/src/main/webapp/html/editor.html
+++ b/wise-doc/src/main/webapp/html/editor.html
@ -83,10 +83,6 @@
 <div id="colorPalette">
    <div id="paletteHeader"></div>
 </div>
-
-<div id="actionsContainer">
-</div>
-
 <div id="toolbar">
    <div id="editTab" class="tabContent">
        <div id="file" class="buttonContainer" title="SYMB_ FILE">
@ -134,22 +130,22 @@
                        <p>Delete</p>
                    </div>
                </div>
-                <div id="topicBorder" class="button comboButton" title="SYMB_ TOPIC_BORDER_COLOR">
+                <div id="topicBorder" class="button" title="SYMB_ TOPIC_BORDER_COLOR">
                    <div class="toolbarLabel">
                        <p>Border</p>
                    </div>
                </div>
-                <div id="topicColor" class="button comboButton" title="Background Color">
+                <div id="topicColor" class="button" title="Background Color">
                    <div class="toolbarLabel">
                        <p>Color</p>
                    </div>
                </div>
-                <div id="topicIcon" class="button comboButton" title="Change Icon">
+                <div id="topicIcon" class="button" title="Change Icon">
                    <div class="toolbarLabel">
                        <p>Icon</p>
                    </div>
                </div>
-                <div id="topicNote" class="button comboButton" title="Add Note">
+                <div id="topicNote" class="button" title="Add Note">
                    <div class="toolbarLabel">
                        <p>Note</p>
                    </div>
--- a/wise-webapp/src/main/webapp/css/bubble.css
+++ b/wise-webapp/src/main/webapp/css/bubble.css
@ -1,242 +0,0 @@
-.bubbleContainer {
-    position: absolute;
-    z-index: 50;
-    opacity: 0;
-    width: auto;
-    overflow: hidden;
-    padding: 20px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
-    background-color: #BCCCE1;
-    -moz-box-shadow: 5px 5px 5px #888;
-    -webkit-box-shadow: 5px 5px 5px #888;
-    box-shadow: 5px 5px 5px #888;
-    border: 1px solid black;
-}
-
-.bublePartContainer {
-    clear: both;
-}
-
-.bubblePart {
-    float: left;
-}
-
-.bubbleLeft {
-    background: transparent url(../images/bubbleTip_left.png) top left;
-    width: 12px;
-    height: 4px;
-}
-
-.bubbleCenter {
-    background-color: #362d2e;
-    text-align: center;
-    z-index: 60;
-}
-
-.bubbleRight {
-    background: transparent url(../images/bubbleTip_right.png) top left;
-    width: 23px;
-    height: 4px;
-}
-
-.bubbleTopLeft {
-    background: transparent url(../images/bubbleTip_corner_top_left.png) top left;
-    width: 12px;
-    height: 12px;
-}
-
-.bubbleHintTopLeft {
-    background: transparent url(../images/bubbleTip_pico_corner_top_left.png) top left;
-    width: 12px;
-    height: 57px;
-}
-
-.bubbleTopRight {
-    background: transparent url(../images/bubbleTip_corner_top_right.png) top left;
-    width: 23px;
-    height: 12px;
-}
-
-.bubbleHintTopRight {
-    background: transparent url(../images/bubbleTip_pico_corner_top_right.png) top left;
-    width: 23px;
-    height: 57px;
-}
-
-.bubbleTop {
-    background: transparent url(../images/bubbleTip_top.png) top left;
-    height: 12px;
-    width: 4px;
-}
-
-.bubbleHintTop {
-    background: transparent url(../images/bubbleTip_pico_top.png) top left;
-    height: 57px;
-    width: 4px;
-}
-
-.bubbleBottomLeft {
-    background: transparent url(../images/bubbleTip_corner_bottom_left.png) top left;
-    width: 12px;
-    height: 26px;
-}
-
-.bubbleHintBottomLeft {
-    background: transparent url(../images/bubbleTip_pico_corner_bottom_left.png) top left;
-    width: 12px;
-    height: 62px;
-}
-
-.bubbleBottomRight {
-    background: transparent url(../images/bubbleTip_corner_bottom_right.png) top left;
-    width: 23px;
-    height: 26px;
-}
-
-.bubbleHintBottomRight {
-    background: transparent url(../images/bubbleTip_pico_corner_bottom_right.png) top left;
-    width: 23px;
-    height: 62px;
-}
-
-.bubbleBottom {
-    background: transparent url(../images/bubbleTip_bottom.png) top left;
-    height: 26px;
-    width: 4px;
-}
-
-.bubbleHintBottom {
-    background: transparent url(../images/bubbleTip_pico_bottom.png) top left;
-    height: 62px;
-    width: 4px;
-}
-
-.bubbleBottomHint {
-    background: transparent url(../images/bubbleTip_bottom_pico.png) top left;
-    width: 58px;
-    height: 62px;
-}
-
-.bubbleTopHint {
-    background: transparent url(../images/bubbleTip_top_pico.png) top left;
-    width: 58px;
-    height: 57px;
-}
-
-.bubbleLeftBlue {
-    background: transparent url(../images/bubbleTip_left_blue.gif) top left;
-    width: 12px;
-    height: 4px;
-}
-
-.bubbleCenterBlue {
-    background-color: #BCCCE1;
-    z-index: 60;
-    overflow: hidden;
-}
-
-.bubbleRightBlue {
-    background: transparent url(../images/bubbleTip_right_blue.gif) top left;
-    width: 23px;
-    height: 3px;
-}
-
-.bubbleTopLeftBlue {
-    background: transparent url(../images/bubbleTip_corner_top_left_blue.gif) top left;
-    width: 12px;
-    height: 18px;
-}
-
-.bubbleHintTopLeftBlue {
-    background: transparent url(../images/bubbleTip_pico_corner_top_left_blue.gif) top left;
-    width: 13px;
-    height: 61px;
-}
-
-.bubbleTopRightBlue {
-    background: transparent url(../images/bubbleTip_corner_top_right_blue.gif) top left;
-    width: 23px;
-    height: 18px;
-}
-
-.bubbleHintTopRightBlue {
-    background: transparent url(../images/bubbleTip_pico_corner_top_right_blue.gif) top left;
-    width: 23px;
-    height: 61px;
-}
-
-.bubbleTopBlue {
-    background: transparent url(../images/bubbleTip_top_blue.gif) top left;
-    height: 18px;
-    width: 3px;
-}
-
-.bubbleHintTopBlue {
-    background: transparent url(../images/bubbleTip_pico_top_blue.gif) top left;
-    height: 61px;
-    width: 3px;
-}
-
-.bubbleBottomLeftBlue {
-    background: transparent url(../images/bubbleTip_corner_bottom_left_blue.gif) top left;
-    width: 13px;
-    height: 32px;
-}
-
-.bubbleHintBottomLeftBlue {
-    background: transparent url(../images/bubbleTip_pico_corner_bottom_left_blue.gif) top left;
-    width: 12px;
-    height: 62px;
-}
-
-.bubbleBottomRightBlue {
-    background: transparent url(../images/bubbleTip_corner_bottom_right_blue.gif) top left;
-    width: 23px;
-    height: 32px;
-}
-
-.bubbleHintBottomRightBlue {
-    background: transparent url(../images/bubbleTip_pico_corner_bottom_right_blue.gif) top left;
-    width: 23px;
-    height: 62px;
-}
-
-.bubbleBottomBlue {
-    background: transparent url(../images/bubbleTip_bottom_blue.gif) top left;
-    height: 32px;
-    width: 3px;
-}
-
-.bubbleHintBottomBlue {
-    background: transparent url(../images/bubbleTip_pico_bottom_blue.gif) top left;
-    height: 62px;
-    width: 3px;
-}
-
-.bubbleBottomHintBlue {
-    background: transparent url(../images/bubbleTip_bottom_pico_blue.png) top left;
-    width: 58px;
-    height: 62px;
-}
-
-.bubbleTopHintBlue {
-    background: transparent url(../images/bubbleTip_top_pico_blue.png) top left;
-    width: 58px;
-    height: 61px;
-}
-
-.btn-primary {
-    background: #3399CC;
-    border: 1px solid #006699;
-    color: #FFFFFF;
-    font-family: arial, helvetica, sans-serif;
-    font-size: 72%;
-    font-style: normal;
-    font-variant: normal;
-    font-weight: normal;
-    line-height: normal;
-    overflow: visible;
-    padding: 2px 8px 1px;
-    vertical-align: middle;
-}
--- a/wise-webapp/src/main/webapp/css/editor.css
+++ b/wise-webapp/src/main/webapp/css/editor.css
@ -160,10 +160,6 @@ div#toolbar .button {
    text-align: center;
 }

-div#toolbar .comboButton {
-    width: 34px;
-}
-
 div#toolbar .button:hover {
    width: 32px;
    height: 36px;
@ -175,10 +171,6 @@ div#toolbar .button:hover {
    border-left-color: white;
 }

-div#toolbar .comboButton:hover {
-    width: 34px;
-}
-
 div#toolbar .button img {
    width: 30px;
    height: 30px;
--- a/wise-webapp/src/main/webapp/jsp/mindmapEditor.jsp
+++ b/wise-webapp/src/main/webapp/jsp/mindmapEditor.jsp
@ -169,7 +169,7 @@
                <legend>
                    <spring:message code="TOPIC"/>
                </legend>
-                <div id="topicShape" class="button comboButton" title="<spring:message code="TOPIC_SHAPE"/>">
+                <div id="topicShape" class="button" 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"/>">
@ -178,16 +178,16 @@
                <div id="deleteTopic" class="button" title="<spring:message code="TOPIC_DELETE"/>">
                    <div class="toolbarLabel"><p><spring:message code="DELETE"/></p></div>
                </div>
-                <div id="topicBorder" class="button comboButton" title="<spring:message code="TOPIC_BORDER_COLOR"/>">
+                <div id="topicBorder" class="button" title="<spring:message code="TOPIC_BORDER_COLOR"/>">
                    <div class="toolbarLabel"><p><spring:message code="BORDER"/></p></div>
                </div>
-                <div id="topicColor" class="button comboButton" title="<spring:message code="TOPIC_BACKGROUND_COLOR"/>">
+                <div id="topicColor" class="button" title="<spring:message code="TOPIC_BACKGROUND_COLOR"/>">
                    <div class="toolbarLabel"><p><spring:message code="COLOR"/></p></div>
                </div>
-                <div id="topicIcon" class="button comboButton" title="<spring:message code="TOPIC_ICON"/>">
+                <div id="topicIcon" class="button" title="<spring:message code="TOPIC_ICON"/>">
                    <div class="toolbarLabel"><p><spring:message code="ICON"/></p></div>
                </div>
-                <div id="topicNote" class="button comboButton" title="<spring:message code="TOPIC_NOTE"/>">
+                <div id="topicNote" class="button" 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"/>">
@ -203,10 +203,10 @@
                <legend>
                    <spring:message code="FONT"/>
                </legend>
-                <div id="fontFamily" class="button comboButton" title="<spring:message code="FONT_TYPE"/>">
+                <div id="fontFamily" class="button" title="<spring:message code="FONT_TYPE"/>">
                    <div class="toolbarLabel"><p><spring:message code="TYPE"/></p></div>
                </div>
-                <div id="fontSize" class="button comboButton" title="<spring:message code="FONT_SIZE"/>">
+                <div id="fontSize" class="button" 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"/>">
@ -215,7 +215,7 @@
                <div id="fontItalic" class="button" title="<spring:message code="FONT_ITALIC"/>">
                    <div class="toolbarLabel"><p><spring:message code="ITALIC"/></p></div>
                </div>
-                <div id="fontColor" class="button comboButton" title="<spring:message code="FONT_COLOR"/>">
+                <div id="fontColor" class="button" title="<spring:message code="FONT_COLOR"/>">
                    <div class="toolbarLabel"><p><spring:message code="COLOR"/></p></div>
                </div>
            </fieldset>