magnus/datagraph
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases 3 Packages Wiki Activity Actions

Tooltips

Browse source
This commit is contained in:
Magnus Åhall 2025-07-11 13:57:27 +02:00
parent 8988720c0e
commit bcd0f1ce15
6 changed files with 123 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

44
static/css/main.css
View file

@ -85,13 +85,20 @@ button {
}
#editor-node > div.ops {
display: grid;
grid-template-columns: min-content 1fr repeat(3, min-content);
grid-template-columns: min-content 1fr repeat(4, min-content);
align-items: center;
grid-gap: 8px;
}
#editor-node > div.ops #editor-node-name {
font-weight: bold;
}
#editor-node > div.ops img {
display: block;
height: 32px;
}
#editor-node > div.ops img.highlight {
filter: invert(0.7) sepia(0.5) hue-rotate(50deg) saturate(300%) brightness(0.85);
}
#types {
grid-area: navigation;
}
@ -319,3 +326,38 @@ dialog#connection-data div.button {
#editor-type-schema img.saving {
filter: invert(0.7) sepia(0.5) hue-rotate(0deg) saturate(600%) brightness(0.75);
}
@keyframes example {
0% {
opacity: 0%;
}
50% {
opacity: 0%;
}
100% {
opacity: 100%;
}
}
.tooltip {
position: relative;
}
.tooltip.left::after {
right: 0px;
}
.tooltip.right::after {
left: 0px;
}
.tooltip:hover::after {
animation-name: example;
animation-duration: 1s;
white-space: nowrap;
background-color: var(--section-color);
box-shadow: 5px 5px 21px -4px rgba(0, 0, 0, 0.75);
position: absolute;
top: 48px;
content: attr(data-tooltip);
display: block;
padding: 8px 16px;
border-radius: 4px;
color: #fff;
z-index: 8192;
}

9
static/js/app.mjs
View file

@ -17,6 +17,7 @@ export class App {
'EDITOR_NODE_SAVE',
'MENU_ITEM_SELECTED',
'NODE_CONNECT',
'NODE_COPY_PATH',
'NODE_CREATE_DIALOG',
'NODE_DELETE',
'NODE_EDIT_NAME',
@ -49,6 +50,14 @@ export class App {
selectnode.render()
break
case 'NODE_COPY_PATH':
const uri = `${location.protocol}//${location.host}/nodes/${event.detail}`
const img = document.querySelector('#editor-node .copy-path')
img.classList.add('highlight')
setTimeout(()=>img.classList.remove('highlight'), 150)
navigator.clipboard.writeText(uri)
break
case 'NODE_SELECTED':
for (const n of document.querySelectorAll('#nodes .node.selected'))
n.classList.remove('selected')

6
static/js/select_node.mjs
View file

@ -205,7 +205,11 @@ export class ConnectionDataDialog {
dlg.innerHTML = `
<div>
<div style="float: left;" class="label">Connection data</div>
<div style="float: right;"><img src="/images/${_VERSION}/node_modules/@mdi/svg/svg/trash-can.svg" /></div>
<div style="float: right;">
<div class="tooltip left" data-tooltip="Delete the connection">
<img src="/images/${_VERSION}/node_modules/@mdi/svg/svg/trash-can.svg" />
</div>
</div>
</div>
<div style="clear: both;"><b>${this.node.Name}</b></div>
<div><textarea></textarea></div>

47
static/less/main.less
View file

@ -115,13 +115,22 @@ button {
& > div.ops {
display: grid;
grid-template-columns: min-content 1fr repeat(3, min-content);
grid-template-columns: min-content 1fr repeat(4, min-content);
align-items: center;
grid-gap: 8px;
#editor-node-name {
font-weight: bold;
}
img {
display: block;
height: 32px;
&.highlight {
filter: invert(.7) sepia(.5) hue-rotate(50deg) saturate(300%) brightness(0.85);
}
}
}
}
@ -422,3 +431,39 @@ dialog#connection-data {
}
}
}
@keyframes example {
0% { opacity: 0% }
50% { opacity: 0% }
100% { opacity: 100% }
}
.tooltip {
position: relative;
&.left::after {
right: 0px;
}
&.right::after {
left: 0px;
}
&:hover::after {
animation-name: example;
animation-duration: 1s;
white-space: nowrap;
background-color: var(--section-color);
box-shadow: 5px 5px 21px -4px rgba(0,0,0,0.75);
position: absolute;
top: 48px;
content: attr(data-tooltip);
display: block;
padding: 8px 16px;
border-radius: 4px;
color: #fff;
z-index: 8192;
}
}