Fix icons not displayed & not dynamic on all pages (#1849)

Fixes #1839. Fixes #574. Closes #1860. * Fixes Item icon styling on the Item detail page. * Add support for openHAB iconsets. * Fix `oh:` icons not properly displayed in `default-list-item.vue`. * Refactor `oh-icon` config & style binding. * Enable real-time state on the semantic model page. * Enable state for the channel link edit page. * Enable dynamic icons in the settings where missing and possible (semantic model page, channel link edit page, Item edit page when setting category, Items list page). * Enable dynamic icons in the default list widget for most Items except some and update the docs accordingly. * Add a refresh button to the Item list page. -- Signed-off-by: Florian Hotze <[email protected]>
openhab · May 2, 2023 · 095bb2f · 095bb2f
1 parent 79fbc79
commit 095bb2f
Show file tree

Hide file tree

Showing 29 changed files with 88 additions and 58 deletions.
diff --git a/bundles/org.openhab.ui/doc/components/oh-colorpicker-item.md b/bundles/org.openhab.ui/doc/components/oh-colorpicker-item.md
@@ -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 (for openHAB icons only)
+    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)
   </PropDescription>
 </PropBlock>
 </PropGroup>

diff --git a/bundles/org.openhab.ui/doc/components/oh-input-item.md b/bundles/org.openhab.ui/doc/components/oh-input-item.md
@@ -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 (for openHAB icons only)
+    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)
   </PropDescription>
 </PropBlock>
 </PropGroup>

diff --git a/bundles/org.openhab.ui/doc/components/oh-label-card.md b/bundles/org.openhab.ui/doc/components/oh-label-card.md
@@ -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 (for openHAB icons only)
+    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)
   </PropDescription>
 </PropBlock>
 <PropBlock type="BOOLEAN" name="vertical" label="Vertical arrangement">

diff --git a/bundles/org.openhab.ui/doc/components/oh-label-item.md b/bundles/org.openhab.ui/doc/components/oh-label-item.md
@@ -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 (for openHAB icons only)
+    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)
   </PropDescription>
 </PropBlock>
 </PropGroup>

diff --git a/bundles/org.openhab.ui/doc/components/oh-list-item.md b/bundles/org.openhab.ui/doc/components/oh-list-item.md
@@ -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 (for openHAB icons only)
+    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)
   </PropDescription>
 </PropBlock>
 </PropGroup>

diff --git a/bundles/org.openhab.ui/doc/components/oh-plan-marker.md b/bundles/org.openhab.ui/doc/components/oh-plan-marker.md
@@ -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 (for openHAB icons only)
+    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)
   </PropDescription>
 </PropBlock>
 <PropBlock type="INTEGER" name="iconSize" label="Icon Size">

diff --git a/bundles/org.openhab.ui/doc/components/oh-player-item.md b/bundles/org.openhab.ui/doc/components/oh-player-item.md
@@ -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 (for openHAB icons only)
+    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)
   </PropDescription>
 </PropBlock>
 </PropGroup>

diff --git a/bundles/org.openhab.ui/doc/components/oh-rollershutter-item.md b/bundles/org.openhab.ui/doc/components/oh-rollershutter-item.md
@@ -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 (for openHAB icons only)
+    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)
   </PropDescription>
 </PropBlock>
 </PropGroup>

diff --git a/bundles/org.openhab.ui/doc/components/oh-slider-item.md b/bundles/org.openhab.ui/doc/components/oh-slider-item.md
@@ -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 (for openHAB icons only)
+    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)
   </PropDescription>
 </PropBlock>
 </PropGroup>

diff --git a/bundles/org.openhab.ui/doc/components/oh-stepper-item.md b/bundles/org.openhab.ui/doc/components/oh-stepper-item.md
@@ -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 (for openHAB icons only)
+    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)
   </PropDescription>
 </PropBlock>
 </PropGroup>

diff --git a/bundles/org.openhab.ui/doc/components/oh-toggle-item.md b/bundles/org.openhab.ui/doc/components/oh-toggle-item.md
@@ -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 (for openHAB icons only)
+    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)
   </PropDescription>
 </PropBlock>
 </PropGroup>

diff --git a/bundles/org.openhab.ui/web/src/assets/definitions/widgets/plan/index.js b/bundles/org.openhab.ui/web/src/assets/definitions/widgets/plan/index.js
@@ -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 (for openHAB icons only)'),
+    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(),
     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(),

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
@@ -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 (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 all Item types except <code>Call</code>, <code>Image</code> & <code>Location</code>) (for openHAB icons only)').a(),
     pb('vertical', 'Vertical arrangement', 'Display label below icon')
   ])
   .paramGroup(pg('trend', 'Trend Line', 'Show a trend line in the background'), TrendParameters())

diff --git a/bundles/org.openhab.ui/web/src/assets/definitions/widgets/standard/listitems.js b/bundles/org.openhab.ui/web/src/assets/definitions/widgets/standard/listitems.js
@@ -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 (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 all Item types except <code>Call</code>, <code>Image</code> & <code>Location</code>) (for openHAB icons only)').a()
 ]
 
 // OhListItem

diff --git a/bundles/org.openhab.ui/web/src/components/item/item-form.vue b/bundles/org.openhab.ui/web/src/components/item/item-form.vue
@@ -2,9 +2,9 @@
   <div v-if="item" class="quick-link-form no-padding">
     <f7-list inline-labels no-hairlines-md>
       <f7-list-input label="Name" type="text" placeholder="Required" :value="item.name"
-                     :disabled="!enableName" :info="(enableName) ? 'Note: cannot be changed after the creation' : ''"
+                     :disabled="!createMode" :info="(createMode) ? 'Note: cannot be changed after the creation' : ''"
                      required :error-message="nameErrorMessage" :error-message-force="!!nameErrorMessage"
-                     @input="onNameInput" :clear-button="enableName" />
+                     @input="onNameInput" :clear-button="createMode" />
       <f7-list-input label="Label" type="text" placeholder="Label" :value="item.label"
                      @input="item.label = $event.target.value" clear-button />
       <f7-list-item v-if="item.type && !hideType" title="Type" type="text" smart-select :smart-select-params="{searchbar: true, openIn: 'popup', closeOnSelect: true}">
@@ -24,7 +24,7 @@
       <f7-list-input v-if="!hideCategory" ref="category" label="Category" autocomplete="off" type="text" placeholder="temperature, firstfloor..." :value="item.category"
                      @input="item.category = $event.target.value" clear-button>
         <div slot="root-end" style="margin-left: calc(35% + 8px)">
-          <oh-icon :icon="item.category" height="32" width="32" />
+          <oh-icon :icon="item.category" :state="(createMode) ? null : item.state" height="32" width="32" />
         </div>
       </f7-list-input>
     </f7-list>
@@ -46,7 +46,7 @@ import * as Types from '@/assets/item-types.js'
 import { Categories } from '@/assets/categories.js'
 
 export default {
-  props: ['item', 'items', 'enableName', 'hideCategory', 'hideType', 'hideSemantics', 'forceSemantics'],
+  props: ['item', 'items', 'createMode', 'hideCategory', 'hideType', 'hideSemantics', 'forceSemantics'],
   components: {
     SemanticsPicker
   },
@@ -91,7 +91,7 @@ export default {
   mounted () {
     if (!this.item) return
     if (!this.item.category) this.$set(this.item, 'category', '')
-    if (this.enableName) {
+    if (this.createMode) {
       if (!this.items) this.items = []
       this.validateName(this.item.name)
     }

diff --git a/bundles/org.openhab.ui/web/src/components/item/item.vue b/bundles/org.openhab.ui/web/src/components/item/item.vue
@@ -8,7 +8,7 @@
     :subtitle="getItemTypeAndMetaLabel(item)"
     :after="state"
     v-on="$listeners">
-    <oh-icon v-if="!noIcon && item.category" slot="media" :icon="item.category" height="32" width="32" />
+    <oh-icon v-if="!noIcon && item.category" slot="media" :icon="item.category" :state="(noState) ? null : (context && context.store) ? context.store[item.name].state : item.state" height="32" width="32" />
     <span v-else-if="!noIcon" slot="media" class="item-initial">{{ item.name[0] }}</span>
     <f7-icon v-if="!item.editable && !ignoreEditable" slot="after-title" f7="lock_fill" size="1rem" color="gray" />
     <slot name="footer" #footer />

diff --git a/bundles/org.openhab.ui/web/src/components/model/details-pane.vue b/bundles/org.openhab.ui/web/src/components/model/details-pane.vue
@@ -3,7 +3,7 @@
     <item-state-preview v-if="model.item.created !== false" :item="model.item" :context="context" :key="$utils.id()" />
 
     <f7-block-title>Item</f7-block-title>
-    <item-details :model="model" :links="links" :items="items" @item-updated="$emit('item-updated')" @item-created="$emit('item-created')" @item-removed="$emit('item-removed')" @cancel-create="$emit('cancel-create')" />
+    <item-details :model="model" :links="links" :items="items" :context="context" @item-updated="$emit('item-updated')" @item-created="$emit('item-created')" @item-removed="$emit('item-removed')" @cancel-create="$emit('cancel-create')" />
     <f7-block-title v-if="model.item.created !== false">
       Metadata
     </f7-block-title>

diff --git a/bundles/org.openhab.ui/web/src/components/model/item-details.vue b/bundles/org.openhab.ui/web/src/components/model/item-details.vue
@@ -3,7 +3,7 @@
     <f7-card-content>
       <f7-list media-list accordion-list>
         <ul>
-          <item v-if="!createMode" :item="model.item" :link="'/settings/items/' + model.item.name" :no-state="true" />
+          <item v-if="!createMode" :item="model.item" :link="'/settings/items/' + model.item.name" :context="context" />
           <!-- <f7-list-button v-if="!editMode && !createMode" color="blue" title="Edit Item" @click="editMode = true">Edit Item</f7-list-button> -->
         </ul>
       </f7-list>
@@ -12,7 +12,7 @@
         <item-form :item="editedItem" :hide-type="true" :force-semantics="forceSemantics" />
       </div>
       <div class="padding-top" v-else-if="createMode">
-        <item-form :item="editedItem" :items="items" :enable-name="true" :force-semantics="forceSemantics" />
+        <item-form :item="editedItem" :items="items" :createMode="true" :force-semantics="forceSemantics" />
       </div>
     </f7-card-content>
     <f7-card-footer v-if="createMode || editMode" key="item-card-buttons">
@@ -42,7 +42,7 @@ import Item from '@/components/item/item.vue'
 import ItemForm from '@/components/item/item-form.vue'
 
 export default {
-  props: ['model', 'links', 'items'],
+  props: ['model', 'links', 'items', 'context'],
   components: {
     Item,
     ItemForm

diff --git a/bundles/org.openhab.ui/web/src/components/thing/channel-link.vue b/bundles/org.openhab.ui/web/src/components/thing/channel-link.vue
@@ -34,7 +34,7 @@
         :footer="(link.item.label) ? link.item.name : '\xa0'"
         :subtitle="getItemTypeAndMetaLabel(link.item)"
         :after="context.store[link.item.name] ? context.store[link.item.name].displayState || context.store[link.item.name].state : link.item.state">
-        <oh-icon v-if="link.item.category" slot="media" :icon="link.item.category" height="32" width="32" />
+        <oh-icon v-if="link.item.category" slot="media" :icon="link.item.category" :state="context.store[link.item.name] ? context.store[link.item.name].state : link.item.state" height="32" width="32" />
         <span v-else slot="media" class="item-initial">{{ link.item.name[0] }}</span>
         <f7-icon v-if="!link.item.editable" slot="after-title" f7="lock_fill" size="1rem" color="gray" />
         <!-- <f7-button slot="after-start" color="blue" icon-f7="compose" icon-size="24px" :link="`${item.name}/edit`"></f7-button> -->

diff --git a/bundles/org.openhab.ui/web/src/components/thing/channel-list.vue b/bundles/org.openhab.ui/web/src/components/thing/channel-list.vue
@@ -48,7 +48,7 @@
                               @channel-updated="(e) => $emit('channels-updated', e)" />
               </template>
               <template #default="{ channel }" v-else-if="multipleLinksMode">
-                <item-form v-if="isChecked(channel)" :item="newItem(channel)" :items="items" :enable-name="true" :channel="channel" :checked="isChecked(channel)" />
+                <item-form v-if="isChecked(channel)" :item="newItem(channel)" :items="items" :createMode="true" :channel="channel" :checked="isChecked(channel)" />
               </template>
               <!-- <channel-link #default="{ channelId }" /> -->
             </channel-group>

diff --git a/bundles/org.openhab.ui/web/src/components/widgets/standard/list/default-list-item.js b/bundles/org.openhab.ui/web/src/components/widgets/standard/list/default-list-item.js
@@ -165,8 +165,8 @@ 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 = 'oh:' + item.category
-  if (item.category && ['Switch', 'Rollershutter', 'Contact', 'Dimmer', 'Group'].indexOf(item.type) >= 0) component.config.iconUseState = true
+  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
   if (item.label && footer && footer.contextLabelSource) {
     let text = itemContextLabel(item, footer)
     if (text) component.config.footer = text