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

Tweak collapse styles

Browse Source
This commit is contained in:
Misode
2024-11-19 18:15:35 +01:00
parent 8b58b2c7a4
commit bf9590a225
2 changed files with 13 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/components/generator/McdocRenderer.tsx
View File

@@ -578,7 +578,8 @@ function StructBody({ type: outerType, node, makeEdit, ctx }: Props<SimplifiedSt
return node
})
}
return <div key={key} class="node" data-category={getCategory(field.type)}>
const category = getCategory(field.type)
return <div key={key} class="node" data-category={category}>
<div class="node-header">
<Errors type={childType} node={child} ctx={ctx} />
{canToggle && (isCollapsed
@@ -591,7 +592,11 @@ function StructBody({ type: outerType, node, makeEdit, ctx }: Props<SimplifiedSt
<Key label={key} raw={field.key.kind === 'string'} />
{!isCollapsed && <Head type={childType} node={child} makeEdit={makeFieldEdit} ctx={ctx} />}
</div>
{!isCollapsed && <Body type={childType} node={child} makeEdit={makeFieldEdit} ctx={ctx} />}
{!isCollapsed && (childType.kind === 'struct' && category
? <div class="node-body-flat">
<StructBody type={childType} node={child} makeEdit={makeFieldEdit} ctx={ctx} />
</div>
: <Body type={childType} node={child} makeEdit={makeFieldEdit} ctx={ctx} />)}
</div>
})}
</>

7
src/styles/nodes.css
View File

@@ -371,7 +371,9 @@ button.move:disabled {
}
.node > .node-body-flat > .node > .node-header > .node-icon + *,
.node > .node-body-flat > .node > .node-header > *:first-child {
.node > .node-body-flat > .node > .node-header > *:first-child,
.node[data-category] > .node-header > .node-icon + *,
.node[data-category] > .node-header > *:first-child {
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@@ -394,6 +396,7 @@ button.move:disabled {
/* Color categories */
[data-category=predicate] > .node-header > label,
[data-category=predicate] > .node-header > button.toggle,
[data-category=predicate] > .node-body > .node > .node-header > label,
[data-category=predicate] > .node-body-flat > .node > .node-header > label {
background-color: var(--category-predicate);
@@ -414,6 +417,7 @@ button.move:disabled {
}
[data-category=function] > .node-header > label,
[data-category=function] > .node-header > button.toggle,
[data-category=function] > .node-body > .node > .node-header > label,
[data-category=function] > .node-body-flat > .node > .node-header > label {
background-color: var(--category-function);
@@ -434,6 +438,7 @@ button.move:disabled {
}
[data-category=pool] > .node-header > label,
[data-category=pool] > .node-header > button.toggle,
[data-category=pool] > .node-body > .node > .node-header > label,
[data-category=pool] > .node-body-flat > .node > .node-header > label {
background-color: var(--category-pool);