Things list: Add dynamic blue dot to status badges if status detail is set (#4069)

Resolves #4063

This allows a dynamic information badge ("blue dot") to be applied to Thing
in the list page in order to mark when the Thing has a special status.
For example "low battery" or "firmware update available".
 
---------

Also-by: Florian Hotze <dev@florianhotze.com>
Signed-off-by: Andrew Fiddian-Green <software@whitebear.ch>

Author: andrewfg

bundles/org.openhab.ui/web/src/pages/settings/things/things-list.vue

@@ -174,9 +174,15 @@
                 </div>
               </template>
               <template #after>
-                <f7-badge :color="thingStatusBadgeColor(thing.statusInfo)" :tooltip="thing.statusInfo.description">
-                  {{ thingStatusBadgeText(thing.statusInfo) }}
-                </f7-badge>
+                <div class="badge-with-marker">
+                  <f7-badge :color="thingStatusBadgeColor(thing.statusInfo)" :tooltip="thing.statusInfo.description || null">
+                    {{ thingStatusBadgeText(thing.statusInfo) }}
+                  </f7-badge>
+                  <span
+                    v-if="thing.statusInfo.status === 'ONLINE' && thing.statusInfo.description && thing.statusInfo.description !== ''"
+                    class="badge-marker-dot">
+                  </span>
+                </div>
               </template>
               <template #after-title>
                 <f7-icon v-if="!thing.editable" f7="lock_fill" size="1rem" color="gray" />
@@ -215,6 +221,19 @@
 <style lang="stylus">
 .things-list
   margin-bottom calc(var(--f7-fab-size) + 2 * calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom)))
+  .badge-with-marker
+    position relative
+    display inline-block
+  .badge-marker-dot
+    position absolute
+    top -4px
+    right -4px
+    width 10px
+    height 10px
+    background-color var(--f7-color-blue)
+    border 1px solid var(--f7-list-bg-color)
+    border-radius 50%
+    pointer-events none
 </style>
 
 <script>