Fix toolbar strange resize.

This commit is contained in:
Paulo Veiga 2011-08-10 23:13:13 -03:00
parent 37734ea95c
commit d27d15e162
15 changed files with 104 additions and 582 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -18,100 +18,14 @@
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) {
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;
}
});

View File

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

View File

@ -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() {
@ -35,15 +59,32 @@ mindplot.widget.ToolbarItem = new Class({
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()
});

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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