I’ve put together a widget to control my lights, but I’m not convinced this is the best way of achieving my desired layout. Also I have no idea how to get it to scale in the same way as the existing OH widgets, e.g. for an OH widget the gap between the icon and the label on the left changes based on device and orientation. My attempt aligns with an OH widget on my mobile which is my primary use case, but its not aligned when using my desktop.
This is what I want to achieve:
This is my YAML for the above:
uid: WhiteLightListItem
tags: []
props:
parameters:
- description: title to display
label: Title
name: title
required: false
type: TEXT
- context: item
description: An item to control
label: Item
name: item
required: false
type: TEXT
parameterGroups: []
timestamp: Nov 22, 2020, 11:25:52 AM
component: f7-list-item
config:
mediaItem: true
slots:
media:
- component: f7-row
config:
style:
width: inherit
flex-wrap: nowrap
slots:
default:
- component: f7-row
config:
style:
width: inherit
flex-wrap: nowrap
justify-content: flex-start
slots:
default:
- component: oh-icon
config:
icon: slider
height: 32
style:
margin-right: var(--f7-list-item-media-icons-margin)
- component: Label
config:
text: '=(props.title != null ? props.title : props.item.replace("Light", ""))'
style:
margin-top: 5px
margin-left: var(--f7-list-item-media-margin)
- component: f7-row
config:
style:
width: inherit
flex-wrap: nowrap
justify-content: flex-end
slots:
default:
- component: oh-button
config:
fill: true
raised: true
bgColor: '=(items[props.item].state == 0) ? "black" : "white"'
action: popover
actionModal: widget:WhiteLightCard
actionModalConfig:
item: =(props.item)
style:
height: 30px
width: 30px
- component: oh-toggle
config:
item: =(props.item)
style:
margin-left: 15px
margin-right: 1px
footer:
- component: f7-row
config:
style:
width: inherit
flex-wrap: nowrap
justify-content: center
slots:
default:
- component: oh-slider
config:
item: =(props.item)
style:
width: 60%
This is an example of how the label doesn’t align with an OH widget:
- Is there a better way of defining the YAML to achieve my layout?
- Is there a way of getting my widget to scale the same as the OH widgets?