Skip to content

Commit 13e56f9

Browse files
nikitaeverywherenikitaeverywhere
committed
Toolbar with icons place change
1 parent 21da56c commit 13e56f9

File tree

6 files changed

+88
-59
lines changed

6 files changed

+88
-59
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "iknow-entity-browser",
3-
"version": "0.7.6",
3+
"version": "0.7.7",
44
"description": "Visualizer for iKnow entities",
55
"main": "gulpfile.babel.js",
66
"scripts": {

‎src/static/index.html‎

Lines changed: 40 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -11,45 +11,6 @@
1111
</head>
1212
<body onload="window.init()">
1313
<div id="windows">
14-
<div id="controlIcons">
15-
<div id="undoButton" class="ui icon-undo hint">
16-
<div class="right tooltip">
17-
<div class="label">
18-
Undo
19-
</div>
20-
</div>
21-
</div>
22-
<div id="redoButton" class="ui icon-redo hint">
23-
<div class="right tooltip">
24-
<div class="label">
25-
Redo
26-
</div>
27-
</div>
28-
</div>
29-
<div id="zoomInButton" class="ui icon-zoom-in hint">
30-
<div class="right tooltip">
31-
<div class="two-line label">
32-
<div>Zoom In</div>
33-
<div class="sub">Use mouse/gestures as well</div>
34-
</div>
35-
</div>
36-
</div>
37-
<div id="resetZoomButton" class="ui icon-search hint">
38-
<div class="right tooltip">
39-
<div class="label">
40-
Reset View
41-
</div>
42-
</div>
43-
</div>
44-
<div id="zoomOutButton" class="ui icon-zoom-out hint">
45-
<div class="right tooltip">
46-
<div class="two-line label">
47-
<div>Zoom Out</div>
48-
<div class="sub">Use mouse/gestures as well</div>
49-
</div>
50-
</div>
51-
</div>
52-
</div>
5314
<svg id="graph">
5415
<defs>
5516
<marker id="svgLineArrow-related" markerWidth="10" markerHeight="10" refX="7" refY="3" orient="auto" markerUnits="strokeWidth">
@@ -81,22 +42,59 @@
8142
</div>
8243
</div>
8344
<div id="toolbarIcons">
45+
<div id="undoButton" class="ui icon-undo hint">
46+
<div class="top tooltip">
47+
<div class="label">
48+
Undo
49+
</div>
50+
</div>
51+
</div>
52+
<div id="redoButton" class="ui icon-redo hint">
53+
<div class="top tooltip">
54+
<div class="label">
55+
Redo
56+
</div>
57+
</div>
58+
</div>
59+
<div id="zoomInButton" class="ui icon-zoom-in hint">
60+
<div class="top tooltip">
61+
<div class="two-line label">
62+
<div>Zoom In</div>
63+
<div class="sub">Also use mouse/gestures</div>
64+
</div>
65+
</div>
66+
</div>
67+
<div id="resetZoomButton" class="ui icon-search hint">
68+
<div class="top tooltip">
69+
<div class="label">
70+
Reset View
71+
</div>
72+
</div>
73+
</div>
74+
<div id="zoomOutButton" class="ui icon-zoom-out hint">
75+
<div class="top tooltip">
76+
<div class="two-line label">
77+
<div>Zoom Out</div>
78+
<div class="sub">Also use mouse/gestures</div>
79+
</div>
80+
</div>
81+
</div>
8482
<div id="resetSelectionButton" class="ui icon-outline hint">
85-
<div class="tooltip">
83+
<div class="top tooltip">
8684
<div class="label">
8785
Reset selection
8886
</div>
8987
</div>
9088
</div>
9189
<div id="dropChildrenButton" class="ui icon-unlink hint">
92-
<div class="tooltip">
90+
<div class="top tooltip">
9391
<div class="label">
9492
Drop all children
9593
</div>
9694
</div>
9795
</div>
9896
<div id="removeButton" class="ui icon-remove hint">
99-
<div class="tooltip">
97+
<div class="top tooltip">
10098
<div class="label">
10199
Delete selection
102100
</div>

‎src/static/js/tabular/index.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,8 +137,18 @@ function updateHeaders (dataProp = sorting.properties.join(".")) {
137137
head.appendChild(document.createElement("th"));
138138
}
139139

140+
function updateToolbarWidth () {
141+
document.getElementById("toolbarIcons").style.width =
142+
(document.body.getBoundingClientRect().width - (model.uiState.tabularToggled
143+
? document.getElementById("table").getBoundingClientRect().width : 0))
144+
+ "px";
145+
}
146+
140147
export function init () {
141148

149+
window.addEventListener("resize", updateToolbarWidth);
150+
updateToolbarWidth();
151+
142152
d3.select("#tableToggle")
143153
.data([model.uiState])
144154
.on("click", function (d) {
@@ -147,6 +157,7 @@ export function init () {
147157
d3.select("#table").classed("active", d.tabularToggled);
148158
if (d.tabularToggled)
149159
updateAll();
160+
updateToolbarWidth();
150161
let w = document.getElementById("table").getBoundingClientRect().width / 2;
151162
translateBy(d.tabularToggled ? -w : w);
152163
});

‎src/static/scss/index.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,4 @@ html, body {
3434
@import "tabular";
3535
@import "settings";
3636
@import "interface";
37-
@import "hint";
37+
@import "tooltip";

‎src/static/scss/interface.scss‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -31,21 +31,8 @@
3131
#toolbarIcons {
3232
position: absolute;
3333
right: 100%;
34-
padding-right: 6px;
3534
bottom: 0;
3635
z-index: $zIndexInterface;
37-
}
38-
39-
#controlIcons {
40-
41-
position: absolute;
42-
left: 0;
43-
bottom: 0;
44-
z-index: $zIndexInterface;
45-
padding-left: 8px;
46-
47-
> div {
48-
display: block;
49-
}
50-
36+
text-align: center;
37+
@include transition($defaultTransition);
5138
}

src/static/scss/hint.scss renamed to src/static/scss/tooltip.scss

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,39 @@
8484

8585
}
8686

87+
&.top {
88+
89+
> .label {
90+
91+
top: -20px;
92+
width: 160px;
93+
box-sizing: border-box;
94+
left: calc(-80px + 50%);
95+
96+
&.two-line {
97+
top: -33px;
98+
}
99+
100+
}
101+
102+
> .label:after {
103+
right: auto;
104+
top: calc(100% + 6px);
105+
left: calc(50% - 8px);
106+
border-bottom: none;
107+
border-top: 8px solid #000000;
108+
border-right: 8px solid transparent;
109+
border-left: 8px solid transparent;
110+
}
111+
112+
&:hover > .label {
113+
right: auto;
114+
margin-right: 0;
115+
margin-left: 0;
116+
}
117+
118+
}
119+
87120
}
88121

89122
}

0 commit comments

Comments
 (0)