Hawkin
/
arangodb
mirror of https://gitee.com/bigwinds/arangodb
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

This commit is contained in:
Michael Hackstein 2013-07-09 16:41:20 +02:00
parent 243b428b2d
commit c826a184d1
8 changed files with 121 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
html/admin/js/graphViewer/jasmine_test/helper/uiMatchers.js Normal file
View File

@ -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;
}
});
};
}());

17
html/admin/js/graphViewer/jasmine_test/specEvents/eventDispatcherUISpec.js
View File

@ -177,17 +177,12 @@
},
toConformToToolbox: function() {
var box = this.actual;
_.each(box.children, function(div) {
expect(div).toBeTag("div");
expect(div).toBeOfClass("btn btn-group");
expect(div.children.length).toEqual(2);
_.each(div.children, function(btn) {
expect(btn).toBeTag("button");
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$/);
});
_.each(box.children, function(btn) {
expect(btn).toBeTag("button");
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;
}

67
html/admin/js/graphViewer/jasmine_test/specGraphViewer/graphViewerPreviewSpec.js
View File

@ -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({
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;
}
});
uiMatchers.define(this);
});
afterEach(function() {
@ -347,25 +304,7 @@
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

69
html/admin/js/graphViewer/jasmine_test/specGraphViewer/graphViewerUISpec.js
View File

@ -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({
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;
}
});
uiMatchers.define(this);
});
afterEach(function() {
@ -169,25 +124,7 @@
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);
});

68
html/admin/js/graphViewer/jasmine_test/specGraphViewer/graphViewerWidgetSpec.js
View File

@ -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);
}
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;
}
});
uiMatchers.define(this);
});
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

1
html/admin/js/graphViewer/karma/karma.conf.js
View File

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

2
html/admin/js/graphViewer/style/graphlayout.css
View File

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

7
html/admin/js/graphViewer/ui/eventDispatcherControls.js
View File

@ -46,12 +46,14 @@ function EventDispatcherControls(list, cursorIconBox, nodeShaper, edgeShaper, di
}
var self = this,
firstButton = true,
/* 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(