GUI -- Toolbar and ButtonService appearance work - styled light and dark themed buttons and toolbar.

Change-Id: I07f2d6adcf5a028fa76f50301d6bdfd1e75b1188

@@ -18,8 +18,64 @@
  ONOS GUI -- Button Service -- CSS file
  ONOS GUI -- Button Service -- CSS file
  */
  */
 
 
-.btn svg.embeddedIcon,
-.tog svg.embeddedIcon,
-.rad svg.embeddedIcon {
+.light .tbarArrow svg.embeddedIcon .icon.tableColSortAsc .glyph {
+    fill: #838383;
+}
+.dark .tbarArrow svg.embeddedIcon .icon.tableColSortAsc .glyph {
+    fill: #B2B2B2;
+}
+
+.button,
+.toggleButton,
+.radioSet,
+.separator {
+    display: inline-block;
+}
+.button,
+.toggleButton {
+    padding: 0 4px 0 4px;
+}
+.radioSet .toggleButton {
+    padding: 0 0 0 4px;
+}
+
+.button svg.embeddedIcon,
+.toggleButton svg.embeddedIcon {
     cursor: pointer;
     cursor: pointer;
 }
 }
+.button svg.embeddedIcon .icon rect,
+.toggleButton svg.embeddedIcon .icon rect {
+    stroke: none;
+}
+
+/* Selected button color */
+.light .button svg.embeddedIcon,
+.light .toggleButton.selected svg.embeddedIcon {
+    fill: #838383;
+}
+.light .button svg.embeddedIcon .glyph,
+.light .toggleButton.selected svg.embeddedIcon .glyph {
+    fill: white;
+}
+.dark .button svg.embeddedIcon,
+.dark .toggleButton.selected svg.embeddedIcon {
+    fill: #151515;
+}
+.dark .button svg.embeddedIcon .glyph,
+.dark .toggleButton.selected svg.embeddedIcon .glyph {
+    fill: #B2B2B2;
+}
+
+/* Unselected button color */
+.light .toggleButton svg.embeddedIcon {
+    fill: #eee;
+}
+.light .toggleButton svg.embeddedIcon .glyph {
+    fill: #bbb;
+}
+.dark .toggleButton svg.embeddedIcon {
+    fill: #303030;
+}
+.dark .toggleButton svg.embeddedIcon .glyph {
+    fill: #565656;
+}

@@ -38,7 +38,7 @@
             return null;
             return null;
         }
         }
 
 
-        var btnDiv = createDiv(div, 'btn', id),
+        var btnDiv = createDiv(div, 'button', id),
             cbFnc = fs.isF(cb) || noop;
             cbFnc = fs.isF(cb) || noop;
 
 
         is.loadIcon(btnDiv, gid, btnSize, true);
         is.loadIcon(btnDiv, gid, btnSize, true);
@@ -59,10 +59,11 @@
         }
         }
 
 
         var sel = !!initState,
         var sel = !!initState,
-            togDiv = createDiv(div, 'tog', id),
+            togDiv = createDiv(div, 'toggleButton', id),
             cbFnc = fs.isF(cb) || noop;
             cbFnc = fs.isF(cb) || noop;
 
 
         is.loadIcon(togDiv, gid, btnSize, true);
         is.loadIcon(togDiv, gid, btnSize, true);
+        togDiv.classed('selected', sel);
 
 
         function _toggle(b) {
         function _toggle(b) {
             if (b === undefined) {
             if (b === undefined) {
@@ -71,6 +72,7 @@
                 sel = !!b;
                 sel = !!b;
             }
             }
             cbFnc(sel);
             cbFnc(sel);
+            togDiv.classed('selected', sel);
         }
         }
 
 
         togDiv.on('click', _toggle);
         togDiv.on('click', _toggle);
@@ -83,6 +85,7 @@
         }
         }
     }
     }
 
 
+    // TODO: fix radio button on click selecting functionality
     function radioSet(div, id, rset) {
     function radioSet(div, id, rset) {
         if (!div) {
         if (!div) {
             $log.warn('Radio buttons cannot append to div');
             $log.warn('Radio buttons cannot append to div');
@@ -96,7 +99,7 @@
             $log.warn('Cannot create radio button set from empty array');
             $log.warn('Cannot create radio button set from empty array');
             return null;
             return null;
         }
         }
-        var rDiv = div.append('div').classed('rset', true),
+        var rDiv = div.append('div').classed('radioSet', true),
             sel = 0,
             sel = 0,
             rads = [];
             rads = [];
 
 
@@ -107,7 +110,7 @@
                 rtog = toggle(rDiv, rbtn.id, rbtn.gid, istate,
                 rtog = toggle(rDiv, rbtn.id, rbtn.gid, istate,
                     rbtn.cb, rbtn.tooltip);
                     rbtn.cb, rbtn.tooltip);
 
 
-            rtog.el = (rtog.el).classed('tog', false).classed('rad', true);
+            rtog.el.classed('radioButton', true);
             rads.push(rtog);
             rads.push(rtog);
         });
         });
 
 

@@ -18,16 +18,15 @@
  ONOS GUI -- Toolbar Service -- CSS file
  ONOS GUI -- Toolbar Service -- CSS file
  */
  */
 
 
-.floatpanel.toolbar {
-    position: absolute;
-    z-index: 100;
-    display: block;
-    width: 200px;
-    opacity: 0;
+.separator {
+    border: 1px solid;
+    margin: 0 4px 0 4px;
+}
+.light .separator {
+    border-color: #ddd;
+}
 
 
-    padding: 10px;
-    font-size: 10pt;
+.dark .separator {
+    border-color: #1A1A1A;
 
 
-    -moz-border-radius: 6px;
-    border-radius: 6px;
 }
 }
\ No newline at end of file

@@ -28,6 +28,7 @@
             width: 400,
             width: 400,
             margin: 0,
             margin: 0,
             hideMargin: -20,
             hideMargin: -20,
+            top: '80%',
             fade: false
             fade: false
         },
         },
         settings,
         settings,
@@ -73,7 +74,6 @@
                 'transform': 'translate(-50%, -50%)',
                 'transform': 'translate(-50%, -50%)',
                 'cursor': 'pointer'});
                 'cursor': 'pointer'});
         is.loadEmbeddedIcon(tbarArrowDiv, 'tableColSortAsc', arrowSize);
         is.loadEmbeddedIcon(tbarArrowDiv, 'tableColSortAsc', arrowSize);
-        rotateArrowLeft();
 
 
         tbarArrowDiv.on('click', toggleTools);
         tbarArrowDiv.on('click', toggleTools);
     }
     }
@@ -107,8 +107,8 @@
             return null;
             return null;
         }
         }
         return tbarDiv.append('div')
         return tbarDiv.append('div')
-            .classed('sep', true)
-            .style('width', '2px');
+            .classed('separator', true)
+            .style('height', '23px');
     }
     }
 
 
     // === Main toolbar API functions ----------------------------
     // === Main toolbar API functions ----------------------------
@@ -126,7 +126,7 @@
 
 
         tbarPanel = ps.createPanel(tbarId, settings);
         tbarPanel = ps.createPanel(tbarId, settings);
         tbarDiv = tbarPanel.classed('toolbar', true)
         tbarDiv = tbarPanel.classed('toolbar', true)
-            .style('position', 'relative');
+            .style('top', settings.top);
 
 
         createArrow();
         createArrow();
 
 

@@ -31,8 +31,13 @@
 
 
                 self.message = 'Hey there folks!';
                 self.message = 'Hey there folks!';
 
 
-                var toolbar = tbs.createToolbar('sample');
+                var toolbar = tbs.createToolbar('sample'),
+                    rset = [{ gid: 'switch', cb: function () {}},
+                        { gid: 'bird', cb: function () {}}];
                 toolbar.addButton('some-btn', 'crown', function () {});
                 toolbar.addButton('some-btn', 'crown', function () {});
+                toolbar.addToggle('some-tog', 'chain', function () {});
+                toolbar.addSeparator();
+                toolbar.addRadioSet('some-rad', rset);
                 toolbar.show();
                 toolbar.show();
 
 
              $log.log('OvSampleCtrl has been created');
              $log.log('OvSampleCtrl has been created');