mirror of
https://github.com/dborth/vbagx.git
synced 2025-02-11 00:08:50 +01:00
Refactor theme change
This commit is contained in:
parent
70ef9ff337
commit
f165aff60e
@ -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();
|
||||||
|
@ -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'];
|
||||||
|
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user