Skip to content

Commit c8a2ffc

Browse files
jouniweb-padawan
jouni
authored and
web-padawan
committed
feat: side-nav and MDL themes
1 parent c199fe1 commit c8a2ffc

File tree

8 files changed

+248
-12
lines changed

8 files changed

+248
-12
lines changed

‎dev/assets/lucide-icons/cog.svg‎

Lines changed: 17 additions & 0 deletions
Loading

‎dev/assets/lucide-icons/home.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎dev/assets/lucide-icons/messages-square.svg‎

Lines changed: 7 additions & 0 deletions
Loading

‎dev/aura.html‎

Lines changed: 61 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -116,18 +116,67 @@
116116
</vaadin-button>
117117
</footer>
118118

119-
<main class="aura-view" theme="surface">
120-
<header>
121-
<vaadin-drawer-toggle theme="tertiary"></vaadin-drawer-toggle>
122-
<h1>View Title</h1>
123-
</header>
124-
<vaadin-vertical-layout theme="padding">
125-
<div theme="surface" style="padding: 2em; --aura-surface-level: 1"> Level 1 </div>
126-
<div theme="surface" style="padding: 2em; --aura-surface-level: 2"> Level 2 </div>
127-
<div theme="surface" style="padding: 2em; --aura-surface-level: 3"> Level 3 </div>
128-
<div theme="surface" style="padding: 2em; --aura-surface-level: 4"> Level 4 </div>
129-
</vaadin-vertical-layout>
130-
</main>
119+
<vaadin-master-detail-layout master-min-size="14rem" detail-min-size="40rem" class="dashboard-section">
120+
<div class="aura-view">
121+
<header>
122+
<vaadin-drawer-toggle theme="tertiary"></vaadin-drawer-toggle>
123+
<h1>Dashboard</h1>
124+
</header>
125+
<vaadin-scroller theme="overflow-indicators">
126+
<vaadin-side-nav theme="contrast">
127+
<vaadin-side-nav-item path="#components">
128+
<vaadin-icon src="./assets/lucide-icons/home.svg" slot="prefix"></vaadin-icon>
129+
<span>Components</span>
130+
</vaadin-side-nav-item>
131+
<vaadin-side-nav-item>
132+
<vaadin-icon src="./assets/lucide-icons/chart-column-big.svg" slot="prefix"></vaadin-icon>
133+
<span>Grid View</span>
134+
</vaadin-side-nav-item>
135+
<vaadin-side-nav-item>
136+
<vaadin-icon src="./assets/lucide-icons/chart-pie.svg" slot="prefix"></vaadin-icon>
137+
<span>Reporting</span>
138+
</vaadin-side-nav-item>
139+
<vaadin-side-nav-item>
140+
<vaadin-icon src="./assets/lucide-icons/cog.svg" slot="prefix"></vaadin-icon>
141+
<span>Settings</span>
142+
<vaadin-side-nav-item slot="children">
143+
<span>Account</span>
144+
</vaadin-side-nav-item>
145+
<vaadin-side-nav-item slot="children">
146+
<span>Preferences</span>
147+
</vaadin-side-nav-item>
148+
<vaadin-side-nav-item slot="children">
149+
<span>Subscription</span>
150+
</vaadin-side-nav-item>
151+
</vaadin-side-nav-item><vaadin-side-nav-item>
152+
<vaadin-icon src="./assets/lucide-icons/messages-square.svg" slot="prefix"></vaadin-icon>
153+
<span>Support</span>
154+
</vaadin-side-nav-item>
155+
</vaadin-side-nav>
156+
</vaadin-scroller>
157+
</div>
158+
159+
<main class="aura-view" slot="detail">
160+
<header>
161+
<vaadin-drawer-toggle theme="tertiary"></vaadin-drawer-toggle>
162+
<h1>Components</h1>
163+
</header>
164+
<vaadin-vertical-layout theme="padding">
165+
<div theme="surface" style="padding: 2em; --aura-surface-level: 1;">
166+
Level 1
167+
</div>
168+
<div theme="surface" style="padding: 2em; --aura-surface-level: 2;">
169+
Level 2
170+
</div>
171+
<div theme="surface" style="padding: 2em; --aura-surface-level: 3;">
172+
Level 3
173+
</div>
174+
<div theme="surface" style="padding: 2em; --aura-surface-level: 4;">
175+
Level 4
176+
</div>
177+
</vaadin-vertical-layout>
178+
</main>
179+
</vaadin-master-detail-layout>
131180
</vaadin-app-layout>
132181

133182
<vaadin-popover

‎packages/aura/aura.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,12 @@
77
@import './src/typography.css';
88

99
@import './src/components/app-layout.css';
10+
@import './src/components/master-detail-layout.css';
1011
@import './src/components/overlay.css';
12+
@import './src/components/side-nav.css';
1113

1214
:where(html) {
1315
cursor: default;
16+
/* TODO: slightly smaller chevron than the one in base styles - consider if we should do this in base styles */
17+
--_vaadin-icon-chevron-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
1418
}

‎packages/aura/src/components/master-detail-layout.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
vaadin-master-detail-layout::part(detail) {
2+
--aura-surface-level: 2;
3+
background: var(--aura-surface) padding-box;
4+
}
5+
6+
vaadin-master-detail-layout[drawer]::part(detail) {
7+
--aura-surface-opacity: var(--aura-overlay-surface-opacity);
8+
background: var(--aura-surface) padding-box;
9+
-webkit-backdrop-filter: var(--aura-overlay-backdrop-filter);
10+
backdrop-filter: var(--aura-overlay-backdrop-filter);
11+
box-shadow: var(--aura-overlay-shadow);
12+
}
13+
14+
/* TODO could be a built-in variant */
15+
vaadin-master-detail-layout[theme~='inset-drawer'][drawer]::part(detail),
16+
vaadin-master-detail-layout[containment='viewport'][drawer]::part(detail) {
17+
margin: calc(var(--aura-app-layout-inset) / 2);
18+
border-radius: var(--_app-layout-radius);
19+
}
20+
21+
vaadin-master-detail-layout > vaadin-master-detail-layout,
22+
vaadin-master-detail-layout:not([drawer])::part(detail) {
23+
border-start-end-radius: var(--_app-layout-radius);
24+
border-end-end-radius: var(--_app-layout-radius);
25+
}
26+
27+
/* TODO these end up affecting all MDLs, not just the one directly inside the App Layout */
28+
::view-transition-group(vaadin-mdl-backdrop),
29+
::view-transition-group(vaadin-mdl-master),
30+
::view-transition-group(vaadin-mdl-detail) {
31+
border-radius: var(--_app-layout-radius);
32+
overflow: hidden;
33+
}
34+
35+
/* ::view-transition-group(vaadin-mdl-detail.viewport) {
36+
border-radius: 0;
37+
overflow: visible;
38+
} */

‎packages/aura/src/components/side-nav.css‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
html {
2+
--vaadin-side-nav-label-line-height: var(--aura-line-height-xs);
3+
--vaadin-side-nav-label-font-weight: var(--aura-font-weight-medium);
4+
--vaadin-side-nav-item-font-weight: var(--aura-font-weight-medium);
5+
--vaadin-side-nav-item-border-width: 1px;
6+
--vaadin-side-nav-items-gap: var(--vaadin-gap-xs);
7+
}
8+
9+
vaadin-side-nav + vaadin-side-nav {
10+
margin-top: var(--vaadin-gap-l);
11+
}
12+
13+
vaadin-side-nav-item::part(content) {
14+
transition:
15+
color 120ms,
16+
border-color 120ms,
17+
background-color 120ms;
18+
background-clip: padding-box;
19+
--aura-surface-level: 3;
20+
}
21+
22+
vaadin-side-nav-item:not([disabled])::part(content):hover {
23+
--vaadin-side-nav-item-color: var(--vaadin-color);
24+
}
25+
26+
vaadin-side-nav-item[current]::part(content) {
27+
--vaadin-side-nav-item-background: var(--aura-surface);
28+
--vaadin-side-nav-item-border-color: var(--vaadin-border-color-subtle);
29+
}
30+
31+
/* @media (prefers-reduced-motion: no-preference) {
32+
vaadin-side-nav[collapsed]::part(children),
33+
vaadin-side-nav-item::part(children) {
34+
--vaadin-side-nav-hidden-display: flex;
35+
transition: 200ms;
36+
transition-property: display, height, opacity;
37+
transition-behavior: allow-discrete;
38+
interpolate-size: allow-keywords;
39+
overflow: hidden;
40+
height: 0;
41+
42+
@starting-style {
43+
height: 0;
44+
opacity: 0;
45+
}
46+
}
47+
48+
vaadin-side-nav:not([collapsed])::part(children),
49+
vaadin-side-nav-item[expanded]::part(children) {
50+
height: auto;
51+
}
52+
} */
53+
54+
/* Contrast variant */
55+
56+
vaadin-side-nav[theme~='contrast'] vaadin-side-nav-item[current]::part(content) {
57+
color-scheme: var(--_side-nav-current-item-color-scheme, dark);
58+
background: var(--aura-surface-solid);
59+
border-color: transparent;
60+
outline-offset: 2px;
61+
}
62+
63+
vaadin-side-nav[theme~='contrast'] vaadin-side-nav-item[current] > :not([slot='children']) {
64+
--aura-red: var(--vaadin-color);
65+
--aura-red-text: var(--vaadin-color);
66+
--aura-orange: var(--vaadin-color);
67+
--aura-orange-text: var(--vaadin-color);
68+
--aura-yellow: var(--vaadin-color);
69+
--aura-yellow-text: var(--vaadin-color);
70+
--aura-green: var(--vaadin-color);
71+
--aura-green-text: var(--vaadin-color);
72+
--aura-blue: var(--vaadin-color);
73+
--aura-blue-text: var(--vaadin-color);
74+
--aura-purple: var(--vaadin-color);
75+
--aura-purple-text: var(--vaadin-color);
76+
}
77+
78+
@container style(--aura-color-scheme: dark) {
79+
[slot='drawer'] {
80+
--_side-nav-current-item-color-scheme: light;
81+
}
82+
}
83+
84+
@container style(--aura-content-color-scheme: dark) {
85+
vaadin-app-layout > :not([slot]) {
86+
--_side-nav-current-item-color-scheme: light;
87+
}
88+
}
89+
90+
@container style(--aura-content-color-scheme: light) {
91+
vaadin-app-layout > :not([slot]) {
92+
--_side-nav-current-item-color-scheme: dark;
93+
}
94+
}
95+
96+
@media (prefers-color-scheme: dark) {
97+
@container style(--aura-content-color-scheme: light dark) {
98+
vaadin-app-layout > :not([slot]) {
99+
--_side-nav-current-item-color-scheme: light;
100+
}
101+
}
102+
103+
@container style(--aura-color-scheme: light dark) {
104+
[slot='drawer'] {
105+
--_side-nav-current-item-color-scheme: light;
106+
}
107+
}
108+
}
109+
110+
/* TODO bug in component/base styles: hide label part if no label is provided */
111+
vaadin-side-nav:not(:has([slot='label']))::part(label) {
112+
display: none;
113+
}

‎packages/aura/src/surface.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ html,
88
[theme~='surface-solid'],
99
vaadin-app-layout::part(navbar),
1010
vaadin-app-layout::part(drawer),
11+
vaadin-master-detail-layout::part(detail),
12+
vaadin-side-nav-item::part(content),
1113
::part(overlay) {
1214
--aura-surface-opacity: 0.5;
1315

0 commit comments

Comments
 (0)