Skip to content

Commit 96f64d4

Browse files
jounijouni
committed
incomplete foundations
1 parent bb4afbf commit 96f64d4

15 files changed

+639
-1
lines changed

‎dev/aura.html‎

Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Aura</title>
8+
<link rel="stylesheet" href="/packages/aura/aura.css">
9+
<script type="module">
10+
window.Vaadin ||= {};
11+
window.Vaadin.featureFlags ||= {};
12+
window.Vaadin.featureFlags.masterDetailLayoutComponent = true;
13+
14+
import '@vaadin/app-layout';
15+
import '@vaadin/app-layout/vaadin-drawer-toggle.js';
16+
import '@vaadin/scroller';
17+
import '@vaadin/button';
18+
import '@vaadin/card';
19+
import '@vaadin/icon';
20+
import '@vaadin/icons';
21+
import '@vaadin/side-nav';
22+
import '@vaadin/master-detail-layout';
23+
import '@vaadin/form-layout';
24+
import '@vaadin/text-field';
25+
import '@vaadin/checkbox';
26+
import '@vaadin/checkbox-group';
27+
import '@vaadin/number-field';
28+
import '@vaadin/grid/all-imports';
29+
import { html } from 'lit';
30+
import { Notification } from '@vaadin/notification';
31+
32+
const notification = Notification.show(
33+
html`<vaadin-card theme="horizontal footer-end no-frame">
34+
<vaadin-icon icon="uui:chat" slot="media"></vaadin-icon>
35+
<div slot="title">New Message from Olivia</div>
36+
<div>The AI chat UI is evolving with the integration of components…</div>
37+
<vaadin-button slot="footer">Show</vaadin-button>
38+
<vaadin-button slot="footer">Dismiss</vaadin-button>
39+
</vaadin-card>`,
40+
{ duration: 0, position: 'top-end' },
41+
);
42+
notification._overlayElement
43+
.querySelectorAll('vaadin-button')
44+
.forEach((button) => button.addEventListener('click', () => notification.close()));
45+
46+
const generateItems = (count) => {
47+
return Array.from({ length: count }, (_, i) => ({
48+
name: `First Lastname ${i + 1}`,
49+
email: `first.lastname${i + 1}@example.com`,
50+
address: `${i + 1} Main Street`,
51+
city: `City ${i + 1}`,
52+
country: `Country ${i + 1}`,
53+
}));
54+
};
55+
56+
const mdl = document.querySelector('vaadin-master-detail-layout > vaadin-master-detail-layout');
57+
const detailView = document.querySelector('#detail-view').content.firstElementChild.cloneNode(true);
58+
detailView.addEventListener('click', (e) => {
59+
if (e.target.localName === 'vaadin-button') {
60+
grid.activeItem = null;
61+
}
62+
});
63+
64+
mdl.addEventListener('backdrop-click', () => {
65+
grid.activeItem = null;
66+
});
67+
68+
const grid = document.querySelector('vaadin-grid');
69+
grid.items = generateItems(100);
70+
71+
grid.addEventListener('active-item-changed', (e) => {
72+
const item = e.detail.value;
73+
if (item) {
74+
mdl._setDetail(detailView);
75+
} else {
76+
mdl._setDetail(null);
77+
}
78+
// This triggers the cell part generator
79+
grid.selectedItems = [];
80+
});
81+
82+
grid.cellPartNameGenerator = (column, model) => {
83+
let parts = 'nav-item';
84+
if (model.item === grid.activeItem) {
85+
parts += ' active-nav-item';
86+
}
87+
return parts;
88+
};
89+
</script>
90+
</head>
91+
<body>
92+
<vaadin-app-layout primary-section="navbar">
93+
<header slot="drawer">
94+
<vaadin-button>
95+
<vaadin-icon icon="vaadin:caret-square-left-o"></vaadin-icon>
96+
</vaadin-button>
97+
</header>
98+
<vaadin-scroller slot="drawer" theme="overflow-indicators">
99+
<vaadin-side-nav collapsible>
100+
<span slot="label">Main menu</span>
101+
102+
<vaadin-side-nav-item path="/dev/aura.html">
103+
Home
104+
<span theme="badge" slot="suffix" aria-label="(2 new items)">1</span>
105+
</vaadin-side-nav-item>
106+
107+
<vaadin-side-nav-item path="/dev" expanded>
108+
Dev pages
109+
<span theme="badge" slot="suffix" aria-label="(2 new items)">99+</span>
110+
111+
<vaadin-side-nav-item path="/dev/grid.html" slot="children">Grid</vaadin-side-nav-item>
112+
<vaadin-side-nav-item path="/dev/select.html" slot="children">Select</vaadin-side-nav-item>
113+
<vaadin-side-nav-item path="/dev/button.html" slot="children">Button</vaadin-side-nav-item>
114+
115+
<vaadin-side-nav-item slot="children" expanded>
116+
Layouts
117+
118+
<vaadin-side-nav-item path="/dev/app-layout.html" slot="children"> App Layout </vaadin-side-nav-item>
119+
<vaadin-side-nav-item path="/dev/form-layout.html" slot="children"> Form Layout </vaadin-side-nav-item>
120+
<vaadin-side-nav-item path="/dev/master-detail-layout.html" slot="children">
121+
Master-Detail Layout
122+
<span theme="badge" slot="suffix" aria-label="(2 new items)">2</span>
123+
</vaadin-side-nav-item>
124+
<vaadin-side-nav-item path="/dev/split-layout.html" slot="children"> Split Layout </vaadin-side-nav-item>
125+
<vaadin-side-nav-item path="/dev/horizontal-layout.html" slot="children">
126+
Horizontal Layout
127+
</vaadin-side-nav-item>
128+
<vaadin-side-nav-item path="/dev/vertical-layout.html" slot="children">
129+
Vertical Layout
130+
</vaadin-side-nav-item>
131+
</vaadin-side-nav-item>
132+
133+
<vaadin-side-nav-item slot="children" disabled data-disabled expanded>
134+
Form Fields
135+
136+
<vaadin-side-nav-item path="/dev/combo-box.html" slot="children"> Combo Box </vaadin-side-nav-item>
137+
<vaadin-side-nav-item path="/dev/date-picker.html" slot="children"> Date Picker </vaadin-side-nav-item>
138+
<vaadin-side-nav-item path="/dev/checkbox.html" slot="children"> Checkbox </vaadin-side-nav-item>
139+
<vaadin-side-nav-item path="/dev/text-field.html" slot="children"> Text Field </vaadin-side-nav-item>
140+
</vaadin-side-nav-item>
141+
</vaadin-side-nav-item>
142+
143+
<vaadin-side-nav-item> Label only (no path) </vaadin-side-nav-item>
144+
</vaadin-side-nav>
145+
</vaadin-scroller>
146+
<footer slot="drawer">
147+
<a href="">Sign in</a>
148+
</footer>
149+
150+
<vaadin-master-detail-layout theme master-min-size="14em" master-size="25%" detail-min-size="30em">
151+
<div class="aura-view">
152+
<header>
153+
<vaadin-drawer-toggle></vaadin-drawer-toggle>
154+
<h1>Aura</h1>
155+
</header>
156+
<vaadin-side-nav>
157+
<vaadin-side-nav-item path="/">
158+
<vaadin-icon icon="uui:home" slot="prefix"></vaadin-icon>
159+
<span>Home</span>
160+
</vaadin-side-nav-item>
161+
<vaadin-side-nav-item path="/">
162+
<vaadin-icon icon="uui:chart-bar" slot="prefix"></vaadin-icon>
163+
<span>Dashboard</span>
164+
</vaadin-side-nav-item>
165+
<vaadin-side-nav-item path="/">
166+
<vaadin-icon icon="uui:layout-vertical" slot="prefix"></vaadin-icon>
167+
<span>Projects</span>
168+
</vaadin-side-nav-item>
169+
<vaadin-side-nav-item path="/">
170+
<vaadin-icon icon="uui:chart-pie" slot="prefix"></vaadin-icon>
171+
<span>Reporting</span>
172+
</vaadin-side-nav-item>
173+
<vaadin-side-nav-item path="/">
174+
<vaadin-icon icon="uui:cog" slot="prefix"></vaadin-icon>
175+
<span>Settings</span>
176+
</vaadin-side-nav-item><vaadin-side-nav-item path="/">
177+
<vaadin-icon icon="uui:chat" slot="prefix"></vaadin-icon>
178+
<span>Support</span>
179+
<span theme="badge positive">Online</span>
180+
</vaadin-side-nav-item>
181+
</vaadin-side-nav>
182+
</div>
183+
184+
<vaadin-master-detail-layout slot="detail" containment="viewport" theme="inset-drawer" force-overlay>
185+
<div class="aura-view">
186+
<header>
187+
<h1>Contacts</h1>
188+
</header>
189+
<vaadin-grid multi-sort column-reordering-allowed theme="no-border">
190+
<vaadin-grid-selection-column></vaadin-grid-selection-column>
191+
192+
<vaadin-grid-column-group header="Personal Information">
193+
<vaadin-grid-sort-column path="name" header="Name"></vaadin-grid-sort-column>
194+
<vaadin-grid-sort-column path="email" header="Email"></vaadin-grid-sort-column>
195+
</vaadin-grid-column-group>
196+
197+
<vaadin-grid-column-group header="Contact Information">
198+
<vaadin-grid-filter-column path="address" header="Address"></vaadin-grid-filter-column>
199+
<vaadin-grid-sort-column path="city" header="City"></vaadin-grid-sort-column>
200+
<vaadin-grid-sort-column path="country" header="Country"></vaadin-grid-sort-column>
201+
</vaadin-grid-column-group>
202+
203+
<span slot="empty-state">No items</span>
204+
</vaadin-grid>
205+
</div>
206+
</vaadin-master-detail-layout>
207+
</vaadin-master-detail-layout>
208+
</vaadin-app-layout>
209+
210+
<template id="detail-view">
211+
<div slot="detail" class="aura-view">
212+
<header>
213+
<h3>My App</h3>
214+
</header>
215+
<vaadin-scroller theme="overflow-indicators">
216+
<vaadin-form-layout auto-responsive theme="padding">
217+
<vaadin-text-field label="Application Name" value="My App"></vaadin-text-field>
218+
<vaadin-text-field label="Image" value="my-app:latest"></vaadin-text-field>
219+
<vaadin-text-field label="Hostname" value="my-app.local">
220+
<span slot="prefix">https://</span>
221+
</vaadin-text-field>:
222+
<vaadin-text-field label="Port" value="8080"></vaadin-text-field>
223+
<vaadin-checkbox label="Secure Connection" checked></vaadin-checkbox>
224+
<vaadin-number-field label="Replicas" step-buttons-visible value="1"></vaadin-number-field>
225+
<hr>
226+
<vaadin-checkbox-group label="Features">
227+
<vaadin-checkbox label="User Management" value="user-management" checked></vaadin-checkbox>
228+
<vaadin-checkbox label="Localization" value="localization"></vaadin-checkbox>
229+
</vaadin-checkbox-group>
230+
</vaadin-form-layout>
231+
</vaadin-scroller>
232+
<footer>
233+
<vaadin-button>Cancel</vaadin-button>
234+
<vaadin-button theme="primary">Save</vaadin-button>
235+
</footer>
236+
</div>
237+
</template>
238+
</body>
239+
</html>

‎packages/aura/aura.css‎

Lines changed: 100 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,102 @@
1+
@import './src/aura-view.css';
2+
@import './src/color-scheme.css';
3+
@import './src/color.css';
4+
@import './src/icons.css';
5+
@import './src/typography.css';
6+
7+
@import './src/components/app-layout.css';
8+
@import './src/components/badge.css';
9+
@import './src/components/card.css';
10+
@import './src/components/form-layout.css';
11+
@import './src/components/notification.css';
12+
@import './src/components/side-nav.css';
13+
114
html {
2-
/* Global custom properties */
15+
--aura-radius-s: 4px;
16+
--aura-radius-m: 8px;
17+
--aura-radius-l: 14px;
18+
--vaadin-radius-s: var(--aura-radius-s);
19+
--vaadin-radius-m: var(--aura-radius-m);
20+
--vaadin-radius-l: var(--aura-radius-l);
21+
}
22+
23+
::view-transition {
24+
pointer-events: none;
25+
}
26+
27+
/* TODO this would be nice to add (avoid snapshotting the whole viewport) but then the backdrop-filter on things like notifications doesn't work correctly in Chrome */
28+
/* :root {
29+
view-transition-name: none;
30+
} */
31+
32+
html,
33+
body,
34+
vaadin-app-layout,
35+
vaadin-app-layout > vaadin-master-detail-layout {
36+
width: 100%;
37+
height: 100%;
38+
margin: 0;
39+
box-sizing: border-box;
40+
}
41+
42+
[theme] {
43+
--app-layout-radius: clamp(0px, var(--app-layout-inset) * 3, var(--aura-radius-l));
44+
}
45+
46+
vaadin-app-layout > vaadin-master-detail-layout {
47+
background: var(--aura-accent-gradient);
48+
background-origin: border-box;
49+
border-radius: var(--app-layout-radius);
50+
overflow: visible;
51+
}
52+
53+
vaadin-app-layout > vaadin-master-detail-layout::before {
54+
content: '';
55+
position: absolute;
56+
z-index: 1;
57+
inset: 0;
58+
border-radius: inherit;
59+
border: min(1px, var(--app-layout-inset)) solid var(--aura-border-color-subtle);
60+
pointer-events: none;
61+
}
62+
63+
/* TODO could be a built-in variant */
64+
vaadin-master-detail-layout[theme~='inset-drawer'][drawer]::part(detail) {
65+
margin: calc(var(--app-layout-inset) / 2);
66+
border-radius: var(--app-layout-radius);
67+
background: transparent;
68+
position: relative;
69+
-webkit-backdrop-filter: blur(12px) saturate(0.8) brightness(1.1);
70+
backdrop-filter: blur(12px) saturate(0.8) brightness(1.1);
71+
}
72+
73+
vaadin-master-detail-layout > vaadin-master-detail-layout,
74+
vaadin-master-detail-layout:not([drawer])::part(detail) {
75+
background: var(--aura-surface-background);
76+
border-start-end-radius: var(--app-layout-radius);
77+
border-end-end-radius: var(--app-layout-radius);
78+
}
79+
80+
::view-transition-group(vaadin-mdl-backdrop),
81+
::view-transition-group(vaadin-mdl-master),
82+
::view-transition-group(vaadin-mdl-detail) {
83+
border-radius: var(--app-layout-radius);
84+
overflow: hidden;
85+
}
86+
87+
/* ::view-transition-group(vaadin-mdl-detail.viewport) {
88+
border-radius: 0;
89+
overflow: visible;
90+
} */
91+
92+
vaadin-scroller[slot='drawer'] {
93+
scrollbar-width: thin;
94+
}
95+
96+
vaadin-grid::part(active-nav-item) {
97+
--vaadin-grid-cell-background: var(--vaadin-background-container-strong);
98+
}
99+
100+
::part(input-field) {
101+
background-clip: padding-box;
3102
}

‎packages/aura/src/aura-view.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.aura-view {
2+
display: flex;
3+
flex-direction: column;
4+
height: 100%;
5+
}
6+
7+
.aura-view > :not(header, footer) {
8+
flex: 1;
9+
}
10+
11+
.aura-view > :is(header, footer) {
12+
padding: 8px;
13+
display: flex;
14+
align-items: center;
15+
gap: 8px;
16+
}
17+
18+
.aura-view > :is(header, footer) :is(h1, h2, h3, h4, h5, h6) {
19+
margin: 0;
20+
padding: var(--vaadin-padding-container);
21+
font-size: var(--aura-font-size-l);
22+
font-weight: 600;
23+
color: var(--vaadin-color);
24+
}

‎packages/aura/src/color-scheme.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
html {
2+
--color-scheme: light dark;
3+
--nav-color-scheme: dark;
4+
--notification-color-scheme: light dark;
5+
6+
color-scheme: var(--color-scheme);
7+
background: var(--vaadin-background-color);
8+
}
9+
10+
vaadin-app-layout {
11+
color-scheme: var(--nav-color-scheme);
12+
background: var(--vaadin-background-color);
13+
}
14+
15+
vaadin-master-detail-layout {
16+
color-scheme: var(--color-scheme);
17+
}
18+
19+
vaadin-notification-container {
20+
color-scheme: var(--notification-color-scheme);
21+
}

0 commit comments

Comments
 (0)