Skip to content

Commit 0f061c1

Browse files
jounijouni
authored
chore: aura dev page updates and formatting (#10372)
1 parent 8d46800 commit 0f061c1

File tree

1 file changed

+110
-56
lines changed

1 file changed

+110
-56
lines changed

‎dev/aura.html‎

Lines changed: 110 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -64,18 +64,28 @@
6464
window.location.reload();
6565
});
6666

67-
document.querySelector('#useNavbar').addEventListener('change', (e) => {
67+
const useNavbarToggle = document.querySelector('#useNavbar');
68+
useNavbarToggle.addEventListener('change', (e) => {
69+
useNavbar(e.target.checked);
70+
});
71+
72+
function useNavbar(useNavbar) {
73+
useNavbarToggle.checked = useNavbar;
6874
const drawerToggle = document.querySelector('vaadin-app-layout > header[slot] vaadin-drawer-toggle');
69-
if (e.target.checked) {
75+
if (useNavbar) {
76+
localStorage.setItem('aura-navbar', useNavbar);
7077
document.querySelector('vaadin-app-layout > header[slot]').setAttribute('slot', 'navbar');
7178
document.querySelector('vaadin-app-layout > footer[slot]').setAttribute('slot', 'navbar');
7279
document.querySelector('vaadin-app-layout > header[slot]').prepend(drawerToggle);
7380
} else {
81+
localStorage.removeItem('aura-navbar');
7482
document.querySelector('vaadin-app-layout > header[slot]').setAttribute('slot', 'drawer');
7583
document.querySelector('vaadin-app-layout > footer[slot]').setAttribute('slot', 'drawer');
7684
document.querySelector('vaadin-app-layout > header[slot]').append(drawerToggle);
7785
}
78-
});
86+
}
87+
88+
useNavbar(localStorage.getItem('aura-navbar') !== null);
7989

8090
const generateItems = (count) => {
8191
return Array.from({ length: count }, (_, i) => ({
@@ -222,7 +232,7 @@
222232
root.innerHTML = `<span theme="badge ${badgeColors[model.index % badgeColors.length]}">Status</span>`;
223233
};
224234
grid.querySelector('vaadin-grid-column.avatar').renderer = (root, col, model) => {
225-
root.innerHTML = `<vaadin-avatar name="${model.item.name}"></vaadin-avatar>`;
235+
root.innerHTML = `<vaadin-avatar name="${model.item.name}" color-index="${model.index % 9}"></vaadin-avatar>`;
226236
};
227237
}
228238

@@ -245,18 +255,48 @@
245255
}
246256
},
247257
);
258+
259+
// Fake navigation: prevent navigation, update 'current' item manually
260+
document.querySelectorAll('vaadin-side-nav').forEach((nav) => {
261+
nav.addEventListener('click', (e) => {
262+
const item = e.target.closest('vaadin-side-nav-item');
263+
if (item) {
264+
e.preventDefault();
265+
item
266+
.closest('vaadin-side-nav')
267+
.parentNode.querySelectorAll('vaadin-side-nav-item')
268+
.forEach((item) => item.removeAttribute('current'));
269+
item.setAttribute('current', '');
270+
}
271+
});
272+
});
248273
</script>
249274

250275
<style>
251276
html {
252277
--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>');
253278
}
254279

255-
html, body, vaadin-app-layout {
280+
html,
281+
body,
282+
vaadin-app-layout {
256283
margin: 0;
257284
height: 100%;
258285
}
259286

287+
body {
288+
transition: none !important;
289+
}
290+
291+
vaadin-avatar[theme~='vaadin']::part(icon) {
292+
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><path d="M11.1854 7.48145C11.7551 7.48145 12.2184 7.95693 12.2186 8.54199C12.2186 8.72558 12.1719 8.90779 12.0819 9.06934L8.86023 15.1895C8.8531 15.2033 8.84588 15.2156 8.83875 15.2285C8.69333 15.5564 8.3724 15.7852 7.9989 15.7852C7.62026 15.7851 7.29542 15.55 7.1532 15.2148C7.14827 15.206 7.14334 15.1978 7.13855 15.1885L3.91687 9.06738C3.82776 8.90728 3.78015 8.72555 3.78015 8.54199C3.78037 7.95699 4.24389 7.48154 4.81335 7.48145C5.27105 7.48145 5.58212 7.7112 5.7948 8.20996L7.99988 12.4307L10.2069 8.20508C10.4171 7.71153 10.7278 7.48156 11.1854 7.48145Z" fill="currentColor"/><path d="M15.2108 1C15.6505 1.00007 15.9997 1.36209 15.9999 1.80859V3.14258C15.9999 4.71011 15.2872 5.49403 13.6552 5.49414H10.035C8.95299 5.49419 8.84659 5.95787 8.84656 6.4082C8.84656 6.45438 8.84269 6.49396 8.83777 6.53613C8.81197 6.98687 8.4453 7.34557 7.995 7.3457C7.54459 7.3457 7.17686 6.98894 7.15125 6.53809C7.14633 6.49582 7.14343 6.45432 7.14343 6.4082C7.1434 5.95784 7.03606 5.49414 5.95398 5.49414H2.33484C0.702567 5.49414 -9.57545e-05 4.71022 -0.00012207 3.14258V1.80859C5.05523e-05 1.36204 0.337484 1 0.777222 1C1.21691 1.00006 1.55049 1.36208 1.55066 1.80859V2.25977C1.55078 2.76409 1.89158 3.13184 2.6366 3.13184H6.18542C7.79968 3.13207 7.92422 4.34896 7.97742 4.99316H8.01257C8.06578 4.3489 8.19 3.13184 9.80457 3.13184H13.3534C14.0982 3.13177 14.4157 2.77682 14.4159 2.27246L14.4178 1.80859C14.418 1.36204 14.7711 1 15.2108 1Z" fill="currentColor"/></svg>');
293+
mask-size: 60%;
294+
}
295+
296+
vaadin-avatar[theme~='square'] {
297+
border-radius: var(--vaadin-radius-m);
298+
}
299+
260300
/* TODO re-evaluate MDL API, how to achieve this */
261301
.dashboard-section::part(master) {
262302
flex-basis: 15em;
@@ -300,6 +340,16 @@
300340
<body>
301341
<vaadin-app-layout>
302342
<header slot="drawer" class="aura-view-header">
343+
<vaadin-avatar
344+
theme="vaadin square"
345+
has-color-index
346+
style="
347+
--vaadin-avatar-size: 1.25lh;
348+
--vaadin-avatar-user-color: var(--aura-accent-color);
349+
color: var(--aura-accent-contrast);
350+
margin-inline: var(--vaadin-padding-s);
351+
"
352+
></vaadin-avatar>
303353
<div class="aura-view-heading">Aura</div>
304354
<vaadin-drawer-toggle theme="tertiary permanent"></vaadin-drawer-toggle>
305355
</header>
@@ -311,7 +361,7 @@
311361
<vaadin-side-nav-item path="">
312362
<vaadin-icon src="./assets/lucide-icons/chart-column-big.svg" slot="prefix"></vaadin-icon>
313363
Dashboard
314-
<span theme="badge" slot="suffix" aria-label="(2 new items)">2</span>
364+
<span theme="badge accent" slot="suffix" aria-label="(2 new items)">2</span>
315365
</vaadin-side-nav-item>
316366

317367
<vaadin-side-nav-item>
@@ -355,9 +405,61 @@
355405
<vaadin-avatar abbr="J" style="--vaadin-avatar-size: 1.25lh" slot="prefix" tabindex="-1"></vaadin-avatar>
356406
<span>John Smith</span>
357407
</vaadin-button>
358-
<vaadin-button theme="tertiary" id="theme-editor-btn">
408+
<vaadin-button theme="tertiary" id="theme-editor-btn" aria-label="Edit Theme">
359409
<vaadin-icon src="./assets/lucide-icons/palette.svg"></vaadin-icon>
410+
<vaadin-tooltip slot="tooltip" text="Edit Theme"></vaadin-tooltip>
360411
</vaadin-button>
412+
<vaadin-popover
413+
for="theme-editor-btn"
414+
position="top-start"
415+
width="320px"
416+
style="--aura-base-size: 12; --aura-base-font-size: 13"
417+
theme
418+
>
419+
<vaadin-vertical-layout
420+
class="editor"
421+
theme="padding"
422+
style="gap: var(--vaadin-gap-xl); align-items: stretch"
423+
>
424+
<h3>Edit Theme</h3>
425+
<vaadin-checkbox label="Use Navbar" id="useNavbar"></vaadin-checkbox>
426+
<aura-scheme-control property="--aura-color-scheme" label="--aura-color-scheme"></aura-scheme-control>
427+
<aura-scheme-control
428+
property="--aura-content-color-scheme"
429+
label="--aura-content-color-scheme"
430+
></aura-scheme-control>
431+
<aura-scheme-control
432+
property="--aura-notification-color-scheme"
433+
label="--aura-notification-color-scheme"
434+
></aura-scheme-control>
435+
<aura-color-control property="--aura-accent-light" label="--aura-accent-light"></aura-color-control>
436+
<aura-color-control property="--aura-background-light" label="--aura-background-light"></aura-color-control>
437+
<aura-color-control property="--aura-accent-dark" label="--aura-accent-dark"></aura-color-control>
438+
<aura-color-control property="--aura-background-dark" label="--aura-background-dark"></aura-color-control>
439+
<aura-number-control property="--aura-contrast" min="0" max="2" step="0.1"></aura-number-control>
440+
<aura-number-control
441+
property="--aura-overlay-surface-opacity"
442+
min="0.5"
443+
max="1"
444+
step="0.01"
445+
></aura-number-control>
446+
<aura-inset-control></aura-inset-control>
447+
<aura-number-control property="--aura-base-radius" min="0" max="8" step="0.5"></aura-number-control>
448+
<aura-number-control property="--aura-base-size" min="12" max="20"></aura-number-control>
449+
<aura-number-control
450+
property="--aura-base-font-size"
451+
label="--aura-base-font-size"
452+
min="12"
453+
max="18"
454+
></aura-number-control>
455+
<aura-font-family-control label="--aura-font-family"></aura-font-family-control>
456+
<hr />
457+
<vaadin-button id="resetAll">
458+
<vaadin-icon src="./assets/lucide-icons/rotate-ccw.svg" slot="prefix"></vaadin-icon>
459+
Reset All
460+
</vaadin-button>
461+
</vaadin-vertical-layout>
462+
</vaadin-popover>
361463
</footer>
362464

363465
<vaadin-master-detail-layout master-min-size="14rem" detail-min-size="40rem" class="dashboard-section">
@@ -483,7 +585,7 @@ <h1>Components</h1>
483585
}
484586

485587
.components-view .sizes > div {
486-
background: currentColor;
588+
background: var(--aura-accent-color);
487589
height: 4px;
488590
width: var(--size);
489591
}
@@ -695,53 +797,5 @@ <h6>Heading</h6>
695797
</main>
696798
</vaadin-master-detail-layout>
697799
</vaadin-app-layout>
698-
699-
<vaadin-popover
700-
for="theme-editor-btn"
701-
position="top-start"
702-
width="320px"
703-
style="--aura-base-size: 12; --aura-base-font-size: 13"
704-
theme
705-
>
706-
<vaadin-vertical-layout class="editor" theme="padding" style="gap: var(--vaadin-gap-xl); align-items: stretch">
707-
<h3>Edit Theme</h3>
708-
<vaadin-checkbox label="Use Navbar" id="useNavbar"></vaadin-checkbox>
709-
<aura-scheme-control property="--aura-color-scheme" label="--aura-color-scheme"></aura-scheme-control>
710-
<aura-scheme-control
711-
property="--aura-content-color-scheme"
712-
label="--aura-content-color-scheme"
713-
></aura-scheme-control>
714-
<aura-scheme-control
715-
property="--aura-notification-color-scheme"
716-
label="--aura-notification-color-scheme"
717-
></aura-scheme-control>
718-
<aura-color-control property="--aura-accent-light" label="--aura-accent-light"></aura-color-control>
719-
<aura-color-control property="--aura-background-light" label="--aura-background-light"></aura-color-control>
720-
<aura-color-control property="--aura-accent-dark" label="--aura-accent-dark"></aura-color-control>
721-
<aura-color-control property="--aura-background-dark" label="--aura-background-dark"></aura-color-control>
722-
<aura-number-control property="--aura-contrast" min="0" max="2" step="0.1"></aura-number-control>
723-
<aura-number-control
724-
property="--aura-overlay-surface-opacity"
725-
min="0.5"
726-
max="1"
727-
step="0.01"
728-
></aura-number-control>
729-
<aura-inset-control></aura-inset-control>
730-
<aura-number-control property="--aura-base-radius" min="0" max="8" step="0.5"></aura-number-control>
731-
<aura-number-control property="--aura-base-size" min="12" max="20"></aura-number-control>
732-
<aura-number-control
733-
property="--aura-base-font-size"
734-
label="--aura-base-font-size"
735-
min="12"
736-
max="18"
737-
></aura-number-control>
738-
<aura-font-family-control label="--aura-font-family"></aura-font-family-control>
739-
<hr />
740-
<vaadin-button id="resetAll">
741-
<vaadin-icon src="./assets/lucide-icons/rotate-ccw.svg" slot="prefix"></vaadin-icon>
742-
Reset All
743-
</vaadin-button>
744-
</vaadin-vertical-layout>
745-
</vaadin-popover>
746800
</body>
747801
</html>

0 commit comments

Comments
 (0)