GUI -- Toolbar dynamically sizes based on added contents, adjusted CSS padding, …

…minor radio button edit.

Change-Id: I52c3ef8af13a2b743cf7d71a83d42d7c9b5e5d6b

@@ -18,6 +18,9 @@
  ONOS GUI -- Button Service -- CSS file
  */
 
+.tbarArrow {
+    padding: 0 10px 0 10px;
+}
 .light .tbarArrow svg.embeddedIcon .icon.tableColSortAsc .glyph {
     fill: #838383;
 }
@@ -27,18 +30,13 @@
 
 .button,
 .toggleButton,
-.radioSet,
-.radioButton,
-.separator {
-    display: inline-block;
-}
-.button,
-.toggleButton,
 .radioSet {
+    display: inline-block;
     padding: 0 4px 0 4px;
 }
 .radioButton {
-    padding: 0 4px 0 0;
+    display: inline-block;
+    padding: 0 2px 0 2px;
 }
 
 .button svg.embeddedIcon,

@@ -22,7 +22,8 @@
 
     var $log, fs, is;
 
-    var btnSize = 25;
+    var btnSize = 25,
+        btnPadding = 4;
 
     function noop() {}
 
@@ -102,22 +103,31 @@
             rads = [],
             sel;
 
-        function _selected() {
+        function _selected(s) {
             var curr = d3.select(this),
-                currId = curr.attr('id');
+                currId = curr.attr('id'),
+                selIndex = _getIndex(),
+                currIndex = _getIndex(currId);
 
             // I have it going by id's because I couldn't think of a way
             // to get the radio button's index from the div element
                 // We could look at the end of the radio button id for its number
                 // but I didn't know how to get the end of the string's number
+            if (!s) {
                 if (sel !== currId) {
-                var selIndex = _getIndex(),
-                    currIndex = _getIndex(currId);
                     rads[selIndex].el.classed('selected', false);
                     curr.classed('selected', true);
                     rads[currIndex].cb();
                     sel = currId;
                 }
+            } else {
+                if (!rads[s].el.classed('selected')) {
+                    rads[selIndex].el.classed('selected', false);
+                    rads[s].el.classed('selected', true);
+                    rads[s].cb();
+                    sel = rads[s].id;
+                }
+            }
         }
 
         // given the id, will get the index of element
@@ -154,13 +164,19 @@
 
         return {
             rads: rads,
+            width: (((btnSize + btnPadding) * rads.length) + btnPadding),
             selected: function (i) {
                 if (i === undefined) { _getIndex(); }
-                else { _selected(); }
+                else { _selected(i); }
             }
         }
     }
 
+    function width(s) {
+        if (s) { btnSize = s; }
+        return btnSize;
+    }
+
     angular.module('onosWidget')
         .factory('ButtonService', ['$log', 'FnService', 'IconService',
             function (_$log_, _fs_, _is_) {
@@ -171,7 +187,8 @@
                 return {
                     button: button,
                     toggle: toggle,
-                    radioSet: radioSet
+                    radioSet: radioSet,
+                    width: width
                 };
             }]);
 

@@ -21,6 +21,7 @@
 .separator {
     border: 1px solid;
     margin: 0 4px 0 4px;
+    display: inline-block;
 }
 .light .separator {
     border-color: #ddd;

@@ -25,14 +25,16 @@
     var ids = [],
         defaultSettings = {
             edge: 'left',
-            width: 400,
+            width: 20,
             margin: 0,
             hideMargin: -20,
             top: '80%',
-            fade: false
+            fade: false,
+            shown: false
         },
         settings,
         arrowSize = 10,
+        btnPadding = 4,
         tbarId,
         tbarPanel,
         tbarDiv,
@@ -53,24 +55,23 @@
         return true;
     }
 
+    // TODO: Allow toolbar to be on right edge of screen
     // translate uses 50 because the svg viewbox is 50
     function rotateArrowLeft() {
         tbarArrowDiv.select('g')
             .attr('transform', 'translate(0 50) rotate(-90)');
     }
-
     function rotateArrowRight() {
         tbarArrowDiv.select('g')
             .attr('transform', 'translate(50 0) rotate(90)');
     }
-
     function createArrow() {
         tbarArrowDiv = tbarDiv.append('div')
             .classed('tbarArrow', true)
             .style({'position': 'absolute',
                 'top': '53%',
-                'left': '98%',
-                'margin-right': '-2%',
+                'left': '96%',
+                'margin-right': '-4%',
                 'transform': 'translate(-50%, -50%)',
                 'cursor': 'pointer'});
         is.loadEmbeddedIcon(tbarArrowDiv, 'tableColSortAsc', arrowSize);
@@ -80,25 +81,38 @@
 
     // === Adding to toolbar functions ----------------------------
 
+    // TODO: these add functions look very similar -- combine them somehow?
     function addButton(id, gid, cb, tooltip) {
-        var btnId = tbarId + '-' + id;
+        var btnId = tbarId + '-' + id,
+            button;
         if (!validId(btnId, 'addButton')) { return null; }
         ids.push(btnId);
-        return bns.button(tbarDiv, btnId, gid, cb, tooltip);
+        button =  bns.button(tbarDiv, btnId, gid, cb, tooltip);
+        if (button) { addToWidth(bns.width()); }
+        displayTools();
+        return button;
     }
 
     function addToggle(id, gid, initState, cb, tooltip) {
-        var togId = tbarId + '-' + id;
+        var togId = tbarId + '-' + id,
+            toggle;
         if (!validId(togId, 'addToggle')) { return null; }
         ids.push(togId);
-        return bns.toggle(tbarDiv, togId, gid, initState, cb, tooltip);
+        toggle =  bns.toggle(tbarDiv, togId, gid, initState, cb, tooltip);
+        if (toggle) { addToWidth(bns.width()); }
+        displayTools();
+        return toggle;
     }
 
     function addRadioSet(id, rset) {
-        var radId = tbarId + '-' + id;
+        var radId = tbarId + '-' + id,
+            radios;
         if (!validId(radId, 'addRadioSet')) { return null; }
         ids.push(radId);
-        return bns.radioSet(tbarDiv, radId, rset);
+        radios = bns.radioSet(tbarDiv, radId, rset);
+        if (radios) { addToWidth(radios.width); }
+        displayTools();
+        return radios;
     }
 
     function addSeparator() {
@@ -106,9 +120,12 @@
             $log.warn('Separator cannot append to div');
             return null;
         }
+        addToWidth(2);
+        displayTools();
         return tbarDiv.append('div')
             .classed('separator', true)
-            .style('height', '23px');
+            .style({'height': '23px',
+                    'width': '0px'});
     }
 
     // === Main toolbar API functions ----------------------------
@@ -129,6 +146,7 @@
             .style('top', settings.top);
 
         createArrow();
+        displayTools();
 
         return {
             addButton: addButton,
@@ -138,10 +156,11 @@
 
             show: show,
             hide: hide,
-            toggleTools: toggleTools
+            toggleTools: toggleTools,
+
+            width: width
         }
     }
-
     function destroyToolbar(id) {
         ps.destroyPanel(id);
         tbarDiv = null;
@@ -151,16 +170,29 @@
         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(); }
+    }
+
+    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);
+        }
+    }
 
     angular.module('onosWidget')
         .factory('ToolbarService', ['$log', 'FnService',

@@ -66,15 +66,16 @@
                     .style('font-size', '16pt');
 
                 var toolbar = tbs.createToolbar('sample'),
-                    rset = [{ gid: 'checkMark', cb: checkFn },
+                    rset = [
+                        { gid: 'checkMark', cb: checkFn },
                         { gid: 'xMark', cb: xMarkFn },
                         { gid: 'bird', cb: birdFn }
                     ];
-                toolbar.addButton('hello-button', 'crown', btnFn);
-                toolbar.addToggle('look-toggle', 'chain', false, togFn);
+                toolbar.addButton('demo-button', 'crown', btnFn);
+                toolbar.addToggle('demo-toggle', 'chain', false, togFn);
+                toolbar.addSeparator();
+                toolbar.addRadioSet('demo-radio', rset);
                 toolbar.addSeparator();
-                toolbar.addRadioSet('something-radio', rset);
-                toolbar.hide();
 
              $log.log('OvSampleCtrl has been created');
         }]);