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> <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 --> <!-- Your main view, should have "view-main" class -->
<div class="view view-main view-init safe-areas" data-url="/"></div> <div class="view view-main view-init safe-areas" data-url="/"></div>
@ -13,6 +13,8 @@
let username = ''; let username = '';
let password = ''; let password = '';
let theme = $store.getters.themeName.value;
const updateUsername = (e) => { const updateUsername = (e) => {
username = e.target.value; username = e.target.value;
$update(); $update();

View File

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

View File

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