From bf9590a225b7026af9573d14d036efa91ef6e734 Mon Sep 17 00:00:00 2001 From: Misode Date: Tue, 19 Nov 2024 18:15:35 +0100 Subject: [PATCH] Tweak collapse styles --- src/app/components/generator/McdocRenderer.tsx | 9 +++++++-- src/styles/nodes.css | 7 ++++++- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/app/components/generator/McdocRenderer.tsx b/src/app/components/generator/McdocRenderer.tsx index 5a3f9ec4..08b5f6b0 100644 --- a/src/app/components/generator/McdocRenderer.tsx +++ b/src/app/components/generator/McdocRenderer.tsx @@ -578,7 +578,8 @@ function StructBody({ type: outerType, node, makeEdit, ctx }: Props + const category = getCategory(field.type) + return
{canToggle && (isCollapsed @@ -591,7 +592,11 @@ function StructBody({ type: outerType, node, makeEdit, ctx }: Props {!isCollapsed && }
- {!isCollapsed && } + {!isCollapsed && (childType.kind === 'struct' && category + ?
+ +
+ : )}
})} diff --git a/src/styles/nodes.css b/src/styles/nodes.css index 1682db14..2957bebd 100644 --- a/src/styles/nodes.css +++ b/src/styles/nodes.css @@ -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);