Conditional visibility fixes for widgets (openhab#256)

- Move visible computed property to widget-mixin
- Fix bug when visible is undefined but visibleTo is not
- Add conditional visibility evaluation for layout widgets (block, row, col)
- Move sidebar account controls to fixed slot (Hopefully prevents some glitches in iOS Safari.)

Signed-off-by: Yannick Schaus <[email protected]>

Author: ghys

bundles/org.openhab.ui/web/src/components/app.vue

@@ -83,7 +83,7 @@
         </f7-list-item>
       </f7-list>
 
-      <div class="account" v-if="ready">
+      <div slot="fixed" class="account" v-if="ready">
         <div class="display-flex justify-content-center">
           <div class="hint-signin" v-if="!$store.getters.user && !$store.getters.pages.length">
             <em>Sign in as an administrator to access settings<br /><f7-icon f7="arrow_down" size="20"></f7-icon></em>

bundles/org.openhab.ui/web/src/components/widgets/generic-widget-component.vue

@@ -27,21 +27,6 @@ export default {
     ...SystemWidgets,
     ...StandardWidgets,
     ...LayoutWidgets
-  },
-  computed: {
-    visible () {
-      if (this.context.editmode) return true
-      if (this.config.visible === undefined) return true
-      if (this.config.visible === false) return false
-      if (this.config.visibleTo) {
-        const user = this.$store.getters.user
-        if (!user) return false
-        if (user.roles && user.roles.some(r => this.config.visibleTo.indexOf('role:' + r) >= 0)) return true
-        if (this.config.visibleTo.indexOf('user:' + user.name) >= 0) return true
-        return false
-      }
-      return true
-    }
   }
 }
 </script>

bundles/org.openhab.ui/web/src/components/widgets/layout/oh-block.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <hr v-if="context.editmode" />
-    <f7-block class="oh-block" :style="{ 'z-index': 100 - context.parent.component.slots.default.indexOf(context.component) }">
+    <f7-block v-if="visible" class="oh-block" :style="{ 'z-index': 100 - context.parent.component.slots.default.indexOf(context.component) }">
       <f7-block-title v-if="context.component.config.title">{{context.component.config.title}}</f7-block-title>
       <f7-menu v-if="context.editmode" class="configure-layout-menu padding-bottom">
         <f7-menu-item @click="context.editmode.addWidget(context.component, 'oh-grid-row')" icon-f7="plus" text="Add Row" />

bundles/org.openhab.ui/web/src/components/widgets/layout/oh-grid-col.vue

@@ -1,5 +1,5 @@
 <template>
-  <f7-col v-bind="config">
+  <f7-col v-bind="config" v-if="visible">
     <div width="100%">
       <f7-menu v-if="context.editmode" class="configure-layout-menu padding-horizontal">
         <f7-menu-item style="margin-left: auto" icon-f7="rectangle_split_3x1" dropdown>

bundles/org.openhab.ui/web/src/components/widgets/layout/oh-grid-row.vue

@@ -20,7 +20,7 @@
         </f7-menu-item>
       </f7-menu>
     </div>
-    <f7-row no-gap>
+    <f7-row no-gap v-if="visible">
       <oh-grid-col v-for="(component, idx) in context.component.slots.default"
         :key="idx"
         :context="childContext(component)"

bundles/org.openhab.ui/web/src/components/widgets/widget-mixin.js

@@ -52,6 +52,19 @@ export default {
       }
       this.$emit('component-ready', this.context.component)
       return evalConfig
+    },
+    visible () {
+      if (this.context.editmode) return true
+      if (this.config.visible === undefined && this.config.visibleTo === undefined) return true
+      if (this.config.visible === false) return false
+      if (this.config.visibleTo) {
+        const user = this.$store.getters.user
+        if (!user) return false
+        if (user.roles && user.roles.some(r => this.config.visibleTo.indexOf('role:' + r) >= 0)) return true
+        if (this.config.visibleTo.indexOf('user:' + user.name) >= 0) return true
+        return false
+      }
+      return true
     }
   },
   methods: {