The-Homebrew-Cloud/vbagx
2
0
Fork 0
mirror of https://github.com/dborth/vbagx.git synced 2024-11-22 18:49:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

Refactor -again- change theme.

Browse Source
This commit is contained in:
Juan Carlos Ruvalcaba 2021-04-25 15:11:31 -07:00
parent 68d3b0fcc3
commit f3057ca59b
4 changed files with 31 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/app.f7.html
View File

@ -1,6 +1,6 @@
<template>
<div id="app" class="${theme == 'theme-dark' && $h`theme-dark`}">
<div id="app" class="theme-dark">
<!-- Your main view, should have "view-main" class -->
<div class="view view-main view-init safe-areas" data-url="/"></div>
@ -9,19 +9,12 @@
</template>
<script>
import themes from './js/stores/theme.js';
import * as localForage from "localforage";
export default (props, { $f7, $, $update, $onMounted }) => {
let theme = themes.getters.Name.value;
$onMounted(async () => {
const items = await localForage.length();
if (items > 0){
theme = await localForage.getItem('theme');
if (theme != 'theme-dark'){ $("#app").removeClass("theme-dark"); }
themes.dispatch('changeTheme', theme);
}
const selector = '#app';
await themes.dispatch('initTheme', { selector });
});
return $render;

17
src/js/stores/theme.js
View File

@ -1,4 +1,6 @@
import { createStore } from 'framework7';
import $ from 'dom7';
import * as localForage from "localforage";
const theme = createStore({
state: {
@ -8,6 +10,21 @@ const theme = createStore({
changeTheme({ state }, name) {
state.name = name;
},
async checkTheme({ state, dispatch }, { selector }){
let theme = await localForage.getItem('theme');
if (theme != 'theme-dark'){ $(selector).removeClass('theme-dark'); }
dispatch('changeTheme', theme);
},
async initTheme({state, dispatch}, { selector }){
let items = await localForage.length();
if (items > 0){
await dispatch('checkTheme', { selector });
}
},
async setTheme({ state, dispatch }, name){
await localForage.setItem('theme', name);
dispatch('changeTheme', name);
},
},
getters: {
Name({ state }) {

11
src/pages/home/panel-left.f7.html
View File

@ -1,6 +1,6 @@
<template>
<!-- Left panel with cover effect-->
<div class="panel panel-left panel-reveal ${theme == 'theme-dark' && $h`theme-dark`}" @panel:open=${onPanelOpen}>
<div class="panel panel-left panel-reveal theme-dark" @panel:open=${onPanelOpen}>
<div class="view">
<div class="page">
<div class="navbar">
@ -126,7 +126,6 @@
</div>
</template>
<script>
import * as localForage from "localforage";
import themes from '../../js/stores/theme.js';
import user from '../../js/stores/user.js';
@ -135,16 +134,14 @@ export default (props, { $f7, $, $onMounted, $update, }) => {
let isSeller = false;
let isCustomer = false;
let isDeliverer = false;
let theme = themes.getters.Name.value;
const userRoles = user.getters.roles.value;
const onPanelOpen = () => {
};
$onMounted(() => {
localForage.getItem('theme').then( (value) => {
if (value != 'theme-dark'){ $(".panel-left").removeClass("theme-dark"); }
});
$onMounted(async () => {
const selector = '.panel-left';
await themes.dispatch('checkTheme', { selector });
if (isLogged){
isCustomer = userRoles.includes(4); //Customer,

18
src/pages/home/panel-right.f7.html
View File

@ -1,6 +1,6 @@
<template>
<!-- Right panel with reveal effect-->
<div class="panel panel-right panel-reveal ${theme == 'theme-dark' && $h`theme-dark`}" @panel:open=${onPanelOpen}>
<div class="panel panel-right panel-reveal theme-dark" @panel:open=${onPanelOpen}>
<div class="view">
<div class="page">
<div class="navbar">
@ -61,7 +61,6 @@
</div>
</template>
<script>
import * as localForage from "localforage";
import themes from '../../js/stores/theme.js';
import user from '../../js/stores/user.js';
@ -73,11 +72,10 @@ export default (props, { $f7, $, $on, $onMounted, $update, $f7router }) => {
const onPanelOpen = () => {
};
$onMounted(() => {
$onMounted(async () => {
$('#light-theme').prop('checked', (theme != 'theme-dark') ? true : false );
localForage.getItem('theme').then( (value) => {
if (value != 'theme-dark'){ $(".panel-right").removeClass("theme-dark"); }
});
const selector = '.panel-right'
await themes.dispatch('checkTheme', { selector });
});
const logout = () => {
@ -87,17 +85,15 @@ export default (props, { $f7, $, $on, $onMounted, $update, $f7router }) => {
});
};
const setTheme = () => {
const setTheme = async () => {
if ($("#light-theme").prop('checked')){
$("#app, .panel-right").removeClass("theme-dark");
}
else{
$("#app, .panel-right").addClass("theme-dark");
}
theme = !$("#light-theme").prop('checked') ? 'theme-dark' : '';
localForage.setItem('theme', theme).then( (val) => {
themes.dispatch('changeTheme', theme);
});
let name = !$("#light-theme").prop('checked') ? 'theme-dark' : '';
await themes.dispatch('setTheme', name);
};
return $render;