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

Change-Id: Idf9ccbfdeb2b3906fefdf022c216eee2611787fa

+/*
+ * 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_) {
+        .controller('OvSampleCtrl', ['$log', 'ToolbarService',
+            function (_$log_, _tbs_) {
                 var self = this,
-                $log = _$log_;
+                    $log = _$log_,
+                    tbs = _tbs_;
 
                 self.message = 'Hey there folks!';
 
+                var toolbar = tbs.createToolbar('sample');
+                toolbar.addButton('some-btn', 'crown', function () {});
+                toolbar.show();
+
              $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');
+    });
 
 });