Tooltips
This commit is contained in:
Magnus Åhall
parent
8988720c0e
commit
bcd0f1ce15
6 changed files with 123 additions and 15 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,8 +11,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<!--script src="/js/{{ .VERSION }}/lib/jsoneditor.js"></script-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
|
||||
<script src="/js/{{ .VERSION }}/lib/jsoneditor.js"></script>
|
||||
<script type="module" defer>
|
||||
import {App, TreeNode} from '/js/{{ .VERSION }}/app.mjs'
|
||||
window._VERSION = '{{ .VERSION }}'
|
||||
|
|
@ -29,11 +28,24 @@
|
|||
<div class="page section" id="nodes"></div>
|
||||
<div class="page" id="editor-node" style="display: none">
|
||||
<div class="section ops">
|
||||
<img onclick="mbus.dispatch('NODE_EDIT_NAME')" src="/images/{{ .VERSION }}/node_modules/@mdi/svg/svg/tag-text-outline.svg" style="display: block; height: 32px" />
|
||||
<img onclick="mbus.dispatch('NODE_EDIT_NAME')" src="/images/{{ .VERSION }}/node_modules/@mdi/svg/svg/tag-text-outline.svg" />
|
||||
<div onclick="mbus.dispatch('NODE_EDIT_NAME')" id="editor-node-name"></div>
|
||||
<img onclick="mbus.dispatch('NODE_CREATE_DIALOG')" src="/images/{{ .VERSION }}/node_modules/@mdi/svg/svg/plus-box.svg" style="display: block; height: 32px" />
|
||||
<img onclick="mbus.dispatch('NODE_DELETE')" src="/images/{{ .VERSION }}/node_modules/@mdi/svg/svg/trash-can.svg" style="display: block; height: 32px" />
|
||||
<img onclick="mbus.dispatch('NODE_MOVE')" src="/images/{{ .VERSION }}/node_modules/@mdi/svg/svg/file-move-outline.svg" style="display: block; height: 32px" />
|
||||
|
||||
<div class="tooltip left" data-tooltip="Create new nodes under this one">
|
||||
<img onclick="mbus.dispatch('NODE_CREATE_DIALOG')" src="/images/{{ .VERSION }}/node_modules/@mdi/svg/svg/plus-box.svg" />
|
||||
</div>
|
||||
|
||||
<div class="tooltip left" data-tooltip="Delete this node">
|
||||
<img onclick="mbus.dispatch('NODE_DELETE')" src="/images/{{ .VERSION }}/node_modules/@mdi/svg/svg/trash-can.svg" />
|
||||
</div>
|
||||
|
||||
<div class="tooltip left" data-tooltip="Move nodes under this one">
|
||||
<img onclick="mbus.dispatch('NODE_MOVE')" src="/images/{{ .VERSION }}/node_modules/@mdi/svg/svg/file-move-outline.svg" />
|
||||
</div>
|
||||
|
||||
<div class="tooltip left" data-tooltip="Copy path to JSON">
|
||||
<img style="display: relative" class="copy-path" onclick="mbus.dispatch('NODE_COPY_PATH', _app.currentNode.ID)" src="/images/{{ .VERSION }}/node_modules/@mdi/svg/svg/protocol.svg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
|
|
@ -52,10 +64,4 @@
|
|||
<div class="page section" id="editor-type-schema"></div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<link rel="stylesheet" href="/css/{{ .VERSION }}/spectre.min.css">
|
||||
<link rel="stylesheet" href="/css/{{ .VERSION }}/spectre-exp.min.css">
|
||||
<link rel="stylesheet" href="/css/{{ .VERSION }}/spectre-icons.min.css">
|
||||
-->
|
||||
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -125,6 +125,8 @@ func actionNodesTree(w http.ResponseWriter, r *http.Request) { // {{{
|
|||
w.Write(j)
|
||||
} // }}}
|
||||
func actionNode(w http.ResponseWriter, r *http.Request) { // {{{
|
||||
w.Header().Add("Content-Type", "application/json")
|
||||
|
||||
nodeID := 0
|
||||
nodeIDStr := r.PathValue("nodeID")
|
||||
nodeID, _ = strconv.Atoi(nodeIDStr)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue