Home page: Add option to make standard background the default on mobi…

…le or desktop Signed-off-by: Florian Hotze <[email protected]>
openhab · Oct 13, 2024 · b8ed0c4 · b8ed0c4
1 parent fbc5cbb
commit b8ed0c4
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 4 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
@@ -5,6 +5,8 @@ export const OhHomePageDefinition = () => new WidgetDefinition('oh-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
@@ -11,7 +11,10 @@
   "about.miscellaneous.home.navbar.default": "Default",
   "about.miscellaneous.home.navbar.simple": "Simple",
   "about.miscellaneous.home.navbar.large": "Large",
-  "about.miscellaneous.home.background": "Standard home page background color",
+  "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
@@ -66,7 +66,17 @@
           </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'" />
@@ -133,7 +143,7 @@ export default {
       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,5 +1,5 @@
 <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-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" />
@@ -122,6 +122,15 @@ export default {
         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