Justin Georgi
056d835b7c
Closes: #18 This PR adds dark mode styling and an app setting to choose light, dark, or auto mode. Reviewed-on: Georgi_Lab/ALVINN_f7#33
99 lines
2.4 KiB
Vue
99 lines
2.4 KiB
Vue
<template>
|
|
<f7-app v-bind="f7params">
|
|
<!-- Left panel with cover effect-->
|
|
<f7-panel left cover>
|
|
<f7-view>
|
|
<f7-page>
|
|
<f7-navbar title="ALVINN"></f7-navbar>
|
|
<f7-list>
|
|
<f7-list-item link="/settings/" view=".view-main" panel-close=".panel-left">Settings</f7-list-item>
|
|
<f7-list-item link="/about/">About ALVINN</f7-list-item>
|
|
</f7-list>
|
|
<f7-toolbar class="panel-bar" position="bottom">
|
|
<span>version 0.1.1</span>
|
|
</f7-toolbar>
|
|
</f7-page>
|
|
</f7-view>
|
|
</f7-panel>
|
|
|
|
<!-- Your main view, should have "view-main" class -->
|
|
<f7-view main class="safe-areas" url="/"></f7-view>
|
|
|
|
</f7-app>
|
|
</template>
|
|
|
|
<style>
|
|
.panel-bar > .toolbar-inner {
|
|
justify-content: center;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import { ref, onMounted } from 'vue';
|
|
import { f7, f7ready } from 'framework7-vue';
|
|
import { getDevice } from 'framework7/lite-bundle';
|
|
import cordovaApp from '../js/cordova-app.js';
|
|
|
|
import routes from '../js/routes.js';
|
|
import store from '../js/store';
|
|
|
|
export default {
|
|
setup() {
|
|
const device = getDevice();
|
|
// Framework7 Parameters
|
|
const f7params = {
|
|
name: 'ALVINN', // App name
|
|
theme: 'auto', // Automatic theme detection
|
|
//autoDarkTheme: !(localStorage.getItem('openhab.ui:theme.dark')),
|
|
darkMode: 'auto',
|
|
colors: {
|
|
primary: '#002f65',
|
|
},
|
|
|
|
// App store
|
|
store: store,
|
|
// App routes
|
|
routes: routes,
|
|
|
|
// Register service worker (only on production build)
|
|
serviceWorker: process.env.NODE_ENV ==='production' ? {
|
|
path: '/service-worker.js',
|
|
} : {},
|
|
|
|
// Input settings
|
|
input: {
|
|
scrollIntoViewOnFocus: device.cordova,
|
|
scrollIntoViewCentered: device.cordova,
|
|
},
|
|
// Cordova Statusbar settings
|
|
statusbar: {
|
|
iosOverlaysWebView: true,
|
|
androidOverlaysWebView: false,
|
|
},
|
|
// Navbar settings
|
|
navbar: {
|
|
mdCenterTitle: true,
|
|
iosCenterTitle: true,
|
|
},
|
|
// Dialog settings
|
|
dialog: {
|
|
title: 'ALVINN'
|
|
}
|
|
};
|
|
onMounted(() => {
|
|
f7ready(() => {
|
|
// Init cordova APIs (see cordova-app.js)
|
|
if (device.cordova) {
|
|
cordovaApp.init(f7);
|
|
}
|
|
|
|
// Call F7 APIs here
|
|
});
|
|
});
|
|
|
|
return {
|
|
f7params
|
|
}
|
|
}
|
|
}
|
|
</script> |