Add a dirty indicator on the title bar (#2687)

Also-by: Florian Hotze <florianh_dev@icloud.com> Signed-off-by: Jimmy Tanagra <jcode@tanagra.id.au>
openhab · Aug 4, 2024 · e5418b4 · e5418b4
1 parent cee0377
commit e5418b4
Show file tree

Hide file tree

Showing 18 changed files with 92 additions and 17 deletions.
diff --git a/bundles/org.openhab.ui/web/src/pages/developer/blocks/blocks-edit.vue b/bundles/org.openhab.ui/web/src/pages/developer/blocks/blocks-edit.vue
@@ -1,6 +1,10 @@
 <template>
   <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
-    <f7-navbar :title="(!ready) ? '' : (createMode) ? 'Create Block Library' : 'Block Library: ' + blocks.uid" back-link="Back">
+    <f7-navbar back-link="Back">
+      <template slot="title" v-if="ready">
+        {{ createMode ? 'Create Block Library' : 'Block Library: ' + blocks.uid }}
+        {{ dirtyIndicator }}
+      </template>
       <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">

diff --git a/bundles/org.openhab.ui/web/src/pages/developer/widgets/widget-edit.vue b/bundles/org.openhab.ui/web/src/pages/developer/widgets/widget-edit.vue
@@ -1,6 +1,10 @@
 <template>
   <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
-    <f7-navbar :title="(!ready) ? '' : (createMode) ? 'Create Widget' : 'Widget: ' + widget.uid" back-link="Back">
+    <f7-navbar back-link="Back">
+      <template slot="title" v-if="ready">
+        {{ createMode ? 'Create Widget' : 'Widget: ' + widget.uid }}
+        {{ dirtyIndicator }}
+      </template>
       <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">

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/dirty-mixin.js b/bundles/org.openhab.ui/web/src/pages/settings/dirty-mixin.js
@@ -4,6 +4,13 @@ export default {
       dirty: false
     }
   },
+  computed: {
+    dirtyIndicator () {
+      if (this.dirty) {
+        return ' ●' // &#9679;
+      }
+    }
+  },
   methods: {
     confirmLeaveWithoutSaving (callbackLeave, callbackCancel) {
       this.$f7.dialog.confirm(

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,6 +1,10 @@
 <template>
   <f7-page @page:afterin="onPageAfterIn">
-    <f7-navbar :title="pageTitle" :back-link="editable ? 'Cancel': 'Back'">
+    <f7-navbar :back-link="editable ? 'Cancel': 'Back'">
+      <template slot="title">
+        {{ pageTitle }}
+        {{ dirtyIndicator }}
+      </template>
       <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()" />

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/items/metadata/item-metadata-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/items/metadata/item-metadata-edit.vue
@@ -1,6 +1,10 @@
 <template>
   <f7-page @page:beforein="onPageBeforeIn" @page:afterin="onPageAfterIn">
-    <f7-navbar :title="'Edit Item Metadata: ' + namespace" back-link="Cancel" no-hairline>
+    <f7-navbar back-link="Cancel" no-hairline>
+      <template slot="title">
+        Edit Item Metadata: {{ namespace }}
+        {{ dirtyIndicator }}
+      </template>
       <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">

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/chart/chart-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/chart/chart-edit.vue
@@ -1,6 +1,10 @@
 <template>
   <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut" class="chart-editor">
-    <f7-navbar :title="(!ready) ? '' : (createMode) ? 'Create chart page' : page.config.label" back-link="Back" no-hairline>
+    <f7-navbar back-link="Back" no-hairline>
+      <template slot="title" v-if="ready">
+        {{ createMode ? 'Create chart page' : page.config.label }}
+        {{ dirtyIndicator }}
+      </template>
       <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">

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/home/home-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/home/home-edit.vue
@@ -1,6 +1,10 @@
 <template>
   <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut" class="home-editor">
-    <f7-navbar title="Edit Home Page" back-link="Back" no-hairline>
+    <f7-navbar back-link="Back" no-hairline>
+      <template slot="title">
+        Edit Home Page
+        {{ dirtyIndicator }}
+      </template>
       <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">

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue
@@ -1,6 +1,10 @@
 <template>
   <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut" class="layout-editor">
-    <f7-navbar v-if="!(previewMode && page.config.hideNavbar) && !fullscreen" :title="(!ready) ? '' : (createMode) ? 'Create layout page' : page.config.label" back-link="Back" no-hairline>
+    <f7-navbar v-if="!(previewMode && page.config.hideNavbar) && !fullscreen" back-link="Back" no-hairline>
+      <template slot="title" v-if="ready">
+        {{ createMode ? 'Create layout page' : page.config.label }}
+        {{ dirtyIndicator }}
+      </template>
       <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">

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/map/map-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/map/map-edit.vue
@@ -1,6 +1,10 @@
 <template>
   <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut" class="map-editor">
-    <f7-navbar :title="(!ready) ? '' : (createMode) ? 'Create map page' : page.config.label" back-link="Back" no-hairline>
+    <f7-navbar back-link="Back" no-hairline>
+      <template slot="title" v-if="ready">
+        {{ createMode ? 'Create map page' : page.config.label }}
+        {{ dirtyIndicator }}
+      </template>
       <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">

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/plan/plan-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/plan/plan-edit.vue
@@ -1,6 +1,10 @@
 <template>
   <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut" class="plan-editor">
-    <f7-navbar :title="(!ready) ? '' : (createMode) ? 'Create plan page' : page.config.label" back-link="Back" no-hairline>
+    <f7-navbar back-link="Back" no-hairline>
+      <template slot="title" v-if="ready">
+        {{ createMode ? 'Create plan page' : page.config.label }}
+        {{ dirtyIndicator }}
+      </template>
       <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">

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/sitemap-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/sitemap-edit.vue
@@ -1,6 +1,10 @@
 <template>
   <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
-    <f7-navbar :title="(!ready) ? '' : (createMode) ? 'Create sitemap' : 'Sitemap: ' + sitemap.config.label" back-link="Back" no-hairline>
+    <f7-navbar back-link="Back" no-hairline>
+      <template slot="title" v-if="ready">
+        {{ createMode ? 'Create sitemap' : 'Sitemap: ' + sitemap.config.label }}
+        {{ dirtyIndicator }}
+      </template>
       <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">

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/tabs/tabs-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/tabs/tabs-edit.vue
@@ -1,6 +1,10 @@
 <template>
   <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut" class="tabs-editor">
-    <f7-navbar :title="(!ready) ? '' : (createMode) ? 'Create tabbed page' : page.config.label" back-link="Back" no-hairline>
+    <f7-navbar back-link="Back" no-hairline>
+      <template slot="title" v-if="ready">
+        {{ createMode ? 'Create tabbed page' : page.config.label }}
+        {{ dirtyIndicator }}
+      </template>
       <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">

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,6 +1,10 @@
 <template>
   <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
-    <f7-navbar :title="pageTitle" back-link="Back">
+    <f7-navbar back-link="Back">
+      <template slot="title">
+        {{ pageTitle }}
+        {{ dirtyIndicator }}
+      </template>
       <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()" />

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/rule-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/rule-edit.vue
@@ -1,6 +1,10 @@
 <template>
   <f7-page @page:afterin="onPageAfterIn" @page:afterout="onPageAfterOut">
-    <f7-navbar :title="isNewRule ? 'Create rule' : rule.name" back-link="Back" no-hairline>
+    <f7-navbar back-link="Back" no-hairline>
+      <template slot="title">
+        {{ isNewRule ? 'Create rule' : rule.name }}
+        {{ dirtyIndicator }}
+      </template>
       <f7-nav-right>
         <developer-dock-icon />
         <template v-if="isEditable">

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/scene/scene-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/scene/scene-edit.vue
@@ -1,6 +1,10 @@
 <template>
   <f7-page @page:afterin="onPageAfterIn" @page:afterout="onPageAfterOut">
-    <f7-navbar :title="(createMode) ? 'Create scene' : rule.name" back-link="Back" no-hairline>
+    <f7-navbar back-link="Back" no-hairline>
+      <template slot="title">
+        {{ createMode ? 'Create scene' : rule.name }}
+        {{ dirtyIndicator }}
+      </template>
       <f7-nav-right v-if="isEditable">
         <f7-link @click="save()" v-if="$theme.md" icon-md="material:save" icon-only />
         <f7-link @click="save()" v-if="!$theme.md">

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-edit.vue
@@ -1,6 +1,10 @@
 <template>
   <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
-    <f7-navbar :title="pageTitle" :subtitle="(!createMode) ? mode : undefined" back-link="Back">
+    <f7-navbar :subtitle="(!createMode) ? mode : undefined" back-link="Back">
+      <template slot="title">
+        {{ pageTitle }}
+        {{ dirtyIndicator }}
+      </template>
       <f7-nav-right>
         <developer-dock-icon />
         <template v-if="editable && !createMode">

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,6 +1,10 @@
 <template>
   <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut" class="thing-details-page">
-    <f7-navbar :title="pageTitle" back-link="Back" no-hairline>
+    <f7-navbar back-link="Back" no-hairline>
+      <template slot="title">
+        {{ pageTitle }}
+        {{ dirtyIndicator }}
+      </template>
       <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()" />

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformation-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformation-edit.vue
@@ -1,6 +1,10 @@
 <template>
   <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
-    <f7-navbar :title="createMode ? 'Create Transformation' : 'Edit Transformation'" :subtitle="(!createMode && transformation) ? editorMode : ''" back-link="Back">
+    <f7-navbar :subtitle="(!createMode && transformation) ? editorMode : ''" back-link="Back">
+      <template slot="title">
+        {{ createMode ? 'Create Transformation' : 'Edit Transformation' }}
+        {{ dirtyIndicator }}
+      </template>
       <f7-nav-right>
         <f7-link v-if="createMode" @click="createTransformation" icon-md="material:save">
           {{ $theme.md ? '' : 'Create' }}