From 7ed2b3ed198067282baf18c0a2ba9c7ec366b6dc Mon Sep 17 00:00:00 2001 From: rolfsmeds Date: Thu, 10 Apr 2025 21:08:39 +0300 Subject: [PATCH 1/5] Updated Dashboard Styling page with variants and more properties --- articles/components/dashboard/styling.adoc | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/articles/components/dashboard/styling.adoc b/articles/components/dashboard/styling.adoc index 9141899950..e4e117f4e1 100644 --- a/articles/components/dashboard/styling.adoc +++ b/articles/components/dashboard/styling.adoc @@ -5,6 +5,18 @@ order: 50 --- = Styling +== Style Variants + +The following style variants can be applied to the Dashboard to change its appearance: + +[cols="2, 2, 3"] +|=== +| Flow `DashboardVariant` | `theme` attribute | Description + +| `LUMO_SHADED_BACKGROUND` | `shaded-background` | Applies shading to the dashboard background. + +| `LUMO_ELEVATED_WIDGET` | `elevated-widgets` | Makes the widgets appear elevated above the dashboard surface. + include::../_styling-section-theming-props.adoc[tag=style-properties] @@ -64,6 +76,10 @@ include::../_styling-section-theming-props.adoc[tag=style-properties] |`--vaadin-dashboard-widget-selected-shadow` |`0 2px 4px -1px var(--lumo-primary-color-10pct), 0 3px 12px -1px var(--lumo-primary-color-50pct);` +|Widget content padding +|`vaadin-dashboard-widget-padding` +|`0px` + |Drop target / resize box background color |`--vaadin-dashboard-drop-target-background-color` |`--lumo-primary-color-10pct` From a6ca2c744ed931fd7dc47f080e0c4ce67ac3a3d5 Mon Sep 17 00:00:00 2001 From: rolfsmeds Date: Mon, 14 Apr 2025 11:11:02 +0300 Subject: [PATCH 2/5] Added dynamic variants sampler --- articles/components/dashboard/styling.adoc | 9 +++ .../component/dashboard/dashboard-variants.ts | 69 +++++++++++++++++++ 2 files changed, 78 insertions(+) create mode 100644 frontend/demo/component/dashboard/dashboard-variants.ts diff --git a/articles/components/dashboard/styling.adoc b/articles/components/dashboard/styling.adoc index e4e117f4e1..8148f9a3a5 100644 --- a/articles/components/dashboard/styling.adoc +++ b/articles/components/dashboard/styling.adoc @@ -16,6 +16,15 @@ The following style variants can be applied to the Dashboard to change its appea | `LUMO_SHADED_BACKGROUND` | `shaded-background` | Applies shading to the dashboard background. | `LUMO_ELEVATED_WIDGET` | `elevated-widgets` | Makes the widgets appear elevated above the dashboard surface. +|=== + +[.example.render-only.embedded] +-- +[source,html] +---- +include::{root}/frontend/demo/component/dashboard/dashboard-variants.ts[render,persistent] +---- +-- include::../_styling-section-theming-props.adoc[tag=style-properties] diff --git a/frontend/demo/component/dashboard/dashboard-variants.ts b/frontend/demo/component/dashboard/dashboard-variants.ts new file mode 100644 index 0000000000..e2cbef650d --- /dev/null +++ b/frontend/demo/component/dashboard/dashboard-variants.ts @@ -0,0 +1,69 @@ +import 'Frontend/demo/init'; // hidden-source-line +import '@vaadin/dashboard/vaadin-dashboard.js'; // hidden-source-line +import '@vaadin/dashboard/vaadin-dashboard-layout.js'; +import '@vaadin/dashboard/vaadin-dashboard-widget.js'; +import '@vaadin/select'; +import '@vaadin/checkbox'; +import { html, LitElement } from 'lit'; +import { customElement, state } from 'lit/decorators.js'; +import { applyTheme } from 'Frontend/generated/theme'; +import { SelectChangeEvent } from '@vaadin/select'; +import { CheckboxChangeEvent } from '@vaadin/checkbox'; + +@customElement('dashboard-variants') +export class Example extends LitElement { + protected override createRenderRoot() { + const root = super.createRenderRoot(); + // Apply custom theme (only supported if your app uses one) + applyTheme(root); + return root; + } + + @state() + items = [ + { label: 'Outlined (default)', value: ' ' }, + { label: 'Flat', value: 'flat-widgets' }, + { label: 'Elevated', value: 'elevated-widgets' }, + ]; + + @state() + widgetVariant: string = ' '; + + @state() + shadedBoard: string = ''; + + onWidgetVariantChange(event: SelectChangeEvent) { + this.widgetVariant = event.target.value; + } + + onShadedBgChange(event: CheckboxChangeEvent) { + this.shadedBoard = event.target.checked ? 'shaded-background' : ''; + } + + render() { + return html` +
+ + +
+ + + + + + + + + `; + } +} From 8409069a0895f4fbfc2e5753860a57a1a63229c3 Mon Sep 17 00:00:00 2001 From: rolfsmeds Date: Tue, 15 Apr 2025 20:02:27 +0300 Subject: [PATCH 3/5] Updated style reference --- articles/components/dashboard/styling.adoc | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/articles/components/dashboard/styling.adoc b/articles/components/dashboard/styling.adoc index 8148f9a3a5..4dd20f5099 100644 --- a/articles/components/dashboard/styling.adoc +++ b/articles/components/dashboard/styling.adoc @@ -15,7 +15,11 @@ The following style variants can be applied to the Dashboard to change its appea | `LUMO_SHADED_BACKGROUND` | `shaded-background` | Applies shading to the dashboard background. -| `LUMO_ELEVATED_WIDGET` | `elevated-widgets` | Makes the widgets appear elevated above the dashboard surface. +| `LUMO_ELEVATED_WIDGETS` | `elevated-widgets` | Makes the widgets appear elevated above the dashboard surface. + +| `LUMO_FLAT_WIDGETS` | `flat-widgets` | A flat, borderless widget style. + +| `LUMO_WIDGET_TITLE_WRAP` | `widget-title-wrap` | Allows widget titles to wrap to multiple lines. |=== [.example.render-only.embedded] @@ -89,6 +93,10 @@ include::../_styling-section-theming-props.adoc[tag=style-properties] |`vaadin-dashboard-widget-padding` |`0px` +|Widget title wrapping +|`--vaadin-dashboard-widget-title-wrap` +|`wrap` + |Drop target / resize box background color |`--vaadin-dashboard-drop-target-background-color` |`--lumo-primary-color-10pct` From aa2aa52211b80bfeff4e4fbf4962bd2ebf57b0bb Mon Sep 17 00:00:00 2001 From: rolfsmeds Date: Tue, 15 Apr 2025 20:16:36 +0300 Subject: [PATCH 4/5] Removed widget wrap variant --- articles/components/dashboard/styling.adoc | 1 - 1 file changed, 1 deletion(-) diff --git a/articles/components/dashboard/styling.adoc b/articles/components/dashboard/styling.adoc index 4dd20f5099..c5ff9f8885 100644 --- a/articles/components/dashboard/styling.adoc +++ b/articles/components/dashboard/styling.adoc @@ -19,7 +19,6 @@ The following style variants can be applied to the Dashboard to change its appea | `LUMO_FLAT_WIDGETS` | `flat-widgets` | A flat, borderless widget style. -| `LUMO_WIDGET_TITLE_WRAP` | `widget-title-wrap` | Allows widget titles to wrap to multiple lines. |=== [.example.render-only.embedded] From 173d33eb95194d5c22a416f5f294afe1aaf1827d Mon Sep 17 00:00:00 2001 From: rolfsmeds Date: Wed, 7 May 2025 16:53:08 +0300 Subject: [PATCH 5/5] Updated Dashboard rowspan, colspan property names and removed ditched shadow style properties from Styling tab. --- articles/components/dashboard/styling.adoc | 8 -------- frontend/demo/component/dashboard/dashboard-basic.ts | 4 ++-- .../demo/component/dashboard/dashboard-dense-layout.ts | 4 ++-- frontend/demo/component/dashboard/dashboard-sections.ts | 4 ++-- .../demo/component/dashboard/react/dashboard-basic.tsx | 4 ++-- .../demo/component/dashboard/react/dashboard-sections.tsx | 4 ++-- 6 files changed, 10 insertions(+), 18 deletions(-) diff --git a/articles/components/dashboard/styling.adoc b/articles/components/dashboard/styling.adoc index c5ff9f8885..d4c8d26a91 100644 --- a/articles/components/dashboard/styling.adoc +++ b/articles/components/dashboard/styling.adoc @@ -80,14 +80,6 @@ include::../_styling-section-theming-props.adoc[tag=style-properties] |`--vaadin-dashboard-widget-shadow` |`0 0 0 0 transparent` -|Editable widget shadow -|`--vaadin-dashboard-widget-editable-shadow` -|`--lumo-box-shadow-s` - -|Selected widget shadow -|`--vaadin-dashboard-widget-selected-shadow` -|`0 2px 4px -1px var(--lumo-primary-color-10pct), 0 3px 12px -1px var(--lumo-primary-color-50pct);` - |Widget content padding |`vaadin-dashboard-widget-padding` |`0px` diff --git a/frontend/demo/component/dashboard/dashboard-basic.ts b/frontend/demo/component/dashboard/dashboard-basic.ts index e81f1596e7..4dd7e04daf 100644 --- a/frontend/demo/component/dashboard/dashboard-basic.ts +++ b/frontend/demo/component/dashboard/dashboard-basic.ts @@ -32,7 +32,7 @@ export class Example extends LitElement {
@@ -44,7 +44,7 @@ export class Example extends LitElement {
diff --git a/frontend/demo/component/dashboard/dashboard-dense-layout.ts b/frontend/demo/component/dashboard/dashboard-dense-layout.ts index d47b0856ec..b867201de5 100644 --- a/frontend/demo/component/dashboard/dashboard-dense-layout.ts +++ b/frontend/demo/component/dashboard/dashboard-dense-layout.ts @@ -33,13 +33,13 @@ export class Example extends LitElement { >
diff --git a/frontend/demo/component/dashboard/dashboard-sections.ts b/frontend/demo/component/dashboard/dashboard-sections.ts index 7ea3e123f7..9dd9c0824a 100644 --- a/frontend/demo/component/dashboard/dashboard-sections.ts +++ b/frontend/demo/component/dashboard/dashboard-sections.ts @@ -38,7 +38,7 @@ export class Example extends LitElement {
@@ -50,7 +50,7 @@ export class Example extends LitElement {
diff --git a/frontend/demo/component/dashboard/react/dashboard-basic.tsx b/frontend/demo/component/dashboard/react/dashboard-basic.tsx index 388449fbf2..347f624c1e 100644 --- a/frontend/demo/component/dashboard/react/dashboard-basic.tsx +++ b/frontend/demo/component/dashboard/react/dashboard-basic.tsx @@ -22,7 +22,7 @@ function Example() {
@@ -34,7 +34,7 @@ function Example() {
diff --git a/frontend/demo/component/dashboard/react/dashboard-sections.tsx b/frontend/demo/component/dashboard/react/dashboard-sections.tsx index d4a8ac621f..d80d8661aa 100644 --- a/frontend/demo/component/dashboard/react/dashboard-sections.tsx +++ b/frontend/demo/component/dashboard/react/dashboard-sections.tsx @@ -27,7 +27,7 @@ function Example() {
@@ -39,7 +39,7 @@ function Example() {