zhouxy108/wisemapping-open-source
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add tooltip to menu.

Browse Source
This commit is contained in:
Paulo Gustavo Veiga
2012-03-19 23:29:52 -03:00
parent c6acc88fd7
commit ce53e8e726
12 changed files with 238 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
mindplot/pom.xml
View File

@@ -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/"

8
mindplot/src/main/javascript/DesignerKeyboard.js
View File

@@ -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();

71
mindplot/src/main/javascript/widget/KeyboardShortcutTooltip.js Normal file
View File

@@ -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;
}
});

54
mindplot/src/main/javascript/widget/Menu.js
View File

@@ -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);
}
}
});

49
mindplot/src/main/javascript/widget/lightbox.css
View File

@@ -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;
}