zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions 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
}
},
isDarkMode: undefined
isDarkMode: undefined,
hasPushPopupBackdrop: undefined,
hasBackdrop: undefined
}
},
created() {
@@ -87,6 +89,17 @@ export default {
this.isDarkMode = 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', () => {
if (this.$ui.isModalShowing()) {
f7.actions.close('.actions-modal.modal-in', false);
@@ -113,11 +126,33 @@ export default {
return false;
},
setThemeColorMeta(isDarkMode) {
if (isDarkMode) {
document.querySelector('meta[name=theme-color]').setAttribute('content', '#121212');
onBackdropChanged(event) {
if (event.push) {
this.hasPushPopupBackdrop = event.opened;
} 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 **/
:root {
--f7-popup-push-offset: 5px;
--f7-color-gray: #8e8e93;
--f7-color-gray-rgb: 142, 142, 147;
--f7-color-gray-shade: #79797f;