GUI -- Cleanup in sample view, toolbar and button services.
Change-Id: I8e1f2cc344547f1a76681d74eec138495dd39bf6
diff --git a/web/gui/src/main/webapp/app/fw/widget/button.css b/web/gui/src/main/webapp/app/fw/widget/button.css
index 9b4c519..42160af 100644
--- a/web/gui/src/main/webapp/app/fw/widget/button.css
+++ b/web/gui/src/main/webapp/app/fw/widget/button.css
@@ -32,11 +32,11 @@
.toggleButton,
.radioSet {
display: inline-block;
- padding: 0 4px 0 4px;
+ padding: 0 4px;
}
.radioButton {
display: inline-block;
- padding: 0 2px 0 2px;
+ padding: 0 2px;
}
.button svg.embeddedIcon,
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 d604851..14d329f 100644
--- a/web/gui/src/main/webapp/app/fw/widget/button.js
+++ b/web/gui/src/main/webapp/app/fw/widget/button.js
@@ -20,8 +20,10 @@
(function () {
'use strict';
+ // injected refs
var $log, fs, is;
+ // configuration
var btnSize = 25,
btnPadding = 4;
@@ -178,18 +180,20 @@
}
angular.module('onosWidget')
- .factory('ButtonService', ['$log', 'FnService', 'IconService',
- function (_$log_, _fs_, _is_) {
- $log = _$log_;
- fs = _fs_;
- is = _is_;
+ .factory('ButtonService',
+ ['$log', 'FnService', 'IconService',
- return {
- button: button,
- toggle: toggle,
- radioSet: radioSet,
- width: width
- };
- }]);
+ function (_$log_, _fs_, _is_) {
+ $log = _$log_;
+ fs = _fs_;
+ is = _is_;
-}());
\ No newline at end of file
+ return {
+ button: button,
+ toggle: toggle,
+ radioSet: radioSet,
+ width: width
+ };
+ }]);
+
+}());
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 d9d02e4..71b25a6 100644
--- a/web/gui/src/main/webapp/app/fw/widget/toolbar.js
+++ b/web/gui/src/main/webapp/app/fw/widget/toolbar.js
@@ -161,6 +161,7 @@
width: width
}
}
+
function destroyToolbar(id) {
ps.destroyPanel(id);
tbarDiv = null;
@@ -170,14 +171,17 @@
tbarPanel.show(cb);
rotateArrowLeft();
}
+
function hide(cb) {
tbarPanel.hide(cb);
rotateArrowRight();
}
+
function toggleTools(cb) {
if (tbarPanel.isVisible()) { hide(cb); }
else { show(cb) }
}
+
function displayTools() {
if (settings.shown) { show(); }
else { hide(); }
@@ -187,6 +191,7 @@
if (w) { tbarPanel.width(w); }
return tbarPanel.width();
}
+
function addToWidth(size) {
if (!(settings.width > (fs.windowSize(0, 500).width))) {
settings.width = width() + size + btnPadding;
@@ -195,19 +200,20 @@
}
angular.module('onosWidget')
- .factory('ToolbarService', ['$log', 'FnService',
- 'PanelService', 'ButtonService', 'IconService',
- function (_$log_, _fs_, _ps_, _bns_, _is_) {
- $log = _$log_;
- fs = _fs_;
- ps = _ps_;
- bns = _bns_;
- is = _is_;
+ .factory('ToolbarService',
+ ['$log', 'FnService', 'PanelService', 'ButtonService', 'IconService',
- return {
- init: init,
- createToolbar: createToolbar,
- destroyToolbar: destroyToolbar
- };
- }]);
+ function (_$log_, _fs_, _ps_, _bns_, _is_) {
+ $log = _$log_;
+ fs = _fs_;
+ ps = _ps_;
+ bns = _bns_;
+ is = _is_;
+
+ return {
+ init: init,
+ createToolbar: createToolbar,
+ destroyToolbar: destroyToolbar
+ };
+ }]);
}());
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 37323d2..3fcf25f 100644
--- a/web/gui/src/main/webapp/app/view/sample/sample.js
+++ b/web/gui/src/main/webapp/app/view/sample/sample.js
@@ -20,24 +20,31 @@
(function () {
'use strict';
- var $log, tbs, flash,
- togFnDiv, radFnP;
+
+ // injected refs
+ var $log, tbs, flash;
+
+ // internal state
+ var togFnDiv, radFnP;
function btnFn() {
flash.flash('Hi there friends!');
}
+
function togFn(display) {
- if (display) { togFnDiv.style('display', 'block'); }
- else { togFnDiv.style('display', 'none'); }
+ togFnDiv.style('display', display ? 'block' : 'none');
}
+
function checkFn() {
radFnP.text('Checkmark radio button active.')
.style('color', 'green');
}
+
function xMarkFn() {
radFnP.text('Xmark radio button active.')
.style('color', 'red');
}
+
function birdFn() {
radFnP.text('Bird radio button active.')
.style('color', '#369');
@@ -46,7 +53,10 @@
angular.module('ovSample', ['onosUtil'])
.controller('OvSampleCtrl', ['$log', 'ToolbarService', 'FlashService',
function (_$log_, _tbs_, _flash_) {
- var self = this;
+ var self = this,
+ toolbar,
+ rset;
+
$log = _$log_;
tbs = _tbs_;
flash = _flash_;
@@ -57,25 +67,26 @@
.append('div')
.text('Look at me!')
.style({
- 'display': 'none',
- 'color': 'rgb(204, 89, 81)',
+ display: 'none',
+ color: 'rgb(204, 89, 81)',
'font-size': '20pt'
});
+
radFnP = d3.select('#ov-sample')
.append('p')
.style('font-size', '16pt');
- var toolbar = tbs.createToolbar('sample'),
- rset = [
- { gid: 'checkMark', cb: checkFn },
- { gid: 'xMark', cb: xMarkFn },
- { gid: 'bird', cb: birdFn }
- ];
+ toolbar = tbs.createToolbar('sample');
+ rset = [
+ { gid: 'checkMark', cb: checkFn },
+ { gid: 'xMark', cb: xMarkFn },
+ { gid: 'bird', cb: birdFn }
+ ];
+
toolbar.addButton('demo-button', 'crown', btnFn);
toolbar.addToggle('demo-toggle', 'chain', false, togFn);
toolbar.addSeparator();
toolbar.addRadioSet('demo-radio', rset);
- toolbar.addSeparator();
$log.log('OvSampleCtrl has been created');
}]);