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

Upgrade mschema dependencies and add pool category

Browse Source
This commit is contained in:
Misode
2020-10-05 15:51:31 +02:00
parent 9138985153
commit 9f9c9b40fd
4 changed files with 83 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
package-lock.json generated
View File

@@ -5,14 +5,14 @@
"requires": true,
"dependencies": {
"@mcschema/core": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/@mcschema/core/-/core-0.9.0.tgz",
"integrity": "sha512-A7sPk/EXMDbq8IfU1Tq6RnwHCD+j1EoLgfqxL4DEZC5QjceprSfmDCZbRoO/4Ak48v8I7mY1GKMGOs0pCzLcsQ=="
"version": "0.9.3",
"resolved": "https://registry.npmjs.org/@mcschema/core/-/core-0.9.3.tgz",
"integrity": "sha512-DtDncu+NE32OUDzjCv+IAA+owPXASEbR9WXRCikpDY/eTxpjiUkgrsjYzG9A8GhE/Hw60vbwbDuSrHjeTDYSTg=="
},
"@mcschema/java-1.16": {
"version": "0.5.6",
"resolved": "https://registry.npmjs.org/@mcschema/java-1.16/-/java-1.16-0.5.6.tgz",
"integrity": "sha512-NTrvXDrWOQIlkJqiYDEH1DZeCC6moZ0/ks7HI9cAFbHMStIrKjEl2VPjT7HQlg/ZnknnuO4QmqLGsbMoNpimuw==",
"version": "0.5.8",
"resolved": "https://registry.npmjs.org/@mcschema/java-1.16/-/java-1.16-0.5.8.tgz",
"integrity": "sha512-hbrDilc5fQK97x0MhbBiwHT+C4xCjsO7HPdgcZqvzhlsbcSkG2fz03Ew/myJJQyxYpShyZLq2QPl6OVtiCp40Q==",
"requires": {
"@mcschema/core": "^0.9.0"
}

4
package.json
View File

@@ -12,8 +12,8 @@
"author": "Misode",
"license": "MIT",
"dependencies": {
"@mcschema/core": "^0.9.0",
"@mcschema/java-1.16": "^0.5.6",
"@mcschema/core": "^0.9.3",
"@mcschema/java-1.16": "^0.5.8",
"@mcschema/locales": "^0.1.11",
"@types/google.analytics": "0.0.40",
"@types/split.js": "^1.4.0",

13
src/app/TreeView.ts
View File

@@ -38,8 +38,17 @@ export class TreeView extends AbstractView {
*/
invalidated() {
const mounter = new Mounter({nodeInjector: this.nodeInjector})
const rendered = this.model.schema.render(new ModelPath(this.model), this.model.data, mounter)
this.target.innerHTML = rendered[2];
const path = new ModelPath(this.model)
const rendered = this.model.schema.render(path, this.model.data, mounter)
const category = this.model.schema.category(path)
if (rendered[1]) {
this.target.innerHTML = `<div class="node ${this.model.schema.type(path)}-node" ${category ? `data-category="${category}"` : ''}>
<div class="node-header">${rendered[1]}</div>
<div class="node-body">${rendered[2]}</div>
</div>`
} else {
this.target.innerHTML = rendered[2]
}
mounter.mount(this.target);
this.observer(this.target)
}

108
src/styles/nodes.css
View File

@@ -18,6 +18,9 @@
--category-function: #979fa7;
--category-function-border: #788086;
--category-function-background: #dce0e4;
--category-pool: #76b865;
--category-pool-border: #398118;
--category-pool-background: #b1d6a6;
}
:root[data-theme=dark] {
@@ -40,32 +43,9 @@
--category-function: #838383;
--category-function-border: #6b6b6b;
--category-function-background: #414141;
}
#tree-view-output > .object-node > .node-body {
border-left: none;
padding-left: 0;
}
#tree-view-output > .node > .node-body {
margin-top: -5px; /* no idea why this is necessary */
}
.node {
margin: 2px 0;
}
.node-body > .node:first-child {
margin-top: 4px;
}
.node:last-child {
margin-bottom: 0;
}
.node-body {
border-left: 3px solid var(--node-indent-border);
transition: border-color var(--style-transition);
--category-pool: #386330;
--category-pool-border: #2e4922;
--category-pool-background: #21331d;
}
/* Node headers */
@@ -129,17 +109,17 @@
.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-help][data-error] > *:nth-last-child(3),
.node-header[data-help][data-error] > input[list]:nth-last-child(4) {
.node[data-help] > .node-header > *:nth-last-child(2),
.node[data-help] > .node-header > input[list]:nth-last-child(3),
.node[data-error] > .node-header > *:nth-last-child(2),
.node[data-error] > .node-header > input[list]:nth-last-child(3),
.node[data-help][data-error] > .node-header > *:nth-last-child(3),
.node[data-help][data-error] > .node-header > input[list]:nth-last-child(4) {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.node-header > *:not(:last-child) {
.node-header > * {
margin-right: -1px;
}
@@ -255,6 +235,23 @@ button.remove {
/* Node body and list entry */
.node {
margin-bottom: 4px;
}
.node-body > .node:first-child {
margin-top: 4px;
}
.node:last-child {
margin-bottom: 0;
}
.node-body {
border-left: 3px solid var(--node-indent-border);
transition: border-color var(--style-transition);
}
.node-body {
display: flex;
flex-direction: column;
@@ -269,7 +266,6 @@ button.remove {
border-left: none;
}
.node-entry > .object-node > .node-body > .node.node-header > *:first-child,
.node-entry > .object-node > .node-body > .node > .node-header > *:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@@ -279,10 +275,12 @@ button.remove {
.node-entry {
display: flex;
flex-direction: column;
margin-top: 2px;
margin-top: 4px;
}
.node-entry > .object-node[data-category] {
.node-entry > .object-node[data-category],
.node-entry > .list-node[data-category],
.node-entry > .map-node[data-category] {
width: 100%;
min-width: max-content;
padding: 5px;
@@ -293,11 +291,15 @@ button.remove {
transition: background-color var(--style-transition);
}
.node-entry:first-child > .object-node[data-category] {
.node-entry:first-child > .object-node[data-category],
.node-entry:first-child > .list-node[data-category],
.node-entry:first-child > .map-node[data-category] {
margin-top: 4px;
}
.node-entry > .node.object-node[data-category] > .node-body {
.node-entry > .object-node[data-category] > .node-body,
.node-entry > .list-node[data-category] > .node-body,
.node-entry > .map-node[data-category] > .node-body {
border: none;
}
@@ -315,37 +317,55 @@ button.remove {
/* Color categories */
[data-category=predicate] > .node-header > label,
[data-category=predicate] > .node-body > .node.node-header > label,
[data-category=predicate] > .node-body > .node > .node-header > label {
background-color: var(--category-predicate) !important;
}
[data-category=predicate] > .node-body,
[data-category=predicate] > .node-header > label,
[data-category=predicate] > .node-body > .node.node-header > *:not(.selected),
[data-category=predicate] > .node-body > .node > .node-header > *:not(.selected) {
border-color: var(--category-predicate-border) !important;
}
.node-entry > .node.object-node[data-category=predicate] {
.node-entry > .node.object-node[data-category=predicate],
.node-entry > .node.list-node[data-category=predicate],
.node-entry > .node.map-node[data-category=predicate] {
background-color: var(--category-predicate-background);
border-color: var(--category-predicate-border);
}
[data-category=function] > .node-header > label,
[data-category=function] > .node-body > .node.node-header > label,
[data-category=function] > .node-body > .node > .node-header > label {
background-color: var(--category-function) !important;
}
[data-category=function] > .node-body,
[data-category=function] > .node-header > label,
[data-category=function] > .node-body > .node.node-header > *:not(.selected),
[data-category=function] > .node-body > .node > .node-header > *:not(.selected) {
border-color: var(--category-function-border) !important;
}
.node-entry > .node.object-node[data-category=function] {
.node-entry > .node.object-node[data-category=function],
.node-entry > .node.list-node[data-category=function],
.node-entry > .node.map-node[data-category=function] {
background-color: var(--category-function-background);
border-color: var(--category-function-border);
}
[data-category=pool] > .node-header > label,
[data-category=pool] > .node-body > .node > .node-header > label {
background-color: var(--category-pool) !important;
}
[data-category=pool] > .node-body,
[data-category=pool] > .node-header > label,
[data-category=pool] > .node-body > .node > .node-header > *:not(.selected) {
border-color: var(--category-pool-border) !important;
}
.node-entry > .node.object-node[data-category=pool],
.node-entry > .node.list-node[data-category=pool],
.node-entry > .node.map-node[data-category=pool] {
background-color: var(--category-pool-background);
border-color: var(--category-pool-border);
}