Home page: Add options to set simple navbar/standard background the default 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 <dev@florianhotze.com>pull/2821/head
Florian Hotze
GitHub
parent
a1787ed386
commit
85c3c3113d
|
|
@ -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' },
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue