Material theme: Fix lock icon is visible on editable items (#2403)

Fixes regressions from one of the previous PRs. --------- Also-by: Florian Hotze <florianh_dev@icloud.com> Signed-off-by: Jimmy Tanagra <jcode@tanagra.id.au>
openhab · Feb 28, 2024 · 4cef66d · 4cef66d
1 parent 11c6a7b
commit 4cef66d
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 27 deletions.
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/items/item-details.vue b/bundles/org.openhab.ui/web/src/pages/settings/items/item-details.vue
@@ -1,7 +1,7 @@
 <template>
   <f7-page class="item-details-page" @page:beforein="onPageBeforeIn" @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
     <f7-navbar :title="item.name" back-link="Back" no-shadow no-hairline class="item-details-navbar">
-      <f7-nav-right>
+      <f7-nav-right v-if="ready">
         <f7-link v-if="item.editable" icon-md="material:edit" href="edit">
           {{ $theme.md ? '' : 'Edit' }}
         </f7-link>
@@ -169,7 +169,8 @@ export default {
   data () {
     return {
       item: {},
-      links: []
+      links: [],
+      ready: false
     }
   },
   computed: {
@@ -195,6 +196,7 @@ export default {
     load () {
       this.$oh.api.get(`/rest/items/${this.itemName}?metadata=.+`).then((data) => {
         this.item = data
+        this.ready = true
         this.iconUrl = (localStorage.getItem('openhab.ui:serverUrl') || '') + '/icon/' + this.item.category + '?format=svg'
       })
     },

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/items/item-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/items/item-edit.vue
@@ -1,12 +1,12 @@
 <template>
   <f7-page @page:afterin="onPageAfterIn">
-    <f7-navbar :title="createMode ? 'Create New Item': (editable ? 'Edit Item' : 'Item Details')" :back-link="editable ? 'Cancel': 'Back'">
-      <f7-nav-right>
-        <f7-link @click="save()" v-if="editable && $theme.md" icon-md="material:save" icon-only />
-        <f7-link @click="save()" v-if="editable && !$theme.md">
+    <f7-navbar :title="pageTitle" :back-link="editable ? 'Cancel': 'Back'">
+      <f7-nav-right v-show="ready">
+        <f7-link v-if="!editable" icon-f7="lock_fill" icon-only :tooltip="notEditableMsg" />
+        <f7-link v-else-if="$theme.md" icon-md="material:save" icon-only @click="save()" />
+        <f7-link v-else @click="save()">
           Save<span v-if="$device.desktop">&nbsp;(Ctrl-S)</span>
         </f7-link>
-        <f7-link v-else icon-f7="lock_fill" icon-only tooltip="This Item is not editable through the UI" />
       </f7-nav-right>
     </f7-navbar>
     <f7-toolbar tabbar position="top">
@@ -23,7 +23,7 @@
         <f7-block class="block-narrow" v-if="item.name || item.created === false">
           <f7-col v-if="!editable">
             <div class="padding-left">
-              Note: {{ notEditableMgs }}
+              Note: {{ notEditableMsg }}
             </div>
           </f7-col>
           <f7-col>
@@ -39,7 +39,7 @@
       </f7-tab>
 
       <f7-tab id="code" @tab:show="() => { this.currentTab = 'code'; toYaml() }" :tab-active="currentTab === 'code'">
-        <f7-icon v-if="!editable" f7="lock" class="float-right margin" style="opacity:0.5; z-index: 4000; user-select: none;" size="50" color="gray" :tooltip="notEditableMgs" />
+        <f7-icon v-if="!editable" f7="lock" class="float-right margin" style="opacity:0.5; z-index: 4000; user-select: none;" size="50" color="gray" :tooltip="notEditableMsg" />
         <editor class="item-code-editor" mode="application/vnd.openhab.item+yaml" :value="itemYaml" @input="onEditorInput" :readOnly="!editable" />
       </f7-tab>
     </f7-tabs>
@@ -92,12 +92,21 @@ export default {
       semanticProperty: '',
       pendingTag: '',
       currentTab: 'design',
-      notEditableMgs: 'This Item is not editable because it has been provisioned from a file.'
+      notEditableMsg: 'This Item is not editable because it has been provisioned from a file.'
     }
   },
   computed: {
     editable () {
       return this.createMode || (this.item && this.item.editable)
+    },
+    pageTitle () {
+      if (this.createMode) {
+        return 'Create New Item'
+      }
+      if (!this.ready) {
+        return ''
+      }
+      return this.editable ? 'Edit Item' : 'Item Details'
     }
   },
   watch: {

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/persistence/persistence-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/persistence/persistence-edit.vue
@@ -1,13 +1,12 @@
 <template>
   <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
-    <f7-navbar :title="editable ? `${newPersistence ? 'Create' : 'Edit'} ${serviceId} persistence configuration` : `${serviceId} persistence configuration details`"
-               back-link="Back">
-      <f7-nav-right>
-        <f7-link @click="save()" v-if="editable && $theme.md" icon-md="material:save" icon-only />
-        <f7-link @click="save()" v-if="editable && !$theme.md">
+    <f7-navbar :title="pageTitle" back-link="Back">
+      <f7-nav-right v-show="ready">
+        <f7-link v-if="!editable" icon-f7="lock_fill" icon-only tooltip="This persistence configuration is not editable through the UI" />
+        <f7-link v-else-if="$theme.md" icon-md="material:save" icon-only @click="save()" />
+        <f7-link v-else @click="save()">
           Save<span v-if="$device.desktop">&nbsp;(Ctrl-S)</span>
         </f7-link>
-        <f7-link v-else icon-f7="lock_fill" icon-only tooltip="This persistence configuration is not editable through the UI" />
       </f7-nav-right>
     </f7-navbar>
     <f7-toolbar tabbar position="top">
@@ -262,6 +261,12 @@ export default {
     editable () {
       return this.newPersistence || (this.persistence && this.persistence.editable === true)
     },
+    pageTitle () {
+      if (this.newPersistence) return 'Create new persistence configuration'
+      if (!this.ready) return ''
+      if (!this.editable) return `${this.serviceId} persistence configuration details`
+      return `Edit ${this.serviceId} persistence configuration`
+    },
     strategies () {
       return this.PredefinedStrategies.concat(this.persistence.cronStrategies.map(cs => cs.name))
     },

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/channel/channel-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/things/channel/channel-edit.vue
@@ -2,8 +2,9 @@
   <f7-page @page:afterin="onPageAfterIn" name="channel-edit">
     <f7-navbar :title="channel.label" :subtitle="thing.label" back-link="Cancel">
       <f7-nav-right>
-        <f7-link @click="save()" v-if="$theme.md" icon-md="material:save" icon-only />
-        <f7-link @click="save()" v-if="!$theme.md">
+        <f7-link v-if="!channel.editable" slot="right" icon-f7="lock_fill" icon-only tooltip="Channels of Things defined in a .things file are not editable from this screen" />
+        <f7-link @click="save()" v-else-if="$theme.md" icon-md="material:save" icon-only />
+        <f7-link @click="save()" v-else>
           Done
         </f7-link>
       </f7-nav-right>

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/link/link-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/things/link/link-edit.vue
@@ -1,13 +1,13 @@
 <template>
   <f7-page @page:beforein="onPageBeforeIn" @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
     <f7-navbar :title="item.label || item.name" :subtitle="thing.label" back-link="Cancel">
-      <f7-nav-right v-if="link.editable">
-        <f7-link @click="save()" v-if="$theme.md" icon-md="material:save" icon-only />
-        <f7-link @click="save()" v-if="!$theme.md">
+      <f7-nav-right v-show="ready">
+        <f7-link v-if="!link.editable" slot="right" icon-f7="lock_fill" icon-only tooltip="links defined in a .items file are not editable from this screen" />
+        <f7-link v-else-if="$theme.md" icon-md="material:save" icon-only @click="save()" />
+        <f7-link v-else @click="save()">
           Save
         </f7-link>
       </f7-nav-right>
-      <f7-link v-else slot="right" icon-f7="lock_fill" icon-only tooltip="links defined in a .items file are not editable from this screen" />
     </f7-navbar>
     <f7-block class="block-narrow">
       <f7-col>

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/thing-details.vue b/bundles/org.openhab.ui/web/src/pages/settings/things/thing-details.vue
@@ -1,12 +1,12 @@
 <template>
   <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut" class="thing-details-page">
-    <f7-navbar :title="thing.label || thing.UID" back-link="Back" no-hairline>
-      <f7-nav-right v-show="!error">
-        <f7-link @click="save()" v-if="$theme.md && editable" icon-md="material:save" icon-only />
-        <f7-link @click="save()" v-if="!$theme.md && editable">
+    <f7-navbar :title="pageTitle" back-link="Back" no-hairline>
+      <f7-nav-right v-show="!error && ready">
+        <f7-link v-if="!editable" icon-f7="lock_fill" icon-only tooltip="This Thing is not editable through the UI" />
+        <f7-link v-else-if="$theme.md" icon-md="material:save" icon-only @click="save()" />
+        <f7-link v-else @click="save()">
           Save<span v-if="$device.desktop">&nbsp;(Ctrl-S)</span>
         </f7-link>
-        <f7-link v-else icon-f7="lock_fill" icon-only tooltip="This Thing is not editable through the UI" />
       </f7-nav-right>
     </f7-navbar>
     <f7-toolbar tabbar position="top">
@@ -310,6 +310,10 @@ export default {
     editable () {
       return this.thing && this.thing.editable
     },
+    pageTitle () {
+      if (!this.ready) return ''
+      return this.thing.label || this.thing.UID
+    },
     isExtensible () {
       if (!this.thingType || !this.thingType.extensibleChannelTypeIds) return false
       return this.thingType.extensibleChannelTypeIds.length > 0