홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
df510012 1 parent 85fa2b89

GUI -- Refactored Toolbar Service. 

Change-Id: I758d0da30438eb7257350480024d3bd99624509c
Inline Side-by-side
Showing 4 changed files with 124 additions and 131 deletions
......@@ -18,16 +18,6 @@
ONOS GUI -- Button Service -- CSS file
*/
.tbarArrow {
padding: 0 10px 0 10px;
}
.light .tbarArrow svg.embeddedIcon .icon.tableColSortAsc .glyph {
fill: #838383;
}
.dark .tbarArrow svg.embeddedIcon .icon.tableColSortAsc .glyph {
fill: #B2B2B2;
}
.button,
.toggleButton,
.radioSet {
......
......@@ -18,16 +18,35 @@
ONOS GUI -- Toolbar Service -- CSS file
*/
.light .tbarArrow svg.embeddedIcon .icon .glyph {
fill: #838383;
}
.dark .tbarArrow svg.embeddedIcon .icon .glyph {
fill: #B2B2B2;
}
.tbarArrow svg.embeddedIcon .icon rect {
stroke: none;
}
.light .tbarArrow svg.embeddedIcon .icon rect {
fill: none;
}
.dark .tbarArrow svg.embeddedIcon .icon rect {
fill: none;
}
.separator {
border: 1px solid;
margin: 0 4px 0 4px;
display: inline-block;
height: 23px;
width: 0;
}
.light .separator {
border-color: #ddd;
}
.dark .separator {
border-color: #1A1A1A;
}
......
......@@ -17,12 +17,18 @@
/*
ONOS GUI -- Widget -- Toolbar Service
*/
// TODO: Augment service to allow toolbars to exist on right edge of screen
(function () {
'use strict';
// injected refs
var $log, fs, ps, bns, is;
var ids = [],
// configuration
var arrowSize = 10,
sepWidth = 6,
defaultSettings = {
edge: 'left',
width: 20,
......@@ -31,122 +37,120 @@
top: '80%',
fade: false,
shown: false
},
settings,
arrowSize = 10,
btnPadding = 4,
tbarId,
tbarPanel,
tbarDiv,
tbarArrowDiv;
};
// this function is only used in testing
function init() {
ids = [];
}
// internal state
var tbars = {};
// === Helper functions --------------------------------------
function validId(id, caller) {
if (fs.inArray(id, ids) !== -1) {
$log.warn(caller + ': ID already exists');
return false;
}
return true;
}
// === Helper functions --------------------------------------
// TODO: Allow toolbar to be on right edge of screen
// translate uses 50 because the svg viewbox is 50
function rotateArrowLeft() {
tbarArrowDiv.select('g')
function rotateArrowLeft(adiv) {
adiv.select('g')
.attr('transform', 'translate(0 50) rotate(-90)');
}
function rotateArrowRight() {
tbarArrowDiv.select('g')
function rotateArrowRight(adiv) {
adiv.select('g')
.attr('transform', 'translate(50 0) rotate(90)');
}
function createArrow() {
tbarArrowDiv = tbarDiv.append('div')
function createArrow(panel) {
var arrowDiv = panel.append('div')
.classed('tbarArrow', true)
.style({'position': 'absolute',
.style({
'position': 'absolute',
'top': '53%',
'left': '96%',
'margin-right': '-4%',
'transform': 'translate(-50%, -50%)',
'cursor': 'pointer'});
is.loadEmbeddedIcon(tbarArrowDiv, 'tableColSortAsc', arrowSize);
'cursor': 'pointer'
});
is.loadIcon(arrowDiv, 'triangleUp', arrowSize, true);
return arrowDiv;
}
tbarArrowDiv.on('click', toggleTools);
function warn(msg, id) {
$log.warn('createToolbar: ' + msg + ': [' + id + ']');
return null;
}
// === Adding to toolbar functions ----------------------------
// TODO: these add functions look very similar -- combine them somehow?
// ==================================
function createToolbar(id, opts) {
if (!id) return warn('no ID given', id);
if (tbars[id]) return warn('duplicate ID given', id);
var settings = angular.extend({}, defaultSettings, fs.isO(opts)),
tbid = 'toolbar-' + id,
panel = ps.createPanel(tbid, settings),
arrowDiv = createArrow(panel),
tbWidth = arrowSize + 2; // empty toolbar width
arrowDiv.on('click', toggle);
// add a descriptor for this toolbar
tbars[id] = {
settings: settings,
panel: panel,
panelId: tbid
};
panel.classed('toolbar', true)
.style('top', settings.top);
// API functions
function addButton(id, gid, cb, tooltip) {
var btnId = tbarId + '-' + id,
button;
if (!validId(btnId, 'addButton')) { return null; }
ids.push(btnId);
button = bns.button(tbarDiv, btnId, gid, cb, tooltip);
if (button) { addToWidth(button.width()); }
displayTools();
return button;
var bid = tbid + '-' + id,
btn = bns.button(panel, bid, gid, cb, tooltip);
tbWidth += btn.width();
panel.width(tbWidth);
return btn;
}
function addToggle(id, gid, initState, cb, tooltip) {
var togId = tbarId + '-' + id,
toggle;
if (!validId(togId, 'addToggle')) { return null; }
ids.push(togId);
toggle = bns.toggle(tbarDiv, togId, gid, initState, cb, tooltip);
if (toggle) { addToWidth(toggle.width()); }
displayTools();
return toggle;
var tid = tbid + '-' + id,
tog = bns.toggle(panel, tid, gid, initState, cb, tooltip);
tbWidth += tog.width();
panel.width(tbWidth);
return tog;
}
function addRadioSet(id, rset) {
var radId = tbarId + '-' + id,
radios;
if (!validId(radId, 'addRadioSet')) { return null; }
ids.push(radId);
radios = bns.radioSet(tbarDiv, radId, rset);
if (radios) { addToWidth(radios.width()); }
displayTools();
return radios;
var rid = tbid + '-' + id,
rad = bns.radioSet(panel, rid, rset);
tbWidth += rad.width();
panel.width(tbWidth);
return rad;
}
function addSeparator() {
if (!tbarDiv) {
$log.warn('Separator cannot append to div');
return null;
}
addToWidth(2);
displayTools();
return tbarDiv.append('div')
.classed('separator', true)
.style({'height': '23px',
'width': '0px'});
panel.append('div')
.classed('separator', true);
tbWidth += sepWidth;
}
// === Main toolbar API functions ----------------------------
function createToolbar(id, opts) {
if (!id) {
$log.warn('createToolbar: no ID given');
return null;
function show(cb) {
rotateArrowLeft(arrowDiv);
panel.show(cb);
}
tbarId = 'tbar-' + id;
settings = angular.extend({}, defaultSettings, fs.isO(opts));
if (!validId(tbarId, 'createToolbar')) { return null; }
ids.push(tbarId);
tbarPanel = ps.createPanel(tbarId, settings);
tbarDiv = tbarPanel.classed('toolbar', true)
.style('top', settings.top);
function hide(cb) {
rotateArrowRight(arrowDiv);
panel.hide(cb);
}
createArrow();
displayTools();
function toggle(cb) {
if (panel.isVisible()) {
hide(cb);
} else {
show(cb);
}
}
return {
addButton: addButton,
......@@ -156,48 +160,20 @@
show: show,
hide: hide,
toggleTools: toggleTools,
width: width
}
toggle: toggle
};
}
function destroyToolbar(id) {
ps.destroyPanel(id);
tbarDiv = null;
}
function show(cb) {
tbarPanel.show(cb);
rotateArrowLeft();
}
function hide(cb) {
tbarPanel.hide(cb);
rotateArrowRight();
}
function toggleTools(cb) {
if (tbarPanel.isVisible()) { hide(cb); }
else { show(cb) }
}
var tb = tbars[id];
delete tbars[id];
function displayTools() {
if (settings.shown) { show(); }
else { hide(); }
if (tb) {
ps.destroyPanel(tb.panelId);
}
function width(w) {
if (w) { tbarPanel.width(w); }
return tbarPanel.width();
}
function addToWidth(size) {
if (!(settings.width > (fs.windowSize(0, 500).width))) {
settings.width = width() + size + btnPadding;
tbarPanel.width(settings.width);
}
}
// === Module Definition ===
angular.module('onosWidget')
.factory('ToolbarService',
......@@ -210,6 +186,11 @@
bns = _bns_;
is = _is_;
// this function is only used in testing
function init() {
tbars = {};
}
return {
init: init,
createToolbar: createToolbar,
......
......@@ -87,6 +87,9 @@
toolbar.addToggle('demo-toggle', 'chain', false, togFn);
toolbar.addSeparator();
toolbar.addRadioSet('demo-radio', rset);
toolbar.hide();
checkFn();
$log.log('OvSampleCtrl has been created');
}]);
......