홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
5000a754 1 parent d6612f95

GUI -- ToolbarService - showing and hiding the toolbar panel - WIP. 

Change-Id: Idf9ccbfdeb2b3906fefdf022c216eee2611787fa
Inline Side-by-side
Showing 7 changed files with 170 additions and 27 deletions
/*
* 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;
}
......@@ -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) {
......
/*
* 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;
}
......@@ -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,
......
......@@ -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!';
var toolbar = tbs.createToolbar('sample');
toolbar.addButton('some-btn', 'crown', function () {});
toolbar.show();
$log.log('OvSampleCtrl has been created');
$log.log('OvSampleCtrl has been created');
}]);
}());
......
......@@ -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} -->
......
......@@ -74,6 +74,16 @@ describe('factory: fw/widget/toolbar.js', function () {
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 @@ describe('factory: fw/widget/toolbar.js', function () {
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');
});
});
......