akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-24 23:56:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add help and error popups

Browse Source
This commit is contained in:
Misode
2020-08-04 22:21:43 +02:00
parent a175976c48
commit 84096187e7
4 changed files with 91 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/app/app.ts
View File

@@ -41,8 +41,29 @@ let models: { [key: string]: DataModel } = {}
config.models.forEach(buildModel)
const treeViewObserver = (el: HTMLElement) => {
el.querySelectorAll('.node-header[data-help]').forEach(e => {
const div = document.createElement('div')
div.className = 'node-icon'
div.addEventListener('click', evt => {
div.getElementsByTagName('span')[0].classList.add('show')
document.body.addEventListener('click', evt => {
div.getElementsByTagName('span')[0].classList.remove('show')
}, { capture: true, once: true })
})
div.insertAdjacentHTML('beforeend', `<span class="icon-popup">${e.getAttribute('data-help')}</span><svg class="node-help" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"></path></svg>`)
e.appendChild(div)
})
el.querySelectorAll('.node-header[data-error]').forEach(e => {
e.insertAdjacentHTML('beforeend', `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"></path></svg>`)
const div = document.createElement('div')
div.className = 'node-icon'
div.addEventListener('click', evt => {
div.getElementsByTagName('span')[0].classList.add('show')
document.body.addEventListener('click', evt => {
div.getElementsByTagName('span')[0].classList.remove('show')
}, { capture: true, once: true })
})
div.insertAdjacentHTML('beforeend', `<span class="icon-popup">${e.getAttribute('data-error')}</span><svg class="node-error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"></path></svg>`)
e.appendChild(div)
})
el.querySelectorAll('.collapse.closed, button.add').forEach(e => {
e.insertAdjacentHTML('afterbegin', `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"></path></svg>`)

59
src/styles/nodes.css
View File

@@ -10,6 +10,7 @@
--node-remove: #e76f51;
--node-remove-border: #be4b2e;
--node-indent-border: #b9b9b9;
--node-popup: #1f2020e6;
--category-predicate: #65b5b8;
--category-predicate-border: #187e81;
--category-function: #979fa7;
@@ -28,6 +29,7 @@
--node-remove: #b64023;
--node-remove-border: #7e1d05;
--node-indent-border: #454749;
--node-popup: #0a0a0ae6;
--category-predicate: #306163;
--category-predicate-border: #224849;
--category-function: #838383;
@@ -118,8 +120,12 @@
.node-header > *:last-child,
.node-header > input[list]:nth-last-child(2),
.node-header[data-help] > *:nth-last-child(2),
.node-header[data-help] > input[list]:nth-last-child(3),
.node-header[data-error] > *:nth-last-child(2),
.node-header[data-error] > input[list]:nth-last-child(3) {
.node-header[data-error] > input[list]:nth-last-child(3),
.node-header[data-help][data-error] > *:nth-last-child(3),
.node-header[data-help][data-error] > input[list]:nth-last-child(4) {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
@@ -182,12 +188,59 @@ button.add svg {
border-bottom-right-radius: 6px;
}
.node-header[data-error] > svg {
.node-icon {
border: none;
position: relative;
display: inline-block;
}
.node-icon svg {
cursor: pointer;
}
.node-icon .icon-popup {
visibility: hidden;
width: 240px;
background-color: var(--node-popup);
color: var(--node-text);
text-align: center;
border-radius: 6px;
padding: 8px 4px;
position: absolute;
z-index: 1;
top: 125%;
left: 50%;
margin-left: -120px;
}
.node-icon .icon-popup::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -3px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent var(--node-popup) transparent;
}
.node-icon:hover .icon-popup,
.node-icon .icon-popup.show {
visibility: visible;
}
.node-icon > svg {
height: 34px;
width: 34px;
min-width: 34px;
padding-left: 6px;
margin-left: 6px;
}
.node-header svg.node-help {
fill: var(--node-border);
}
.node-header svg.node-error {
fill: var(--node-remove);
}