From dcbc549245f6c0a024d74cc40e11d8a5ad4ab7d5 Mon Sep 17 00:00:00 2001 From: Florian Hotze Date: Tue, 1 Oct 2024 17:45:35 +0200 Subject: [PATCH] Refactor card widgets to use a shared base component (#2781) Supersedes #1801. Implements the proposal from https://github.com/openhab/openhab-webui/pull/1801#issuecomment-1475172733. ----- Signed-off-by: Florian Hotze --- .../doc/components/images/oh-card/example.png | Bin 0 -> 4710 bytes .../org.openhab.ui/doc/components/index.md | 1 + .../doc/components/oh-canvas-layout.md | 2 +- .../org.openhab.ui/doc/components/oh-card.md | 505 ++++++++++++++++++ .../doc/components/oh-slider-card.md | 2 +- .../doc/components/oh-slider-cell.md | 2 +- .../doc/components/oh-slider-item.md | 2 +- .../doc/components/oh-slider.md | 2 +- .../src/assets/definitions/widgets/helpers.js | 6 +- .../definitions/widgets/layout/index.js | 2 +- .../definitions/widgets/standard/cards.js | 6 + .../definitions/widgets/system/slider.js | 2 +- .../widgets/generic-widget-component.vue | 6 + .../src/components/widgets/standard/index.js | 1 + .../components/widgets/standard/oh-card.vue | 37 ++ .../widgets/standard/oh-clock-card.vue | 18 +- .../widgets/standard/oh-colorpicker-card.vue | 21 +- .../widgets/standard/oh-gauge-card.vue | 35 +- .../widgets/standard/oh-image-card.vue | 32 +- .../widgets/standard/oh-input-card.vue | 21 +- .../widgets/standard/oh-knob-card.vue | 21 +- .../widgets/standard/oh-label-card.vue | 49 +- .../widgets/standard/oh-list-card.vue | 23 +- .../widgets/standard/oh-player-card.vue | 30 +- .../standard/oh-rollershutter-card.vue | 41 +- .../widgets/standard/oh-sipclient-card.vue | 18 +- .../widgets/standard/oh-slider-card.vue | 18 +- .../widgets/standard/oh-stepper-card.vue | 18 +- .../widgets/standard/oh-swiper-card.vue | 23 +- .../widgets/standard/oh-toggle-card.vue | 18 +- .../widgets/standard/oh-video-card.vue | 18 +- .../widgets/standard/oh-webframe-card.vue | 18 +- .../widgets/system/oh-card-footer.vue | 16 - .../settings/pages/layout/layout-edit.vue | 2 +- 34 files changed, 726 insertions(+), 290 deletions(-) create mode 100644 bundles/org.openhab.ui/doc/components/images/oh-card/example.png create mode 100644 bundles/org.openhab.ui/doc/components/oh-card.md create mode 100644 bundles/org.openhab.ui/web/src/components/widgets/standard/oh-card.vue delete mode 100644 bundles/org.openhab.ui/web/src/components/widgets/system/oh-card-footer.vue diff --git a/bundles/org.openhab.ui/doc/components/images/oh-card/example.png b/bundles/org.openhab.ui/doc/components/images/oh-card/example.png new file mode 100644 index 0000000000000000000000000000000000000000..9c46a7a5e46e37613bc313b59a324e377bd5cc76 GIT binary patch literal 4710 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 literal 0 HcmV?d00001 diff --git a/bundles/org.openhab.ui/doc/components/index.md b/bundles/org.openhab.ui/doc/components/index.md index eb173f1646..97e689de07 100644 --- a/bundles/org.openhab.ui/doc/components/index.md +++ b/bundles/org.openhab.ui/doc/components/index.md @@ -39,6 +39,7 @@ source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.u | Component | Name | Description | |--------|------|-------------| +| [`oh-card`](./oh-card.html) | [Card](./oh-card.html) | The basic structure of all card widgets, providing title and footer and requiring a content slot | | [`oh-clock-card`](./oh-clock-card.html) | [Digital Clock Card](./oh-clock-card.html) | Display a digital clock in a card | | [`oh-colorpicker-card`](./oh-colorpicker-card.html) | [Color Picker Card](./oh-colorpicker-card.html) | Display a color picker in a card | | [`oh-gauge-card`](./oh-gauge-card.html) | [Gauge Card](./oh-gauge-card.html) | Display a read-only gauge in a card to visualize a quantifiable item | diff --git a/bundles/org.openhab.ui/doc/components/oh-canvas-layout.md b/bundles/org.openhab.ui/doc/components/oh-canvas-layout.md index 3004550d60..048e63ca38 100644 --- a/bundles/org.openhab.ui/doc/components/oh-canvas-layout.md +++ b/bundles/org.openhab.ui/doc/components/oh-canvas-layout.md @@ -46,7 +46,7 @@ Position widgets on a canvas layout with arbitrary position and size down to pix - Screen width in pixels (default 720) + Screen height in pixels (default 720) diff --git a/bundles/org.openhab.ui/doc/components/oh-card.md b/bundles/org.openhab.ui/doc/components/oh-card.md new file mode 100644 index 0000000000..346ed8d4a4 --- /dev/null +++ b/bundles/org.openhab.ui/doc/components/oh-card.md @@ -0,0 +1,505 @@ +--- +title: oh-card - Card +component: oh-card +label: Card +description: The basic structure of all card widgets, providing title and footer and requiring a content slot +source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-card.md +prev: /docs/ui/components/ +--- + +# oh-card - Card + + + +[[toc]] + +The `oh-card` component provides the basic structure for all other card widgets. +It is providing a default implementation for both title and footer, and requires the content to be defined in the `content` slot. +Optionally, header and footer can be overwritten by providing the `header` and `footer` slots (see [Slots](#slots)). +`oh-card` also provides full control over its style as well as header, content and footer style (see [Style](#style)). + +## Configuration + + + +### Card +
+ + Parameters of the card + + + Title of the card + + + + + Footer of the card + + + + + Do not render the card border + + + + + Do not render a shadow effect to the card + + + + + Show the card outline + + + +
+ +### Action +
+ + Action to perform when the element is clicked + + + Type of action to perform + + + + + + + + + + + + + + + + + + + + + URL to navigate to or to send HTTP request to + + + + + Open the URL in the same tab/window instead of a new one. This will exit the app. + + + + + HTTP method to use for the request + + + + + + + + + + + Body to send with the request + + + + + Item to perform the action on + + + + + Command to send to the Item. If "Toogle Item" is selected as the action, only send the command when the state is different + + + + + Command to send to the Item when "Toggle Item" is selected as the action, and the Item's state is equal to the command above + + + + + Comma-separated list of options; if omitted, retrieve the command options from the Item dynamically. Use value=label format to provide a label different than the option. + + + + + Scene, Script or Rule to run + + + + + Object representing the optional context to pass. Edit in YAML or provide a JSON object, e.g. { "param1": "value1", "param2": { "subkey1": "testing", "subkey2": 123 } }. + + + + + Page to navigate to + + + + + Use a specific page transition animation + + + + + + + + + + + + + + + Page or widget to display in the modal + + + + + Configuration (prop values) for the target modal page or widget + + + + + Array of URLs or objects representing the images. Auto-refresh is not supported.
Edit in YAML, e.g.
- item: ImageItem1
  caption: Camera
or provide a JSON array, e.g.
[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]
Objects are in the photos array format with an additional item property to specify an item to view. + + + + + Configuration for the photo browser.
Edit in YAML or provide a JSON object, e.g.
{ "exposition": false, "type": "popup", "theme": "dark" }
See photo browser parameters (not all are supported). + + + + + Group Item whose members to show in a popup + + + + + Start analyzing with the specified (set of) Item(s) + + + + + The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year + + + + + + + + + + + + The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods) + + + + + + + + + + Shows a dialog or sheet to ask for confirmation before the action is executed. Can either be a text to show in the dialog or a JSON object { type: "dialog", title: "Confirm", text: "Are you sure?" } or { type: "sheet", text: "Confirm", color: "green" } + + + + + Shows a toast popup when the action has been executed. Can either be a text to show or a JSON object including some of the supported parameters + + + + + The variable name to set + + + + + The value to set the variable to + + + + + Consider the variable value is an object and set the corresponding deep property within that object using a key syntax. Examples: user.name, user[0].address[1].street, [0], [0].label. The inner property and its parent hierarchy will be created if missing. + + + +
+ +### Tap Hold +
+ + Action performed when tapping and holding card (or calling contextual menu on desktop) + + + Type of action to perform + + + + + + + + + + + + + + + + + + + + + URL to navigate to or to send HTTP request to + + + + + Open the URL in the same tab/window instead of a new one. This will exit the app. + + + + + HTTP method to use for the request + + + + + + + + + + + Body to send with the request + + + + + Item to perform the action on + + + + + Command to send to the Item. If "Toogle Item" is selected as the action, only send the command when the state is different + + + + + Command to send to the Item when "Toggle Item" is selected as the action, and the Item's state is equal to the command above + + + + + Comma-separated list of options; if omitted, retrieve the command options from the Item dynamically. Use value=label format to provide a label different than the option. + + + + + Scene, Script or Rule to run + + + + + Object representing the optional context to pass. Edit in YAML or provide a JSON object, e.g. { "param1": "value1", "param2": { "subkey1": "testing", "subkey2": 123 } }. + + + + + Page to navigate to + + + + + Use a specific page transition animation + + + + + + + + + + + + + + + Page or widget to display in the modal + + + + + Configuration (prop values) for the target modal page or widget + + + + + Array of URLs or objects representing the images. Auto-refresh is not supported.
Edit in YAML, e.g.
- item: ImageItem1
  caption: Camera
or provide a JSON array, e.g.
[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]
Objects are in the photos array format with an additional item property to specify an item to view. + + + + + Configuration for the photo browser.
Edit in YAML or provide a JSON object, e.g.
{ "exposition": false, "type": "popup", "theme": "dark" }
See photo browser parameters (not all are supported). + + + + + Group Item whose members to show in a popup + + + + + Start analyzing with the specified (set of) Item(s) + + + + + The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year + + + + + + + + + + + + The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods) + + + + + + + + + + Shows a dialog or sheet to ask for confirmation before the action is executed. Can either be a text to show in the dialog or a JSON object { type: "dialog", title: "Confirm", text: "Are you sure?" } or { type: "sheet", text: "Confirm", color: "green" } + + + + + Shows a toast popup when the action has been executed. Can either be a text to show or a JSON object including some of the supported parameters + + + + + The variable name to set + + + + + The value to set the variable to + + + + + Consider the variable value is an object and set the corresponding deep property within that object using a key syntax. Examples: user.name, user[0].address[1].street, [0], [0].label. The inner property and its parent hierarchy will be created if missing. + + + +
+ + + + +## Slots + +You need to define either one of these two slots: + +- `content`: The default slot for content, which will then be rendered inside a `f7-card-content` element. +- `content-root`: The slot for content that should be rendered directly inside the card, without any additional wrapping element. + +Optionally, you can define these slots: + +- `header`: The slot for the header content, which will replace the default header. +- `footer`: The slot for the footer content, which will replace the default footer. + +## Style + +`oh-card` provides full control over the style of itself as well as the header, content and footer. + +The card itself can be styled through the `style` and `class` config properties, +while the header, content and footer can be styled through the `headerStyle`, `headerClass`, `contentStyle`, `contentClass`, `footerStyle` and `footerClass` properties. + +## Example + +![](./images/oh-card/example.png) + +This card can be created using the following YAML definition: + +```yaml +component: oh-card +config: + title: Title + footer: Footer + style: {} # Card style + class: [] # Card classes + headerStyle: {} # Header style + headerClass: [] # Header classes + contentStyle: {} # Content style + contentClass: [] # Content classes + footerStyle: {} # Footer style + footerClass: [] # Footer classes +slots: + content: + - component: oh-button + config: + text: Content +``` + +Without using the `oh-card` component, the same card can be created by directly using the Framework7 components: + +```yaml +component: f7-card +config: + style: {} # Card style + class: [] # Card classes +slots: + default: + - component: f7-card-header + config: + style: {} # Header style + class: [] # Header classes + slots: + default: + - component: Label + config: + text: Title + - component: f7-card-content + config: + style: {} # Content style + class: [] # Content classes + slots: + default: + - component: oh-button + config: + text: Content + - component: f7-card-footer + config: + style: {} # Footer style + class: [] # Footer classes + slots: + default: + - component: Label + config: + text: Footer +``` diff --git a/bundles/org.openhab.ui/doc/components/oh-slider-card.md b/bundles/org.openhab.ui/doc/components/oh-slider-card.md index 47a0fbe1b5..e1952c8939 100644 --- a/bundles/org.openhab.ui/doc/components/oh-slider-card.md +++ b/bundles/org.openhab.ui/doc/components/oh-slider-card.md @@ -80,7 +80,7 @@ Display a slider in a card to control an item Minimum interval between values - + Display the slider vertically diff --git a/bundles/org.openhab.ui/doc/components/oh-slider-cell.md b/bundles/org.openhab.ui/doc/components/oh-slider-cell.md index c69e8679a3..971db952df 100644 --- a/bundles/org.openhab.ui/doc/components/oh-slider-cell.md +++ b/bundles/org.openhab.ui/doc/components/oh-slider-cell.md @@ -90,7 +90,7 @@ A cell expanding to a big vertical slider Minimum interval between values - + Display the slider vertically diff --git a/bundles/org.openhab.ui/doc/components/oh-slider-item.md b/bundles/org.openhab.ui/doc/components/oh-slider-item.md index d0222f5ab6..b48146db2e 100644 --- a/bundles/org.openhab.ui/doc/components/oh-slider-item.md +++ b/bundles/org.openhab.ui/doc/components/oh-slider-item.md @@ -85,7 +85,7 @@ Display a slider control in a list Minimum interval between values - + Display the slider vertically diff --git a/bundles/org.openhab.ui/doc/components/oh-slider.md b/bundles/org.openhab.ui/doc/components/oh-slider.md index 8fc83b0945..dfe27c1344 100644 --- a/bundles/org.openhab.ui/doc/components/oh-slider.md +++ b/bundles/org.openhab.ui/doc/components/oh-slider.md @@ -48,7 +48,7 @@ Slider control, allows to pick a number value on a scale Minimum interval between values - + Display the slider vertically diff --git a/bundles/org.openhab.ui/web/src/assets/definitions/widgets/helpers.js b/bundles/org.openhab.ui/web/src/assets/definitions/widgets/helpers.js index be57bc8bb0..06924ada67 100644 --- a/bundles/org.openhab.ui/web/src/assets/definitions/widgets/helpers.js +++ b/bundles/org.openhab.ui/web/src/assets/definitions/widgets/helpers.js @@ -159,13 +159,15 @@ export function pt (name, label, description) { * @param {string} name the name of the widget (in kebab case) * @param {string} label the untranslated (English) name of the widget * @param {string} description the untranslated (English) description of the widget - * @param {string} icon an optional icon to illustrate the widget, used for map/plan markers + * @param {string} [icon] an optional icon to illustrate the widget, used for map/plan markers + * @param {boolean} [hidden=false] whether the widget is hidden and should not be shown in the widget picker */ -export function WidgetDefinition (name, label, description, icon) { +export function WidgetDefinition (name, label, description, icon, hidden = false) { this.name = name this.label = label this.description = description if (icon) this.icon = icon + this.hidden = hidden this.props = { parameterGroups: [], parameters: [] diff --git a/bundles/org.openhab.ui/web/src/assets/definitions/widgets/layout/index.js b/bundles/org.openhab.ui/web/src/assets/definitions/widgets/layout/index.js index dc64d58227..2130baf434 100644 --- a/bundles/org.openhab.ui/web/src/assets/definitions/widgets/layout/index.js +++ b/bundles/org.openhab.ui/web/src/assets/definitions/widgets/layout/index.js @@ -85,7 +85,7 @@ export function OhCanvasLayoutDefinition () { ]) .paramGroup(pg('screenSettings', 'Screen Settings'), [ pn('screenWidth', 'Screen Width', 'Screen width in pixels (default 1280)'), - pn('screenHeight', 'Screen Height', 'Screen width in pixels (default 720)'), + pn('screenHeight', 'Screen Height', 'Screen height in pixels (default 720)'), pb('scale', 'Scaling', 'Scale content to screen width (can lead to unexpected styling issues) (default false)'), pt('imageUrl', 'Image URL', 'The URL of the image to display as background').c('url'), pt('imageSrcSet', 'Image Source Set', 'The src-set attribute of background image element to take into account multiple device resolutions. For example: "/static/floorplans/floor-0.jpg, /static/floorplans/floor-0@2x.jpg 2x"') diff --git a/bundles/org.openhab.ui/web/src/assets/definitions/widgets/standard/cards.js b/bundles/org.openhab.ui/web/src/assets/definitions/widgets/standard/cards.js index 4f5238c432..7e10acb772 100644 --- a/bundles/org.openhab.ui/web/src/assets/definitions/widgets/standard/cards.js +++ b/bundles/org.openhab.ui/web/src/assets/definitions/widgets/standard/cards.js @@ -13,6 +13,12 @@ export const CardParameters = () => [ pb('outline', 'Outline', 'Show the card outline').a() ] +// OhCard +export const OhCardDefinition = () => new WidgetDefinition('oh-card', 'Card', 'The basic structure of all card widgets, providing title and footer and requiring a content slot', undefined, true) + .paramGroup(CardParameterGroup(), CardParameters()) + .paramGroup(actionGroup(), actionParams()) + .paramGroup(actionGroup('Tap Hold', 'Action performed when tapping and holding card (or calling contextual menu on desktop)', 'taphold'), actionParams(null, 'taphold'), true) + // OhLabelCard import TrendParameters from '../system/trend.js' export const OhLabelCardDefinition = () => new WidgetDefinition('oh-label-card', 'Label Card', 'Display the state of an item in a card') diff --git a/bundles/org.openhab.ui/web/src/assets/definitions/widgets/system/slider.js b/bundles/org.openhab.ui/web/src/assets/definitions/widgets/system/slider.js index 255bd835b7..ec17c3734c 100644 --- a/bundles/org.openhab.ui/web/src/assets/definitions/widgets/system/slider.js +++ b/bundles/org.openhab.ui/web/src/assets/definitions/widgets/system/slider.js @@ -5,7 +5,7 @@ export default () => [ pd('min', 'Min', 'Minimum value'), pd('max', 'Max', 'Maximum value'), pd('step', 'Step', 'Minimum interval between values'), - pd('vertical', 'Vertical', 'Display the slider vertically'), + pb('vertical', 'Vertical', 'Display the slider vertically'), pb('label', 'Display Label', 'Display a label above the slider knob while sliding'), pb('scale', 'Display Scale', 'Display a scale on the slider'), pn('scaleSteps', 'Scale steps', 'Number of (major) scale markers'), diff --git a/bundles/org.openhab.ui/web/src/components/widgets/generic-widget-component.vue b/bundles/org.openhab.ui/web/src/components/widgets/generic-widget-component.vue index 6192a89f4e..50f285fe8f 100644 --- a/bundles/org.openhab.ui/web/src/components/widgets/generic-widget-component.vue +++ b/bundles/org.openhab.ui/web/src/components/widgets/generic-widget-component.vue @@ -8,6 +8,12 @@ + + + +
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/standard/index.js b/bundles/org.openhab.ui/web/src/components/widgets/standard/index.js index 43ce05dd31..ede46d18a9 100644 --- a/bundles/org.openhab.ui/web/src/components/widgets/standard/index.js +++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/index.js @@ -1,5 +1,6 @@ /* Add any new widget to this file - the name of the export should be "OhSomething" */ +export { default as OhCard } from './oh-card.vue' export { default as OhEquipmentCard } from './oh-equipment-card.vue' export { default as OhLabelCard } from './oh-label-card.vue' export { default as OhToggleCard } from './oh-toggle-card.vue' diff --git a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-card.vue b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-card.vue new file mode 100644 index 0000000000..5d79452198 --- /dev/null +++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-card.vue @@ -0,0 +1,37 @@ + + + diff --git a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-clock-card.vue b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-clock-card.vue index 4a22722eff..0d50942391 100644 --- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-clock-card.vue +++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-clock-card.vue @@ -1,9 +1,6 @@ diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue index 8d4501a06f..45e871e9e8 100644 --- a/bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue +++ b/bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue @@ -230,7 +230,7 @@ export default { this.$nextTick(() => actions.destroy()) } const stdWidgets = (isList) ? StandardListWidgets : (isCells) ? StandardCellWidgets : StandardWidgets - const standardWidgetOptions = Object.keys(stdWidgets).map((k) => { + const standardWidgetOptions = Object.keys(stdWidgets).filter((k) => !stdWidgets[k].widget().hidden).map((k) => { return { text: stdWidgets[k].widget().label, color: 'blue',