Home page: Add options to set simple navbar/standard background the d…

…efault on mobile/desktop (#2800) This adds new boolean config parameters to the home page settings that allow setting the default navbar style and standard background for mobile and desktop devices. The device-specific settings allow to override these defaults by using a segmented button with three options: The admin's default, option A and option B. --------- Signed-off-by: Florian Hotze <[email protected]>
openhab · Oct 21, 2024 · 85c3c31 · 85c3c31
1 parent a1787ed
commit 85c3c31
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 10 deletions.
diff --git a/bundles/org.openhab.ui/web/src/assets/definitions/widgets/home/index.js b/bundles/org.openhab.ui/web/src/assets/definitions/widgets/home/index.js
@@ -3,6 +3,10 @@ import { actionGroup, actionParams } from '../actions.js'
 
 export const OhHomePageDefinition = () => new WidgetDefinition('oh-home-page', 'Home page')
   .params([
+    pb('simpleNavbarMobileDefault', 'Default to Simple Navbar on Mobile', 'Use the simple navbar by default on mobile devices'),
+    pb('simpleNavbarDesktopDefault', 'Default to Simple Navbar on Desktop', 'Use the simple navbar by default on desktop devices'),
+    pb('standardBackgroundMobileDefault', 'Default to Standard Background on Mobile', 'Use the standard background (light grey in light mode) by default on mobile devices'),
+    pb('standardBackgroundDesktopDefault', 'Default to Standard Background on Desktop', 'Use the standard background (light grey in light mode) by default on desktop devices'),
     pt('displayModelCardsTo', 'Display model cards to', 'Restrict who sees the Locations/Equipment/Properties tabs with the model cards')
       .o([
         { value: 'role:administrator', label: 'Administrators' },

diff --git a/bundles/org.openhab.ui/web/src/assets/i18n/theme-switcher/en.json b/bundles/org.openhab.ui/web/src/assets/i18n/theme-switcher/en.json
@@ -7,8 +7,14 @@
   "about.darkMode.dark": "Dark",
   "about.navigationBarsStyle": "Navigation bars style",
   "about.miscellaneous": "Miscellaneous",
-  "about.miscellaneous.home.navbar": "Simple navigation bar on home page",
-  "about.miscellaneous.home.background": "Standard home page background color",
+  "about.miscellaneous.home.navbar": "Home page navigation bar",
+  "about.miscellaneous.home.navbar.default": "Default",
+  "about.miscellaneous.home.navbar.simple": "Simple",
+  "about.miscellaneous.home.navbar.large": "Large",
+  "about.miscellaneous.home.background": "Home page background color",
+  "about.miscellaneous.home.background.default": "Default",
+  "about.miscellaneous.home.background.standard": "Standard",
+  "about.miscellaneous.home.background.white": "White",
   "about.miscellaneous.home.hideChatInput": "Hide chat input box on home page",
   "about.miscellaneous.home.disableCardExpansionAnimation": "Disable card expansion animations",
   "about.miscellaneous.theme.disablePageTransition": "Disable page transition animations",

diff --git a/bundles/org.openhab.ui/web/src/components/theme-switcher.vue b/bundles/org.openhab.ui/web/src/components/theme-switcher.vue
@@ -1,5 +1,5 @@
 <template>
-  <f7-block>
+  <f7-block class="theme-switcher">
     <f7-block-title class="padding-left" v-t="'about.theme'" />
     <f7-row>
       <f7-col width="25" class="theme-picker auto" @click="switchTheme('auto')">
@@ -52,11 +52,31 @@
         <f7-list>
           <f7-list-item>
             <span v-t="'about.miscellaneous.home.navbar'" />
-            <f7-toggle :checked="homePageNavbarStyle === 'simple'" @toggle:change="setHomePageNavbarStyle" />
+            <f7-segmented class="home-navbar-selection">
+              <f7-button outline small :active="homePageNavbarStyle === 'default'" @click="setHomePageNavbarStyle('default')">
+                {{ $t('about.miscellaneous.home.navbar.default') }}
+              </f7-button>
+              <f7-button outline small :active="homePageNavbarStyle === 'simple'" @click="setHomePageNavbarStyle('simple')">
+                {{ $t('about.miscellaneous.home.navbar.simple') }}
+              </f7-button>
+              <f7-button outline small :active="homePageNavbarStyle === 'large'" @click="setHomePageNavbarStyle('large')">
+                {{ $t('about.miscellaneous.home.navbar.large') }}
+              </f7-button>
+            </f7-segmented>
           </f7-list-item>
           <f7-list-item>
             <span v-t="'about.miscellaneous.home.background'" />
-            <f7-toggle :checked="homePageBackground === 'standard'" @toggle:change="setHomePageBackground" />
+            <f7-segmented class="home-navbar-selection">
+              <f7-button outline small :active="homePageBackground === 'default'" @click="setHomePageBackground('default')">
+                {{ $t('about.miscellaneous.home.background.default') }}
+              </f7-button>
+              <f7-button outline small :active="homePageBackground === 'standard'" @click="setHomePageBackground('standard')">
+                {{ $t('about.miscellaneous.home.background.standard') }}
+              </f7-button>
+              <f7-button outline small :active="homePageBackground === 'white'" @click="setHomePageBackground('white')">
+                {{ $t('about.miscellaneous.home.background.white') }}
+              </f7-button>
+            </f7-segmented>
           </f7-list-item>
           <f7-list-item v-show="$store.getters.apiEndpoint('habot')">
             <span v-t="'about.miscellaneous.home.hideChatInput'" />
@@ -80,6 +100,14 @@
     </f7-row>
   </f7-block>
 </template>
+
+<style lang="stylus">
+.theme-switcher
+  .home-navbar-selection
+    .button
+      width auto
+</style>
+
 <script>
 import { loadLocaleMessages } from '@/js/i18n'
 import ItemPicker from '@/components/config/controls/item-picker.vue'
@@ -111,11 +139,11 @@ export default {
       location.reload()
     },
     setHomePageNavbarStyle (value) {
-      localStorage.setItem('openhab.ui:theme.home.navbar', (value) ? 'simple' : 'default')
+      localStorage.setItem('openhab.ui:theme.home.navbar', value)
       location.reload()
     },
     setHomePageBackground (value) {
-      localStorage.setItem('openhab.ui:theme.home.background', (value) ? 'standard' : 'default')
+      localStorage.setItem('openhab.ui:theme.home.background', value)
       location.reload()
     },
     setHideChatInput (value) {

diff --git a/bundles/org.openhab.ui/web/src/pages/home.vue b/bundles/org.openhab.ui/web/src/pages/home.vue
@@ -1,10 +1,10 @@
 <template>
-  <f7-page stacked name="HomePage" class="page-home" :class="{ 'standard-background': $f7.data.themeOptions.homeBackground === 'standard' }" @page:init="onPageInit" @page:beforein="onPageBeforeIn" @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
-    <f7-navbar :large="$f7.data.themeOptions.homeNavbar !== 'simple'" :large-transparent="$f7.data.themeOptions.homeNavbar !== 'simple'" class="home-nav disable-user-select">
+  <f7-page stacked name="HomePage" class="page-home" :class="{ 'standard-background': standardBackground }" @page:init="onPageInit" @page:beforein="onPageBeforeIn" @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
+    <f7-navbar :large="!simpleNavbar" :large-transparent="!simpleNavbar" class="home-nav disable-user-select">
       <f7-nav-left>
         <f7-link icon-ios="f7:menu" icon-aurora="f7:menu" icon-md="material:menu" panel-open="left" />
       </f7-nav-left>
-      <f7-nav-title-large v-if="$f7.data.themeOptions.homeNavbar !== 'simple'" class="home-title-large">
+      <f7-nav-title-large v-if="!simpleNavbar" class="home-title-large">
         <span class="today">{{ new Date().toLocaleString($store.getters.locale, { weekday: 'long', day: 'numeric', month: 'long' }) }}</span>
         {{ title }}
       </f7-nav-title-large>
@@ -113,6 +113,24 @@ export default {
         store: this.$store.getters.trackedItems
       }
     },
+    simpleNavbar () {
+      const homeNavbar = this.$f7.data.themeOptions.homeNavbar
+      if (homeNavbar !== 'default') return homeNavbar === 'simple'
+      if (this.$f7.device.desktop) {
+        return this.homePageComponent?.config?.simpleNavbarDesktopDefault === true
+      } else {
+        return this.homePageComponent?.config?.simpleNavbarMobileDefault === true
+      }
+    },
+    standardBackground () {
+      const homeBackground = this.$f7.data.themeOptions.homeBackground
+      if (homeBackground !== 'default') return homeBackground === 'standard'
+      if (this.$f7.device.desktop) {
+        return this.homePageComponent?.config?.standardBackgroundDesktopDefault === true
+      } else {
+        return this.homePageComponent?.config?.standardBackgroundMobileDefault === true
+      }
+    },
     homePageComponent () {
       const page = this.$store.getters.page('home')
       if (!page) return null