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

GraphViewer: Further adaption of CSS for the admin interface

This commit is contained in:
Michael Hackstein 2013-04-11 17:18:22 +02:00
parent 7049c7c80e
commit caaff89ec6
7 changed files with 123 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
html/admin/js/graphViewer/jasmine_test/runnerEdgeShaper.html
View File

@ -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>

34
html/admin/js/graphViewer/jasmine_test/specEdgeShaper/edgeShaperUISpec.js
View File

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

33
html/admin/js/graphViewer/jasmine_test/specNodeShaper/nodeShaperUISpec.js
View File

@ -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");

77
html/admin/js/graphViewer/ui/edgeShaperControls.js
View File

@ -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 + "_",
callback = function() {
idprefix = prefix + "_";
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 + "_",
callback = function() {
idprefix = prefix + "_";
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 + "_",
callback = function() {
idprefix = prefix + "_";
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 + "_",
callback = function() {
idprefix = prefix + "_";
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 + "_",
callback = function() {
idprefix = prefix + "_";
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 + "_",
callback = function() {
idprefix = prefix + "_";
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 () {

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

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

10
html/admin/js/graphViewer/ui/graphViewerUI.js
View File

@ -43,8 +43,8 @@ function GraphViewerUI(container, adapterConfig) {
}
var graphViewer,
width = container.offsetWidth, // TODO
height = container.offsetHeight, // TODO
width = container.offsetWidth - 60,
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();

21
html/admin/js/graphViewer/ui/uiComponentsHelper.js
View File

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