mirror of
https://github.com/misode/misode.github.io.git
synced 2026-04-23 07:10:41 +00:00
Add help and error popups
This commit is contained in:
Misode
20
package-lock.json
generated
20
package-lock.json
generated
@@ -5,22 +5,22 @@
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"@mcschema/core": {
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@mcschema/core/-/core-0.5.2.tgz",
|
||||
"integrity": "sha512-uRHTJx1yzwSc5iJBCu+7s9R2j5E4JMD6/iynsVivol/mIarJ1rL5GuPv1pCPaxTx4brXqRVLcXZSteBY/ovKTA=="
|
||||
"version": "0.5.5",
|
||||
"resolved": "https://registry.npmjs.org/@mcschema/core/-/core-0.5.5.tgz",
|
||||
"integrity": "sha512-2wwtBgwoFm3HgUiT2w/m9IBqGKcYcLY2aRieDSbK6DKoXUbPaU/yKXsZHK76Mr9u5S3knxL0gfZHFXrR03ajtg=="
|
||||
},
|
||||
"@mcschema/java-1.16": {
|
||||
"version": "0.2.12",
|
||||
"resolved": "https://registry.npmjs.org/@mcschema/java-1.16/-/java-1.16-0.2.12.tgz",
|
||||
"integrity": "sha512-Qh+N7yBqWcajwtzvgZX++38IsLRL1GeVfPqOUJjE9w6Yo953dCS3egD7s+NdS0p45sMX5wN+10JlhiEQFGPbqQ==",
|
||||
"version": "0.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@mcschema/java-1.16/-/java-1.16-0.2.14.tgz",
|
||||
"integrity": "sha512-5Jc4YlpDcSDzUXuyiu5+mihILYFuPZ56eAd77QALX1TmgceSEaR5BnUSV7tJ5Yyn/ifIDpKWGQYAGFFtPXM5Fw==",
|
||||
"requires": {
|
||||
"@mcschema/core": "^0.5.2"
|
||||
"@mcschema/core": "^0.5.4"
|
||||
}
|
||||
},
|
||||
"@mcschema/locales": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@mcschema/locales/-/locales-0.1.3.tgz",
|
||||
"integrity": "sha512-D8AYwICYmOgDp1ia85jUcTTcJkmylzB7ElVYIMFmsokm+Fjav1ptxJXdv1SDctII749LEWQy7+oF53xpB7zneA=="
|
||||
"version": "0.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@mcschema/locales/-/locales-0.1.5.tgz",
|
||||
"integrity": "sha512-5LbvGoNz523RPjU0yfdUdSPaUcooOOkU2nuh+18ZHwrpwp0nuusPvW57DFjAygF2eh9QwdTmWn9tVBWc1S0rCg=="
|
||||
},
|
||||
"@nodelib/fs.scandir": {
|
||||
"version": "2.1.3",
|
||||
|
||||
@@ -12,9 +12,9 @@
|
||||
"author": "Misode",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@mcschema/core": "^0.5.2",
|
||||
"@mcschema/locales": "^0.1.3",
|
||||
"@mcschema/java-1.16": "^0.2.12",
|
||||
"@mcschema/core": "^0.5.5",
|
||||
"@mcschema/locales": "^0.1.5",
|
||||
"@mcschema/java-1.16": "^0.2.14",
|
||||
"@types/google.analytics": "0.0.40",
|
||||
"@types/split.js": "^1.4.0",
|
||||
"copy-webpack-plugin": "^6.0.1",
|
||||
|
||||
@@ -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>`)
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user