Skip to content

Commit 344fd6c

Browse files
authored
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]>
1 parent f50d480 commit 344fd6c

File tree

6 files changed

+17
-19
lines changed

6 files changed

+17
-19
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
</f7-list-item>
8484
</f7-list>
8585

86-
<div class="account" v-if="ready">
86+
<div slot="fixed" class="account" v-if="ready">
8787
<div class="display-flex justify-content-center">
8888
<div class="hint-signin" v-if="!$store.getters.user && !$store.getters.pages.length">
8989
<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

-15
Original file line numberDiff line numberDiff line change
@@ -27,21 +27,6 @@ export default {
2727
...SystemWidgets,
2828
...StandardWidgets,
2929
...LayoutWidgets
30-
},
31-
computed: {
32-
visible () {
33-
if (this.context.editmode) return true
34-
if (this.config.visible === undefined) return true
35-
if (this.config.visible === false) return false
36-
if (this.config.visibleTo) {
37-
const user = this.$store.getters.user
38-
if (!user) return false
39-
if (user.roles && user.roles.some(r => this.config.visibleTo.indexOf('role:' + r) >= 0)) return true
40-
if (this.config.visibleTo.indexOf('user:' + user.name) >= 0) return true
41-
return false
42-
}
43-
return true
44-
}
4530
}
4631
}
4732
</script>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div>
33
<hr v-if="context.editmode" />
4-
<f7-block class="oh-block" :style="{ 'z-index': 100 - context.parent.component.slots.default.indexOf(context.component) }">
4+
<f7-block v-if="visible" class="oh-block" :style="{ 'z-index': 100 - context.parent.component.slots.default.indexOf(context.component) }">
55
<f7-block-title v-if="context.component.config.title">{{context.component.config.title}}</f7-block-title>
66
<f7-menu v-if="context.editmode" class="configure-layout-menu padding-bottom">
77
<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-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<f7-col v-bind="config">
2+
<f7-col v-bind="config" v-if="visible">
33
<div width="100%">
44
<f7-menu v-if="context.editmode" class="configure-layout-menu padding-horizontal">
55
<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

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
</f7-menu-item>
2121
</f7-menu>
2222
</div>
23-
<f7-row no-gap>
23+
<f7-row no-gap v-if="visible">
2424
<oh-grid-col v-for="(component, idx) in context.component.slots.default"
2525
:key="idx"
2626
:context="childContext(component)"

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

+13
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,19 @@ export default {
5252
}
5353
this.$emit('component-ready', this.context.component)
5454
return evalConfig
55+
},
56+
visible () {
57+
if (this.context.editmode) return true
58+
if (this.config.visible === undefined && this.config.visibleTo === undefined) return true
59+
if (this.config.visible === false) return false
60+
if (this.config.visibleTo) {
61+
const user = this.$store.getters.user
62+
if (!user) return false
63+
if (user.roles && user.roles.some(r => this.config.visibleTo.indexOf('role:' + r) >= 0)) return true
64+
if (this.config.visibleTo.indexOf('user:' + user.name) >= 0) return true
65+
return false
66+
}
67+
return true
5568
}
5669
},
5770
methods: {

0 commit comments

Comments
 (0)