GraphViewer: Improved the layout of the toolbox buttons. They are now twice as large and only on row

html/admin/js/graphViewer/jasmine_test/helper/uiMatchers.js

@@ -0,0 +1,98 @@
+/*jslint indent: 2, nomen: true, maxlen: 100, white: true  plusplus: true */
+/*global expect, _ */
+
+////////////////////////////////////////////////////////////////////////////////
+/// @brief Graph functionality
+///
+/// @file
+///
+/// DISCLAIMER
+///
+/// Copyright 2010-2012 triagens GmbH, Cologne, Germany
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+/// Copyright holder is triAGENS GmbH, Cologne, Germany
+///
+/// @author Michael Hackstein
+/// @author Copyright 2011-2013, triAGENS GmbH, Cologne, Germany
+////////////////////////////////////////////////////////////////////////////////
+
+var uiMatchers = uiMatchers || {};
+
+(function UIMatchers() {
+  "use strict";
+  
+  uiMatchers.define = function(suite) {
+    suite.addMatchers({
+      
+      toBeTag: function(name) {
+        var el = this.actual;
+        this.message = function() {
+          return "Expected " + el.tagName.toLowerCase() + " to be a " + name; 
+        };
+        return el.tagName.toLowerCase() === name;
+      },
+      
+      toBeOfClass: function(name) {
+        var el = this.actual;
+        this.message = function() {
+          return "Expected " + el.className + " to be " + name; 
+        };
+        return el.className === name;
+      },
+      
+      toBeADropdownMenu: function() {
+        var div = this.actual,
+          btn = div.children[0],
+          list = div.children[1],
+          msg = "";
+        this.message = function() {
+          return "Expected " + msg;
+        };
+        expect(div).toBeOfClass("btn-group");
+        expect(btn).toBeTag("button");
+        expect(btn).toBeOfClass("btn btn-inverse btn-small dropdown-toggle");
+        if (btn.getAttribute("data-toggle") !== "dropdown") {
+          msg = "first elements data-toggle to be dropdown";
+          return false;
+        }
+        if (btn.children[0].tagName.toLowerCase() !== "span"
+          && btn.children[0].getAttribute("class") !== "caret") {
+          msg = "first element to contain a caret";
+          return false;
+        }
+
+        // Check the list
+        if (list.getAttribute("class") !== "dropdown-menu") {
+          msg = "list element to be of class dropdown-menu";
+          return false;
+        }
+        return true;
+      },
+      
+      toConformToToolboxLayout: function() {
+        var box = this.actual;
+        expect(box).toBeTag("div");
+        expect(box.id).toEqual("toolbox");
+        expect(box).toBeOfClass("btn-group btn-group-vertical pull-left toolbox");
+        _.each(box.children, function(btn) {
+          expect(btn).toBeTag("button");
+          expect(btn).toBeOfClass("btn btn-icon");
+          // Correctness of buttons is checked in eventDispatcherUISpec.
+        });
+        return true;
+      }
+    });
+  };
+}());

html/admin/js/graphViewer/jasmine_test/specEvents/eventDispatcherUISpec.js

@@ -177,17 +177,12 @@
         },
         toConformToToolbox: function() {
           var box = this.actual;
-          _.each(box.children, function(div) {
+          _.each(box.children, function(btn) {
-            expect(div).toBeTag("div");
+            expect(btn).toBeTag("button");
-            expect(div).toBeOfClass("btn btn-group");
+            expect(btn).toBeOfClass("btn btn-icon");
-            expect(div.children.length).toEqual(2);
+            expect(btn.children.length).toEqual(1);
-            _.each(div.children, function(btn) {
+            expect(btn.firstChild).toBeTag("i");
-              expect(btn).toBeTag("button");
+            expect(btn.firstChild.className).toMatch(/^icon-\S+ icon-white$/);
-              expect(btn).toBeOfClass("btn btn-icon");
-              expect(btn.children.length).toEqual(1);
-              expect(btn.firstChild).toBeTag("i");
-              expect(btn.firstChild.className).toMatch(/^icon-\S+ icon-white$/);
-            });
           });          
           return true;
         }

html/admin/js/graphViewer/jasmine_test/specGraphViewer/graphViewerPreviewSpec.js

@@ -4,7 +4,7 @@
 /*global runs, waitsFor, spyOn, waits */
 /*global document, window, helper */
 /*global $, _, d3*/
-/*global GraphViewerPreview, mocks*/
+/*global GraphViewerPreview, mocks, uiMatchers*/
 
 ////////////////////////////////////////////////////////////////////////////////
 /// @brief Graph functionality
@@ -48,50 +48,7 @@
       document.body.appendChild(cont);
       cont.style.height = height + "px";
       cont.style.width =  width + "px";
-      this.addMatchers({
+      uiMatchers.define(this);
-        toBeTag: function(name) {
-          var el = this.actual;
-          this.message = function() {
-            return "Expected " + el.tagName.toLowerCase() + " to be a " + name; 
-          };
-          return el.tagName.toLowerCase() === name;
-        },
-      
-        toBeOfClass: function(name) {
-          var el = this.actual;
-          this.message = function() {
-            return "Expected " + el.className + " to be " + name; 
-          };
-          return el.className === name;
-        },
-      
-        toBeADropdownMenu: function() {
-          var div = this.actual,
-            btn = div.children[0],
-            list = div.children[1],
-            msg = "";
-          this.message = function() {
-            return "Expected " + msg;
-          };
-          expect(div).toBeOfClass("btn-group");
-          expect(btn).toBeTag("button");
-          expect(btn).toBeOfClass("btn btn-inverse btn-small dropdown-toggle");
-          if (btn.getAttribute("data-toggle") !== "dropdown") {
-            msg = "first elements data-toggle to be dropdown";
-            return false;
-          }
-          if (btn.children[0].tagName.toLowerCase() !== "span"
-            && btn.children[0].getAttribute("class") !== "caret") {
-            msg = "first element to contain a caret";
-            return false;
-          }
-          if (list.getAttribute("class") !== "dropdown-menu") {
-            msg = "list element to be of class dropdown-menu";
-            return false;
-          }
-          return true;
-        }
-      });
     });
     
     afterEach(function() {
@@ -348,24 +305,6 @@
     describe('testing toolbox', function() {
       var toolboxSelector = "#toolbox";
             
-      beforeEach(function() {
-        this.addMatchers({
-          toConformToToolboxLayout: function() {
-            var box = this.actual;
-            expect(box).toBeTag("div");
-            expect(box.id).toEqual("toolbox");
-            expect(box).toBeOfClass("btn-group btn-group-vertical pull-left toolbox");
-            _.each(box.children, function(group) {
-              expect(group).toBeTag("div");
-              expect(group).toBeOfClass("btn btn-group");
-              expect(group.children.length).toEqual(2);
-              // Correctness of buttons is checked in eventDispatcherUISpec.
-            });
-            return true;
-          }
-        });
-      });
-      
       it('should append the toolbox if any tool is added', function() {
         var toolboxConf = {
             expand: true

html/admin/js/graphViewer/jasmine_test/specGraphViewer/graphViewerUISpec.js

@@ -4,7 +4,7 @@
 /*global runs, waitsFor, spyOn, waits */
 /*global window, eb, loadFixtures, document */
 /*global $, _, d3*/
-/*global helper, mocks, JSONAdapter:true*/
+/*global helper, mocks, JSONAdapter:true, uiMatchers*/
 /*global GraphViewerUI, NodeShaper, EdgeShaper*/
 
 ////////////////////////////////////////////////////////////////////////////////
@@ -74,52 +74,7 @@
       adapterConfig = {type: "json", path: "../test_data/"};
       document.body.appendChild(div);
       ui = new GraphViewerUI(div, adapterConfig);
-      this.addMatchers({
+      uiMatchers.define(this);
-        toBeTag: function(name) {
-          var el = this.actual;
-          this.message = function() {
-            return "Expected " + el.tagName.toLowerCase() + " to be a " + name; 
-          };
-          return el.tagName.toLowerCase() === name;
-        },
-        
-        toBeOfClass: function(name) {
-          var el = this.actual;
-          this.message = function() {
-            return "Expected " + el.className + " to be " + name; 
-          };
-          return el.className === name;
-        },
-        
-        toBeADropdownMenu: function() {
-          var div = this.actual,
-            btn = div.children[0],
-            list = div.children[1],
-            msg = "";
-          this.message = function() {
-            return "Expected " + msg;
-          };
-          expect(div).toBeOfClass("btn-group");
-          expect(btn).toBeTag("button");
-          expect(btn).toBeOfClass("btn btn-inverse btn-small dropdown-toggle");
-          if (btn.getAttribute("data-toggle") !== "dropdown") {
-            msg = "first elements data-toggle to be dropdown";
-            return false;
-          }
-          if (btn.children[0].tagName.toLowerCase() !== "span"
-            && btn.children[0].getAttribute("class") !== "caret") {
-            msg = "first element to contain a caret";
-            return false;
-          }
-
-          // Check the list
-          if (list.getAttribute("class") !== "dropdown-menu") {
-            msg = "list element to be of class dropdown-menu";
-            return false;
-          }
-          return true;
-        }
-      });
     });
     
     afterEach(function() {
@@ -170,24 +125,6 @@
     describe('checking the toolbox', function() {
       var toolboxSelector = "#contentDiv #toolbox";
             
-      beforeEach(function() {
-        this.addMatchers({
-          toConformToToolboxLayout: function() {
-            var box = this.actual;
-            expect(box).toBeTag("div");
-            expect(box.id).toEqual("toolbox");
-            expect(box).toBeOfClass("btn-group btn-group-vertical pull-left toolbox");
-            _.each(box.children, function(group) {
-              expect(group).toBeTag("div");
-              expect(group).toBeOfClass("btn btn-group");
-              expect(group.children.length).toEqual(2);
-              // Correctness of buttons is checked in eventDispatcherUISpec.
-            });
-            return true;
-          }
-        });
-      });
-      
       it('should append the toolbox', function() {
         expect($(toolboxSelector).length).toEqual(1);
       });

html/admin/js/graphViewer/jasmine_test/specGraphViewer/graphViewerWidgetSpec.js

@@ -4,7 +4,7 @@
 /*global runs, waitsFor, spyOn, waits */
 /*global document, window, helper */
 /*global $, _, d3*/
-/*global GraphViewerWidget, mocks*/
+/*global GraphViewerWidget, mocks, uiMatchers*/
 
 ////////////////////////////////////////////////////////////////////////////////
 /// @brief Graph functionality
@@ -50,53 +50,7 @@
       while (b.firstChild) {
           b.removeChild(b.firstChild);
       }
-      
+      uiMatchers.define(this);
-      this.addMatchers({
-        toBeTag: function(name) {
-          var el = this.actual;
-          this.message = function() {
-            return "Expected " + el.tagName.toLowerCase() + " to be a " + name; 
-          };
-          return el.tagName.toLowerCase() === name;
-        },
-        
-        toBeOfClass: function(name) {
-          var el = this.actual;
-          this.message = function() {
-            return "Expected " + el.className + " to be " + name; 
-          };
-          return el.className === name;
-        },
-        
-        toBeADropdownMenu: function() {
-          var div = this.actual,
-            btn = div.children[0],
-            list = div.children[1],
-            msg = "";
-          this.message = function() {
-            return "Expected " + msg;
-          };
-          expect(div).toBeOfClass("btn-group");
-          expect(btn).toBeTag("button");
-          expect(btn).toBeOfClass("btn btn-inverse btn-small dropdown-toggle");
-          if (btn.getAttribute("data-toggle") !== "dropdown") {
-            msg = "first elements data-toggle to be dropdown";
-            return false;
-          }
-          if (btn.children[0].tagName.toLowerCase() !== "span"
-            && btn.children[0].getAttribute("class") !== "caret") {
-            msg = "first element to contain a caret";
-            return false;
-          }
-
-          // Check the list
-          if (list.getAttribute("class") !== "dropdown-menu") {
-            msg = "list element to be of class dropdown-menu";
-            return false;
-          }
-          return true;
-        }
-      });
     });
     
     afterEach(function() {
@@ -295,24 +249,6 @@
     describe('testing toolbox', function() {
       var toolboxSelector = "#toolbox";
       
-      beforeEach(function() {
-        this.addMatchers({
-          toConformToToolboxLayout: function() {
-            var box = this.actual;
-            expect(box).toBeTag("div");
-            expect(box.id).toEqual("toolbox");
-            expect(box).toBeOfClass("btn-group btn-group-vertical pull-left toolbox");
-            _.each(box.children, function(group) {
-              expect(group).toBeTag("div");
-              expect(group).toBeOfClass("btn btn-group");
-              expect(group.children.length).toEqual(2);
-              // Correctness of buttons is checked in eventDispatcherUISpec.
-            });
-            return true;
-          }
-        });
-      });
-      
       it('should append the toolbox if any tool is added', function() {
         var toolboxConf = {
             expand: true

html/admin/js/graphViewer/karma/karma.conf.js

@@ -28,6 +28,7 @@ module.exports = function(karma) {
       'helper/objectsHelper.js',
       'helper/mocks.js',
       'helper/commMock.js',
+      'helper/uiMatchers.js',
 
     // Core Modules
       '../graphViewer.js',

html/admin/js/graphViewer/style/graphlayout.css

@@ -13,6 +13,8 @@
 }
 
 .toolbox > .btn {
+  width: 40px;
+  height: 40px;
   padding: 0px;
   background-color: rgb(51, 51, 51);
 }

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

@@ -46,12 +46,14 @@ function EventDispatcherControls(list, cursorIconBox, nodeShaper, edgeShaper, di
   }
   
   var self = this,
+    /* archive
     firstButton = true, 
     currentListGroup,
     placeHolderBtn = uiComponentsHelper.createIconButton(
       "none",
       ""
     ),
+    */
     baseClass = "event",
     eventlib = new EventLibrary(),
     dispatcher = new EventDispatcher(nodeShaper, edgeShaper, dispatcherConfig),
@@ -61,6 +63,8 @@ function EventDispatcherControls(list, cursorIconBox, nodeShaper, edgeShaper, di
     },
     
     appendToList = function(button) {
+      list.appendChild(button);
+      /* archive
       if (firstButton) {
         currentListGroup = document.createElement("div");
         currentListGroup.className = "btn btn-group";
@@ -73,6 +77,7 @@ function EventDispatcherControls(list, cursorIconBox, nodeShaper, edgeShaper, di
         currentListGroup.appendChild(button);
         firstButton = true;
       }
+      */
     },
     createButton = function(title, callback) {
       uiComponentsHelper.createButton(