Skip to content

Commit d92961a

Browse files
nikitaeverywherenikitaeverywhere
committed
Hints add
1 parent f1ed224 commit d92961a

File tree

6 files changed

+141
-9
lines changed

6 files changed

+141
-9
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.5.7",
3+
"version": "0.5.8",
44
"description": "Visualizer for iKnow entities",
55
"main": "gulpfile.babel.js",
66
"scripts": {

‎src/static/index.html

Lines changed: 49 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,20 @@
1212
<body onload="window.init()">
1313
<div id="windows">
1414
<div id="controlIcons">
15-
<i id="undoButton" class="ui icon-undo"></i>
16-
<i id="redoButton" class="ui icon-redo"></i>
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>
1729
</div>
1830
<svg id="graph">
1931
<defs>
@@ -29,14 +41,44 @@
2941
</defs>
3042
</svg>
3143
<div id="table">
32-
<i id="tableToggle" class="ui icon-list"></i>
44+
<div id="tableToggle" class="ui icon-list hint">
45+
<div class="tooltip">
46+
<div class="label">
47+
Tabular view
48+
</div>
49+
</div>
50+
</div>
3351
<div id="rightTopIcons">
34-
<i id="settingsToggle" class="ui icon-settings"></i>
52+
<div id="settingsToggle" class="ui icon-settings hint">
53+
<div class="tooltip">
54+
<div class="label">
55+
Settings
56+
</div>
57+
</div>
58+
</div>
3559
</div>
3660
<div id="toolbarIcons">
37-
<i id="resetSelectionButton" class="ui icon-outline"></i>
38-
<i id="dropChildrenButton" class="ui icon-unlink"></i>
39-
<i id="removeButton" class="ui icon-remove"></i>
61+
<div id="resetSelectionButton" class="ui icon-outline hint">
62+
<div class="tooltip">
63+
<div class="label">
64+
Reset selection
65+
</div>
66+
</div>
67+
</div>
68+
<div id="dropChildrenButton" class="ui icon-unlink hint">
69+
<div class="tooltip">
70+
<div class="label">
71+
Drop all children
72+
</div>
73+
</div>
74+
</div>
75+
<div id="removeButton" class="ui icon-remove hint">
76+
<div class="tooltip">
77+
<div class="label">
78+
Delete selection
79+
</div>
80+
</div>
81+
</div>
4082
</div>
4183
<div class="controls">
4284
<label>

‎src/static/scss/hint.scss

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
@import "mixins";
2+
3+
.hint {
4+
5+
position: relative;
6+
7+
> .tooltip {
8+
9+
position: absolute;
10+
top: 0;
11+
left: 0;
12+
width: 100%;
13+
height: 100%;
14+
overflow: hidden;
15+
16+
> .label {
17+
18+
position: absolute;
19+
padding: 3px;
20+
width: auto;
21+
white-space: nowrap;
22+
color: #FFFFFF;
23+
background: #000000;
24+
font-size: 16px;
25+
text-align: center;
26+
visibility: hidden;
27+
border-radius: 4px;
28+
opacity: 0;
29+
@include transition(opacity .3s ease);
30+
31+
&:after {
32+
content: '';
33+
position: absolute;
34+
top: 50%;
35+
left: 100%;
36+
margin-top: -9px;
37+
width: 0;
38+
height: 0;
39+
border-left: 9px solid #000;
40+
border-top: 9px solid transparent;
41+
border-bottom: 8px solid transparent;
42+
}
43+
44+
}
45+
46+
&:hover {
47+
overflow: visible;
48+
> .label {
49+
visibility: visible;
50+
right: 100%;
51+
top: 50%;
52+
margin-top: -15px;
53+
margin-right: 15px;
54+
z-index: 999;
55+
opacity: 0.8;
56+
}
57+
}
58+
59+
&.right {
60+
61+
> .label:after {
62+
left: auto;
63+
right: 100%;
64+
border-left: none;
65+
border-right: 9px solid #000;
66+
border-top: 9px solid transparent;
67+
border-bottom: 8px solid transparent;
68+
}
69+
70+
&:hover > .label {
71+
right: auto;
72+
left: 100%;
73+
margin-right: 0;
74+
margin-left: 15px;
75+
}
76+
77+
}
78+
79+
}
80+
81+
}

‎src/static/scss/icons-all.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
[class*="icon-"] {
55
@include user-select(none);
66
@include transition($defaultTransition);
7+
position: relative;
8+
display: inline-block;
79
cursor: pointer;
810
&.ui { font-size: 28px; }
911
&:hover { color: $colorA; }

‎src/static/scss/index.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,5 @@ html, body {
3333
@import "graph";
3434
@import "tabular";
3535
@import "settings";
36-
@import "interface";
36+
@import "interface";
37+
@import "hint";

‎src/static/scss/interface.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,15 @@
3737
}
3838

3939
#controlIcons {
40+
4041
position: absolute;
4142
left: 0;
4243
bottom: 0;
4344
z-index: $zIndexInterface;
4445
padding-left: 8px;
46+
47+
> div {
48+
display: block;
49+
}
50+
4551
}

0 commit comments

Comments
 (0)