mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-20 17:54:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

improve ui

Browse Source
This commit is contained in:
MaysWind
2023-04-22 20:24:53 +08:00
parent dab7728138
commit 22d956f38a
1 changed files with 41 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Mobile.vue
+41 -5
View File
@@ -66,7 +66,9 @@ export default {
mdSwipeBackAnimateShadow: false mdSwipeBackAnimateShadow: false
} }
}, },
isDarkMode: undefined isDarkMode: undefined,
hasPushPopupBackdrop: undefined,
hasBackdrop: undefined
} }
}, },
created() { created() {
@@ -87,6 +89,17 @@ export default {
this.isDarkMode = f7.darkMode; this.isDarkMode = f7.darkMode;
this.setThemeColorMeta(f7.darkMode); this.setThemeColorMeta(f7.darkMode);
f7.on('actionsOpen', (event) => this.onBackdropChanged(event));
f7.on('actionsClose', (event) => this.onBackdropChanged(event));
f7.on('dialogOpen', (event) => this.onBackdropChanged(event));
f7.on('dialogClose', (event) => this.onBackdropChanged(event));
f7.on('popoverOpen', (event) => this.onBackdropChanged(event));
f7.on('popoverClose', (event) => this.onBackdropChanged(event));
f7.on('popupOpen', (event) => this.onBackdropChanged(event));
f7.on('popupClose', (event) => this.onBackdropChanged(event));
f7.on('sheetOpen', (event) => this.onBackdropChanged(event));
f7.on('sheetClose', (event) => this.onBackdropChanged(event));
f7.on('pageBeforeOut', () => { f7.on('pageBeforeOut', () => {
if (this.$ui.isModalShowing()) { if (this.$ui.isModalShowing()) {
f7.actions.close('.actions-modal.modal-in', false); f7.actions.close('.actions-modal.modal-in', false);
@@ -113,11 +126,33 @@ export default {
return false; return false;
}, },
setThemeColorMeta(isDarkMode) { onBackdropChanged(event) {
if (isDarkMode) { if (event.push) {
document.querySelector('meta[name=theme-color]').setAttribute('content', '#121212'); this.hasPushPopupBackdrop = event.opened;
} else { } else {
document.querySelector('meta[name=theme-color]').setAttribute('content', '#f6f6f8'); this.hasBackdrop = event.opened;
}
this.setThemeColorMeta(this.isDarkMode);
},
setThemeColorMeta(isDarkMode) {
if (this.hasPushPopupBackdrop) {
document.querySelector('meta[name=theme-color]').setAttribute('content', '#000');
return;
}
if (isDarkMode) {
if (this.hasBackdrop) {
document.querySelector('meta[name=theme-color]').setAttribute('content', '#0b0b0b');
} else {
document.querySelector('meta[name=theme-color]').setAttribute('content', '#121212');
}
} else {
if (this.hasBackdrop) {
document.querySelector('meta[name=theme-color]').setAttribute('content', '#949495');
} else {
document.querySelector('meta[name=theme-color]').setAttribute('content', '#f6f6f8');
}
} }
} }
} }
@@ -174,6 +209,7 @@ body {
/** Replacing the default style of framework7 **/ /** Replacing the default style of framework7 **/
:root { :root {
--f7-popup-push-offset: 5px;
--f7-color-gray: #8e8e93; --f7-color-gray: #8e8e93;
--f7-color-gray-rgb: 142, 142, 147; --f7-color-gray-rgb: 142, 142, 147;
--f7-color-gray-shade: #79797f; --f7-color-gray-shade: #79797f;