Skip to content

Commit c199fe1

Browse files
jounijouni
authored
chore: update Aura dev page, add theme editor (#10151)
1 parent 609b1af commit c199fe1

17 files changed

+1480
-41
lines changed

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

Lines changed: 7 additions & 0 deletions
Loading

‎dev/assets/lucide-icons/chart-column-big.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎dev/assets/lucide-icons/chart-pie.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎dev/assets/lucide-icons/file-text.svg‎

Lines changed: 8 additions & 0 deletions
Loading

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

Lines changed: 7 additions & 0 deletions
Loading

‎dev/assets/lucide-icons/list-todo.svg‎

Lines changed: 8 additions & 0 deletions
Loading

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

Lines changed: 1 addition & 0 deletions
Loading

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

Lines changed: 7 additions & 0 deletions
Loading

‎dev/aura.html‎

Lines changed: 176 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,181 @@
11
<!doctype html>
22
<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+
<link rel="stylesheet" href="./aura/aura-view.css" />
10+
<script type="module">
11+
import './aura/aura-color-control.js';
12+
import './aura/aura-font-family-control.js';
13+
import './aura/aura-inset-control.js';
14+
import './aura/aura-number-control.js';
15+
import './aura/aura-scheme-control.js';
16+
import '@vaadin/app-layout';
17+
import '@vaadin/app-layout/src/vaadin-drawer-toggle.js';
18+
import '@vaadin/avatar';
19+
import '@vaadin/button';
20+
import '@vaadin/checkbox';
21+
import '@vaadin/icon';
22+
import '@vaadin/popover';
23+
import '@vaadin/side-nav';
24+
import '@vaadin/vertical-layout';
325

4-
<head>
5-
<meta charset="UTF-8" />
6-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8-
<title>Aura</title>
9-
<link rel="stylesheet" href="../packages/aura/aura.css" />
10-
<script type="module">
11-
import '@vaadin/app-layout';
12-
import '@vaadin/app-layout/src/vaadin-drawer-toggle.js';
13-
import '@vaadin/vertical-layout';
14-
</script>
15-
</head>
16-
<body>
17-
18-
<vaadin-app-layout>
19-
<div slot="navbar">
20-
<vaadin-drawer-toggle></vaadin-drawer-toggle>
21-
</div>
22-
<div slot="drawer">
23-
Navigation
24-
</div>
25-
<main theme="surface">
26-
<vaadin-vertical-layout theme="padding spacing">
27-
<h1>Aura</h1>
28-
<div theme="surface" style="padding: 2em; --aura-surface-level: 1;">
29-
Level 1
30-
</div>
31-
<div theme="surface" style="padding: 2em; --aura-surface-level: 2;">
32-
Level 2
33-
</div>
34-
<div theme="surface" style="padding: 2em; --aura-surface-level: 3;">
35-
Level 3
36-
</div>
37-
<div theme="surface" style="padding: 2em; --aura-surface-level: 4;">
38-
Level 4
39-
</div>
40-
</vaadin-vertical-layout>
41-
</main>
42-
</vaadin-app-layout>
26+
function clearLocalStorage() {
27+
for (let i = localStorage.length - 1; i >= 0; i--) {
28+
const key = localStorage.key(i);
29+
if (/^aura/u.test(key)) {
30+
localStorage.removeItem(key);
31+
}
32+
}
33+
}
34+
35+
document.querySelector('#resetAll').addEventListener('click', () => {
36+
clearLocalStorage();
37+
window.location.reload();
38+
});
39+
40+
document.querySelector('#useNavbar').addEventListener('change', (e) => {
41+
if (e.target.checked) {
42+
document.querySelector('vaadin-app-layout > header[slot]').setAttribute('slot', 'navbar');
43+
document.querySelector('vaadin-app-layout > footer[slot]').setAttribute('slot', 'navbar');
44+
} else {
45+
document.querySelector('vaadin-app-layout > header[slot]').setAttribute('slot', 'drawer');
46+
document.querySelector('vaadin-app-layout > footer[slot]').setAttribute('slot', 'drawer');
47+
}
48+
});
49+
</script>
50+
51+
<style>
52+
html {
53+
--icon-rotate-ccw: 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="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>');
54+
}
55+
</style>
56+
</head>
57+
<body>
58+
<vaadin-app-layout>
59+
<header slot="drawer" class="aura-view-header">
60+
<vaadin-drawer-toggle theme="tertiary"></vaadin-drawer-toggle>
61+
<div class="aura-view-heading">Aura</div>
62+
</header>
63+
64+
<vaadin-scroller slot="drawer" theme="overflow-indicators">
65+
<vaadin-side-nav collapsible>
66+
<span slot="label">General</span>
67+
68+
<vaadin-side-nav-item path="">
69+
<vaadin-icon src="./assets/lucide-icons/chart-column-big.svg" slot="prefix"></vaadin-icon>
70+
Dashboard
71+
</vaadin-side-nav-item>
72+
73+
<vaadin-side-nav-item>
74+
<vaadin-icon src="./assets/lucide-icons/layers.svg" slot="prefix"></vaadin-icon>
75+
Projects
76+
</vaadin-side-nav-item>
77+
78+
<vaadin-side-nav-item>
79+
<vaadin-icon src="./assets/lucide-icons/file-text.svg" slot="prefix"></vaadin-icon>
80+
Documents
81+
</vaadin-side-nav-item>
4382

44-
</body>
83+
<vaadin-side-nav-item>
84+
<vaadin-icon src="./assets/lucide-icons/calendar.svg" slot="prefix"></vaadin-icon>
85+
Calendar
86+
</vaadin-side-nav-item>
87+
</vaadin-side-nav>
88+
89+
<vaadin-side-nav collapsible>
90+
<span slot="label">Organization</span>
91+
92+
<vaadin-side-nav-item>
93+
<vaadin-icon src="./assets/lucide-icons/chart-pie.svg" slot="prefix"></vaadin-icon>
94+
Reporting
95+
</vaadin-side-nav-item>
96+
97+
<vaadin-side-nav-item>
98+
<vaadin-icon src="./assets/lucide-icons/list-todo.svg" slot="prefix"></vaadin-icon>
99+
Tasks
100+
</vaadin-side-nav-item>
101+
102+
<vaadin-side-nav-item>
103+
<vaadin-icon src="./assets/lucide-icons/users.svg" slot="prefix"></vaadin-icon>
104+
Users
105+
</vaadin-side-nav-item>
106+
</vaadin-side-nav>
107+
</vaadin-scroller>
108+
109+
<footer slot="drawer" class="aura-view-footer">
110+
<vaadin-button theme="tertiary">
111+
<vaadin-avatar abbr="J" style="--vaadin-avatar-size: 1.25lh" slot="prefix" tabindex="-1"></vaadin-avatar>
112+
<span>John Smith</span>
113+
</vaadin-button>
114+
<vaadin-button theme="tertiary" id="theme-editor-btn">
115+
<vaadin-icon src="./assets/lucide-icons/palette.svg"></vaadin-icon>
116+
</vaadin-button>
117+
</footer>
118+
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>
131+
</vaadin-app-layout>
132+
133+
<vaadin-popover
134+
for="theme-editor-btn"
135+
position="top-start"
136+
width="320px"
137+
style="--aura-base-size: 12; --aura-base-font-size: 13"
138+
theme
139+
>
140+
<vaadin-vertical-layout class="editor" theme="padding" style="gap: var(--vaadin-gap-xl); align-items: stretch">
141+
<h3>Edit Theme</h3>
142+
<vaadin-checkbox label="Use Navbar" id="useNavbar"></vaadin-checkbox>
143+
<aura-scheme-control property="--aura-color-scheme" label="--aura-color-scheme"></aura-scheme-control>
144+
<aura-scheme-control
145+
property="--aura-content-color-scheme"
146+
label="--aura-content-color-scheme"
147+
></aura-scheme-control>
148+
<aura-scheme-control
149+
property="--aura-notification-color-scheme"
150+
label="--aura-notification-color-scheme"
151+
></aura-scheme-control>
152+
<aura-color-control property="--aura-accent-light" label="--aura-accent-light"></aura-color-control>
153+
<aura-color-control property="--aura-background-light" label="--aura-background-light"></aura-color-control>
154+
<aura-color-control property="--aura-accent-dark" label="--aura-accent-dark"></aura-color-control>
155+
<aura-color-control property="--aura-background-dark" label="--aura-background-dark"></aura-color-control>
156+
<aura-number-control property="--aura-contrast" min="0" max="2" step="0.1"></aura-number-control>
157+
<aura-number-control
158+
property="--aura-overlay-surface-opacity"
159+
min="0.5"
160+
max="1"
161+
step="0.01"
162+
></aura-number-control>
163+
<aura-inset-control></aura-inset-control>
164+
<aura-number-control property="--aura-base-radius" min="0" max="8" step="0.5"></aura-number-control>
165+
<aura-number-control property="--aura-base-size" min="12" max="20"></aura-number-control>
166+
<aura-number-control
167+
property="--aura-base-font-size"
168+
label="--aura-base-font-size"
169+
min="12"
170+
max="18"
171+
></aura-number-control>
172+
<aura-font-family-control label="--aura-font-family"></aura-font-family-control>
173+
<hr />
174+
<vaadin-button theme="" id="resetAll">
175+
Reset All
176+
<vaadin-icon icon="lucide:rotate-ccw"></vaadin-icon>
177+
</vaadin-button>
178+
</vaadin-vertical-layout>
179+
</vaadin-popover>
180+
</body>
45181
</html>

‎dev/aura/aura-abstract-control.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
export class AuraControl extends HTMLElement {
2+
constructor() {
3+
super();
4+
5+
this.attachShadow({ mode: 'open' });
6+
7+
const css = new CSSStyleSheet();
8+
css.replaceSync(`
9+
:host {
10+
display: block;
11+
}
12+
13+
.control {
14+
display: grid;
15+
}
16+
17+
label {
18+
color: var(--vaadin-color);
19+
font-weight: var(--aura-font-weight-medium);
20+
}
21+
22+
#reset {
23+
background: transparent;
24+
border: 0;
25+
}
26+
27+
#reset:not(:hover, :focus-visible) {
28+
opacity: 0.6;
29+
}
30+
31+
#reset::before {
32+
content: "";
33+
width: 1lh;
34+
height: 1lh;
35+
mask-image: var(--icon-rotate-ccw);
36+
background: currentColor;
37+
}
38+
`);
39+
this.shadowRoot.adoptedStyleSheets.push(css);
40+
}
41+
}

0 commit comments

Comments
 (0)