Refactor theme change

This commit is contained in:
Juan Carlos Ruvalcaba 2021-04-20 09:57:30 -07:00
parent 70ef9ff337
commit f165aff60e
3 changed files with 8 additions and 18 deletions

View File

@ -1,6 +1,6 @@
<template>
<div id="app" class="theme-dark">
<div id="app" class="${theme == 'theme-dark' && $h`theme-dark`}">
<!-- Your main view, should have "view-main" class -->
<div class="view view-main view-init safe-areas" data-url="/"></div>
@ -13,6 +13,8 @@
let username = '';
let password = '';
let theme = $store.getters.themeName.value;
const updateUsername = (e) => {
username = e.target.value;
$update();

View File

@ -1,6 +1,6 @@
<template>
<!-- Left panel with cover effect-->
<div class="panel panel-left panel-reveal theme-dark" @panel:open=${onPanelOpen}>
<div class="panel panel-left panel-reveal ${theme == 'theme-dark' && $h`theme-dark`}" @panel:open=${onPanelOpen}>
<div class="view">
<div class="page">
<div class="navbar">
@ -130,14 +130,9 @@ export default (props, { $f7, $on, $update, $store }) => {
let isSeller = false;
let isCustomer = false;
let isDeliverer = false;
let theme = $store.getters.themeName.value;
const onPanelOpen = () => {
if ($store.getters.themeName.value != 'theme-dark'){
$(".panel-left").removeClass("theme-dark");
}
else{
$(".panel-left").addClass("theme-dark");
}
if (User.isLogged()){
const userData = JSON.parse(localStorage.getItem("userData"));
const userRoles = userData['userPermissions'];

View File

@ -1,6 +1,6 @@
<template>
<!-- Right panel with reveal effect-->
<div class="panel panel-right panel-reveal theme-dark" @panel:open=${onPanelOpen}>
<div class="panel panel-right panel-reveal ${theme == 'theme-dark' && $h`theme-dark`}" @panel:open=${onPanelOpen}>
<div class="view">
<div class="page">
<div class="navbar">
@ -66,16 +66,10 @@ import User from '../../js/controllers/users.js';
export default (props, { $f7, $on, $update, $store }) => {
let isLogged = false;
let theme = '';
let theme = $store.getters.themeName.value;
const onPanelOpen = () => {
if ($store.getters.themeName.value != 'theme-dark'){
$(".panel-right").removeClass("theme-dark");
$('#light-theme').prop('checked', true);
}
else{
$(".panel-right").addClass("theme-dark");
}
$('#light-theme').prop('checked', (theme != 'theme-dark') ? true : false );
if (User.isLogged()){
let data = JSON.parse(localStorage.getItem("userData"));
$("#menu-username").text(data.contactName);
@ -97,7 +91,6 @@ export default (props, { $f7, $on, $update, $store }) => {
}
theme = !$("#light-theme").prop('checked') ? 'theme-dark' : '';
$store.dispatch('changeTheme', theme);
$update();
};
return $render;