Improve node editor

This commit is contained in:
Paulo Veiga 2011-10-05 02:38:43 -03:00
parent b0e5923fec
commit 1f02d51434
9 changed files with 242 additions and 233 deletions

View File

@ -24,7 +24,7 @@ var Overlay = new Class({
id: 'overlay',
color: '#000',
duration: 500,
opacity: 0.5,
opacity: 0.8,
zIndex: 5000/*,
onClick: $empty,
onClose: $empty,

View File

@ -1,29 +1,32 @@
/* Created by Arian Stolwijk <http://www.aryweb.nl> */
.MooDialog {
/* position: fixed;*/
width: 300px;
height: 100px;
position: fixed;
margin: -150px 0 0 -150px;
top: 50%;
left: 50%;
z-index: 50000;
z-index: 11000;
width: 400px;
margin: -250px 0 0 -250px;
background-color: #ffffff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid #999;
/* IE6-7 */
background: #eef5f8;
color: black;
padding: 10px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
-moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.8);
-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.8);
box-shadow: 1px 1px 5px rgba(0,0,0,0.8);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
padding: 30px;
}
.MooDialogTitle {
padding-top: 30px;
padding-top: 50px;
}
.MooDialog .content {
@ -35,15 +38,13 @@
top: 0;
left: 0;
right: 0;
padding: 3px 20px;
background: #b7c4dc;
border-bottom: 1px solid #a1aec5;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
color: black;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
/*color: black;*/
border-bottom: 1px solid #eee;
padding: 5px 30px;
font-size: 18px
}
.MooDialog .close {
@ -52,8 +53,8 @@
height: 16px;
display: block;
cursor: pointer;
top: -5px;
left: -5px;
top: 8px;
left: 420px;
position: absolute;
}
@ -92,4 +93,3 @@
.MooDialog .MooDialogError {
background: url(dialog-error.png) no-repeat;
}

View File

@ -22,7 +22,7 @@ mindplot.widget.NoteEditor = new Class({
$assert(model, "model can not be null");
var panel = this._buildPanel(model);
this.parent({
closeButton:false,
closeButton:true,
destroyOnClose:true,
title:'Note',
onInitialize: function(wrapper) {
@ -69,7 +69,8 @@ mindplot.widget.NoteEditor = new Class({
if (model.getValue() != null)
textArea.value = model.getValue();
textArea.setStyles({'width':280, 'height':65});
textArea.setStyles({'width':'100%', 'height':80,resize: 'none'
});
textArea.inject(form);
// Add buttons ...

View File

@ -346,20 +346,58 @@ div#printLogo {
}
.btn-primary {
background: #3399CC;
border: 1px solid #006699;
color: #FFFFFF;
font-family: arial, helvetica, sans-serif;
font-size: 92%;
font-style: normal;
font-variant: normal;
font-weight: bold;
cursor: pointer;
display: inline-block;
background-color: #e6e6e6;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
padding: 5px 14px 6px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
color: #333;
font-size: 13px;
line-height: normal;
overflow: visible;
padding: 2px 8px 1px;
vertical-align: middle;
border: 1px solid #ccc;
border-bottom-color: #bbb;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-webkit-transition: 0.1s linear all;
-moz-transition: 0.1s linear all;
-ms-transition: 0.1s linear all;
-o-transition: 0.1s linear all;
transition: 0.1s linear all;
color: #ffffff;
background-color: #0064cd;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
background-image: -o-linear-gradient(top, #049cdb, #0064cd);
background-image: linear-gradient(top, #049cdb, #0064cd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #0064cd #0064cd #003f81;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-primary:hover {
background-position: 0 -15px;
/*color: #333;*/
text-decoration: none;
}
div#paypal {
float: left;
margin: -29px;

View File

@ -185,7 +185,7 @@
<p>Link</p>
</div>
</div>
<div id="topicRelation" class="topicRelation button" title="Add Relationship">
<div id="topicRelation" class="topicRelation buttonOn" title="Add Relationship">
<div class="relationshiplabel toolbarLabel">
<p>Relationship</p>
</div>

View File

@ -18,6 +18,99 @@
var designer = null;
function buildDesigner() {
var container = $('mindplot');
container.setStyles({
height: parseInt(screen.height),
width: parseInt(screen.width)
});
var editorProperties = {zoom:0.85,saveOnLoad:true,collab:collab};
designer = new mindplot.Designer(editorProperties, container);
designer.setViewPort({
height: parseInt(window.innerHeight - 112), // Footer and Header
width: parseInt(window.innerWidth)
});
var menu = new mindplot.widget.Menu(designer, 'toolbar');
// If a node has focus, focus can be move to another node using the keys.
designer._cleanScreen = function() {
menu.clear()
};
return designer;
}
//######################### Libraries Loading ##################################
function JSPomLoader(pomUrl, callback) {
console.log("POM Load URL:" + pomUrl);
var jsUrls;
var request = new Request({
url: pomUrl,
method: 'get',
onRequest: function() {
console.log("loading ...");
},
onSuccess: function(responseText, responseXML) {
// Collect JS Urls ...
var concatRoot = responseXML.getElementsByTagName('concat');
var fileSetArray = Array.filter(concatRoot[0].childNodes, function(elem) {
return elem.nodeType == Node.ELEMENT_NODE
});
jsUrls = new Array();
Array.each(fileSetArray, function(elem) {
var jsUrl = elem.getAttribute("dir") + elem.getAttribute("files");
jsUrls.push(jsUrl.replace("${basedir}", pomUrl.substring(0, pomUrl.lastIndexOf('/'))));
}
);
// Load all JS dynamically ....
jsUrls = jsUrls.reverse();
function jsRecLoad(urls) {
if (urls.length == 0) {
if ($defined(callback))
callback();
} else {
var url = urls.pop();
Asset.javascript(url, {
onLoad: function() {
jsRecLoad(urls)
}
});
}
}
jsRecLoad(jsUrls);
},
onFailure: function() {
console.log('Sorry, your request failed :(');
}
});
request.send();
}
var localEnv = true;
if (localEnv) {
Asset.javascript("../../../../../web2d/target/classes/web2d.svg-min.js", {
onLoad: function() {
JSPomLoader('../../../../../mindplot/pom.xml', function() {
$(document).fireEvent('loadcomplete', 'mind')
});
}
});
} else {
Asset.javascript("../js/mindplot-min.js", {
onLoad:function() {
$(document).fireEvent('loadcomplete', 'mind')
}
});
}
// CSS helper functions
CSS = {
// Adds a class to an element.
@ -129,116 +222,8 @@ Tabs = {
}
};
if (document.createStyleSheet) {
var style = document.createStyleSheet();
style.addRule("div.tabContent", "display: none;");
style.addRule("div" + contentId, "display: block;");
} else {
var head = document.getElementsByTagName("head")[0];
if (head) {
var style = document.createElement("style");
style.setAttribute("type", "text/css");
style.appendChild(document.createTextNode("div.tabContent { display: none; }"));
style.appendChild(document.createTextNode("div" + contentId + " { display: block; }"));
head.appendChild(style);
}
}
// 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";
function buildDesigner() {
var container = $('mindplot');
container.setStyles({
height: parseInt(screen.height),
width: parseInt(screen.width)
});
var editorProperties = {zoom:0.85,saveOnLoad:true,collab:collab};
designer = new mindplot.Designer(editorProperties, container);
designer.setViewPort({
height: parseInt(window.innerHeight - 112), // Footer and Header
width: parseInt(window.innerWidth)
});
var menu = new mindplot.widget.Menu(designer, 'toolbar');
// If a node has focus, focus can be move to another node using the keys.
designer._cleanScreen = function() {
menu.clear()
};
return designer;
}
//######################### Libraries Loading ##################################
function JSPomLoader(pomUrl, callback) {
console.log("POM Load URL:" + pomUrl);
var jsUrls;
var request = new Request({
url: pomUrl,
method: 'get',
onRequest: function() {
console.log("loading ...");
},
onSuccess: function(responseText, responseXML) {
// Collect JS Urls ...
var concatRoot = responseXML.getElementsByTagName('concat');
var fileSetArray = Array.filter(concatRoot[0].childNodes, function(elem) {
return elem.nodeType == Node.ELEMENT_NODE
});
jsUrls = new Array();
Array.each(fileSetArray, function(elem) {
var jsUrl = elem.getAttribute("dir") + elem.getAttribute("files");
jsUrls.push(jsUrl.replace("${basedir}", pomUrl.substring(0, pomUrl.lastIndexOf('/'))));
}
);
// Load all JS dynamically ....
jsUrls = jsUrls.reverse();
function jsRecLoad(urls) {
if (urls.length == 0) {
if ($defined(callback))
callback();
} else {
var url = urls.pop();
Asset.javascript(url, {
onLoad: function() {
jsRecLoad(urls)
}
});
}
}
jsRecLoad(jsUrls);
},
onFailure: function() {
console.log('Sorry, your request failed :(');
}
});
request.send();
}
var localEnv = true;
if (localEnv) {
Asset.javascript("../../../../../web2d/target/classes/web2d.svg-min.js", {
onLoad: function() {
JSPomLoader('../../../../../mindplot/pom.xml', function() {
$(document).fireEvent('loadcomplete', 'mind')
});
}
});
} else {
Asset.javascript("../js/mindplot-min.js", {
onLoad:function() {
$(document).fireEvent('loadcomplete', 'mind')
}
});
}

View File

@ -159,26 +159,27 @@ div#toolbar .buttonContainer {
-moz-margin-end: 7px;
}
div#toolbar .button {
div#toolbar .buttonOn, div#toolbar .buttonOff, div#toolbar .buttonActive, div#toolbar .buttonOn:hover {
width: 32px;
height: 36px;
float: left;
margin: 0 2px 2px 2px;
cursor: pointer;
text-align: center;
}
div#toolbar .button:hover {
width: 32px;
height: 36px;
float: left;
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;
@ -739,19 +740,3 @@ div#toolbar .topicRelation:hover {
div#toolbar .relationshiplabel {
width: 56px;
}
div#toolbar .buttonActive {
width: 32px;
height: 36px;
float: left;
margin: 0 1px;
cursor: pointer;
border: 1px solid black;
border-top-color: white;
border-left-color: white;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}

View File

@ -126,24 +126,24 @@
<legend>
<spring:message code="FILE"/>
</legend>
<div id="saveButton" class="button" title="<spring:message code="SAVE"/>">
<div id="saveButton" class="buttonOn" title="<spring:message code="SAVE"/>">
<div class="toolbarLabel"><p><spring:message code="SAVE"/></p></div>
</div>
<div id="discardButton" class="button" title="<spring:message code="CLOSE"/>">
<div id="discardButton" class="buttonOn" title="<spring:message code="CLOSE"/>">
<div class="toolbarLabel"><p><spring:message code="CLOSE"/></p></div>
</div>
<div id="undoEdition" class="button" title="<spring:message code="UNDO_EDITION"/>">
<div id="undoEdition" class="buttonOn" title="<spring:message code="UNDO_EDITION"/>">
<div class="toolbarLabel"><p><spring:message code="UNDO"/></p></div>
</div>
<div id="redoEdition" class="button" title="<spring:message code="REDO_EDITION"/>">
<div id="redoEdition" class="buttonOn" title="<spring:message code="REDO_EDITION"/>">
<div class="toolbarLabel"><p><spring:message code="REDO"/></p></div>
</div>
<div id="print" class="button" title="<spring:message code="PRINT"/>" onclick="printMap();">
<div id="print" class="buttonOn" title="<spring:message code="PRINT"/>" onclick="printMap();">
<div class="toolbarLabel"><p><spring:message code="PRINT"/></p></div>
</div>
<div id="export" class="button" title="<spring:message code="EXPORT"/>">
<div id="export" class="buttonOn" title="<spring:message code="EXPORT"/>">
<div class="toolbarLabel"><p><spring:message code="EXPORT"/></p></div>
<a id="exportAnchor" href="export.htm?mapId=${mindmap.id}" rel="moodalbox 600px 400px"
title="<spring:message code="EXPORT_DETAILS"/>">
@ -156,10 +156,10 @@
<legend>
<spring:message code="ZOOM"/>
</legend>
<div id="zoomIn" class="button" title="<spring:message code="ZOOM_IN"/>">
<div id="zoomIn" class="buttonOn" title="<spring:message code="ZOOM_IN"/>">
<div class="toolbarLabel"><p><spring:message code="IN"/></p></div>
</div>
<div id="zoomOut" class="button" title="<spring:message code="ZOOM_OUT"/>">
<div id="zoomOut" class="buttonOn" title="<spring:message code="ZOOM_OUT"/>">
<div class="toolbarLabel"><p><spring:message code="OUT"/></p></div>
</div>
</fieldset>
@ -169,31 +169,31 @@
<legend>
<spring:message code="TOPIC"/>
</legend>
<div id="topicShape" class="button" title="<spring:message code="TOPIC_SHAPE"/>">
<div id="topicShape" class="buttonOn" 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"/>">
<div id="addTopic" class="buttonOn" title="<spring:message code="TOPIC_ADD"/>">
<div class="toolbarLabel"><p><spring:message code="ADD"/></p></div>
</div>
<div id="deleteTopic" class="button" title="<spring:message code="TOPIC_DELETE"/>">
<div id="deleteTopic" class="buttonOn" title="<spring:message code="TOPIC_DELETE"/>">
<div class="toolbarLabel"><p><spring:message code="DELETE"/></p></div>
</div>
<div id="topicBorder" class="button" title="<spring:message code="TOPIC_BORDER_COLOR"/>">
<div id="topicBorder" class="buttonOn" title="<spring:message code="TOPIC_BORDER_COLOR"/>">
<div class="toolbarLabel"><p><spring:message code="BORDER"/></p></div>
</div>
<div id="topicColor" class="button" title="<spring:message code="TOPIC_BACKGROUND_COLOR"/>">
<div id="topicColor" class="buttonOn" title="<spring:message code="TOPIC_BACKGROUND_COLOR"/>">
<div class="toolbarLabel"><p><spring:message code="COLOR"/></p></div>
</div>
<div id="topicIcon" class="button" title="<spring:message code="TOPIC_ICON"/>">
<div id="topicIcon" class="buttonOn" title="<spring:message code="TOPIC_ICON"/>">
<div class="toolbarLabel"><p><spring:message code="ICON"/></p></div>
</div>
<div id="topicNote" class="button" title="<spring:message code="TOPIC_NOTE"/>">
<div id="topicNote" class="buttonOn" 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"/>">
<div id="topicLink" class="buttonOn" title="<spring:message code="TOPIC_LINK"/>">
<div class="toolbarLabel"><p><spring:message code="LINK"/></p></div>
</div>
<div id="topicRelation" class="topicRelation button"
<div id="topicRelation" class="topicRelation buttonOn"
title="<spring:message code="TOPIC_RELATIONSHIP"/>">
<div class="relationshiplabel toolbarLabel"><p><spring:message code="TOPIC_RELATIONSHIP"/></p></div>
</div>
@ -204,19 +204,19 @@
<legend>
<spring:message code="FONT"/>
</legend>
<div id="fontFamily" class="button" title="<spring:message code="FONT_TYPE"/>">
<div id="fontFamily" class="buttonOn" title="<spring:message code="FONT_TYPE"/>">
<div class="toolbarLabel"><p><spring:message code="TYPE"/></p></div>
</div>
<div id="fontSize" class="button" title="<spring:message code="FONT_SIZE"/>">
<div id="fontSize" class="buttonOn" 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"/>">
<div id="fontBold" class="buttonOn" title="<spring:message code="FONT_BOLD"/>">
<div class="toolbarLabel"><p><spring:message code="BOLD"/></p></div>
</div>
<div id="fontItalic" class="button" title="<spring:message code="FONT_ITALIC"/>">
<div id="fontItalic" class="buttonOn" title="<spring:message code="FONT_ITALIC"/>">
<div class="toolbarLabel"><p><spring:message code="ITALIC"/></p></div>
</div>
<div id="fontColor" class="button" title="<spring:message code="FONT_COLOR"/>">
<div id="fontColor" class="buttonOn" title="<spring:message code="FONT_COLOR"/>">
<div class="toolbarLabel"><p><spring:message code="COLOR"/></p></div>
</div>
</fieldset>
@ -230,7 +230,7 @@
</legend>
<a id="tagAnchor" href="tags.htm?mapId=${mindmap.id}" rel="moodalbox 400px 200px wizard"
title="<spring:message code="TAGS_DETAILS"/>">
<div id="tagIt" class="button" title="<spring:message code="TAG"/>">
<div id="tagIt" class="buttonOn" title="<spring:message code="TAG"/>">
<div class="toolbarLabel"><p><spring:message code="TAG"/></p></div>
</div>
</a>
@ -238,14 +238,14 @@
<c:when test="${mindmap.owner==user}">
<a id="shareAnchor" href="<c:out value="${shareMap}"/>&amp;mapId=${mindmap.id}"
rel="moodalbox 780px 530px wizard" title="<spring:message code="SHARE_DETAILS"/>">
<div id="shareIt" class="button" title="<spring:message code="COLLABORATION"/>">
<div id="shareIt" class="buttonOn" title="<spring:message code="COLLABORATION"/>">
<div class="toolbarLabel"><p><spring:message code="SHARE"/></p></div>
</div>
</a>
<a id="publishAnchor" href="publish.htm?mapId=${mindmap.id}"
rel="moodalbox 600px 400px wizard"
title="<spring:message code="PUBLISH_MSG"/>">
<div id="publishIt" class="button" title="<spring:message code="PUBLISH"/>">
<div id="publishIt" class="buttonOn" title="<spring:message code="PUBLISH"/>">
<div class="toolbarLabel"><p><spring:message code="PUBLISH"/></p></div>
</div>
</a>
@ -253,7 +253,7 @@
</c:choose>
<a id="historyAnchor" href="history.htm?action=list&amp;mapId=${mindmap.id}"
rel="moodalbox 600px 400px wizard" title="<spring:message code="HISTORY_MSG"/>">
<div id="history" class="button" title="<spring:message code="HISTORY_MSG"/>">
<div id="history" class="buttonOn" title="<spring:message code="HISTORY_MSG"/>">
<div class="toolbarLabel"><p><spring:message code="HISTORY"/></p></div>
</div>
</a>
@ -264,16 +264,16 @@
<legend>
<spring:message code="COLLABORATION"/>
</legend>
<div id="tagIt" class="button" title="<spring:message code="TAG"/>">
<div id="tagIt" class="buttonOn" title="<spring:message code="TAG"/>">
<div class="toolbarLabel"><p><spring:message code="TAG"/></p></div>
</div>
<div id="shareIt" class="button" title="<spring:message code="COLLABORATE"/>">
<div id="shareIt" class="buttonOn" title="<spring:message code="COLLABORATE"/>">
<div class="toolbarLabel"><p><spring:message code="SHARE"/></p></div>
</div>
<div id="publishIt" class="button" title="<spring:message code="PUBLISH"/>">
<div id="publishIt" class="buttonOn" title="<spring:message code="PUBLISH"/>">
<div class="toolbarLabel"><p><spring:message code="PUBLISH"/></p></div>
</div>
<div id="history" class="button" title="<spring:message code="HISTORY_MSG"/>">
<div id="history" class="buttonOn" title="<spring:message code="HISTORY_MSG"/>">
<div class="toolbarLabel"><p><spring:message code="HISTORY"/></p></div>
</div>
</fieldset>