Browse Source

Some css improvements

css_transitions
jos 10 years ago
parent
commit
c06d00a3ef
8 changed files with 17 additions and 65 deletions
  1. +6
    -30
      dist/vis.css
  2. +3
    -3
      dist/vis.js
  3. +1
    -1
      docs/timeline.html
  4. +6
    -25
      src/timeline/component/css/item.css
  5. +0
    -1
      src/timeline/component/css/itemset.css
  6. +0
    -2
      src/timeline/component/css/labelset.css
  7. +0
    -2
      src/timeline/component/css/panel.css
  8. +1
    -1
      src/timeline/component/item/ItemPoint.js

+ 6
- 30
dist/vis.css View File

@ -7,7 +7,6 @@
overflow: hidden; overflow: hidden;
border: 1px solid #bfbfbf; border: 1px solid #bfbfbf;
-moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
/* FIXME: there is an issue with the height of the items when panel height is animated /* FIXME: there is an issue with the height of the items when panel height is animated
@ -20,7 +19,6 @@
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
-moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
@ -39,7 +37,6 @@
overflow: hidden; overflow: hidden;
-moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
@ -50,7 +47,6 @@
width: 100%; width: 100%;
color: #4d4d4d; color: #4d4d4d;
-moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
@ -75,7 +71,6 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
-moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
/* FIXME: get transition working for rootpanel and itemset /* FIXME: get transition working for rootpanel and itemset
@ -114,6 +109,7 @@
position: absolute; position: absolute;
color: #1A1A1A; color: #1A1A1A;
border-color: #97B0F8; border-color: #97B0F8;
border-width: 1px;
background-color: #D5DDF6; background-color: #D5DDF6;
display: inline-block; display: inline-block;
padding: 5px; padding: 5px;
@ -136,50 +132,30 @@
.vis.timeline .item.point.selected { .vis.timeline .item.point.selected {
background-color: #FFF785; background-color: #FFF785;
z-index: 999;
}
.vis.timeline .item.point.selected .dot,
.vis.timeline .item.dot.selected {
border-color: #FFC200;
}
.vis.timeline .item.cluster {
/* TODO: use another color or pattern? */
background: #97B0F8 url('img/cluster_bg.png');
color: white;
}
.vis.timeline .item.cluster.point {
border-color: #D5DDF6;
} }
.vis.timeline .item.box { .vis.timeline .item.box {
text-align: center; text-align: center;
border-style: solid; border-style: solid;
border-width: 1px;
border-radius: 5px;
-moz-border-radius: 5px; /* For Firefox 3.6 and older */
border-radius: 2px;
} }
.vis.timeline .item.point { .vis.timeline .item.point {
background: none; background: none;
} }
.vis.timeline .dot,
.vis.timeline .item.dot { .vis.timeline .item.dot {
padding: 0;
border: 5px solid #97B0F8;
position: absolute; position: absolute;
border-radius: 5px;
-moz-border-radius: 5px; /* For Firefox 3.6 and older */
padding: 0;
border-width: 4px;
border-style: solid;
border-radius: 4px;
} }
.vis.timeline .item.range, .vis.timeline .item.range,
.vis.timeline .item.rangeoverflow{ .vis.timeline .item.rangeoverflow{
border-style: solid; border-style: solid;
border-width: 1px;
border-radius: 2px; border-radius: 2px;
-moz-border-radius: 2px; /* For Firefox 3.6 and older */
-moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }

+ 3
- 3
dist/vis.js View File

@ -5,7 +5,7 @@
* A dynamic, browser-based visualization library. * A dynamic, browser-based visualization library.
* *
* @version 0.7.5-SNAPSHOT * @version 0.7.5-SNAPSHOT
* @date 2014-05-01
* @date 2014-05-02
* *
* @license * @license
* Copyright (C) 2011-2014 Almende B.V, http://almende.com * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@ -6242,7 +6242,6 @@ ItemPoint.prototype.repaint = function repaint() {
// dot at start // dot at start
dom.dot = document.createElement('div'); dom.dot = document.createElement('div');
dom.dot.className = 'dot';
dom.point.appendChild(dom.dot); dom.point.appendChild(dom.dot);
// attach this item as attribute // attach this item as attribute
@ -6285,6 +6284,7 @@ ItemPoint.prototype.repaint = function repaint() {
if (this.className != className) { if (this.className != className) {
this.className = className; this.className = className;
dom.point.className = 'item point' + className; dom.point.className = 'item point' + className;
dom.dot.className = 'item dot' + className;
this.dirty = true; this.dirty = true;
} }
@ -7158,7 +7158,7 @@ function Timeline (container, items, options) {
orientation: 'bottom', orientation: 'bottom',
direction: 'horizontal', // 'horizontal' or 'vertical' direction: 'horizontal', // 'horizontal' or 'vertical'
autoResize: true, autoResize: true,
stacking: true,
stack: true,
editable: { editable: {
updateTime: false, updateTime: false,

+ 1
- 1
docs/timeline.html View File

@ -568,7 +568,7 @@ var options = {
<td>stack</td> <td>stack</td>
<td>Boolean</td> <td>Boolean</td>
<td>true</td> <td>true</td>
<td>If true (default), items will be stacked on top of each other such that they are not overlapping.</td>
<td>If true (default), items will be stacked on top of each other such that they do not overlap.</td>
</tr> </tr>
<tr> <tr>

+ 6
- 25
src/timeline/component/css/item.css View File

@ -3,6 +3,7 @@
position: absolute; position: absolute;
color: #1A1A1A; color: #1A1A1A;
border-color: #97B0F8; border-color: #97B0F8;
border-width: 1px;
background-color: #D5DDF6; background-color: #D5DDF6;
display: inline-block; display: inline-block;
padding: 5px; padding: 5px;
@ -25,50 +26,30 @@
.vis.timeline .item.point.selected { .vis.timeline .item.point.selected {
background-color: #FFF785; background-color: #FFF785;
z-index: 999;
}
.vis.timeline .item.point.selected .dot,
.vis.timeline .item.dot.selected {
border-color: #FFC200;
}
.vis.timeline .item.cluster {
/* TODO: use another color or pattern? */
background: #97B0F8 url('img/cluster_bg.png');
color: white;
}
.vis.timeline .item.cluster.point {
border-color: #D5DDF6;
} }
.vis.timeline .item.box { .vis.timeline .item.box {
text-align: center; text-align: center;
border-style: solid; border-style: solid;
border-width: 1px;
border-radius: 5px;
-moz-border-radius: 5px; /* For Firefox 3.6 and older */
border-radius: 2px;
} }
.vis.timeline .item.point { .vis.timeline .item.point {
background: none; background: none;
} }
.vis.timeline .dot,
.vis.timeline .item.dot { .vis.timeline .item.dot {
padding: 0;
border: 5px solid #97B0F8;
position: absolute; position: absolute;
border-radius: 5px;
-moz-border-radius: 5px; /* For Firefox 3.6 and older */
padding: 0;
border-width: 4px;
border-style: solid;
border-radius: 4px;
} }
.vis.timeline .item.range, .vis.timeline .item.range,
.vis.timeline .item.rangeoverflow{ .vis.timeline .item.rangeoverflow{
border-style: solid; border-style: solid;
border-width: 1px;
border-radius: 2px; border-radius: 2px;
-moz-border-radius: 2px; /* For Firefox 3.6 and older */
-moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }

+ 0
- 1
src/timeline/component/css/itemset.css View File

@ -4,7 +4,6 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
-moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
/* FIXME: get transition working for rootpanel and itemset /* FIXME: get transition working for rootpanel and itemset

+ 0
- 2
src/timeline/component/css/labelset.css View File

@ -5,7 +5,6 @@
overflow: hidden; overflow: hidden;
-moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
@ -16,7 +15,6 @@
width: 100%; width: 100%;
color: #4d4d4d; color: #4d4d4d;
-moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }

+ 0
- 2
src/timeline/component/css/panel.css View File

@ -4,7 +4,6 @@
overflow: hidden; overflow: hidden;
border: 1px solid #bfbfbf; border: 1px solid #bfbfbf;
-moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
/* FIXME: there is an issue with the height of the items when panel height is animated /* FIXME: there is an issue with the height of the items when panel height is animated
@ -17,7 +16,6 @@
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
-moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }

+ 1
- 1
src/timeline/component/item/ItemPoint.js View File

@ -65,7 +65,6 @@ ItemPoint.prototype.repaint = function repaint() {
// dot at start // dot at start
dom.dot = document.createElement('div'); dom.dot = document.createElement('div');
dom.dot.className = 'dot';
dom.point.appendChild(dom.dot); dom.point.appendChild(dom.dot);
// attach this item as attribute // attach this item as attribute
@ -108,6 +107,7 @@ ItemPoint.prototype.repaint = function repaint() {
if (this.className != className) { if (this.className != className) {
this.className = className; this.className = className;
dom.point.className = 'item point' + className; dom.point.className = 'item point' + className;
dom.dot.className = 'item dot' + className;
this.dirty = true; this.dirty = true;
} }

Loading…
Cancel
Save