From 1f02d5143451dbdd1dc86065024ce9bd3ad05d03 Mon Sep 17 00:00:00 2001 From: Paulo Veiga Date: Wed, 5 Oct 2011 02:38:43 -0300 Subject: [PATCH] Improve node editor --- .../javascript/libraries/moodialog/Overlay.js | 2 +- .../libraries/moodialog/css/MooDialog.css | 112 +++++----- mindplot/src/main/javascript/widget/Menu.js | 2 +- .../src/main/javascript/widget/NoteEditor.js | 5 +- wise-doc/src/main/webapp/css/common.css | 62 ++++-- wise-doc/src/main/webapp/html/editor.html | 2 +- wise-doc/src/main/webapp/js/editor.js | 201 ++++++++---------- wise-webapp/src/main/webapp/css/editor.css | 29 +-- .../src/main/webapp/jsp/mindmapEditor.jsp | 60 +++--- 9 files changed, 242 insertions(+), 233 deletions(-) diff --git a/mindplot/src/main/javascript/libraries/moodialog/Overlay.js b/mindplot/src/main/javascript/libraries/moodialog/Overlay.js index b6c61067..f6022f78 100644 --- a/mindplot/src/main/javascript/libraries/moodialog/Overlay.js +++ b/mindplot/src/main/javascript/libraries/moodialog/Overlay.js @@ -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, diff --git a/mindplot/src/main/javascript/libraries/moodialog/css/MooDialog.css b/mindplot/src/main/javascript/libraries/moodialog/css/MooDialog.css index 148127d8..a70519a0 100644 --- a/mindplot/src/main/javascript/libraries/moodialog/css/MooDialog.css +++ b/mindplot/src/main/javascript/libraries/moodialog/css/MooDialog.css @@ -1,95 +1,95 @@ /* Created by Arian Stolwijk */ .MooDialog { -/* position: fixed;*/ - width: 300px; - height: 100px; - position: fixed; - margin: -150px 0 0 -150px; - top: 50%; - left: 50%; - z-index: 50000; + position: fixed; + top: 50%; + left: 50%; + 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 { - height: 100px; + height: 100px; } .MooDialog .title { - position: absolute; - 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; + position: absolute; + top: 0; + left: 0; + right: 0; + border-bottom: 1px solid #a1aec5; + font-weight: bold; + text-shadow: 1px 1px 0 #fff; + /*color: black;*/ + border-bottom: 1px solid #eee; + padding: 5px 30px; + font-size: 18px } .MooDialog .close { - background: url(dialog-close.png) no-repeat; - width: 16px; - height: 16px; - display: block; - cursor: pointer; - top: -5px; - left: -5px; - position: absolute; + background: url(dialog-close.png) no-repeat; + width: 16px; + height: 16px; + display: block; + cursor: pointer; + top: 8px; + left: 420px; + position: absolute; } .MooDialog .buttons { - text-align: right; - margin: 0; - padding: 0; - border: 0; - background: none; + text-align: right; + margin: 0; + padding: 0; + border: 0; + background: none; } .MooDialog .iframe { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } .MooDialog .textInput { - width: 200px; - float: left; + width: 200px; + float: left; } .MooDialog .MooDialogAlert, .MooDialog .MooDialogConfirm, .MooDialog .MooDialogPrompt, .MooDialog .MooDialogError { - background: url(dialog-warning.png) no-repeat; - padding-left: 40px; - min-height: 40px; + background: url(dialog-warning.png) no-repeat; + padding-left: 40px; + min-height: 40px; } .MooDialog .MooDialogConfirm, .MooDialog .MooDialogPromt { - background: url(dialog-question.png) no-repeat; + background: url(dialog-question.png) no-repeat; } .MooDialog .MooDialogError { - background: url(dialog-error.png) no-repeat; + background: url(dialog-error.png) no-repeat; } - diff --git a/mindplot/src/main/javascript/widget/Menu.js b/mindplot/src/main/javascript/widget/Menu.js index bf2dd01e..622d640e 100644 --- a/mindplot/src/main/javascript/widget/Menu.js +++ b/mindplot/src/main/javascript/widget/Menu.js @@ -386,4 +386,4 @@ mindplot.widget.Menu = new Class({ elem.hide(); }); } -}); +}); \ No newline at end of file diff --git a/mindplot/src/main/javascript/widget/NoteEditor.js b/mindplot/src/main/javascript/widget/NoteEditor.js index 6e41abd1..22f45de0 100644 --- a/mindplot/src/main/javascript/widget/NoteEditor.js +++ b/mindplot/src/main/javascript/widget/NoteEditor.js @@ -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 ... diff --git a/wise-doc/src/main/webapp/css/common.css b/wise-doc/src/main/webapp/css/common.css index 2f79b4be..71f81c66 100644 --- a/wise-doc/src/main/webapp/css/common.css +++ b/wise-doc/src/main/webapp/css/common.css @@ -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; - line-height: normal; - overflow: visible; - padding: 2px 8px 1px; - vertical-align: middle; + 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; + 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; diff --git a/wise-doc/src/main/webapp/html/editor.html b/wise-doc/src/main/webapp/html/editor.html index 47786b29..d4007840 100644 --- a/wise-doc/src/main/webapp/html/editor.html +++ b/wise-doc/src/main/webapp/html/editor.html @@ -185,7 +185,7 @@

Link

-
+

Relationship

diff --git a/wise-doc/src/main/webapp/js/editor.js b/wise-doc/src/main/webapp/js/editor.js index be9e4948..f3bdc36c 100644 --- a/wise-doc/src/main/webapp/js/editor.js +++ b/wise-doc/src/main/webapp/js/editor.js @@ -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') - } - }); -} \ No newline at end of file diff --git a/wise-webapp/src/main/webapp/css/editor.css b/wise-webapp/src/main/webapp/css/editor.css index 4ff33c4d..1a2a43d2 100644 --- a/wise-webapp/src/main/webapp/css/editor.css +++ b/wise-webapp/src/main/webapp/css/editor.css @@ -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; -} \ No newline at end of file diff --git a/wise-webapp/src/main/webapp/jsp/mindmapEditor.jsp b/wise-webapp/src/main/webapp/jsp/mindmapEditor.jsp index e2e4334e..ffec587d 100644 --- a/wise-webapp/src/main/webapp/jsp/mindmapEditor.jsp +++ b/wise-webapp/src/main/webapp/jsp/mindmapEditor.jsp @@ -126,24 +126,24 @@ -