Improve node editor

2011-10-05 02:38:43 -03:00
parent b0e5923fec
commit 1f02d51434
9 changed files with 242 additions and 233 deletions
--- 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;
--- a/wise-doc/src/main/webapp/html/editor.html
+++ b/wise-doc/src/main/webapp/html/editor.html
@@ -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>
--- 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')
-        }
-    });
-}