akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-29 17:32:43 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Simplify DOM by removing node-entry

Browse Source
This commit is contained in:
Misode
2021-09-23 15:04:24 +02:00
parent e696d6dd36
commit 0842eb8741
2 changed files with 38 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/app/schema/renderHtml.tsx
View File

@@ -92,9 +92,7 @@ export const renderHtml: RenderHook = {
{(value && Array.isArray(value)) && value.map((cValue, index) => {
if (value.length > LIST_LIMIT && index >= LIST_LIMIT_SHOWN && index < value.length - LIST_LIMIT_SHOWN) {
if (index === LIST_LIMIT_SHOWN) {
return <div class="node-entry">
<span class="node-message">{value.length - LIST_LIMIT} hidden entries...</span>
</div>
return <span class="node-message">{value.length - LIST_LIMIT} hidden entries...</span>
}
return null
}
@@ -110,20 +108,16 @@ export const renderHtml: RenderHook = {
[v[index + 1], v[index]] = [v[index], v[index + 1]]
path.model.set(path, v)
}
return <div class="node-entry">
<TreeNode path={cPath} schema={children} value={cValue} lang={lang} states={states}>
<button class="remove" onClick={onRemove}>{Octicon.trashcan}</button>
{value.length > 1 && <div class="node-move">
<button class="move" onClick={onMoveUp} disabled={index === 0}>{Octicon.chevron_up}</button>
<button class="move" onClick={onMoveDown} disabled={index === value.length - 1}>{Octicon.chevron_down}</button>
</div>}
</TreeNode>
</div>
return <TreeNode path={cPath} schema={children} value={cValue} lang={lang} states={states}>
<button class="remove" onClick={onRemove}>{Octicon.trashcan}</button>
{value.length > 1 && <div class="node-move">
<button class="move" onClick={onMoveUp} disabled={index === 0}>{Octicon.chevron_up}</button>
<button class="move" onClick={onMoveDown} disabled={index === value.length - 1}>{Octicon.chevron_down}</button>
</div>}
</TreeNode>
})}
{(value && value.length > 2) && <div class="node-entry">
<div class="node node-header">
<button class="add" onClick={onAddBottom}>{Octicon.plus_circle}</button>
</div>
{(value && value.length > 2) && <div class="node node-header">
<button class="add" onClick={onAddBottom}>{Octicon.plus_circle}</button>
</div>}
</>
return [null, suffix, body]
@@ -167,11 +161,9 @@ export const renderHtml: RenderHook = {
path.model.errors.add(cPath, 'error.invalid_enum_option', cValue)
}
const onRemove = () => cPath.set(undefined)
return <div class="node-entry" key={key}>
<TreeNode schema={cSchema} path={cPath} value={cValue} lang={lang} states={states} label={key}>
<button class="remove" onClick={onRemove}>{Octicon.trashcan}</button>
</TreeNode>
</div>
return <TreeNode schema={cSchema} path={cPath} value={cValue} lang={lang} states={states} label={key}>
<button class="remove" onClick={onRemove}>{Octicon.trashcan}</button>
</TreeNode>
})}
</>
return [null, suffix, body]

59
src/styles/nodes.css
View File

@@ -372,55 +372,46 @@ span.menu-item {
padding-left: 18px;
}
.node-entry > .object-node > .node-body {
.list-node > .node-body > .object-node > .node-body,
.map-node > .node-body > .object-node > .node-body {
padding-left: 0;
}
.node-entry > .object-node > .node-body > .node > .node-body {
.list-node > .node-body > .object-node > .node-body > .node > .node-body,
.map-node > .node-body > .object-node > .node-body > .node > .node-body {
border-left: none;
}
.node-entry > .object-node > .node-body > .node > .node-header > .node-icon + *,
.node-entry > .object-node > .node-body > .node > .node-header > *:first-child {
.list-node > .node-body > .object-node > .node-body > .node > .node-header > .node-icon + *,
.list-node > .node-body > .object-node > .node-body > .node > .node-header > *:first-child,
.map-node > .node-body > .object-node > .node-body > .node > .node-header > .node-icon + *,
.map-node > .node-body > .object-node > .node-body > .node > .node-header > *:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: none;
}
.node-entry {
display: flex;
flex-direction: column;
margin-top: 4px;
}
.node-entry > .object-node[data-category],
.node-entry > .list-node[data-category],
.node-entry > .map-node[data-category] {
.node-body > .object-node[data-category],
.node-body > .list-node[data-category],
.node-body > .map-node[data-category] {
width: 100%;
min-width: max-content;
padding: 5px;
padding-left: 0px;
margin-top: 8px;
border: 2px solid var(--node-border);
border-radius: 3px;
}
.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 > .object-node[data-category] > .node-header > .node-icon + *,
.node-entry > .object-node[data-category] > .node-header > *:first-child {
.node-body > .object-node[data-category] > .node-header > .node-icon + *,
.node-body > .object-node[data-category] > .node-header > *:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: none;
}
.node-entry > .object-node[data-category] > .node-body,
.node-entry > .list-node[data-category] > .node-body,
.node-entry > .map-node[data-category] > .node-body {
.node-body > .object-node[data-category] > .node-body,
.node-body > .list-node[data-category] > .node-body,
.node-body > .map-node[data-category] > .node-body {
border: none;
}
@@ -454,9 +445,9 @@ span.menu-item {
border-color: var(--category-predicate-border);
}
.node-entry > .node.object-node[data-category=predicate],
.node-entry > .node.list-node[data-category=predicate],
.node-entry > .node.map-node[data-category=predicate] {
.node-body > .node.object-node[data-category=predicate],
.node-body > .node.list-node[data-category=predicate],
.node-body > .node.map-node[data-category=predicate] {
background-color: var(--category-predicate-background);
border-color: var(--category-predicate-border);
}
@@ -473,9 +464,9 @@ span.menu-item {
border-color: var(--category-function-border);
}
.node-entry > .node.object-node[data-category=function],
.node-entry > .node.list-node[data-category=function],
.node-entry > .node.map-node[data-category=function] {
.node-body > .node.object-node[data-category=function],
.node-body > .node.list-node[data-category=function],
.node-body > .node.map-node[data-category=function] {
background-color: var(--category-function-background);
border-color: var(--category-function-border);
}
@@ -492,9 +483,9 @@ span.menu-item {
border-color: var(--category-pool-border);
}
.node-entry > .node.object-node[data-category=pool],
.node-entry > .node.list-node[data-category=pool],
.node-entry > .node.map-node[data-category=pool] {
.node-body > .node.object-node[data-category=pool],
.node-body > .node.list-node[data-category=pool],
.node-body > .node.map-node[data-category=pool] {
background-color: var(--category-pool-background);
border-color: var(--category-pool-border);
}