Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
subugoe
emo
TIDO
Commits
c70e5f76
Commit
c70e5f76
authored
Aug 10, 2021
by
dindigala
Browse files
refactor: display tooltip when there is a selected item in annotation list, address review comments
parent
d90c9381
Pipeline
#219402
passed with stages
in 4 minutes and 18 seconds
Changes
1
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
src/components/annotations/annotations.vue
View file @
c70e5f76
...
...
@@ -297,11 +297,12 @@ export default {
const
childOtherNodes
=
[...
el
.
childNodes
].
filter
((
x
)
=>
x
.
nodeName
!==
'
#text
'
).
length
;
if
(
!
childOtherNodes
)
{
const
annotationClasses
=
this
.
backTrackNestedAnnotations
(
el
).
className
.
split
(
'
'
).
map
((
x
)
=>
annotationIds
[
x
]).
filter
((
x
)
=>
x
);
el
=
this
.
backTrackNestedAnnotations
(
el
);
const
annotationClasses
=
el
.
className
.
split
(
'
'
).
map
((
x
)
=>
annotationIds
[
x
]).
filter
((
x
)
=>
x
);
if
(
annotationClasses
.
length
)
{
el
.
addEventListener
(
'
mouseenter
'
,
()
=>
this
.
onMouseHover
(
el
,
annotationClasses
),
false
);
el
.
addEventListener
(
'
mouseout
'
,
()
=>
this
.
onMouseOut
(
el
),
false
);
el
.
addEventListener
(
'
mouseout
'
,
()
=>
this
.
onMouseOut
(),
false
);
}
}
});
...
...
@@ -344,6 +345,10 @@ export default {
},
onMouseHover
(
el
,
annotationClasses
)
{
if
(
!
el
||
(
el
&&
parseInt
(
el
.
getAttribute
(
'
data-annotation-level
'
),
10
)
<=
0
))
{
return
;
}
const
tooltipEl
=
document
.
createElement
(
'
span
'
);
tooltipEl
.
setAttribute
(
'
data-annotation-classes
'
,
`
${
el
.
className
}
`
);
tooltipEl
.
setAttribute
(
'
class
'
,
'
annotation-tooltip
'
);
...
...
@@ -379,12 +384,11 @@ export default {
document
.
querySelector
(
'
body
'
).
append
(
tooltipEl
);
e
l
.
classList
.
add
(
'
annotation-
hover
'
);
setTimeout
(()
=>
tooltipE
l
.
classList
.
add
(
'
annotation-
animated-tooltip
'
),
10
);
},
onMouseOut
(
el
)
{
onMouseOut
()
{
[...
document
.
querySelectorAll
(
'
.annotation-tooltip
'
)].
forEach
((
x
)
=>
x
.
remove
());
el
.
classList
.
remove
(
'
annotation-hover
'
);
},
removeIcon
(
annotation
)
{
...
...
@@ -493,21 +497,18 @@ export default {
border-bottom
:
1px
solid
#000
;
}
*[
data-annotation-level
]
.annotation-hover
,
*[
data-annotation-level
]
.annotation-hover
*
{
text-decoration
:
underline
;
}
.annotation-tooltip
{
background-color
:
$grey-2
!
important
;
box-shadow
:
$shadow-1
;
color
:
#000
!
important
;
font-size
:
14px
;
left
:
0
;
opacity
:
0
;
padding
:
8px
;
position
:
absolute
;
text-decoration
:
none
!
important
;
top
:
0
;
transition
:
opacity
0
.5s
;
width
:
240px
;
z-index
:
10000
;
}
...
...
@@ -516,6 +517,10 @@ export default {
-webkit-touch-callout
:
none
;
}
.annotation-animated-tooltip
{
opacity
:
1
;
}
.referenced-annotation
{
display
:
block
;
margin-bottom
:
4px
;
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment