Home page: Add option to make simple navbar the default on mobile

This adds a two new boolean config parameter to the home page settings,
which allow to set the simple navbar as default on mobile and desktop devices.
The navbar style setting in the about page has been changed from a toggle to a segmented button with the options default, simple, large.

Signed-off-by: Florian Hotze <[email protected]>

bundles/org.openhab.ui/web/src/assets/definitions/widgets/home/index.js

@@ -3,6 +3,8 @@ 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'),
     pt('displayModelCardsTo', 'Display model cards to', 'Restrict who sees the Locations/Equipment/Properties tabs with the model cards')
       .o([
         { value: 'role:administrator', label: 'Administrators' },

bundles/org.openhab.ui/web/src/assets/i18n/theme-switcher/en.json

@@ -7,7 +7,10 @@
   "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.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": "Standard home page background color",
   "about.miscellaneous.home.hideChatInput": "Hide chat input box on home page",
   "about.miscellaneous.home.disableCardExpansionAnimation": "Disable card expansion animations",

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,7 +52,17 @@
         <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'" />
@@ -80,6 +90,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,7 +129,7 @@ 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) {

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-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,15 @@ 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
+      }
+    },
     homePageComponent () {
       const page = this.$store.getters.page('home')
       if (!page) return null