From 9f9c9b40fdf5c4fae07d6452e92ce0a6cd698c57 Mon Sep 17 00:00:00 2001 From: Misode Date: Mon, 5 Oct 2020 15:51:31 +0200 Subject: [PATCH] Upgrade mschema dependencies and add pool category --- package-lock.json | 12 ++--- package.json | 4 +- src/app/TreeView.ts | 13 +++++- src/styles/nodes.css | 108 +++++++++++++++++++++++++------------------ 4 files changed, 83 insertions(+), 54 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8c274b3d..7b4701e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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" } diff --git a/package.json b/package.json index f6fc251c..b066d318 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/app/TreeView.ts b/src/app/TreeView.ts index cd3a1b1e..33b4d83d 100644 --- a/src/app/TreeView.ts +++ b/src/app/TreeView.ts @@ -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 = `
+
${rendered[1]}
+
${rendered[2]}
+
` + } else { + this.target.innerHTML = rendered[2] + } mounter.mount(this.target); this.observer(this.target) } diff --git a/src/styles/nodes.css b/src/styles/nodes.css index e3c36241..88c9c3dc 100644 --- a/src/styles/nodes.css +++ b/src/styles/nodes.css @@ -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); +}