From a1ac2bf22c61d2242545a8d2e5e9f3bcb546e0a3 Mon Sep 17 00:00:00 2001
From: baigner <benedikt.aigner@rwth-aachen.de>
Date: Mon, 16 Apr 2018 17:44:25 +0200
Subject: [PATCH] Fixed some style issues in the vistoms package
Former-commit-id: cfae84354b882cb4f696729d21e0390c9e214646
---
kadmos/vistoms/static/lib/style.css | 41 +++++++++++---------
kadmos/vistoms/templates/VISTOMS.html | 54 ++++++++++++++++++++-------
2 files changed, 65 insertions(+), 30 deletions(-)
diff --git a/kadmos/vistoms/static/lib/style.css b/kadmos/vistoms/static/lib/style.css
index 20d0fd72a..1024bfe84 100644
--- a/kadmos/vistoms/static/lib/style.css
+++ b/kadmos/vistoms/static/lib/style.css
@@ -434,24 +434,31 @@ stroke-width: 1.5px;
}
.button {
-fill: #555555;
-stroke: white;
-stroke-width: 1.5;
+ background-color: #555555;
+ border-color: #555555;
+ fill: #555555;
+ stroke: white;
+ stroke-width: 1.5;
+}
+
+.button:hover{
+ background-color: #888888;
+ border-color: #555555;
}
.copyRightText {
-font-family: Arial;
-font-size: 12pt;
-fill: #555555;
+ font-family: Arial;
+ font-size: 12pt;
+ fill: #555555;
}
-.newDiv {
+.navigationBarDiv {
position:relative;
top: -100px;
left: 220px;
background-color: none;
}
-.newDiv a {
+.navigationBarDiv a {
text-decoration: none;
color: white;
font-family: Arial;
@@ -462,7 +469,7 @@ fill: #555555;
padding-left: 6px;
display:inline-block;
}
-.newDiv o {
+.navigationBarDiv o {
text-decoration: none;
color: white;
font-family: Arial;
@@ -475,28 +482,28 @@ fill: #555555;
padding-left: 6px;
display:inline-block;
}
-.newDiv ul {
+.navigationBarDiv ul {
display: inline-block;;
margin: 0;
padding: 0;
background-color: #555555;
}
-.newDiv ul li {display: inline-block;}
-.newDiv ul li:hover {background: #888;}
-.newDiv ul li:hover ul {display: block;}
-.newDiv ul li ul {
+.navigationBarDiv ul li {display: inline-block;}
+.navigationBarDiv ul li:hover {background: #888;}
+.navigationBarDiv ul li:hover ul {display: block;}
+.navigationBarDiv ul li ul {
position: absolute;
min-width: 200px;
display: none;
}
-.newDiv ul li ul li {
+.navigationBarDiv ul li ul li {
background: #555;
display: block;
}
-.newDiv ul li ul li a {
+.navigationBarDiv ul li ul li a {
display:block !important
}
-.newDiv ul li ul li:hover {background: #3399FF;}
+.navigationBarDiv ul li ul li:hover {background: #3399FF;}
.dataModelDiv {
diff --git a/kadmos/vistoms/templates/VISTOMS.html b/kadmos/vistoms/templates/VISTOMS.html
index 20c1deb25..a563cc8a2 100644
--- a/kadmos/vistoms/templates/VISTOMS.html
+++ b/kadmos/vistoms/templates/VISTOMS.html
@@ -154,8 +154,8 @@
//First of all, clear everything if it is already there
var visPackDiv = d3.select(".visPackDiv");
if(visPackDiv){visPackDiv.remove()};
- var newDiv = d3.select(".newDiv");
- if(newDiv){newDiv.remove()};
+ var navigationBarDiv = d3.select(".navigationBarDiv");
+ if(navigationBarDiv){navigationBarDiv.remove()};
var imageWidth = 200;
var imageHeight = 150;
@@ -264,8 +264,16 @@
})
//##########################################################
-
- var ul = d3.select("body").append("div").attr("class","newDiv").append("ul")
+ var navigationBarDiv = d3.select("body").append("div").attr("class","navigationBarDiv")
+ var ul = navigationBarDiv.append("ul")
+ navigationBarDiv.on("mouseover", function()
+ {
+ d3.select(this).style("z-index","1300");
+ })
+ .on("mouseout", function()
+ {
+ d3.select(this).style("z-index","");
+ })
var addButton_div = d3.select(".addButtonDiv")
if (addButton_div)
addButton_div.remove();
@@ -348,7 +356,12 @@
function makeViewButtons(data,name, aView)
{
var numberOfGraphs = 0;
- var dropdown1 = ul.append("li").on("mouseover", function(){d3.select(this).style("cursor", "default")})
+ var dropdown1 = ul.append("li")
+ .on("mouseover", function()
+ {
+ d3.select(this).style("cursor", "default")
+ })
+
dropdown1.append("a").text(name)
dropdown1.append("img").attr("src",fileReference.AGILE_Icon)
.attr("align","left")
@@ -18752,7 +18765,7 @@
var saveButton = revertDiv.append("button")
- .attr("class","btn btn-primary")
+ .attr("class","btn btn-primary button")
.attr("data-toggle","tooltip")
.attr("data-placement","top")
.attr("title","Save graph")
@@ -18861,7 +18874,7 @@
var deleteButton = revertDiv.append("button")
- .attr("class","btn btn-danger")
+ .attr("class","btn btn-danger button")
.attr("data-toggle","tooltip")
.attr("data-placement","top")
.attr("title","Delete graph")
@@ -18927,7 +18940,7 @@
var backButton = revertDiv.append("button")
- .attr("class","btn btn-warning")
+ .attr("class","btn btn-warning button")
.attr("data-toggle","tooltip")
.attr("data-placement","top")
.attr("title","Revert graph manipulation step")
@@ -18991,7 +19004,7 @@
})
var fwdButton = revertDiv.append("button")
- .attr("class","btn btn-warning")
+ .attr("class","btn btn-warning button")
.attr("data-toggle","tooltip")
.attr("data-placement","top")
.attr("title","Restore graph manipulation step")
@@ -22618,9 +22631,11 @@
d.onMouseOver(elm,data,index);
if(d.childrenItems.length>0 )
{
+ var li = this
d3.select(this).selectAll("ul").remove();
d3.select(this)
.append("ul")
+ .style("top",String(li.offsetTop-5)+"px")
.selectAll("li")
.data(d.childrenItems)
.enter().append("li")
@@ -22653,8 +22668,13 @@
.style('left', (d3.event.pageX - 2) + 'px')
.style('top', (d3.event.pageY - 2) + 'px')
.style('display', 'block');
-
+
+ //Prevent the default event, which is the left-click.
+ //This means, the context-menu will only appear on right mouse clicks
d3.event.preventDefault();
+
+ //Place context-menu always on top of everything esle
+ d3.select(".d3-context-menu").style("z-index",Number.MAX_SAFE_INTEGER);
};
};
@@ -22898,7 +22918,7 @@
d3.select(".dataModelDiv").moveToBack()
headerDiv.moveToBack()
d3.select(".addButtonDiv").moveToBack()
- d3.select(".newDiv").moveToBack()
+ d3.select(".navigationBarDiv").moveToBack()
d3.select(".visPackDiv").moveToBack()
@@ -24710,6 +24730,7 @@
.attr("y2", yOffset)
.classed("remMinus",true)
}
+ //d3-context-menu for right-click-option
d3.contextMenu = function (menu, openCallback) {
// create the div element that will hold the context menu
@@ -24745,9 +24766,11 @@
d.onMouseOver(elm,data,index);
if(d.childrenItems.length>0 )
{
+ var li = this
d3.select(this).selectAll("ul").remove();
d3.select(this)
.append("ul")
+ .style("top",String(li.offsetTop-5)+"px")
.selectAll("li")
.data(d.childrenItems)
.enter().append("li")
@@ -24780,8 +24803,13 @@
.style('left', (d3.event.pageX - 2) + 'px')
.style('top', (d3.event.pageY - 2) + 'px')
.style('display', 'block');
-
+
+ //Prevent the default event, which is the left-click.
+ //This means, the context-menu will only appear on right mouse clicks
d3.event.preventDefault();
+
+ //Place context-menu always on top of everything esle
+ d3.select(".d3-context-menu").style("z-index",Number.MAX_SAFE_INTEGER);
};
};
@@ -27481,7 +27509,7 @@
d3.select(".dataModelDiv").moveToBack()
headerDiv.moveToBack()
d3.select(".addButtonDiv").moveToBack()
- d3.select(".newDiv").moveToBack()
+ d3.select(".navigationBarDiv").moveToBack()
d3.select(".visPackDiv").moveToBack()
--
GitLab