GUI -- ToolbarService and PanelService show and hide panels based on margin and …

…hideMargin, and fade is a setting.

Change-Id: I85b5dd447df09e13e9308473c548621d4b76fa15

@@ -26,7 +26,9 @@
         edge: 'right',
         width: 200,
         margin: 20,
-        xtnTime: 750
+        hideMargin: 20,
+        xtnTime: 750,
+        fade: true
     };
 
     var panels,
@@ -45,6 +47,9 @@
     function margin(p) {
         return p.settings.margin;
     }
+    function hideMargin(p) {
+        return p.settings.hideMargin;
+    }
     function noPx(p, what) {
         return Number(p.el.style(what).replace(/px$/, ''));
     }
@@ -58,7 +63,7 @@
         return margin(p) + 'px';
     }
     function pxHide(p) {
-        return (-margin(p) - widthVal(p)) + 'px';
+        return (-hideMargin(p) - widthVal(p) - (noPx(p, 'padding') * 2)) + 'px';
     }
 
     function makePanel(id, settings) {
@@ -105,12 +110,13 @@
         }
 
         function hidePanel(cb) {
-            var endCb = fs.isF(cb) || noop;
+            var endCb = fs.isF(cb) || noop,
+                endOpacity = p.settings.fade ? 0 : 1;
             p.on = false;
             p.el.transition().duration(p.settings.xtnTime)
                 .each('end', endCb)
                 .style(p.settings.edge, pxHide(p))
-                .style('opacity', 0);
+                .style('opacity', endOpacity);
         }
 
         function togglePanel(cb) {

@@ -22,9 +22,7 @@
     position: absolute;
     z-index: 100;
     display: block;
-    top: 75px; /* TODO: change this to proper height*/
     width: 200px;
-    right: -220px;
     opacity: 0;
 
     padding: 10px;

@@ -25,7 +25,10 @@
     var ids = [],
         defaultSettings = {
             edge: 'left',
-            width: 400
+            width: 400,
+            margin: 0,
+            hideMargin: -20,
+            fade: false
         },
         settings,
         arrowSize = 10,
@@ -49,7 +52,7 @@
         return true;
     }
 
-    // translate(0 50) looks good with arrowSize of 10
+    // translate uses 50 because the svg viewbox is 50
     function rotateArrowLeft() {
         tbarArrowDiv.select('g')
             .attr('transform', 'translate(0 50) rotate(-90)');
@@ -57,14 +60,14 @@
 
     function rotateArrowRight() {
         tbarArrowDiv.select('g')
-            .attr('transform', 'translate(0 50) rotate(90)');
+            .attr('transform', 'translate(50 0) rotate(90)');
     }
 
     function createArrow() {
         tbarArrowDiv = tbarDiv.append('div')
             .classed('tbarArrow', true)
             .style({'position': 'absolute',
-                'top': '50%',
+                'top': '53%',
                 'left': '98%',
                 'margin-right': '-2%',
                 'transform': 'translate(-50%, -50%)',
@@ -151,7 +154,6 @@
 
     function hide(cb) {
         tbarPanel.hide(cb);
-        //tbarPanel.style(opts.edge, (arrowSize + 4 + 'px'));
         rotateArrowRight();
     }