GraphViewer: Further adaption of CSS for the admin interface

html/admin/js/graphViewer/jasmine_test/runnerEdgeShaper.html

@@ -22,6 +22,7 @@
   
   <script type="text/javascript" src="../graph/colourMapper.js"></script>
   <script type="text/javascript" src="../graph/edgeShaper.js"></script>
+  <script type="text/javascript" src="../ui/uiComponentsHelper.js"></script>
   <script type="text/javascript" src="../ui/modalDialogHelper.js"></script>
   <script type="text/javascript" src="../ui/edgeShaperControls.js"></script>
   

html/admin/js/graphViewer/jasmine_test/specEdgeShaper/edgeShaperUISpec.js

@@ -50,6 +50,30 @@
       list.id = "control_list";
       shaperUI = new EdgeShaperControls(list, shaper);
       spyOn(shaper, 'changeTo');
+      this.addMatchers({
+        toConformToListCSS: function() {
+          var li = this.actual,
+            a = li.firstChild,
+            lbl = a.firstChild,
+            msg = "";
+          this.message = function() {
+            return "Expected " + msg;
+          };
+          if (li === undefined || li.tagName.toLowerCase() !== "li") {
+            msg = "first element to be a li";
+            return false;
+          }
+          if (a === undefined || a.tagName.toLowerCase() !== "a") {
+            msg = "first element to be a a";
+            return false;
+          }
+          if (lbl === undefined || lbl.tagName.toLowerCase() !== "label") {
+            msg = "first element to be a label";
+            return false;
+          }
+          return true;
+        }
+      });
     });
 
     afterEach(function () {
@@ -71,6 +95,7 @@
         shaperUI.addControlOpticShapeNone();
       
         expect($("#control_list #control_none").length).toEqual(1);
+        expect($("#control_list #control_none")[0]).toConformToListCSS();
       
         helper.simulateMouseEvent("click", "control_none");
       
@@ -87,6 +112,7 @@
         shaperUI.addControlOpticShapeArrow();
       
         expect($("#control_list #control_arrow").length).toEqual(1);
+        expect($("#control_list #control_arrow")[0]).toConformToListCSS();
       
         helper.simulateMouseEvent("click", "control_arrow");
       
@@ -104,6 +130,7 @@
         shaperUI.addControlOpticLabel();
       
         expect($("#control_list #control_label").length).toEqual(1);
+        expect($("#control_list #control_label")[0]).toConformToListCSS();
       
         helper.simulateMouseEvent("click", "control_label");
         $("#control_label_key").attr("value", "theAnswer");
@@ -125,6 +152,7 @@
         shaperUI.addControlOpticSingleColour();
       
         expect($("#control_list #control_singlecolour").length).toEqual(1);
+        expect($("#control_list #control_singlecolour")[0]).toConformToListCSS();
       
         helper.simulateMouseEvent("click", "control_singlecolour");
         $("#control_singlecolour_stroke").attr("value", "#123456");
@@ -149,6 +177,7 @@
         shaperUI.addControlOpticAttributeColour();
       
         expect($("#control_list #control_attributecolour").length).toEqual(1);
+        expect($("#control_list #control_attributecolour")[0]).toConformToListCSS();
       
         helper.simulateMouseEvent("click", "control_attributecolour");
         $("#control_attributecolour_key").attr("value", "label");
@@ -173,6 +202,7 @@
         shaperUI.addControlOpticGradientColour();
       
         expect($("#control_list #control_gradientcolour").length).toEqual(1);
+        expect($("#control_list #control_gradientcolour")[0]).toConformToListCSS();
       
         helper.simulateMouseEvent("click", "control_gradientcolour");
         $("#control_gradientcolour_source").attr("value", "#123456");
@@ -194,10 +224,6 @@
       
     });
     
-    
-    
-    
-    
     it('should be able to add all optic controls to the list', function () {
       shaperUI.addAllOptics();
       

html/admin/js/graphViewer/jasmine_test/specNodeShaper/nodeShaperUISpec.js

@@ -50,6 +50,30 @@
       list.id = "control_list";
       shaperUI = new NodeShaperControls(list, shaper);
       spyOn(shaper, 'changeTo');
+      this.addMatchers({
+        toConformToListCSS: function() {
+          var li = this.actual,
+            a = li.firstChild,
+            lbl = a.firstChild,
+            msg = "";
+          this.message = function() {
+            return "Expected " + msg;
+          };
+          if (li === undefined || li.tagName.toLowerCase() !== "li") {
+            msg = "first element to be a li";
+            return false;
+          }
+          if (a === undefined || a.tagName.toLowerCase() !== "a") {
+            msg = "first element to be a a";
+            return false;
+          }
+          if (lbl === undefined || lbl.tagName.toLowerCase() !== "label") {
+            msg = "first element to be a label";
+            return false;
+          }
+          return true;
+        }
+      });
     });
 
     afterEach(function () {
@@ -71,6 +95,7 @@
         shaperUI.addControlOpticShapeNone();
       
         expect($("#control_list #control_none").length).toEqual(1);
+        expect($("#control_list #control_none")[0]).toConformToListCSS();
       
         helper.simulateMouseEvent("click", "control_none");
       
@@ -87,7 +112,8 @@
         shaperUI.addControlOpticShapeCircle();
       
         expect($("#control_list #control_circle").length).toEqual(1);
-      
+        expect($("#control_list #control_circle")[0]).toConformToListCSS();
+        
         helper.simulateMouseEvent("click", "control_circle");
         expect($("#control_circle_modal").length).toEqual(1);
       
@@ -113,6 +139,7 @@
         shaperUI.addControlOpticShapeRect();
       
         expect($("#control_list #control_rect").length).toEqual(1);
+        expect($("#control_list #control_rect")[0]).toConformToListCSS();
       
         helper.simulateMouseEvent("click", "control_rect");
         $("#control_rect_width").attr("value", 42);
@@ -139,6 +166,7 @@
         shaperUI.addControlOpticLabel();
       
         expect($("#control_list #control_label").length).toEqual(1);
+        expect($("#control_list #control_label")[0]).toConformToListCSS();
       
         helper.simulateMouseEvent("click", "control_label");
         $("#control_label_key").attr("value", "theAnswer");
@@ -160,6 +188,7 @@
         shaperUI.addControlOpticSingleColour();
       
         expect($("#control_list #control_singlecolour").length).toEqual(1);
+        expect($("#control_list #control_singlecolour")[0]).toConformToListCSS();
       
         helper.simulateMouseEvent("click", "control_singlecolour");
         $("#control_singlecolour_fill").attr("value", "#123456");
@@ -186,6 +215,7 @@
         shaperUI.addControlOpticAttributeColour();
       
         expect($("#control_list #control_attributecolour").length).toEqual(1);
+        expect($("#control_list #control_attributecolour")[0]).toConformToListCSS();
       
         helper.simulateMouseEvent("click", "control_attributecolour");
         $("#control_attributecolour_key").attr("value", "label");
@@ -210,6 +240,7 @@
         shaperUI.addControlOpticExpandColour();
       
         expect($("#control_list #control_expandcolour").length).toEqual(1);
+        expect($("#control_list #control_expandcolour")[0]).toConformToListCSS();
       
         helper.simulateMouseEvent("click", "control_expandcolour");
         $("#control_expandcolour_expanded").attr("value", "#123456");

html/admin/js/graphViewer/ui/edgeShaperControls.js

@@ -1,7 +1,7 @@
 /*jslint indent: 2, nomen: true, maxlen: 100, white: true  plusplus: true */
 /*global $, _, d3*/
 /*global document*/
-/*global EdgeShaper, modalDialogHelper*/
+/*global EdgeShaper, modalDialogHelper, uiComponentsHelper*/
 ////////////////////////////////////////////////////////////////////////////////
 /// @brief Graph functionality
 ///
@@ -37,50 +37,39 @@ function EdgeShaperControls(list, shaper) {
   if (shaper === undefined) {
     throw "The EdgeShaper has to be given.";
   }
-  var self = this;
+  var self = this,
+    baseClass = "graph";
   
   this.addControlOpticShapeNone = function() {
     var prefix = "control_none",
-    idprefix = prefix + "_",
+    idprefix = prefix + "_";
-    callback = function() {
+    uiComponentsHelper.createButton(baseClass, list, "None", prefix, function() {
       shaper.changeTo({
         shape: {
           type: EdgeShaper.shapes.NONE
         }
       });
-    },
+    });
-    button = document.createElement("li");
-    button.className = "graph_control " + prefix;
-    button.id = prefix;
-    button.appendChild(document.createTextNode("None"));
-    list.appendChild(button);
-    button.onclick = callback;
   };
   
   this.addControlOpticShapeArrow = function() {
     var prefix = "control_arrow",
-    idprefix = prefix + "_",
+      idprefix = prefix + "_";
-    callback = function() {
+    uiComponentsHelper.createButton(baseClass, list, "Arrow", prefix, function() {
       shaper.changeTo({
         shape: {
           type: EdgeShaper.shapes.ARROW
         }
       });
-    },
+    });
-    button = document.createElement("li");
-    button.className = "graph_control " + prefix;
-    button.id = prefix;
-    button.appendChild(document.createTextNode("Arrow"));
-    list.appendChild(button);
-    button.onclick = callback;
   };
   
 
     
   this.addControlOpticLabel = function() {
     var prefix = "control_label",
-    idprefix = prefix + "_",
+      idprefix = prefix + "_";
-    callback = function() {
+    uiComponentsHelper.createButton(baseClass, list, "Label", prefix, function() {
       modalDialogHelper.createModalDialog("Switch Label Attribute",
         idprefix, [{
           type: "text",
@@ -92,13 +81,7 @@ function EdgeShaperControls(list, shaper) {
           });
         }
       );
-    },
+    });
-    button = document.createElement("li");
-    button.className = "graph_control " + prefix;
-    button.id = prefix;
-    button.appendChild(document.createTextNode("Label"));
-    list.appendChild(button);
-    button.onclick = callback;
   };
   
   
@@ -106,8 +89,8 @@ function EdgeShaperControls(list, shaper) {
   
   this.addControlOpticSingleColour = function() {
     var prefix = "control_singlecolour",
-    idprefix = prefix + "_",
+      idprefix = prefix + "_";
-    callback = function() {
+    uiComponentsHelper.createButton(baseClass, list, "Single Colour", prefix, function() {
       modalDialogHelper.createModalDialog("Switch to Colour",
         idprefix, [{
           type: "text",
@@ -122,19 +105,13 @@ function EdgeShaperControls(list, shaper) {
           });
         }
       );
-    },
+    });
-    button = document.createElement("li");
-    button.className = "graph_control " + prefix;
-    button.id = prefix;
-    button.appendChild(document.createTextNode("Single Colour"));
-    list.appendChild(button);
-    button.onclick = callback;
   };
   
   this.addControlOpticAttributeColour = function() {
     var prefix = "control_attributecolour",
-    idprefix = prefix + "_",
+      idprefix = prefix + "_";
-    callback = function() {
+    uiComponentsHelper.createButton(baseClass, list, "Colour by Attribute", prefix, function() {
       modalDialogHelper.createModalDialog("Display colour by attribute",
         idprefix, [{
           type: "text",
@@ -149,19 +126,13 @@ function EdgeShaperControls(list, shaper) {
           });
         }
       );
-    },
+    });
-    button = document.createElement("li");
-    button.className = "graph_control " + prefix;
-    button.id = prefix;
-    button.appendChild(document.createTextNode("Colour by Attribute"));
-    list.appendChild(button);
-    button.onclick = callback;
   };
   
   this.addControlOpticGradientColour = function() {
     var prefix = "control_gradientcolour",
-    idprefix = prefix + "_",
+      idprefix = prefix + "_";
-    callback = function() {
+    uiComponentsHelper.createButton(baseClass, list, "Gradient Colour", prefix, function() {
       modalDialogHelper.createModalDialog("Change colours for gradient",
         idprefix, [{
           type: "text",
@@ -181,13 +152,7 @@ function EdgeShaperControls(list, shaper) {
           });
         }
       );
-    },
+    });
-    button = document.createElement("li");
-    button.className = "graph_control " + prefix;
-    button.id = prefix;
-    button.appendChild(document.createTextNode("Gradient Colour"));
-    list.appendChild(button);
-    button.onclick = callback;
   };
   
   this.addAllOptics = function () {

html/admin/js/graphViewer/ui/eventDispatcherControls.js

@@ -57,6 +57,15 @@ function EventDispatcherControls(list, nodeShaper, edgeShaper, dispatcherConfig)
         callback
       );
     },
+    createIcon = function(icon, title, callback) {
+      uiComponentsHelper.createIconButton(
+        baseClass,
+        list,
+        icon,
+        "control_" + title,
+        callback
+      );
+    },
     rebindNodes = function(actions) {
       dispatcher.rebind("nodes", actions);
     },
@@ -75,7 +84,7 @@ function EventDispatcherControls(list, nodeShaper, edgeShaper, dispatcherConfig)
         
         
       };
-    createButton("drag", callback);
+    createIcon("move", "drag", callback);
   };
   
   this.addControlEdit = function() {
@@ -109,7 +118,7 @@ function EventDispatcherControls(list, nodeShaper, edgeShaper, dispatcherConfig)
         rebindNodes({click: nodeCallback});
         rebindEdges({click: edgeCallback});
       };
-    createButton("edit", callback);
+    createIcon("edit", "edit", callback);
   };
   
   this.addControlExpand = function() {
@@ -119,7 +128,7 @@ function EventDispatcherControls(list, nodeShaper, edgeShaper, dispatcherConfig)
         rebindNodes({click: dispatcher.events.EXPAND});
         rebindEdges();
       };
-    createButton("expand", callback);
+    createIcon("plus", "expand", callback);
   };
   
   this.addControlDelete = function() {
@@ -133,7 +142,7 @@ function EventDispatcherControls(list, nodeShaper, edgeShaper, dispatcherConfig)
           edgeShaper.reshapeEdges();
         })});
       };
-    createButton("delete", callback);
+    createIcon("trash", "delete", callback);
   };
   
   this.addControlConnect = function() {
@@ -149,7 +158,7 @@ function EventDispatcherControls(list, nodeShaper, edgeShaper, dispatcherConfig)
         });
         rebindEdges();
       };
-    createButton("connect", callback);
+    createIcon("resize-horizontal", "connect", callback);
   };
   
   

html/admin/js/graphViewer/ui/graphViewerUI.js

@@ -43,8 +43,8 @@ function GraphViewerUI(container, adapterConfig) {
   } 
   
   var graphViewer,
-    width = container.offsetWidth, // TODO
+    width = container.offsetWidth - 60,
-    height = container.offsetHeight, // TODO
+    height = container.offsetHeight,
     menubar = document.createElement("ul"),
     svg, 
     makeBootstrapDropdown = function (div, id, title) {
@@ -68,7 +68,9 @@ function GraphViewerUI(container, adapterConfig) {
       return d3.select("#" + container.id)
         .append("svg")
         .attr("width",width)
-        .attr("height",height);
+        .attr("height",height)
+        .attr("class", "pull-right")
+        .attr("style", "width:" + width + "px");
     },
     createToolbox = function() {
       var toolbox = document.createElement("div"),
@@ -80,7 +82,7 @@ function GraphViewerUI(container, adapterConfig) {
         graphViewer.dispatcherConfig
       );
       toolbox.id = "toolbox";
-      toolbox.className = "toolbox";
+      toolbox.className = "toolbox pull-left";
       container.appendChild(toolbox);
       toolbox.appendChild(toollist);
       dispatcherUI.addAll();

html/admin/js/graphViewer/ui/uiComponentsHelper.js

@@ -34,10 +34,27 @@ var uiComponentsHelper = uiComponentsHelper || {};
   "use strict";
   
   uiComponentsHelper.createButton = function(baseclass, list, title, prefix, callback) {
-    var  button = document.createElement("li");
+    var button = document.createElement("li"),
+      a = document.createElement("a"),
+      label = document.createElement("label");
     button.className = baseclass + "_control " + prefix;
     button.id = prefix;
-    button.appendChild(document.createTextNode(title));
+    button.appendChild(a);
+    a.appendChild(label);
+    label.appendChild(document.createTextNode(title));
+    list.appendChild(button);
+    button.onclick = callback;
+  };
+  
+  uiComponentsHelper.createIconButton = function(baseclass, list, icon, prefix, callback) {
+    var button = document.createElement("li"),
+      a = document.createElement("a"),
+      i = document.createElement("i");
+    button.className = baseclass + "_control " + prefix;
+    button.id = prefix;
+    button.appendChild(a);
+    a.appendChild(i);
+    i.className = "icon-" + icon;
     list.appendChild(button);
     button.onclick = callback;
   };