Skip to content

Commit

Permalink
Home page: Add option to make simple navbar the default on mobile
Browse files Browse the repository at this point in the history
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 <florianh_dev@icloud.com>
  • Loading branch information
florian-h05 committed Oct 6, 2024
1 parent 0a3fb92 commit fbc5cbb
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
24 changes: 21 additions & 3 deletions bundles/org.openhab.ui/web/src/components/theme-switcher.vue
Original file line number Diff line number Diff line change
@@ -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')">
Expand Down Expand Up @@ -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'" />
Expand Down Expand Up @@ -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'
Expand Down Expand Up @@ -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) {
Expand Down
13 changes: 11 additions & 2 deletions bundles/org.openhab.ui/web/src/pages/home.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit fbc5cbb

Please sign in to comment.