GUI -- ToolbarService - showing and hiding the toolbar panel - WIP.
Change-Id: Idf9ccbfdeb2b3906fefdf022c216eee2611787fa
diff --git a/web/gui/src/main/webapp/app/fw/widget/button.css b/web/gui/src/main/webapp/app/fw/widget/button.css
new file mode 100644
index 0000000..e4439b6e0
--- /dev/null
+++ b/web/gui/src/main/webapp/app/fw/widget/button.css
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * 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.
+ */
+
+/*
+ ONOS GUI -- Button Service -- CSS file
+ */
+
+.btn svg.embeddedIcon,
+.tog svg.embeddedIcon,
+.rad svg.embeddedIcon {
+ cursor: pointer;
+}
diff --git a/web/gui/src/main/webapp/app/fw/widget/button.js b/web/gui/src/main/webapp/app/fw/widget/button.js
index 0cc3ddd..1a906c3 100644
--- a/web/gui/src/main/webapp/app/fw/widget/button.js
+++ b/web/gui/src/main/webapp/app/fw/widget/button.js
@@ -22,7 +22,7 @@
var $log, fs, is;
- var btnSize = 30;
+ var btnSize = 25;
function noop() {}
@@ -41,7 +41,7 @@
var btnDiv = createDiv(div, 'btn', id),
cbFnc = fs.isF(cb) || noop;
- is.loadIcon(btnDiv, gid, btnSize);
+ is.loadIcon(btnDiv, gid, btnSize, true);
btnDiv.on('click', cbFnc);
@@ -62,7 +62,7 @@
togDiv = createDiv(div, 'tog', id),
cbFnc = fs.isF(cb) || noop;
- is.loadIcon(togDiv, gid, btnSize);
+ is.loadIcon(togDiv, gid, btnSize, true);
function _toggle(b) {
if (b === undefined) {
diff --git a/web/gui/src/main/webapp/app/fw/widget/toolbar.css b/web/gui/src/main/webapp/app/fw/widget/toolbar.css
new file mode 100644
index 0000000..d25279d
--- /dev/null
+++ b/web/gui/src/main/webapp/app/fw/widget/toolbar.css
@@ -0,0 +1,35 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * 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.
+ */
+
+/*
+ ONOS GUI -- Toolbar Service -- CSS file
+ */
+
+.floatpanel.toolbar {
+ position: absolute;
+ z-index: 100;
+ display: block;
+ top: 75px; /* TODO: change this to proper height*/
+ width: 200px;
+ right: -220px;
+ opacity: 0;
+
+ padding: 10px;
+ font-size: 10pt;
+
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+}
diff --git a/web/gui/src/main/webapp/app/fw/widget/toolbar.js b/web/gui/src/main/webapp/app/fw/widget/toolbar.js
index 9518239..d80dbf8 100644
--- a/web/gui/src/main/webapp/app/fw/widget/toolbar.js
+++ b/web/gui/src/main/webapp/app/fw/widget/toolbar.js
@@ -20,18 +20,27 @@
(function () {
'use strict';
- var $log, fs, ps, bns;
+ var $log, fs, ps, bns, is;
var ids = [],
+ defaultSettings = {
+ edge: 'left',
+ width: 400
+ },
+ settings,
+ arrowSize = 10,
tbarId,
tbarPanel,
tbarDiv,
tbarArrowDiv;
+ // this function is only used in testing
function init() {
ids = [];
}
+ // === Helper functions --------------------------------------
+
function validId(id, caller) {
if (fs.inArray(id, ids) !== -1) {
$log.warn(caller + ': ID already exists');
@@ -40,6 +49,34 @@
return true;
}
+ // translate(0 50) looks good with arrowSize of 10
+ function rotateArrowLeft() {
+ tbarArrowDiv.select('g')
+ .attr('transform', 'translate(0 50) rotate(-90)');
+ }
+
+ function rotateArrowRight() {
+ tbarArrowDiv.select('g')
+ .attr('transform', 'translate(0 50) rotate(90)');
+ }
+
+ function createArrow() {
+ tbarArrowDiv = tbarDiv.append('div')
+ .classed('tbarArrow', true)
+ .style({'position': 'absolute',
+ 'top': '50%',
+ 'left': '98%',
+ 'margin-right': '-2%',
+ 'transform': 'translate(-50%, -50%)',
+ 'cursor': 'pointer'});
+ is.loadEmbeddedIcon(tbarArrowDiv, 'tableColSortAsc', arrowSize);
+ rotateArrowLeft();
+
+ tbarArrowDiv.on('click', toggleTools);
+ }
+
+ // === Adding to toolbar functions ----------------------------
+
function addButton(id, gid, cb, tooltip) {
var btnId = tbarId + '-' + id;
if (!validId(btnId, 'addButton')) { return null; }
@@ -66,46 +103,72 @@
$log.warn('Separator cannot append to div');
return null;
}
- tbarArrowDiv = tbarDiv.append('div')
+ return tbarDiv.append('div')
.classed('sep', true)
.style('width', '2px');
}
- function createToolbar(id, settings) {
+ // === Main toolbar API functions ----------------------------
+
+ function createToolbar(id, opts) {
if (!id) {
$log.warn('createToolbar: no ID given');
return null;
}
tbarId = 'tbar-' + id;
- var opts = fs.isO(settings) || {}; // default settings should be put here
+ settings = angular.extend({}, defaultSettings, fs.isO(opts));
if (!validId(tbarId, 'createToolbar')) { return null; }
ids.push(tbarId);
- tbarPanel = ps.createPanel(tbarId, opts);
- tbarDiv = tbarPanel.classed('toolbar', true);
+ tbarPanel = ps.createPanel(tbarId, settings);
+ tbarDiv = tbarPanel.classed('toolbar', true)
+ .style('position', 'relative');
+
+ createArrow();
return {
addButton: addButton,
addToggle: addToggle,
addRadioSet: addRadioSet,
- addSeparator: addSeparator
+ addSeparator: addSeparator,
+
+ show: show,
+ hide: hide,
+ toggleTools: toggleTools
}
}
- //function currently not working
function destroyToolbar(id) {
- //ps.destroyPanel(id);
+ ps.destroyPanel(id);
+ tbarDiv = null;
+ }
+
+ function show(cb) {
+ tbarPanel.show(cb);
+ rotateArrowLeft();
+ }
+
+ function hide(cb) {
+ tbarPanel.hide(cb);
+ //tbarPanel.style(opts.edge, (arrowSize + 4 + 'px'));
+ rotateArrowRight();
+ }
+
+ function toggleTools(cb) {
+ if (tbarPanel.isVisible()) { hide(cb); }
+ else { show(cb) }
}
angular.module('onosWidget')
.factory('ToolbarService', ['$log', 'FnService',
- 'PanelService', 'ButtonService',
- function (_$log_, _fs_, _ps_, _bns_) {
+ 'PanelService', 'ButtonService', 'IconService',
+ function (_$log_, _fs_, _ps_, _bns_, _is_) {
$log = _$log_;
fs = _fs_;
ps = _ps_;
bns = _bns_;
+ is = _is_;
return {
init: init,
diff --git a/web/gui/src/main/webapp/app/view/sample/sample.js b/web/gui/src/main/webapp/app/view/sample/sample.js
index 116ff13..9a99291 100644
--- a/web/gui/src/main/webapp/app/view/sample/sample.js
+++ b/web/gui/src/main/webapp/app/view/sample/sample.js
@@ -20,13 +20,21 @@
(function () {
'use strict';
+ var tbs;
+
angular.module('ovSample', ['onosUtil'])
- .controller('OvSampleCtrl', ['$log', function (_$log_) {
- var self = this,
- $log = _$log_;
+ .controller('OvSampleCtrl', ['$log', 'ToolbarService',
+ function (_$log_, _tbs_) {
+ var self = this,
+ $log = _$log_,
+ tbs = _tbs_;
- self.message = 'Hey there folks!';
+ self.message = 'Hey there folks!';
- $log.log('OvSampleCtrl has been created');
+ var toolbar = tbs.createToolbar('sample');
+ toolbar.addButton('some-btn', 'crown', function () {});
+ toolbar.show();
+
+ $log.log('OvSampleCtrl has been created');
}]);
}());
diff --git a/web/gui/src/main/webapp/index.html b/web/gui/src/main/webapp/index.html
index 0e62297..083162a 100644
--- a/web/gui/src/main/webapp/index.html
+++ b/web/gui/src/main/webapp/index.html
@@ -79,6 +79,8 @@
<link rel="stylesheet" href="app/fw/layer/quickhelp.css">
<link rel="stylesheet" href="app/fw/layer/veil.css">
<link rel="stylesheet" href="app/fw/nav/nav.css">
+ <link rel="stylesheet" href="app/fw/widget/button.css">
+ <link rel="stylesheet" href="app/fw/widget/toolbar.css">
<!-- This is where contributed javascript will get injected -->
<!-- {INJECTED-JAVASCRIPT-START} -->
diff --git a/web/gui/src/main/webapp/tests/app/fw/widget/toolbar-spec.js b/web/gui/src/main/webapp/tests/app/fw/widget/toolbar-spec.js
index d61be12..179c011 100644
--- a/web/gui/src/main/webapp/tests/app/fw/widget/toolbar-spec.js
+++ b/web/gui/src/main/webapp/tests/app/fw/widget/toolbar-spec.js
@@ -74,6 +74,16 @@
expect($log.warn).not.toHaveBeenCalled();
});
+ it('should verify the toolbar arrow div exists', function () {
+ tbs.createToolbar('test');
+
+ var arrow = d3Elem.select('.tbarArrow');
+ expect(arrow).toBeTruthy();
+ expect(arrow.select('svg')).toBeTruthy();
+ expect(arrow.select('svg').select('g')
+ .classed('tableColSortAsc')).toBeTruthy();
+ });
+
it('should create a button', function () {
spyOn($log, 'warn');
var toolbar = tbs.createToolbar('test'),
@@ -140,13 +150,13 @@
expect(d3Elem.select('.sep').style('width')).toBe('2px');
});
- //it('should not append to a destroyed toolbar', function () {
- // spyOn($log, 'warn');
- // var toolbar = tbs.createToolbar1('test');
- // expect(toolbar).not.toBeNull();
- // tbs.destroyToolbar('tbar-test');
- // expect(toolbar.addButton1('btn', 'gid', function () {})).toBeNull();
- // expect($log.warn).toHaveBeenCalledWith('Button cannot append to div');
- //});
+ it('should not append to a destroyed toolbar', function () {
+ spyOn($log, 'warn');
+ var toolbar = tbs.createToolbar('test');
+ expect(toolbar).not.toBeNull();
+ tbs.destroyToolbar('tbar-test');
+ expect(toolbar.addButton('btn', 'gid', function () {})).toBeNull();
+ expect($log.warn).toHaveBeenCalledWith('Button cannot append to div');
+ });
});