Browse Source

Improved panel skeleton further, empty panels are now invisible (no border)

css_transitions
jos 10 years ago
parent
commit
3a33fe6d32
2 changed files with 27 additions and 26 deletions
  1. +17
    -15
      src/timeline/Timeline.js
  2. +10
    -11
      src/timeline/component/css/panel.css

+ 17
- 15
src/timeline/Timeline.js View File

@ -695,18 +695,20 @@ Timeline.prototype.repaint = function repaint() {
dom.root.style.minHeight = util.option.asSize(options.minHeight, ''); dom.root.style.minHeight = util.option.asSize(options.minHeight, '');
// calculate border widths // calculate border widths
props.border.left = dom.leftContainer.offsetWidth - dom.leftContainer.clientWidth;
props.border.right = dom.rightContainer.offsetWidth - dom.rightContainer.clientWidth;
props.border.top = dom.top.offsetHeight - dom.top.clientHeight;
props.border.bottom = dom.bottom.offsetHeight - dom.bottom.clientHeight;
props.border.left = (dom.centerContainer.offsetWidth - dom.centerContainer.clientWidth) / 2;
props.border.right = props.border.left;
props.border.top = (dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight) / 2;
props.border.bottom = props.border.top;
var borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight; var borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight;
var borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth; var borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth;
// calculate the heights. If any of the side panels is empty, we set the height to
// minus the border width, such that the border will be invisible
props.center.height = dom.center.offsetHeight; props.center.height = dom.center.offsetHeight;
props.left.height = dom.left.offsetHeight; props.left.height = dom.left.offsetHeight;
props.right.height = dom.right.offsetHeight; props.right.height = dom.right.offsetHeight;
props.top.height = dom.top.clientHeight;
props.bottom.height = dom.bottom.clientHeight;
props.top.height = dom.top.clientHeight || -props.border.top;
props.bottom.height = dom.bottom.clientHeight || -props.border.bottom;
// TODO: compensate borders when any of the panels is empty. // TODO: compensate borders when any of the panels is empty.
@ -721,18 +723,18 @@ Timeline.prototype.repaint = function repaint() {
props.root.height = dom.root.offsetHeight; props.root.height = dom.root.offsetHeight;
props.background.height = props.root.height; props.background.height = props.root.height;
var containerHeight = props.root.height - props.top.height - props.bottom.height - var containerHeight = props.root.height - props.top.height - props.bottom.height -
props.border.top - props.border.bottom - borderRootHeight;
borderRootHeight;
props.centerContainer.height = containerHeight; props.centerContainer.height = containerHeight;
props.leftContainer.height = containerHeight + props.border.top + props.border.bottom;
props.leftContainer.height = containerHeight;
props.rightContainer.height = props.leftContainer.height; props.rightContainer.height = props.leftContainer.height;
// calculate the widths of the panels // calculate the widths of the panels
props.root.width = dom.root.offsetWidth; props.root.width = dom.root.offsetWidth;
props.background.width = props.root.width; props.background.width = props.root.width;
props.left.width = dom.leftContainer.clientWidth;
props.right.width = dom.rightContainer.clientWidth;
props.left.width = dom.leftContainer.clientWidth || -props.border.left;
props.right.width = dom.rightContainer.clientWidth || -props.border.right;
var centerWidth = props.root.width - props.left.width - props.right.width - borderRootWidth; var centerWidth = props.root.width - props.left.width - props.right.width - borderRootWidth;
props.center.width = centerWidth - props.border.left - props.border.right;
props.center.width = centerWidth;
props.top.width = centerWidth; props.top.width = centerWidth;
props.bottom.width = centerWidth; props.bottom.width = centerWidth;
@ -752,16 +754,16 @@ Timeline.prototype.repaint = function repaint() {
// reposition the panels // reposition the panels
dom.background.style.left = '0'; dom.background.style.left = '0';
dom.background.style.top = '0'; dom.background.style.top = '0';
dom.centerContainer.style.left = (props.left.width + props.border.left) + 'px';
dom.centerContainer.style.top = (props.top.height + props.border.top)+ 'px';
dom.centerContainer.style.left = props.left.width + 'px';
dom.centerContainer.style.top = props.top.height + 'px';
dom.leftContainer.style.left = '0'; dom.leftContainer.style.left = '0';
dom.leftContainer.style.top = props.top.height + 'px'; dom.leftContainer.style.top = props.top.height + 'px';
dom.rightContainer.style.left = (props.left.width + props.center.width + props.border.left) + 'px';
dom.rightContainer.style.left = (props.left.width + props.center.width) + 'px';
dom.rightContainer.style.top = props.top.height + 'px'; dom.rightContainer.style.top = props.top.height + 'px';
dom.top.style.left = props.left.width + 'px'; dom.top.style.left = props.left.width + 'px';
dom.top.style.top = '0'; dom.top.style.top = '0';
dom.bottom.style.left = props.left.width + 'px'; dom.bottom.style.left = props.left.width + 'px';
dom.bottom.style.top = (props.top.height + props.centerContainer.height + props.border.top) + 'px';
dom.bottom.style.top = (props.top.height + props.centerContainer.height) + 'px';
/* TODO: repaint contents /* TODO: repaint contents
this.rootPanel.repaint(); this.rootPanel.repaint();

+ 10
- 11
src/timeline/component/css/panel.css View File

@ -19,25 +19,24 @@
box-sizing: border-box; box-sizing: border-box;
} }
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.left, .vis.timeline .vispanel.left,
.vis.timeline .vispanel.right, .vis.timeline .vispanel.right,
.vis.timeline .vispanel.top, .vis.timeline .vispanel.top,
.vis.timeline .vispanel.bottom { .vis.timeline .vispanel.bottom {
border: 1px solid #bfbfbf;
}
.vis.timeline .vispanel.left {
border-left: none;
border: 1px #bfbfbf;
} }
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.left,
.vis.timeline .vispanel.right { .vis.timeline .vispanel.right {
border-right: none;
}
.vis.timeline .vispanel.top {
border-top: none;
border-top-style: solid;
border-bottom-style: solid;
} }
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.top,
.vis.timeline .vispanel.bottom { .vis.timeline .vispanel.bottom {
border-bottom: none;
border-left-style: solid;
border-right-style: solid;
} }

Loading…
Cancel
Save