GUI -- ToolbarService and PanelService show and hide panels based on margin and hideMargin, and fade is a setting.
Change-Id: I85b5dd447df09e13e9308473c548621d4b76fa15
diff --git a/web/gui/src/main/webapp/app/fw/layer/panel.js b/web/gui/src/main/webapp/app/fw/layer/panel.js
index 46934f1..1f82067 100644
--- a/web/gui/src/main/webapp/app/fw/layer/panel.js
+++ b/web/gui/src/main/webapp/app/fw/layer/panel.js
@@ -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) {
diff --git a/web/gui/src/main/webapp/app/fw/widget/toolbar.css b/web/gui/src/main/webapp/app/fw/widget/toolbar.css
index d25279d..e7db3de 100644
--- a/web/gui/src/main/webapp/app/fw/widget/toolbar.css
+++ b/web/gui/src/main/webapp/app/fw/widget/toolbar.css
@@ -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;
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 d80dbf8..aeac9a0 100644
--- a/web/gui/src/main/webapp/app/fw/widget/toolbar.js
+++ b/web/gui/src/main/webapp/app/fw/widget/toolbar.js
@@ -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();
}