Working on the new editor ...

This commit is contained in:
Paulo Veiga 2011-10-10 18:30:02 -03:00
parent 2f9b53b045
commit cd85390b22
14 changed files with 622 additions and 949 deletions

View File

@ -64,6 +64,10 @@ mindplot.DesignerKeyboard = new Class({
designer.createChildForSelectedNode(); designer.createChildForSelectedNode();
}.bind(this), }.bind(this),
'meta+enter' : function() {
designer.createChildForSelectedNode();
}.bind(this),
'ctrl+z' : function() { 'ctrl+z' : function() {
designer.undo(); designer.undo();
}.bind(this), }.bind(this),

View File

@ -68,7 +68,8 @@ mindplot.NoteIcon = new Class({
arrowOffset : 10, arrowOffset : 10,
center: true, center: true,
arrowSize: 15, arrowSize: 15,
offset : {x:10,y:20} offset : {x:10,y:20},
className:'notesTip'
}); });
}, },

View File

@ -37,6 +37,7 @@ mindplot.widget.FloatingTip = new Class({
hideDelay: 250, hideDelay: 250,
className: 'floating-tip', className: 'floating-tip',
offset: {x: 0, y: 0}, offset: {x: 0, y: 0},
preventHideOnOver: true,
fx: { 'duration': 'short' } fx: { 'duration': 'short' }
}, },
@ -75,9 +76,10 @@ mindplot.widget.FloatingTip = new Class({
return this; return this;
element.store('floatingtip', tip); element.store('floatingtip', tip);
this._animate(tip, 'in'); this._animate(tip, 'in');
if (this.options.preventHideOnOver) {
tip.addEvent(this.options.showOn, this.boundShow); tip.addEvent(this.options.showOn, this.boundShow);
tip.addEvent(this.options.hideOn, this.boundHide); tip.addEvent(this.options.hideOn, this.boundHide);
}
this.fireEvent('show', [tip, element]); this.fireEvent('show', [tip, element]);
return this; return this;
}, },

View File

@ -44,7 +44,11 @@ mindplot.widget.IconPanel = new Class({
id:iconId, id:iconId,
src:mindplot.ImageIcon.prototype._getImageUrl(iconId) src:mindplot.ImageIcon.prototype._getImageUrl(iconId)
}); });
img.setStyles({width:16,height:16,padding:"0px 2px"}).inject(familyContent); img.setStyles({width:16,
height:16,
padding:"0px 2px",
cursor: 'pointer'
}).inject(familyContent);
var panel = this; var panel = this;
var model = this.getModel(); var model = this.getModel();

View File

@ -26,7 +26,6 @@ mindplot.widget.Menu = new Class({
this._designer = designer; this._designer = designer;
this._toolbarElems = []; this._toolbarElems = [];
this._containerId = containerId; this._containerId = containerId;
this._toolbarDisabled = false;
// Stop event propagation ... // Stop event propagation ...
$(this._containerId).addEvent('click', function(event) { $(this._containerId).addEvent('click', function(event) {
@ -181,15 +180,15 @@ mindplot.widget.Menu = new Class({
this._toolbarElems.push(new mindplot.widget.ColorPalettePanel('fontColor', fontColorModel, baseUrl)); this._toolbarElems.push(new mindplot.widget.ColorPalettePanel('fontColor', fontColorModel, baseUrl));
this.addButton('zoomIn', false, false, function() { this.addButton('zoomIn', false, false, function() {
designer.zoomIn() designer.zoomIn();
}); });
this.addButton('zoomOut', false, false, function() { this.addButton('zoomOut', false, false, function() {
designer.zoomOut() designer.zoomOut();
}); });
this.addButton('undoEdition', false, false, function() { this.addButton('undoEdition', false, false, function() {
designer.undo() designer.undo();
}); });
this.addButton('redoEdition', false, false, function() { this.addButton('redoEdition', false, false, function() {
@ -327,7 +326,10 @@ mindplot.widget.Menu = new Class({
if (button.isTopicAction() && button.isRelAction()) { if (button.isTopicAction() && button.isRelAction()) {
disable = rels.length == 0 && topics.length == 0; disable = rels.length == 0 && topics.length == 0;
} else if (button.isTopicAction() && topics.length == 0) { } else if (!button.isTopicAction() && !button.isRelAction()) {
disable = false;
}
else if (button.isTopicAction() && topics.length == 0) {
disable = true; disable = true;
} else if (button.isRelAction() && rels.length == 0) { } else if (button.isRelAction() && rels.length == 0) {
disable = true; disable = true;
@ -335,9 +337,10 @@ mindplot.widget.Menu = new Class({
if (disable) { if (disable) {
button.disable(); button.disable();
} else {
button.enable();
} }
}) })
}.bind(this)); }.bind(this));
@ -375,15 +378,15 @@ mindplot.widget.Menu = new Class({
addButton:function (buttonId, topic, rel, fn) { addButton:function (buttonId, topic, rel, fn) {
// Register Events ... // Register Events ...
var button = new mindplot.widget.ToolbarItem(buttonId, function(event) { var button = new mindplot.widget.ToolbarItem(buttonId, function(event) {
this.clear();
fn(event); fn(event);
this.clear();
}.bind(this), {topicAction:topic,relAction:rel}); }.bind(this), {topicAction:topic,relAction:rel});
this._toolbarElems.push(button); this._toolbarElems.push(button);
}, },
clear : function() { clear : function() {
this._toolbarElems.forEach(function(elem) { this._toolbarElems.forEach(function(item) {
elem.hide(); item.hide();
}); });
} }
}); });

View File

@ -38,7 +38,7 @@ mindplot.widget.Monitor = new Class({
}, },
logMessage : function(msg, msgKind) { logMessage : function(msg, msgKind) {
console.log(userMsg); console.log(msg);
} }
}); });

View File

@ -24,6 +24,28 @@ mindplot.widget.ToolbarItem = new Class({
this._buttonId = buttonId; this._buttonId = buttonId;
this._fn = fn; this._fn = fn;
this._options = options; this._options = options;
this.enable();
// this._tip = this._registerTip();
},
_registerTip: function() {
return new mindplot.widget.FloatingTip($(this._buttonId), {
html: false,
position: 'bottom',
arrowOffset : 5,
center: true,
arrowSize: 5,
showDelay: 500,
hideDelay: 0,
className: 'toolbarTip',
motionOnShow:false,
motionOnHide:false,
motion: 0,
distance: 0,
preventHideOnOver:false
});
}, },
getButtonElem : function() { getButtonElem : function() {
@ -66,5 +88,9 @@ mindplot.widget.ToolbarItem = new Class({
elem.addClass('buttonOn'); elem.addClass('buttonOn');
this._enable = true; this._enable = true;
} }
} },
getTip : function() {
return this._tip;
}.protect()
}); });

View File

@ -38,6 +38,7 @@ mindplot.widget.ToolbarPaneItem = new Class({
_init:function () { _init:function () {
// Load the context of the panel ... // Load the context of the panel ...
var panelElem = this.buildPanel(); var panelElem = this.buildPanel();
panelElem.setStyle('cursor','default');
var buttonElem = this.getButtonElem(); var buttonElem = this.getButtonElem();
// Add panel content .. // Add panel content ..
@ -51,12 +52,6 @@ mindplot.widget.ToolbarPaneItem = new Class({
return this._model; return this._model;
}, },
getButtonElem : function() {
var elem = $(this._buttonId);
$assert(elem, "Could not find element for " + this._buttonId);
return elem;
}.protect(),
getPanelElem : function() { getPanelElem : function() {
return $(this._panelId); return $(this._panelId);
}.protect(), }.protect(),

View File

@ -1,667 +0,0 @@
@import "common.css";
@import "/mindplot/src/main/javascript/widget/lightbox.css";
@import "/mindplot/src/main/javascript/libraries/moodialog/css/MooDialog.css";
html {
overflow: hidden;
}
body {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
#waitDialog {
position: absolute;
top: 10px;
left: 10px;
height: 200px;
}
#firstHeader {
width: 100%;
}
#subHeader {
position: absolute;
width: 100%;
height: 55px;
top: 30px;
}
#waitingContainer, #errorContainer {
position: relative;
top: 80px;
height: 120px; /*background: whitesmoke;*/
background: #FEFEFE;
opacity: .99;
padding: 15px;
width: 100%;
border: 1px solid;
border-color: #a9a9a9;
}
#errorContainer {
width: 400px;
border: 1px solid red;
}
#waitingContainer .loadingText {
position: relative;
top: 50%;
margin-top: -35px;
font-size: 30px;
font-weight: bold;
vertical-align: text-bottom;
height: 30px;
float: left;
}
#errorContainer .loadingText {
position: relative;
top: 50%;
margin-top: -80px;
font-size: 15px;
font-weight: bold;
vertical-align: text-bottom;
height: 30px;
float: right;
padding-left: 120px;
}
#waitingContainer .loadingIcon {
position: relative;
background: url(../images/loadingIcon.gif) no-repeat;
top: 50%;
margin-top: -65px;
height: 100px;
width: 121px;
float: left;
clear: both;
}
#errorContainer .loadingIcon {
position: relative;
background: url(../images/errorIcon.png) no-repeat;
top: 50%;
margin-top: -65px;
height: 100px;
width: 121px;
float: left;
clear: both;
}
#infoContainer {
float: left;
}
#infoContainer {
float: left;
padding-left: 5px;
}
#title {
position: relative;
left: 120px;
top: 80px;
}
#operationsContainer {
font-size: 12px;
float: right;
padding: 0 5px;
}
#operationsContainer a {
padding: 0 5px;
}
#user {
font-weight: bold;
margin-right: 5px;
}
#toolbar {
width: 100%;
height: 25px;
color: #ffffff;
border-bottom: 2px solid black;
position: absolute;
top: 0;
}
div#toolbar .buttonContainer {
height: 44px;
float: left;
color: black;
}
.buttonContainer fieldset {
border: 1px solid #BBB4D6;
padding: 2px 2px 4px;
margin: 8px 1px 1px;
}
.buttonContainer legend {
padding: 0.2em 0.5em;
border: 1px solid #BBB4D6;
background-color: #F5F5F5;
color: #BBB4D6;
font-size: 11px;
text-align: right;
margin: 0;
-moz-margin-start: 7px;
-moz-margin-end: 7px;
}
div#toolbar .buttonOn, div#toolbar .buttonOff, div#toolbar .buttonActive, div#toolbar .buttonOn:hover {
width: 32px;
height: 36px;
float: left;
margin: 0 2px 2px 2px;
text-align: center;
}
div#toolbar .buttonOn:hover, div#toolbar .buttonActive {
margin: 0 1px;
cursor: pointer;
border: 1px solid black;
border-top-color: white;
border-left-color: white;
cursor: pointer;
}
div#toolbar .buttonOff {
opacity: 0.4;
}
div#toolbar .button img {
width: 30px;
height: 30px;
border: 0;
}
div#toolbar .toolbarLabel {
position: relative;
top: 55%;
text-align: center;
width: 34px;
height: 10px;
font-size: 10px;
}
.mapSeparator {
width: 1px;
height: 20px;
background-color: #166D66;
float: left;
margin: 5px 3px;
}
div#file, div#zoom, div#node, div#font, div#share {
position: absolute;
top: -6px;
left: 3px;
}
div#zoom {
left: 84px;
}
div#node {
left: 165px;
}
div#font {
left: 522px; /*left:581px;*/
}
div#saveButton {
background: url(../images/save.png) no-repeat center top;
}
div#undoEdition {
background: url(../images/file_undo_dis.png) no-repeat center top;
}
div#redoEdition {
background: url(../images/file_redo_dis.png) no-repeat center top;
}
#export {
background: url(../images/file_export.png) no-repeat center top;
position: relative;
}
#exportAnchor {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
div#zoomIn {
background: url(../images/zoom_in.png) no-repeat center top;
}
#zoomOut {
background: url(../images/zoom_out.png) no-repeat center top;
}
#addTopic {
background: url(../images/topic_add.png) no-repeat center top;
}
#deleteTopic {
background: url(../images/topic_delete.png) no-repeat center top;
}
div#topicColor {
background: url(../images/topic_bgcolor.png) no-repeat center top;
z-index: 4;
}
div#topicIcon {
background: url(../images/topic_icon.png) no-repeat center top;
z-index: 4;
}
div#topicNote {
background: url(../images/note.png) no-repeat center top;
z-index: 4;
}
div#topicNote {
background: url(../images/topic_icon.png) no-repeat center top;
z-index: 4;
}
div#topicLink {
background: url(../images/topic_link.png) no-repeat center top;
z-index: 4;
}
div#topicNote {
background-image: url(../images/note.png);
z-index: 4;
}
#topicBorder {
background: url(../images/topic_border.png) no-repeat center top;
width: 30px;
}
#fontFamily {
background: url(../images/font_type.png) no-repeat center top;
}
#topicShape {
background: url(../images/topic_shape.png) no-repeat center top;
width: 30px;
}
#fontBold {
background: url(../images/font_bold.png) no-repeat center top;
}
#fontItalic {
background: url(../images/font_italic.png) no-repeat center top;
}
div#fontColor {
background: url(../images/font_color.png) no-repeat center top;
z-index: 4;
}
#fontSize {
float: left;
background: url(../images/font_size.png) no-repeat center top;
}
#font-size {
font-size: 10px;
}
.wiseToolbarButton {
float: left;
height: 16px;
cursor: pointer;
font-size: 10px;
font-weight: bold;
margin-right: 15px;
}
#shareIt {
background: url(../images/collab_share.png) no-repeat center top;
}
#publishIt {
background: url(../images/collab_publish.png) no-repeat center top;
}
#tagIt {
background: url(../images/collab_tag.png) no-repeat center top;
}
#colorPalette {
border: 1px solid #bbb4d6;
display: none;
position: absolute;
z-index: 4;
width: 160px;
top: 89px;
}
#paletteHeader {
background-color: #E5E5E5;
height: 4px;
}
.toolbarPanel {
color: black;
border-color: #CCC #666 #666 #CCC;
border-style: solid;
border-width: 1px;
background: white;
padding: 2px;
display: none;
position: absolute;
z-index: 4;
top: 53px;
text-align: left;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
div.toolbarPanelLink {
cursor: pointer;
color: black;
font-weight: bold;
padding: 0 3px 0 4px;
margin: 1px;
cursor: pointer;
font-size: 12px;
font-weight: bold;
}
div.toolbarPanelLink:hover {
cursor: pointer;
font-weight: bold;
background-color: #c3def5;
}
div.toolbarPanelLinkSelectedLink {
cursor: pointer;
color: white;
font-weight: bold;
padding: 0 3px 0 4px;
margin: 1px;
background-color: #c3def5;
}
/* ------------- Footer Styles -------------------------*/
div#footerEditor {
position: absolute;
height: 60px;
width: 100%;
background: #E5E5E5;
border-top: 1px solid #bbb4d6;
bottom: 0;
}
#logo {
height: 50px;
width: 80px;
float: right;
margin: 5px;
background: url(../images/logo-vsmall.png) no-repeat right top;
}
#footerEditor .msgLoggerContainer {
position: relative;
width: 550px;
height: 36px;
left: 50%;
margin-left: -300px;
top: 10px;
opacity: 0;
visibility: hidden;
}
div#msgStart {
float: left;
height: 36px;
width: 16px;
background: url(../images/footerStart.png) no-repeat right top;
}
div#msgEnd {
float: left;
height: 36px;
width: 16px;
background: url(../images/footerEnd.png) no-repeat right top;
}
div#msgLogger {
float: left;
height: 36px;
width: 500px;
background: url(../images/footerBody.png) repeat-x right top;
text-align: center;
white-space: nowrap;
padding: 5px;
font-size: 13px;
font-weight: bold;
}
/** Tab labels */
div#tabsHolder {
width: 100%;
height: 20px;
}
div#tabs {
float: left;
}
div.tabContent {
clear: left;
width: 100%;
height: 50px;
border-bottom: 1px solid #bbb4d6;
border-top: 1px solid #bbb4d6;
background: #E5E5E5;
display: none;
position: absolute;
left: 0;
}
ol#toc {
height: 2em;
list-style: none;
margin: 0;
padding: 0;
}
ol#toc li {
float: left;
margin: 0 1px 0 0;
border: 0;
}
ol#toc a {
background: #fff url(../images/tab4.png);
color: #008;
display: block;
float: left;
height: 25px;
padding-left: 10px;
text-decoration: none;
}
ol#toc a:hover {
background-color: #fff;
background-position: 0 -121px;
}
ol#toc a:hover span {
background-position: 100% -121px;
}
ol#toc li.current a {
background-color: #fff;
background-position: 0 -61px;
color: #008;
font-weight: bold;
}
ol#toc li.current span {
background-position: 100% -61px;
}
ol#toc span {
background: #fff url(../images/tab4.png) 100% 0;
display: block;
line-height: 2em;
padding-right: 10px;
}
#mindplot {
position: relative;
top: 53px;
left: 0;
width: 100%;
border: 0;
}
#workspaceContainer {
background: url(../images/grid.gif) bottom left repeat !important;
}
div#mapInfo {
float: right;
color: #008;
padding-right: 5px;
height: 25px;
white-space: nowrap;
}
span#mapName {
font-size: 15px;
font-weight: bold;
}
span#lastSaved {
font-size: 10px;
}
.label {
border: none;
color: #ffffff;
font-weight: bold;
}
.label :hover {
cursor: pointer;
}
#tryEditorWarning {
position: absolute;
margin: 20px auto;
width: 300px;
right: 10px;
top: 100px;
padding: 20px;
opacity: 0.9;
cursor: move;
background-color: #69686F;
filter: alpha(opacity = 90);
color: #000c8f;
}
#tryEditorWarning a {
color: white;
font-weight: bold;
}
#tryEditorWarning h1 {
color: #f5f5f5;
font-weight: bold;
margin-bottom: 5px;
font-size: 15px;
}
div#helpContainer {
position: absolute;
margin: 20px auto;
z-index: 3;
opacity: 0.9;
width: 220px;
top: 100px;
left: 10px;
color: #000c8f;
padding: 20px;
cursor: move;
background-color: #69686F;
filter: alpha(opacity = 90);
}
div#helpContent h1 {
font-weight: bold;
color: #f5f5f5;
font-size: 15px;
}
div#helpContent h2 {
font-weight: bold;
padding: 20px 0 10px 0;
color: #bfbfbf;
}
div.close {
position: absolute;
height: 12px;
width: 12px;
top: 7px;
right: 10px;
cursor: pointer;
background: url(../images/close12_1.gif) bottom left no-repeat !important;
}
div#helpContent li {
font-family: arial, helvetica, sans-serif;
list-style-type: disc;
margin-left: 12px;
font-size: 11px;
}
div#small_error_icon {
padding-left: 18px;
min-height: 16px;
background: url(../images/error_icon.png) bottom left no-repeat !important;
}
div#toolbar .topicRelation {
width: 56px;
background: url(../images/topic_relationship.png) no-repeat center top;
z-index: 4;
}
div#toolbar .topicRelation:hover {
width: 56px;
background: url(../images/topic_relationship.png) no-repeat center top;
z-index: 4;
}
div#toolbar .relationshiplabel {
width: 56px;
}

View File

@ -0,0 +1,511 @@
@import "/mindplot/src/main/javascript/widget/lightbox.css";
@import "/mindplot/src/main/javascript/libraries/moodialog/css/MooDialog.css";
@header-height : 70px;
@header-toolbar-height : 30px;
@header-info-height : @header-height - @header-toolbar-height;
/* Common Default Style */
html {
overflow: hidden;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
ol, ul {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
q:before, q:after {
content: '';
}
abbr, acronym {
border: 0;
}
/**
* Percents could work for IE, but for backCompat purposes, we are using keywords.
* x-small is for IE6/7 quirks mode.
*
*/
body {
font: 13px arial, helvetica, clean, sans-serif;
font-size: small;
font: x-small;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
table {
font-size: inherit;
font-size: 100%;
}
/**
* 99% for safari; 100% is too large
*/
select, input, textarea {
font: 99% arial, helvetica, clean, sans-serif;
}
/**
* Bump up !IE to get to 13px equivalent
*/
pre, code {
font: 115% monospace;
font-size: 100%;
}
/**
* Default line-height based on font-size rather than "computed-value"
* see: http://www.w3.org/TR/CSS21/visudet.html#line-height
*/
body * {
line-height: 1.22em;
}
* {
margin: 0;
padding: 0;
}
body {
font: normal 80% "trebuchet ms", verdana, arial, helvetica, sans-serif;
background-color: #fff;
}
img {
border: 0;
}
form {
padding: 0;
margin: 0;
}
p {
margin: 5px 0 5px 0;
}
ul {
list-style-position: inside;
}
a:link, a:visited {
font: bold 100%;
text-decoration: underline;
color: black;
}
a:hover, a:active {
font: bold 100%;
text-decoration: underline;
color: black;
}
h2 {
font-size: 160%;
color: #8e9181;
}
h1 {
font-style: normal;
font-size: 180%;
color: white;
padding-bottom: 2px;
}
h3 {
/* use as subhead on main body */
clear: left;
font-style: normal;
font-size: 130%;
color: #6b6f5b;
}
h4 {
/* use as headers in footer */
font-weight: bold;
font-size: 120%;
border-bottom: 1px solid #8e9181;
color: #e2e3dd;
padding-bottom: 10px;
width: 400px;
}
/**********************************************************/
/* End: Common Default Style */
/**********************************************************/
/**********************************************************/
/* Error Dialog ... */
/**********************************************************/
#waitDialog {
position: absolute;
top: 10px;
left: 10px;
height: 200px;
}
#waitingContainer, #errorContainer {
position: relative;
top: 80px;
height: 120px; /*background: whitesmoke;*/
background: #FEFEFE;
opacity: .99;
padding: 15px;
width: 100%;
border: 1px solid;
border-color: #a9a9a9;
}
#errorContainer {
width: 400px;
border: 1px solid red;
}
#waitingContainer .loadingText {
position: relative;
top: 50%;
margin-top: -35px;
font-size: 30px;
font-weight: bold;
vertical-align: text-bottom;
height: 30px;
float: left;
}
#errorContainer .loadingText {
position: relative;
top: 50%;
margin-top: -80px;
font-size: 15px;
font-weight: bold;
vertical-align: text-bottom;
height: 30px;
float: right;
padding-left: 120px;
}
#waitingContainer .loadingIcon {
position: relative;
background: url(../images/loadingIcon.gif) no-repeat;
top: 50%;
margin-top: -65px;
height: 100px;
width: 121px;
float: left;
clear: both;
}
#errorContainer .loadingIcon {
position: relative;
background: url(../images/errorIcon.png) no-repeat;
top: 50%;
margin-top: -65px;
height: 100px;
width: 121px;
float: left;
clear: both;
}
/********************************************************************************/
/* Toolbar Styles */
/********************************************************************************/
div#header {
background-color: #000000;
width: 100%;
height: @header-height;
}
div#headerInfo {
width: 100%;
height: @header-info-height;
color: white;
}
div#toolbar {
width: 100%;
height: @header-toolbar-height;
background: whiteSmoke;
border-top: 1px solid #E5E5E5;
}
div#toolbar .buttonContainer {
height: @header-toolbar-height;
float: left;
color: black;
border: 1px solid #BBB4D6;
margin-left: 5px;
}
div#toolbar .buttonOn, div#toolbar .buttonOff, div#toolbar .buttonActive, div#toolbar .buttonOn:hover {
width: 30px;
height: @header-toolbar-height;
float: left;
text-align: center;
}
div#toolbar .buttonOn:hover, div#toolbar .buttonActive {
margin: 0;
cursor: pointer;
border: 1px solid #d3d3d3;
cursor: pointer;
opacity: 1;
}
div#toolbar .buttonOn {
margin: 1px;
opacity: 0.8;
}
div#toolbar .buttonOff {
margin: 1px;
opacity: 0.4;
}
div#toolbar .button img {
height: @header-toolbar-height;
border: 0;
}
div#saveButton {
background: url(../images/save.png) no-repeat center top;
}
div#undoEdition {
background: url(../images/file_undo_dis.png) no-repeat center top;
}
div#redoEdition {
background: url(../images/file_redo_dis.png) no-repeat center top;
}
div#export {
background: url(../images/file_export.png) no-repeat center top;
position: relative;
}
div#exportAnchor {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
div#zoomIn {
background: url(../images/zoom_in.png) no-repeat center top;
}
div#zoomOut {
background: url(../images/zoom_out.png) no-repeat center top;
}
div#addTopic {
background: url(../images/topic_add.png) no-repeat center top;
}
div#deleteTopic {
background: url(../images/topic_delete.png) no-repeat center top;
}
div#topicColor {
background: url(../images/topic_bgcolor.png) no-repeat center top;
z-index: 4;
}
div#topicIcon {
background: url(../images/topic_icon.png) no-repeat center top;
z-index: 4;
}
div#topicNote {
background: url(../images/note.png) no-repeat center top;
z-index: 4;
}
div#topicNote {
background: url(../images/topic_icon.png) no-repeat center top;
z-index: 4;
}
div#topicLink {
background: url(../images/topic_link.png) no-repeat center top;
z-index: 4;
}
div#topicNote {
background-image: url(../images/note.png);
z-index: 4;
}
div#topicBorder {
background: url(../images/topic_border.png) no-repeat center top;
}
div#fontFamily {
background: url(../images/font_type.png) no-repeat center top;
}
div#topicShape {
background: url(../images/topic_shape.png) no-repeat center top;
}
div#fontBold {
background: url(../images/font_bold.png) no-repeat center top;
}
div#fontItalic {
background: url(../images/font_italic.png) no-repeat center top;
}
div#fontColor {
background: url(../images/font_color.png) no-repeat center top;
z-index: 4;
}
div#fontSize {
float: left;
background: url(../images/font_size.png) no-repeat center top;
}
div#font-size {
font-size: 10px;
}
div#shareIt {
background: url(../images/collab_share.png) no-repeat center top;
}
div#publishIt {
background: url(../images/collab_publish.png) no-repeat center top;
}
div#tagIt {
background: url(../images/collab_tag.png) no-repeat center top;
}
div#topicRelation {
width: 56px;
background: url(../images/topic_relationship.png) no-repeat center top;
z-index: 4;
}
div#colorPalette {
border: 1px solid #bbb4d6;
display: none;
position: absolute;
z-index: 4;
width: 160px;
top: 89px;
}
.toolbarPanel {
z-index: 4;
top: @header-height+3;
-moz-transition: opacity 0.218s ease 0s;
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
cursor: default;
font-size: 13px;
margin: 0;
outline: medium none;
padding: 0 0 6px;
position: absolute;
}
div.toolbarPanelLink, div.toolbarPanelLinkSelectedLink {
cursor: pointer;
color: black;
margin: 1px;
cursor: pointer;
font-size: 12px;
padding: 5px 15px;
}
div.toolbarPanelLink:hover, div.toolbarPanelLinkSelectedLink {
cursor: pointer;
background-color: #efefef;
}
div#mindplot {
position: relative;
top: 0;
left: 0;
width: 100%;
border: 0;
}
div#workspaceContainer {
background: url(../images/grid.gif) bottom left repeat !important;
}
div#small_error_icon {
padding-left: 18px;
min-height: 16px;
background: url(../images/error_icon.png) bottom left no-repeat !important;
}
.notesTip {
background-color: #dfcf3c;
padding: 5px 15px;
color: #666666;
/*font-weight: bold;*/
/*width: 100px;*/
font-size: 13px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}
.toolbarTip {
background-color: black;
padding: 5px 5px;
color: #f5f5f5;
/*font-weight: bold;*/
/*width: 100px;*/
font-size: 11px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

View File

@ -9,11 +9,13 @@
<![endif]--> <![endif]-->
<!--<script type="text/javascript" src="http://docs.google.com/brix/static/api/js/jsapi.nocache.js"></script>--> <!--<script type="text/javascript" src="http://docs.google.com/brix/static/api/js/jsapi.nocache.js"></script>-->
<link rel="stylesheet" type="text/css" href="../css/editor.css"/> <link rel="stylesheet/less" type="text/css" href="../css/editor2.css"/>
<link rel="stylesheet" type="text/css" href='/mindplot/src/main/javascript/libraries/moodialog/css/MooDialog.css'/> <link rel="stylesheet" type="text/css" href='/mindplot/src/main/javascript/libraries/moodialog/css/MooDialog.css'/>
<script type='text/javascript' <script type='text/javascript'
src='https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js'></script> src='https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js'></script>
<script type='text/javascript' src='../js/less-1.1.3.min.js'></script>
<script type='text/javascript' <script type='text/javascript'
src='/mindplot/src/main/javascript/libraries/mootools/mootools-more-1.3.2.1-yui.js'></script> src='/mindplot/src/main/javascript/libraries/mootools/mootools-more-1.3.2.1-yui.js'></script>
<script type='text/javascript' src='/core-js/target/classes/core.js'></script> <script type='text/javascript' src='/core-js/target/classes/core.js'></script>
@ -114,138 +116,44 @@
<div id="colorPalette"> <div id="colorPalette">
<div id="paletteHeader"></div> <div id="paletteHeader"></div>
</div> </div>
<div id="toolbar">
<div id="header">
<div id="headerInfo">
Algo a aca ....
</div>
<div id="toolbar">
<div id="editTab" class="tabContent"> <div id="editTab" class="tabContent">
<div id="file" class="buttonContainer" title="SYMB_ FILE"> <div id="file" class="buttonContainer">
<fieldset> <div id="undoEdition" class="buttonOn" title="Undo Edition"></div>
<div id="undoEdition" class="buttonOn" title="Undo Edition"> <div id="redoEdition" class="buttonOn" title="Redo Edition"></div>
<div class="toolbarLabel">
<p>Undo</p>
</div> </div>
<div id="zoom" class="buttonContainer">
<div id="zoomIn" class="buttonOn" title="Zoom In"></div>
<div id="zoomOut" class="buttonOn" title="Zoom Out"></div>
</div> </div>
<div id="redoEdition" class="buttonOn" title="Redo Edition"> <div id="node" class="buttonContainer">
<div class="toolbarLabel"> <div id="topicShape" class="buttonOn" title="SYMB_TOPIC_SHAPE"></div>
<p>Redo</p> <div id="addTopic" class="buttonOn" title="SYMB_ TOPIC_ADD"></div>
<div id="deleteTopic" class="buttonOn" title="Delete"></div>
<div id="topicBorder" class="buttonOn" title="Boder Color"></div>
<div id="topicColor" class="buttonOn" title="Background Color"></div>
<div id="topicIcon" class="buttonOn" title="Add Icon"></div>
<div id="topicNote" class="buttonOn" title="Add Note"></div>
<div id="topicLink" class="buttonOn" title="Add Link"></div>
<div id="topicRelation" class="buttonOn" title="Add Relationship"></div>
</div> </div>
<div id="font" class="buttonContainer">
<div id="fontFamily" class="buttonOn" title="Font Style"></div>
<div id="fontSize" class="buttonOn" title="Font Size"></div>
<div id="fontBold" class="buttonOn" title="Bold Style"></div>
<div id="fontItalic" class="buttonOn" title="Italic Style"></div>
<div id="fontColor" class="buttonOn" title="Fond Color"></div>
</div> </div>
</fieldset>
</div>
<div id="zoom" class="buttonContainer" title="Zoom">
<fieldset>
<div id="zoomIn" class="buttonOn" title="Zoom In">
<div class="toolbarLabel">
<p>In</p>
</div>
</div>
<div id="zoomOut" class="buttonOn" title="Zoom Out">
<div class="toolbarLabel">
<p>Out</p>
</div>
</div>
</fieldset>
</div>
<div id="node" class="buttonContainer" title="Node Properties">
<fieldset>
<div id="topicShape" class="buttonOn comboButton" title="SYMB_TOPIC_SHAPE">
<div class="toolbarLabel">
<p>Shape</p>
</div>
</div>
<div id="addTopic" class="buttonOn" title="SYMB_ TOPIC_ADD">
<div class="toolbarLabel">
<p>Add</p>
</div>
</div>
<div id="deleteTopic" class="buttonOn" title="SYMB_ TOPIC_DELETE">
<div class="toolbarLabel">
<p>Delete</p>
</div>
</div>
<div id="topicBorder" class="buttonOn" title="SYMB_ TOPIC_BORDER_COLOR">
<div class="toolbarLabel">
<p>Border</p>
</div>
</div>
<div id="topicColor" class="buttonOn" title="Background Color">
<div class="toolbarLabel">
<p>Color</p>
</div>
</div>
<div id="topicIcon" class="buttonOn" title="Change Icon">
<div class="toolbarLabel">
<p>Icon</p>
</div>
</div>
<div id="topicNote" class="buttonOn" title="Add Note">
<div class="toolbarLabel">
<p>Note</p>
</div>
</div>
<div id="topicLink" class="buttonOn" title="Add Link">
<div class="toolbarLabel">
<p>Link</p>
</div>
</div>
<div id="topicRelation" class="topicRelation buttonOn" title="Add Relationship">
<div class="relationshiplabel toolbarLabel">
<p>Relationship</p>
</div>
</div>
</fieldset>
</div>
<div id="font" class="buttonContainer" title="Font Properties">
<fieldset>
<div id="fontFamily" class="buttonOn comboButton" title="Font Style">
<div class="toolbarLabel">
<p>Style</p>
</div>
</div>
<div id="fontSize" class="buttonOn comboButton" title="Font Size">
<div class="toolbarLabel">
<p>Size</p>
</div>
</div>
<div id="fontBold" class="buttonOn" title="Bold Style">
<div class="toolbarLabel">
<p>Bold</p>
</div>
</div>
<div id="fontItalic" class="buttonOn" title="Italic Style">
<div class="toolbarLabel">
<p>Italic</p>
</div>
</div>
<div id="fontColor" class="buttonOn comboButton" title="Fond Color">
<div class="toolbarLabel">
<p>Color</p>
</div>
</div>
</fieldset>
</div> </div>
</div> </div>
</div> </div>
<div id="mindplot"></div> <div id="mindplot"></div>
<div id="footerEditor">
<div style="position:absolute; top:0; width:100%">
<a href="http://www.wisemapping.com/">
<div id="logo"></div>
</a>
<div id='msgLoggerContainer' class="msgLoggerContainer">
<div id="msgStart"></div>
<div id='msgLogger'></div>
<div id="msgEnd"></div>
</div>
</div>
<div id="helpButtonKeyboard"
style="text-align:center; width:100px; height:20px; background-color:#f5f5f5; border: 1px solid #BBB6D6; cursor:pointer; padding-left:5px; margin-left:3px;float:left;">
<div style="float:left; position:relative; top:50%; margin-top:-8px; margin-left:5px;"><img
src="../images/help.png"/></div>
<div style="float:left; position:relative; top:50%; margin-top:-8px; margin-left:4px;">Shortcuts</div>
</div>
</div>
<script type="text/javascript" src="../js/editor.js"></script> <script type="text/javascript" src="../js/editor.js"></script>
</body> </body>
</html> </html>

View File

@ -29,7 +29,7 @@ function buildDesigner() {
var editorProperties = {zoom:0.85,saveOnLoad:true,collab:collab}; var editorProperties = {zoom:0.85,saveOnLoad:true,collab:collab};
designer = new mindplot.Designer(editorProperties, container); designer = new mindplot.Designer(editorProperties, container);
designer.setViewPort({ designer.setViewPort({
height: parseInt(window.innerHeight - 112), // Footer and Header height: parseInt(window.innerHeight-70), // Footer and Header
width: parseInt(window.innerWidth) width: parseInt(window.innerWidth)
}); });
@ -110,120 +110,3 @@ if (localEnv) {
} }
}); });
} }
// CSS helper functions
CSS = {
// Adds a class to an element.
AddClass: function (e, c) {
if (!e.className.match(new RegExp("\\b" + c + "\\b", "i")))
e.className += (e.className ? " " : "") + c;
},
// Removes a class from an element.
RemoveClass: function (e, c) {
e.className = e.className.replace(new RegExp(" \\b" + c + "\\b|\\b" + c + "\\b ?", "gi"), "");
}
};
// Functions for handling tabs.
Tabs = {
// Changes to the tab with the specified ID.
GoTo: function (contentId, skipReplace) {
// This variable will be true if a tab for the specified
// content ID was found.
var foundTab = false;
// Get the TOC element.
var toc = $("toc");
if (toc) {
var lis = toc.getElementsByTagName("li");
for (var j = 0; j < lis.length; j++) {
var li = lis[j];
// Give the current tab link the class "current" and
// remove the class from any other TOC links.
var anchors = li.getElementsByTagName("a");
var anchors = li.getElementsByTagName("a");
for (var k = 0; k < anchors.length; k++) {
if (anchors[k].hash == "#" + contentId) {
CSS.AddClass(li, "current");
foundTab = true;
break;
} else {
CSS.RemoveClass(li, "current");
}
}
}
}
// Show the content with the specified ID.
var divsToHide = [];
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
if (div.className.match(/\btabContent\b/i)) {
if (div.id == "_" + contentId)
div.style.display = "block";
else {
divsToHide.push(div);
}
}
}
// Hide the other content boxes.
for (var i = 0; i < divsToHide.length; i++)
divsToHide[i].style.display = "none";
// Change the address bar.
if (!skipReplace) window.location.replace("#" + contentId);
},
OnClickHandler: function (e) {
// Stop the event (to stop it from scrolling or
// making an entry in the history).
if (!e) e = window.event;
if (e.preventDefault) e.preventDefault(); else e.returnValue = false;
// Get the name of the anchor of the link that was clicked.
Tabs.GoTo(this.hash.substring(1));
},
Init: function () {
if (!document.getElementsByTagName) {
return;
}
// Attach an onclick event to all the anchor links on the page.
var anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
var a = anchors[i];
if (a.hash) {
a.onclick = Tabs.OnClickHandler;
}
}
var contentId;
if (window.location.hash)
contentId = window.location.hash.substring(1);
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
if (div.className.match(/\btabContent\b/i)) {
if (!contentId) contentId = div.id;
div.id = "_" + div.id;
}
}
if (contentId)
Tabs.GoTo(contentId, true);
}
};
// Hook up the OnLoad event to the tab initialization function.
Tabs.Init();
// Hide the content while waiting for the onload event to trigger.
var contentId = window.location.hash || "#Introduction";

File diff suppressed because one or more lines are too long

View File

@ -622,19 +622,6 @@ ol#toc span {
background: url(../images/grid.gif) bottom left repeat !important; background: url(../images/grid.gif) bottom left repeat !important;
} }
div#mapInfo {
float: right;
color: #008;
padding-right: 5px;
height: 25px;
white-space: nowrap;
}
span#mapName {
font-size: 15px;
font-weight: bold;
}
span#lastSaved { span#lastSaved {
font-size: 10px; font-size: 10px;
} }