design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): refine heading emphasis and animate app dashboard subview expansion

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-08 09:57:57 +00:00
parent c841c49e1e
commit eecdc51557
4 changed files with 74 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts
View File

@@ -269,12 +269,20 @@ export class DeesSimpleAppDash extends DeesElement {
}
.subViews {
display: flex;
flex-direction: column;
gap: 2px;
margin: 2px 0 4px 12px;
padding-left: 12px;
display: grid;
grid-template-rows: 0fr;
margin-left: 12px;
position: relative;
transition:
grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1),
margin-top 0.25s cubic-bezier(0.4, 0, 0.2, 1),
margin-bottom 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.subViews.expanded {
grid-template-rows: 1fr;
margin-top: 2px;
margin-bottom: 4px;
}
.subViews::before {
@@ -285,6 +293,21 @@ export class DeesSimpleAppDash extends DeesElement {
bottom: 4px;
width: 1px;
background: var(--dees-color-border-default);
opacity: 0;
transition: opacity 0.2s ease;
}
.subViews.expanded::before {
opacity: 1;
}
.subViews-inner {
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 2px;
padding-left: 12px;
}
.viewTab.sub {
@@ -631,26 +654,31 @@ export class DeesSimpleAppDash extends DeesElement {
<dees-icon class="chevron" .icon="${'lucide:chevronDown'}"></dees-icon>
` : ''}
</div>
${hasSubs && groupActive ? html`
<div class="subViews">
${view.subViews!.map(
(sub) => html`
<div
class="viewTab sub ${this.selectedView === sub ? 'selected' : ''}"
@click=${(e: Event) => {
e.stopPropagation();
this.loadView(sub);
}}
>
${sub.iconName ? html`
<dees-icon .icon="${sub.iconName.includes(':') ? sub.iconName : `lucide:${sub.iconName}`}"></dees-icon>
` : html`
<dees-icon .icon="${'lucide:dot'}"></dees-icon>
`}
<span>${sub.name}</span>
</div>
`
)}
${hasSubs ? html`
<div
class="subViews ${groupActive ? 'expanded' : ''}"
?inert=${!groupActive}
>
<div class="subViews-inner">
${view.subViews!.map(
(sub) => html`
<div
class="viewTab sub ${this.selectedView === sub ? 'selected' : ''}"
@click=${(e: Event) => {
e.stopPropagation();
this.loadView(sub);
}}
>
${sub.iconName ? html`
<dees-icon .icon="${sub.iconName.includes(':') ? sub.iconName : `lucide:${sub.iconName}`}"></dees-icon>
` : html`
<dees-icon .icon="${'lucide:dot'}"></dees-icon>
`}
<span>${sub.name}</span>
</div>
`
)}
</div>
</div>
` : ''}
`;