Enable dynamic icons only for some icon types in default list widget (#1874)
Follow-up for #1849. -- Signed-off-by: Florian Hotze <florianh_dev@icloud.com>pull/1883/head
parent
a548e0d1f6
commit
b3a4318567
|
@ -56,7 +56,7 @@ Display a color picker in a list
|
|||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="iconUseState" label="Icon depends on state">
|
||||
<PropDescription>
|
||||
Use the state of the Item to get a dynamic icon (enabled by default for all Item types except <code>Call</code>, <code>Image</code> & <code>Location</code>) (for openHAB icons only)
|
||||
Use the state of the Item to get a dynamic icon (enabled by default for <code>Contact</code>, <code>Dimmer</code>, <code>Rollershutter</code> & <code>Switch</code> Item types) (for openHAB icons only)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
|
|
|
@ -56,7 +56,7 @@ Display an input field in a list
|
|||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="iconUseState" label="Icon depends on state">
|
||||
<PropDescription>
|
||||
Use the state of the Item to get a dynamic icon (enabled by default for all Item types except <code>Call</code>, <code>Image</code> & <code>Location</code>) (for openHAB icons only)
|
||||
Use the state of the Item to get a dynamic icon (enabled by default for <code>Contact</code>, <code>Dimmer</code>, <code>Rollershutter</code> & <code>Switch</code> Item types) (for openHAB icons only)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
|
|
|
@ -421,7 +421,7 @@ Display the state of an item in a card
|
|||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="iconUseState" label="Icon depends on state">
|
||||
<PropDescription>
|
||||
Use the state of the Item to get a dynamic icon (enabled by default for all Item types except <code>Call</code>, <code>Image</code> & <code>Location</code>) (for openHAB icons only)
|
||||
Use the state of the Item to get a dynamic icon (enabled by default for <code>Contact</code>, <code>Dimmer</code>, <code>Rollershutter</code> & <code>Switch</code> Item types) (for openHAB icons only)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="vertical" label="Vertical arrangement">
|
||||
|
|
|
@ -67,7 +67,7 @@ Display the state of an item in a list
|
|||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="iconUseState" label="Icon depends on state">
|
||||
<PropDescription>
|
||||
Use the state of the Item to get a dynamic icon (enabled by default for all Item types except <code>Call</code>, <code>Image</code> & <code>Location</code>) (for openHAB icons only)
|
||||
Use the state of the Item to get a dynamic icon (enabled by default for <code>Contact</code>, <code>Dimmer</code>, <code>Rollershutter</code> & <code>Switch</code> Item types) (for openHAB icons only)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
|
|
|
@ -56,7 +56,7 @@ A list item
|
|||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="iconUseState" label="Icon depends on state">
|
||||
<PropDescription>
|
||||
Use the state of the Item to get a dynamic icon (enabled by default for all Item types except <code>Call</code>, <code>Image</code> & <code>Location</code>) (for openHAB icons only)
|
||||
Use the state of the Item to get a dynamic icon (enabled by default for <code>Contact</code>, <code>Dimmer</code>, <code>Rollershutter</code> & <code>Switch</code> Item types) (for openHAB icons only)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
|
|
|
@ -62,7 +62,7 @@ A marker on a floor plan
|
|||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="iconUseState" label="Icon depends on state">
|
||||
<PropDescription>
|
||||
Use the state of the Item to get a dynamic icon (enabled by default for all Item types except <code>Call</code>, <code>Image</code> & <code>Location</code>) (for openHAB icons only)
|
||||
Use the state of the Item to get a dynamic icon (enabled by default for <code>Contact</code>, <code>Dimmer</code>, <code>Rollershutter</code> & <code>Switch</code> Item types) (for openHAB icons only)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
<PropBlock type="INTEGER" name="iconSize" label="Icon Size">
|
||||
|
|
|
@ -56,7 +56,7 @@ Display player controls in a list
|
|||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="iconUseState" label="Icon depends on state">
|
||||
<PropDescription>
|
||||
Use the state of the Item to get a dynamic icon (enabled by default for all Item types except <code>Call</code>, <code>Image</code> & <code>Location</code>) (for openHAB icons only)
|
||||
Use the state of the Item to get a dynamic icon (enabled by default for <code>Contact</code>, <code>Dimmer</code>, <code>Rollershutter</code> & <code>Switch</code> Item types) (for openHAB icons only)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
|
|
|
@ -56,7 +56,7 @@ Display rollershutter controls in a list
|
|||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="iconUseState" label="Icon depends on state">
|
||||
<PropDescription>
|
||||
Use the state of the Item to get a dynamic icon (enabled by default for all Item types except <code>Call</code>, <code>Image</code> & <code>Location</code>) (for openHAB icons only)
|
||||
Use the state of the Item to get a dynamic icon (enabled by default for <code>Contact</code>, <code>Dimmer</code>, <code>Rollershutter</code> & <code>Switch</code> Item types) (for openHAB icons only)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
|
|
|
@ -56,7 +56,7 @@ Display a slider control in a list
|
|||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="iconUseState" label="Icon depends on state">
|
||||
<PropDescription>
|
||||
Use the state of the Item to get a dynamic icon (enabled by default for all Item types except <code>Call</code>, <code>Image</code> & <code>Location</code>) (for openHAB icons only)
|
||||
Use the state of the Item to get a dynamic icon (enabled by default for <code>Contact</code>, <code>Dimmer</code>, <code>Rollershutter</code> & <code>Switch</code> Item types) (for openHAB icons only)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
|
|
|
@ -56,7 +56,7 @@ Display a stepper control in a list
|
|||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="iconUseState" label="Icon depends on state">
|
||||
<PropDescription>
|
||||
Use the state of the Item to get a dynamic icon (enabled by default for all Item types except <code>Call</code>, <code>Image</code> & <code>Location</code>) (for openHAB icons only)
|
||||
Use the state of the Item to get a dynamic icon (enabled by default for <code>Contact</code>, <code>Dimmer</code>, <code>Rollershutter</code> & <code>Switch</code> Item types) (for openHAB icons only)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
|
|
|
@ -56,7 +56,7 @@ Display a toggle switch in a list
|
|||
</PropBlock>
|
||||
<PropBlock type="BOOLEAN" name="iconUseState" label="Icon depends on state">
|
||||
<PropDescription>
|
||||
Use the state of the Item to get a dynamic icon (enabled by default for all Item types except <code>Call</code>, <code>Image</code> & <code>Location</code>) (for openHAB icons only)
|
||||
Use the state of the Item to get a dynamic icon (enabled by default for <code>Contact</code>, <code>Dimmer</code>, <code>Rollershutter</code> & <code>Switch</code> Item types) (for openHAB icons only)
|
||||
</PropDescription>
|
||||
</PropBlock>
|
||||
</PropGroup>
|
||||
|
|
|
@ -34,7 +34,7 @@ export const OhPlanMarkerDefinition = () => new WidgetDefinition('oh-plan-marker
|
|||
])
|
||||
.paramGroup(pg('icon', 'Icon', 'You can customize the styles further with CSS attributes in the <code>iconStyle</code> parameter (in YAML only)'), [
|
||||
pt('icon', 'Icon', 'Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>), <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>) or <code>iconify:iconSet:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://icon-sets.iconify.design">Iconify icon</a>, requires being online if not in cache)'),
|
||||
pb('iconUseState', 'Icon depends on state', 'Use the state of the Item to get a dynamic icon (enabled by default for all Item types except <code>Call</code>, <code>Image</code> & <code>Location</code>) (for openHAB icons only)').a(),
|
||||
pb('iconUseState', 'Icon depends on state', 'Use the state of the Item to get a dynamic icon (enabled by default for <code>Contact</code>, <code>Dimmer</code>, <code>Rollershutter</code> & <code>Switch</code> Item types) (for openHAB icons only)'),
|
||||
pn('iconSize', 'Icon Size', 'Size of the icon in pixels (40 by default)'),
|
||||
pn('iconWidth', 'Icon Width', 'Width of the icon in pixels (for openHAB icons only, 40 by default)').a(),
|
||||
pn('iconHeight', 'Icon Height', 'Height of the icon in pixels (for openHAB icons only, 40 by default)').a(),
|
||||
|
|
|
@ -28,7 +28,7 @@ export const OhLabelCardDefinition = () => new WidgetDefinition('oh-label-card',
|
|||
pt('icon', 'Icon', 'Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>), <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>) or <code>iconify:iconSet:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://icon-sets.iconify.design">Iconify icon</a>, requires being online if not in cache)'),
|
||||
pt('iconColor', 'Icon Color', 'Not applicable to openHAB icons').a(),
|
||||
pn('iconSize', 'Icon Size', 'Size of the icon in px').a(),
|
||||
pb('iconUseState', 'Icon depends on state', 'Use the state of the Item to get a dynamic icon (enabled by default for all Item types except <code>Call</code>, <code>Image</code> & <code>Location</code>) (for openHAB icons only)').a(),
|
||||
pb('iconUseState', 'Icon depends on state', 'Use the state of the Item to get a dynamic icon (enabled by default for <code>Contact</code>, <code>Dimmer</code>, <code>Rollershutter</code> & <code>Switch</code> Item types) (for openHAB icons only)'),
|
||||
pb('vertical', 'Vertical arrangement', 'Display label below icon')
|
||||
])
|
||||
.paramGroup(pg('trend', 'Trend Line', 'Show a trend line in the background'), TrendParameters())
|
||||
|
|
|
@ -11,7 +11,7 @@ export const ListItemParameters = () => [
|
|||
pt('after', 'After', 'Text to display on the opposite side of the item (set either this or a badge)').a(),
|
||||
pt('icon', 'Icon', 'Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>), <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>) or <code>iconify:iconSet:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://icon-sets.iconify.design">Iconify icon</a>, requires being online if not in cache)'),
|
||||
pt('iconColor', 'Icon Color', 'Not applicable to openHAB icons').a(),
|
||||
pb('iconUseState', 'Icon depends on state', 'Use the state of the Item to get a dynamic icon (enabled by default for all Item types except <code>Call</code>, <code>Image</code> & <code>Location</code>) (for openHAB icons only)').a()
|
||||
pb('iconUseState', 'Icon depends on state', 'Use the state of the Item to get a dynamic icon (enabled by default for <code>Contact</code>, <code>Dimmer</code>, <code>Rollershutter</code> & <code>Switch</code> Item types) (for openHAB icons only)')
|
||||
]
|
||||
|
||||
// OhListItem
|
||||
|
|
|
@ -166,7 +166,9 @@ export default function itemDefaultListComponent (item, footer) {
|
|||
if (!component.config.item) component.config.item = item.name
|
||||
if (!component.config.title) component.config.title = item.label || item.name
|
||||
if (item.category && !component.config.icon) component.config.icon = item.category
|
||||
if (item.category && component.config.iconUseState === undefined && !['Call', 'Image', 'Location'].includes(item.type)) component.config.iconUseState = true
|
||||
// Only enable dynamic icon by default for Item types with good support for dynamic icons and "predictable" states
|
||||
const discreteItemTypes = ['Contact', 'Dimmer', 'Rollershutter', 'Switch']
|
||||
if (item.category && component.config.iconUseState === undefined && (discreteItemTypes.includes(item.type) || (item.type === 'Group' && discreteItemTypes.includes(item.groupType)))) component.config.iconUseState = true
|
||||
if (item.label && footer && footer.contextLabelSource) {
|
||||
let text = itemContextLabel(item, footer)
|
||||
if (text) component.config.footer = text
|
||||
|
|
Loading…
Reference in New Issue