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
Florian Hotze 2023-05-07 15:22:46 +02:00 committed by GitHub
parent a548e0d1f6
commit b3a4318567
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 17 additions and 15 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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">

View File

@ -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>

View File

@ -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>

View File

@ -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">

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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(),

View File

@ -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())

View File

@ -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

View File

@ -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