From 9d45d947e5f910a52830a4efe4464435501f0063 Mon Sep 17 00:00:00 2001 From: jos Date: Fri, 22 Aug 2014 09:44:37 +0200 Subject: [PATCH 1/4] Dots of items are now attached to the top panel instead of background panel (no need for z-index tricks) --- lib/timeline/component/ItemSet.js | 4 ++-- lib/timeline/component/css/item.css | 6 +++--- lib/timeline/component/css/itemset.css | 3 +-- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js index 9bb8c0de..c609e806 100644 --- a/lib/timeline/component/ItemSet.js +++ b/lib/timeline/component/ItemSet.js @@ -364,7 +364,7 @@ ItemSet.prototype.show = function() { // show axis with dots if (!this.dom.axis.parentNode) { - this.body.dom.backgroundVertical.appendChild(this.dom.axis); + this.body.dom.top.appendChild(this.dom.axis); } // show labelset containing labels @@ -524,7 +524,7 @@ ItemSet.prototype.redraw = function() { this.dom.axis.style.top = asSize((orientation == 'top') ? (this.body.domProps.top.height + this.body.domProps.border.top) : (this.body.domProps.top.height + this.body.domProps.centerContainer.height)); - this.dom.axis.style.left = this.body.domProps.border.left + 'px'; + this.dom.axis.style.left = '0'; // check if this component is resized resized = this._isResized() || resized; diff --git a/lib/timeline/component/css/item.css b/lib/timeline/component/css/item.css index fd248b81..329fc9d4 100644 --- a/lib/timeline/component/css/item.css +++ b/lib/timeline/component/css/item.css @@ -12,7 +12,9 @@ .vis.timeline .item.selected { border-color: #FFC200; background-color: #FFF785; - z-index: 999; + + /* z-index must be higher than the z-index of custom time bar and current time bar */ + z-index: 2; } .vis.timeline .editable .item.selected { @@ -88,7 +90,6 @@ left: -4px; cursor: w-resize; - z-index: 10000; } .vis.timeline .item.range .drag-right { @@ -99,5 +100,4 @@ right: -4px; cursor: e-resize; - z-index: 10001; /* a little higher z-index than .drag-left */ } diff --git a/lib/timeline/component/css/itemset.css b/lib/timeline/component/css/itemset.css index b8f76203..498da3b4 100644 --- a/lib/timeline/component/css/itemset.css +++ b/lib/timeline/component/css/itemset.css @@ -18,8 +18,7 @@ position: absolute; width: 100%; height: 0; - left: 1px; - z-index: 1; + left: 0; } .vis.timeline .foreground .group { From 904b9e7b562aa04aae1f28ed8dad44ae6722a378 Mon Sep 17 00:00:00 2001 From: jos Date: Fri, 22 Aug 2014 09:51:15 +0200 Subject: [PATCH 2/4] Some css improvements --- lib/network/css/network-manipulation.css | 9 ++++++++- lib/network/mixins/NavigationMixin.js | 19 ++++++++----------- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/lib/network/css/network-manipulation.css b/lib/network/css/network-manipulation.css index 946c9480..dbd297f9 100644 --- a/lib/network/css/network-manipulation.css +++ b/lib/network/css/network-manipulation.css @@ -14,7 +14,6 @@ div.network-manipulationDiv { width: 600px; height:30px; - z-index:10; position:absolute; } @@ -125,4 +124,12 @@ div.network-seperatorLine { height:20px; background-color: #bdbdbd; margin: 5px 7px 0px 15px; +} + +div.network-navigation_wrapper { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; } \ No newline at end of file diff --git a/lib/network/mixins/NavigationMixin.js b/lib/network/mixins/NavigationMixin.js index d63d8cd5..9db75aa2 100644 --- a/lib/network/mixins/NavigationMixin.js +++ b/lib/network/mixins/NavigationMixin.js @@ -4,8 +4,8 @@ var Hammer = require('../../module/hammer'); exports._cleanNavigation = function() { // clean up previous navigation items var wrapper = document.getElementById('network-navigation_wrapper'); - if (wrapper != null) { - this.containerElement.removeChild(wrapper); + if (wrapper && wrapper.parentNode) { + wrapper.parentNode.removeChild(wrapper); } document.onmouseup = null; }; @@ -26,23 +26,20 @@ exports._loadNavigationElements = function() { var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomExtent']; this.navigationDivs['wrapper'] = document.createElement('div'); - this.navigationDivs['wrapper'].id = "network-navigation_wrapper"; - this.navigationDivs['wrapper'].style.position = "absolute"; - this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px"; - this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px"; - this.containerElement.insertBefore(this.navigationDivs['wrapper'],this.frame); + this.navigationDivs['wrapper'].id = 'network-navigation_wrapper'; + this.frame.appendChild(this.navigationDivs['wrapper'],this.frame); var me = this; for (var i = 0; i < navigationDivs.length; i++) { this.navigationDivs[navigationDivs[i]] = document.createElement('div'); - this.navigationDivs[navigationDivs[i]].id = "network-navigation_" + navigationDivs[i]; - this.navigationDivs[navigationDivs[i]].className = "network-navigation " + navigationDivs[i]; + this.navigationDivs[navigationDivs[i]].id = 'network-navigation_' + navigationDivs[i]; + this.navigationDivs[navigationDivs[i]].className = 'network-navigation ' + navigationDivs[i]; this.navigationDivs['wrapper'].appendChild(this.navigationDivs[navigationDivs[i]]); var hammer = Hammer(this.navigationDivs[navigationDivs[i]], {prevent_default: true}); - hammer.on("touch", me[navigationDivActions[i]].bind(me)); + hammer.on('touch', me[navigationDivActions[i]].bind(me)); } var hammer = Hammer(document, {prevent_default: false}); - hammer.on("release", me._stopMovement.bind(me)); + hammer.on('release', me._stopMovement.bind(me)); }; /** From 1820228b6efb77a6b3633542db6a3705bd56b670 Mon Sep 17 00:00:00 2001 From: jos Date: Fri, 22 Aug 2014 10:01:27 +0200 Subject: [PATCH 3/4] Some simplifications in html/css of manipulation mixin --- lib/network/Network.js | 10 -- lib/network/css/network-manipulation.css | 159 ++++++++++++----------- lib/network/mixins/MixinLoader.js | 6 +- lib/network/mixins/NavigationMixin.js | 2 +- 4 files changed, 86 insertions(+), 91 deletions(-) diff --git a/lib/network/Network.js b/lib/network/Network.js index 22a0646f..3b1a72b3 100644 --- a/lib/network/Network.js +++ b/lib/network/Network.js @@ -1267,16 +1267,6 @@ Network.prototype.setSize = function(width, height) { this.frame.canvas.width = this.frame.canvas.clientWidth; this.frame.canvas.height = this.frame.canvas.clientHeight; - if (this.manipulationDiv !== undefined) { - this.manipulationDiv.style.width = this.frame.canvas.clientWidth + "px"; - } - if (this.navigationDivs !== undefined) { - if (this.navigationDivs['wrapper'] !== undefined) { - this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px"; - this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px"; - } - } - this.emit('resize', {width:this.frame.canvas.width,height:this.frame.canvas.height}); }; diff --git a/lib/network/css/network-manipulation.css b/lib/network/css/network-manipulation.css index dbd297f9..afa5e40f 100644 --- a/lib/network/css/network-manipulation.css +++ b/lib/network/css/network-manipulation.css @@ -1,129 +1,134 @@ div.network-manipulationDiv { - border-width:0px; - border-bottom: 1px; - border-style:solid; - border-color: #d6d9d8; - background: #ffffff; /* Old browsers */ - background: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 48%, #fafafa 50%, #fcfcfc 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(48%,#fcfcfc), color-stop(50%,#fafafa), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* IE10+ */ - background: linear-gradient(to bottom, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */ + border-width: 0; + border-bottom: 1px; + border-style:solid; + border-color: #d6d9d8; + background: #ffffff; /* Old browsers */ + background: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 48%, #fafafa 50%, #fcfcfc 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(48%,#fcfcfc), color-stop(50%,#fafafa), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* IE10+ */ + background: linear-gradient(to bottom, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */ - width: 600px; - height:30px; - position:absolute; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 30px; } div.network-manipulation-editMode { - height:30px; - z-index:10; - position:absolute; - margin-top:20px; + position:absolute; + left: 0; + top: 0; + height: 30px; + margin-top:20px; } div.network-manipulation-closeDiv { - height:30px; - width:30px; - z-index:11; - position:absolute; - margin-top:3px; - margin-left:590px; - background-position: 0px 0px; - background-repeat:no-repeat; - background-image: url("img/network/cross.png"); - cursor: pointer; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + position:absolute; + left: 0; + top: 0; + width: 30px; + height: 30px; + + margin-top: 3px; + margin-left: 590px; + background-position: 0px 0px; + background-repeat: no-repeat; + background-image: url("img/network/cross.png"); + cursor: pointer; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } span.network-manipulationUI { - font-family: verdana; - font-size: 12px; - -moz-border-radius: 15px; - border-radius: 15px; - display:inline-block; - background-position: 0px 0px; - background-repeat:no-repeat; - height:24px; - margin: -14px 0px 0px 10px; - vertical-align:middle; - cursor: pointer; - padding: 0px 8px 0px 8px; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + font-family: verdana; + font-size: 12px; + -moz-border-radius: 15px; + border-radius: 15px; + display:inline-block; + background-position: 0px 0px; + background-repeat:no-repeat; + height:24px; + margin: -14px 0px 0px 10px; + vertical-align:middle; + cursor: pointer; + padding: 0px 8px 0px 8px; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } span.network-manipulationUI:hover { - box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20); + box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20); } span.network-manipulationUI:active { - box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50); + box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50); } span.network-manipulationUI.back { - background-image: url("img/network/backIcon.png"); + background-image: url("img/network/backIcon.png"); } span.network-manipulationUI.none:hover { - box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0); - cursor: default; + box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0); + cursor: default; } span.network-manipulationUI.none:active { - box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0); + box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0); } span.network-manipulationUI.none { - padding: 0px 0px 0px 0px; + padding: 0px 0px 0px 0px; } span.network-manipulationUI.notification{ - margin: 2px; - font-weight: bold; + margin: 2px; + font-weight: bold; } span.network-manipulationUI.add { - background-image: url("img/network/addNodeIcon.png"); + background-image: url("img/network/addNodeIcon.png"); } span.network-manipulationUI.edit { - background-image: url("img/network/editIcon.png"); + background-image: url("img/network/editIcon.png"); } span.network-manipulationUI.edit.editmode { - background-color: #fcfcfc; - border-style:solid; - border-width:1px; - border-color: #cccccc; + background-color: #fcfcfc; + border-style:solid; + border-width:1px; + border-color: #cccccc; } span.network-manipulationUI.connect { - background-image: url("img/network/connectIcon.png"); + background-image: url("img/network/connectIcon.png"); } span.network-manipulationUI.delete { - background-image: url("img/network/deleteIcon.png"); + background-image: url("img/network/deleteIcon.png"); } /* top right bottom left */ span.network-manipulationLabel { - margin: 0px 0px 0px 23px; - line-height: 25px; + margin: 0px 0px 0px 23px; + line-height: 25px; } div.network-seperatorLine { - display:inline-block; - width:1px; - height:20px; - background-color: #bdbdbd; - margin: 5px 7px 0px 15px; + display:inline-block; + width:1px; + height:20px; + background-color: #bdbdbd; + margin: 5px 7px 0px 15px; } div.network-navigation_wrapper { diff --git a/lib/network/mixins/MixinLoader.js b/lib/network/mixins/MixinLoader.js index f6970030..46b0224f 100644 --- a/lib/network/mixins/MixinLoader.js +++ b/lib/network/mixins/MixinLoader.js @@ -123,7 +123,7 @@ exports._loadManipulationSystem = function () { else { this.manipulationDiv.style.display = "none"; } - this.containerElement.insertBefore(this.manipulationDiv, this.frame); + this.frame.appendChild(this.manipulationDiv); } if (this.editModeDiv === undefined) { @@ -136,7 +136,7 @@ exports._loadManipulationSystem = function () { else { this.editModeDiv.style.display = "block"; } - this.containerElement.insertBefore(this.editModeDiv, this.frame); + this.frame.appendChild(this.editModeDiv); } if (this.closeDiv === undefined) { @@ -144,7 +144,7 @@ exports._loadManipulationSystem = function () { this.closeDiv.className = 'network-manipulation-closeDiv'; this.closeDiv.id = 'network-manipulation-closeDiv'; this.closeDiv.style.display = this.manipulationDiv.style.display; - this.containerElement.insertBefore(this.closeDiv, this.frame); + this.frame.appendChild(this.closeDiv); } // load the manipulation functions diff --git a/lib/network/mixins/NavigationMixin.js b/lib/network/mixins/NavigationMixin.js index 9db75aa2..6eb34616 100644 --- a/lib/network/mixins/NavigationMixin.js +++ b/lib/network/mixins/NavigationMixin.js @@ -27,7 +27,7 @@ exports._loadNavigationElements = function() { this.navigationDivs['wrapper'] = document.createElement('div'); this.navigationDivs['wrapper'].id = 'network-navigation_wrapper'; - this.frame.appendChild(this.navigationDivs['wrapper'],this.frame); + this.frame.appendChild(this.navigationDivs['wrapper']); var me = this; for (var i = 0; i < navigationDivs.length; i++) { From 492f1710bb487dcd6177974f4552c6753704e1a2 Mon Sep 17 00:00:00 2001 From: jos Date: Fri, 22 Aug 2014 10:24:07 +0200 Subject: [PATCH 4/4] Removed redundant z-index --- lib/network/css/network-navigation.css | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/network/css/network-navigation.css b/lib/network/css/network-navigation.css index c4947057..cb6bf82a 100644 --- a/lib/network/css/network-navigation.css +++ b/lib/network/css/network-navigation.css @@ -1,7 +1,6 @@ div.network-navigation { width:34px; height:34px; - z-index:10; -moz-border-radius: 17px; border-radius: 17px; position:absolute;