Skip to content

Commit c902840

Browse files
jounijouni
authored
feat: Aura master-detail-layout and side-nav (#10153)
1 parent 9e964d5 commit c902840

File tree

8 files changed

+225
-12
lines changed

8 files changed

+225
-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: 59 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@
77
<title>Aura</title>
88
<link rel="stylesheet" href="../packages/aura/aura.css" />
99
<link rel="stylesheet" href="./aura/aura-view.css" />
10+
<script type="module">
11+
window.Vaadin ||= {};
12+
window.Vaadin.featureFlags ||= {};
13+
window.Vaadin.featureFlags.masterDetailLayoutComponent = true;
14+
</script>
1015
<script type="module">
1116
import './aura/aura-color-control.js';
1217
import './aura/aura-font-family-control.js';
@@ -19,6 +24,7 @@
1924
import '@vaadin/button';
2025
import '@vaadin/checkbox';
2126
import '@vaadin/icon';
27+
import '@vaadin/master-detail-layout';
2228
import '@vaadin/popover';
2329
import '@vaadin/side-nav';
2430
import '@vaadin/vertical-layout';
@@ -116,18 +122,59 @@
116122
</vaadin-button>
117123
</footer>
118124

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

133180
<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: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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:
12+
inset 1px 0 0 0 var(--aura-overlay-inner-outline-color),
13+
-1px 0 0 0 var(--aura-overlay-outline-color),
14+
var(--aura-shadow-m);
15+
}
16+
17+
vaadin-master-detail-layout[containment='viewport'][drawer]::part(detail) {
18+
box-shadow: var(--aura-overlay-shadow);
19+
}
20+
21+
/* TODO could be a built-in variant */
22+
vaadin-master-detail-layout[theme~='inset-drawer'][drawer]::part(detail),
23+
vaadin-master-detail-layout[containment='viewport'][drawer]::part(detail) {
24+
margin: calc(var(--aura-app-layout-inset) / 2);
25+
border-radius: var(--_app-layout-radius);
26+
}
27+
28+
vaadin-master-detail-layout > vaadin-master-detail-layout,
29+
vaadin-master-detail-layout:not([drawer])::part(detail) {
30+
border-start-end-radius: var(--_app-layout-radius);
31+
border-end-end-radius: var(--_app-layout-radius);
32+
}
33+
34+
/* TODO these end up affecting all MDLs, not just the one directly inside the App Layout */
35+
::view-transition-group(vaadin-mdl-backdrop),
36+
::view-transition-group(vaadin-mdl-master),
37+
::view-transition-group(vaadin-mdl-detail) {
38+
border-radius: var(--_app-layout-radius);
39+
overflow: hidden;
40+
}

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

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
:where(:root, :host) {
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+
/* Contrast variant */
32+
33+
vaadin-side-nav[theme~='contrast'] vaadin-side-nav-item[current]::part(content) {
34+
color-scheme: var(--_side-nav-current-item-color-scheme, dark);
35+
background: var(--aura-surface-solid);
36+
border-color: transparent;
37+
outline-offset: 2px;
38+
}
39+
40+
vaadin-side-nav[theme~='contrast'] vaadin-side-nav-item[current] > :not([slot='children']) {
41+
--aura-red: var(--vaadin-color);
42+
--aura-red-text: var(--vaadin-color);
43+
--aura-orange: var(--vaadin-color);
44+
--aura-orange-text: var(--vaadin-color);
45+
--aura-yellow: var(--vaadin-color);
46+
--aura-yellow-text: var(--vaadin-color);
47+
--aura-green: var(--vaadin-color);
48+
--aura-green-text: var(--vaadin-color);
49+
--aura-blue: var(--vaadin-color);
50+
--aura-blue-text: var(--vaadin-color);
51+
--aura-purple: var(--vaadin-color);
52+
--aura-purple-text: var(--vaadin-color);
53+
}
54+
55+
@container style(--aura-color-scheme: dark) {
56+
[slot='drawer'] {
57+
--_side-nav-current-item-color-scheme: light;
58+
}
59+
}
60+
61+
@container style(--aura-content-color-scheme: dark) {
62+
vaadin-app-layout > :not([slot]) {
63+
--_side-nav-current-item-color-scheme: light;
64+
}
65+
}
66+
67+
@container style(--aura-content-color-scheme: light) {
68+
vaadin-app-layout > :not([slot]) {
69+
--_side-nav-current-item-color-scheme: dark;
70+
}
71+
}
72+
73+
@media (prefers-color-scheme: dark) {
74+
@container style(--aura-content-color-scheme: light dark) {
75+
vaadin-app-layout > :not([slot]) {
76+
--_side-nav-current-item-color-scheme: light;
77+
}
78+
}
79+
80+
@container style(--aura-color-scheme: light dark) {
81+
[slot='drawer'] {
82+
--_side-nav-current-item-color-scheme: light;
83+
}
84+
}
85+
}
86+
87+
/* TODO bug in component/base styles: hide label part if no label is provided */
88+
vaadin-side-nav:not(:has([slot='label']))::part(label) {
89+
display: none;
90+
}

‎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)