Skip to content

Commit 7347ab7

Browse files
jounijouni
authored
chore: add dashboard example view to aura dev page (#10586)
1 parent dd299ea commit 7347ab7

File tree

13 files changed

+1312
-776
lines changed

13 files changed

+1312
-776
lines changed

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

Lines changed: 6 additions & 0 deletions
Loading

‎dev/assets/lucide-icons/layout-panel-left.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎dev/assets/lucide-icons/paint-brush.svg‎

Lines changed: 8 additions & 0 deletions
Loading

‎dev/assets/lucide-icons/user-plus.svg‎

Lines changed: 7 additions & 0 deletions
Loading

‎dev/aura.html‎

Lines changed: 78 additions & 770 deletions
Large diffs are not rendered by default.

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export class AuraControl extends HTMLElement {
88
css.replaceSync(`
99
:host {
1010
display: block;
11+
--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>');
1112
}
1213
1314
.control {

‎dev/aura/aura-extras.css‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
html {
2+
height: 100dvh;
3+
--aura-accent-color-light: var(--aura-blue);
4+
--aura-accent-color-dark: var(--aura-blue);
5+
--vaadin-user-color: var(--aura-accent-color);
6+
/* TODO how to use a different surface level in dark mode? */
7+
}
8+
9+
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-side-nav, vaadin-tabs):not([theme~='accent']) {
10+
--aura-accent-color-light: var(--aura-neutral-light);
11+
--aura-accent-color-dark: var(--aura-neutral-dark);
12+
}
13+
14+
body {
15+
margin: 0;
16+
height: 100%;
17+
transition: none !important;
18+
}
19+
20+
[theme~='small'] {
21+
--aura-base-size: 14;
22+
--aura-base-font-size: 13;
23+
}
24+
25+
vaadin-avatar[theme~='vaadin']::part(icon) {
26+
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>');
27+
mask-size: 60%;
28+
}
29+
30+
vaadin-avatar[theme~='square'] {
31+
border-radius: var(--vaadin-radius-m);
32+
}
33+
34+
hr {
35+
place-self: stretch;
36+
margin: var(--vaadin-gap-m) 0;
37+
border: 0;
38+
background: var(--vaadin-border-color-secondary);
39+
min-height: 1px;
40+
max-height: 1px;
41+
}
42+
43+
/* TODO re-evaluate MDL API, how to achieve this */
44+
/* .dashboard-section::part(master) {
45+
flex-basis: 15em;
46+
flex-grow: 0.1;
47+
}
48+
49+
.dashboard-section::part(detail) {
50+
flex-basis: 85em;
51+
flex-grow: 2;
52+
} */
53+
54+
/* Considering these as built-in variants, but perhaps they should be another component like https://github.com/vaadin/web-components/issues/7958 */
55+
vaadin-card[theme~='no-frame'] {
56+
--vaadin-card-padding: 0px;
57+
--vaadin-card-background: transparent;
58+
}
59+
60+
vaadin-card[theme~='footer-end'] {
61+
--_footer: 0;
62+
grid-template-rows: repeat(var(--_content), auto) 1fr;
63+
}
64+
65+
vaadin-card[theme~='footer-end']::part(footer) {
66+
grid-column: -1;
67+
grid-row: 1 / span calc(var(--_header) + var(--_content));
68+
align-self: center;
69+
flex-direction: column;
70+
}

‎dev/aura/aura-theme-editor.js‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import './aura-color-control.js';
2+
import './aura-font-family-control.js';
3+
import './aura-inset-control.js';
4+
import './aura-number-control.js';
5+
import './aura-scheme-control.js';
6+
7+
function clearLocalStorage() {
8+
for (let i = localStorage.length - 1; i >= 0; i--) {
9+
const key = localStorage.key(i);
10+
if (/^aura/u.test(key)) {
11+
localStorage.removeItem(key);
12+
}
13+
}
14+
}
15+
16+
function useNavbar(useNavbar) {
17+
const drawerToggle = document.querySelector('vaadin-app-layout > header[slot] vaadin-drawer-toggle');
18+
if (useNavbar) {
19+
localStorage.setItem('aura-navbar', useNavbar);
20+
document.querySelector('vaadin-app-layout > header[slot]').setAttribute('slot', 'navbar');
21+
document.querySelector('vaadin-app-layout > footer[slot]').setAttribute('slot', 'navbar');
22+
document.querySelector('vaadin-app-layout > header[slot]').prepend(drawerToggle);
23+
} else {
24+
localStorage.removeItem('aura-navbar');
25+
document.querySelector('vaadin-app-layout > header[slot]').setAttribute('slot', 'drawer');
26+
document.querySelector('vaadin-app-layout > footer[slot]').setAttribute('slot', 'drawer');
27+
document.querySelector('vaadin-app-layout > header[slot]').append(drawerToggle);
28+
}
29+
}
30+
31+
useNavbar(localStorage.getItem('aura-navbar') !== null);
32+
33+
customElements.define(
34+
'aura-theme-editor',
35+
class extends HTMLElement {
36+
connectedCallback() {
37+
this.innerHTML = `
38+
<vaadin-button theme="tertiary" id="theme-editor-btn" aria-label="Edit Theme" class="aura-accent-color">
39+
<vaadin-icon src="./assets/lucide-icons/paint-brush.svg"></vaadin-icon>
40+
<vaadin-tooltip slot="tooltip" text="Edit Theme"></vaadin-tooltip>
41+
</vaadin-button>
42+
<vaadin-popover for="theme-editor-btn" position="top-start" width="320px" theme="small">
43+
<vaadin-vertical-layout
44+
class="editor"
45+
theme="padding"
46+
style="gap: var(--vaadin-gap-xl); align-items: stretch"
47+
>
48+
<h3>Edit Theme</h3>
49+
<vaadin-checkbox label="Use Navbar" id="useNavbar"></vaadin-checkbox>
50+
<aura-scheme-control property="color-scheme" label="color-scheme"></aura-scheme-control>
51+
<aura-scheme-control
52+
property="--aura-content-color-scheme"
53+
label="--aura-content-color-scheme"
54+
></aura-scheme-control>
55+
<aura-scheme-control
56+
property="--aura-notification-color-scheme"
57+
label="--aura-notification-color-scheme"
58+
></aura-scheme-control>
59+
<aura-color-control
60+
property="--aura-accent-color-light"
61+
label="--aura-accent-color-light"
62+
></aura-color-control>
63+
<aura-color-control
64+
property="--aura-background-color-light"
65+
label="--aura-background-color-light"
66+
></aura-color-control>
67+
<aura-color-control
68+
property="--aura-accent-color-dark"
69+
label="--aura-accent-color-dark"
70+
></aura-color-control>
71+
<aura-color-control
72+
property="--aura-background-color-dark"
73+
label="--aura-background-color-dark"
74+
></aura-color-control>
75+
<aura-number-control property="--aura-contrast-level" min="0" max="2" step="0.1"></aura-number-control>
76+
<aura-number-control property="--aura-surface-level" min="-2" max="2" step="0.1"></aura-number-control>
77+
<aura-number-control
78+
property="--aura-overlay-surface-opacity"
79+
min="0.5"
80+
max="1"
81+
step="0.01"
82+
></aura-number-control>
83+
<aura-inset-control></aura-inset-control>
84+
<aura-number-control property="--aura-base-radius" min="0" max="8" step="0.5"></aura-number-control>
85+
<aura-number-control property="--aura-base-size" min="12" max="20"></aura-number-control>
86+
<aura-number-control
87+
property="--aura-base-font-size"
88+
label="--aura-base-font-size"
89+
min="12"
90+
max="18"
91+
></aura-number-control>
92+
<aura-font-family-control label="--aura-font-family"></aura-font-family-control>
93+
<hr />
94+
<vaadin-button id="resetAll">
95+
<vaadin-icon src="./assets/lucide-icons/rotate-ccw.svg" slot="prefix"></vaadin-icon>
96+
Reset All
97+
</vaadin-button>
98+
</vaadin-vertical-layout>
99+
</vaadin-popover>
100+
`;
101+
102+
this.querySelector('#resetAll').addEventListener('click', () => {
103+
clearLocalStorage();
104+
window.location.reload();
105+
});
106+
107+
const useNavbarToggle = this.querySelector('#useNavbar');
108+
useNavbarToggle.addEventListener('change', (e) => {
109+
useNavbar(e.target.checked);
110+
});
111+
112+
useNavbarToggle.checked = localStorage.getItem('aura-navbar') !== null;
113+
}
114+
},
115+
);

‎dev/aura/aura-view.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
flex: 1;
1212
}
1313

14-
.aura-view > vaadin-scroller {
14+
.aura-view > * {
1515
--vaadin-scroller-padding-inline: var(--vaadin-padding-m);
1616
}
1717

@@ -28,13 +28,14 @@
2828
padding: var(--vaadin-padding-m);
2929
display: flex;
3030
align-items: center;
31+
gap: var(--vaadin-gap-xs);
3132
}
3233

3334
.aura-view > header,
3435
.aura-view-header,
3536
.aura-view[slot='navbar'] > footer,
3637
.aura-view-footer[slot='navbar'] {
37-
padding-top: max(var(--vaadin-padding-s), var(--safe-area-inset-top));
38+
padding-top: max(var(--vaadin-padding-m), var(--safe-area-inset-top));
3839
}
3940

4041
.aura-view[slot='navbar'] > :is(header, footer),

‎dev/aura/badge.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,3 +55,11 @@ vaadin-side-nav[theme~='filled'] > vaadin-side-nav-item[current],
5555
border-radius: 50%;
5656
background: currentColor;
5757
}
58+
59+
.aura-badge:empty {
60+
padding: 0;
61+
width: 5px;
62+
height: 5px;
63+
position: absolute;
64+
inset-inline-end: 5px;
65+
}

0 commit comments

Comments
 (0)