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

Upgrade to vue3 (#16)

Browse Source 
* upgrade to vue 3.x and framework7 8.x
* change calendar plugin to vue-datepicker
* disable export button when user does not hava any transaction
* implement new pin code input
* append thousands separator in amount in exchange rates page
This commit is contained in:
mayswind
2023-04-21 01:45:00 +08:00
committed by GitHub
parent 4b0f7d45e8
commit b1c765eb51
89 changed files with 8353 additions and 16671 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Mobile.vue
+199 -44
View File
@@ -1,10 +1,11 @@
<template>
<f7-app :params="f7params">
<f7-app v-bind="f7params">
<f7-view id="main-view" class="safe-areas" main url="/"></f7-view>
</f7-app>
</template>
<script>
import { f7ready } from 'framework7-vue';
import routes from './router/mobile.js';
export default {
@@ -14,10 +15,20 @@ export default {
return {
f7params: {
name: 'ezBookkeeping',
id: 'net.mayswind.ezbookkeeping',
theme: 'ios',
autoDarkTheme: self.$settings.isEnableAutoDarkMode(),
colors: {
primary: '#c67e48'
},
routes: routes,
darkMode: self.$settings.isEnableAutoDarkMode() ? 'auto' : false,
touch: {
disableContextMenu: true,
tapHold: true
},
serviceWorker: {
path: self.$settings.isProduction() ? './sw.js' : undefined,
scope: './',
},
actions: {
animate: self.$settings.isEnableAnimate(),
backdrop: true,
@@ -46,27 +57,16 @@ export default {
smartSelect: {
routableModals: false
},
touch: {
tapHold: true,
disableContextMenu: true
},
view: {
animate: self.$settings.isEnableAnimate(),
pushState: !self.isiOSHomeScreenMode(),
pushStateAnimate: false,
browserHistory: !self.isiOSHomeScreenMode(),
browserHistoryInitialMatch: true,
browserHistoryAnimate: false,
iosSwipeBackAnimateShadow: false,
mdSwipeBackAnimateShadow: false
},
calendar: {
locale: 'en',
openIn: 'customModal',
backdrop: true
},
serviceWorker: {
path: self.$settings.isProduction() ? './sw.js' : undefined,
scope: './',
}
}
},
isDarkMode: undefined
}
},
created() {
@@ -82,6 +82,27 @@ export default {
}
}
},
mounted() {
f7ready((f7) => {
this.isDarkMode = f7.darkMode;
this.setThemeColorMeta(f7.darkMode);
f7.on('pageBeforeOut', () => {
if (this.$ui.isModalShowing()) {
f7.actions.close('.actions-modal.modal-in', false);
f7.dialog.close('.dialog.modal-in', false);
f7.popover.close('.popover.modal-in', false);
f7.popup.close('.popup.modal-in', false);
f7.sheet.close('.sheet-modal.modal-in', false);
}
});
f7.on('darkModeChange', (isDarkMode) => {
this.isDarkMode = isDarkMode;
this.setThemeColorMeta(isDarkMode);
});
});
},
methods: {
isiOSHomeScreenMode() {
if ((/iphone|ipod|ipad/gi).test(navigator.platform) && (/Safari/i).test(navigator.appVersion) &&
@@ -91,6 +112,13 @@ export default {
}
return false;
},
setThemeColorMeta(isDarkMode) {
if (isDarkMode) {
document.querySelector('meta[name=theme-color]').setAttribute('content', '#121212');
} else {
document.querySelector('meta[name=theme-color]').setAttribute('content', '#f6f6f8');
}
}
}
}
@@ -134,6 +162,10 @@ body {
pointer-events: none !important;
}
.skeleton-text {
pointer-events: none !important;
}
.segmented.readonly .button:not(.button-active) > span,
.list.readonly .item-content .item-title.item-label,
.list.readonly .item-content .item-title > .item-header {
@@ -142,19 +174,21 @@ body {
/** Replacing the default style of framework7 **/
:root {
--f7-theme-color: #c67e48;
--f7-theme-color-rgb: 198, 126, 72;
--f7-theme-color-shade: #af6a36;
--f7-theme-color-tint: #d09467;
--default-icon-color: var(--f7-text-color);
}
:root .theme-dark {
:root .dark {
--default-icon-color: var(--f7-text-color);
}
.ios .theme-dark, .ios.theme-dark {
.color-gray {
--f7-theme-color: #8e8e93;
--f7-theme-color-rgb: 142, 142, 147;
--f7-theme-color-shade: #79797f;
--f7-theme-color-tint: #a3a3a7;
}
.ios .dark, .ios.dark {
--f7-list-item-header-text-color: inherit !important;
}
@@ -166,6 +200,15 @@ i.icon.la, i.icon.las, i.icon.lab {
border: 0;
}
/** Replacing the default style of vue-datepicker **/
.dp__theme_light {
--dp-primary-color: #c67e48;
}
.dp__theme_dark {
--dp-primary-color: #c67e48;
}
/** Common class for replacing the default style of framework7 **/
.navbar .navbar-compact-icons.right a + a {
margin-left: 0;
@@ -195,6 +238,12 @@ i.icon.la, i.icon.las, i.icon.lab {
white-space: nowrap;
}
.block-title .accordion-item-toggle .icon {
color: var(--f7-list-chevron-icon-color);
font-size: var(--f7-list-chevron-icon-font-size);
font-weight: bolder;
}
.list-item-media-valign-middle .item-media {
align-self: normal !important;
}
@@ -227,7 +276,7 @@ i.icon.la, i.icon.las, i.icon.lab {
font-weight: bold;
}
.theme-dark .list .item-content .list-item-showing {
.dark .list .item-content .list-item-showing {
color: rgba(255, 255, 255, 0.2);
}
@@ -235,9 +284,34 @@ i.icon.la, i.icon.las, i.icon.lab {
font-weight: bold;
}
.list.list-dividers li.list-group-title:first-child {
border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
}
.list.list-dividers li.list-group-title:first-child:before {
background-color: transparent;
}
.list.list-dividers li:last-child > .swipeout-content > .item-link > .item-content > .item-inner:after {
background-color: transparent;
}
.list.inset li.list-group-title:first-child > a.button {
border-radius: var(--f7-button-border-radius);
}
.list .item-content .list-item-checked-icon {
font-size: 20px;
color: var(--f7-radio-active-color, var(--f7-theme-color));
margin-right: calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin));
}
.popover .popover-inner .list .item-content .list-item-checked-icon {
margin-right: 0;
}
.list li.no-margin .item-content.item-input {
margin: 0;
}
.ebk-list-item-error-info div.item-footer {
@@ -261,12 +335,6 @@ i.icon.la, i.icon.las, i.icon.lab {
opacity: 0.6;
}
.card-chevron-icon {
color: var(--f7-list-chevron-icon-color);
font-size: var(--f7-list-chevron-icon-font-size);
font-weight: bolder;
}
.icon-after-text {
margin-left: 6px;
}
@@ -284,6 +352,100 @@ i.icon.la, i.icon.las, i.icon.lab {
height: 13px;
}
/** Swipe handler **/
.swipe-handler {
height: 16px;
position: absolute;
left: 0;
width: 100%;
top: 0;
cursor: pointer;
z-index: 10
}
.swipe-handler:after {
content: "";
width: 36px;
height: 6px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -18px;
margin-top: -3px;
border-radius: 3px;
background: #666
}
/** list-item-with-multi-item for framework7 **/
.list-item-with-multi-item .item-content,
.list-item-with-multi-item .item-inner {
padding: 0;
}
.list-item-with-multi-item .item-inner > div {
width: 100%;
}
.list-item-with-multi-item > .item-content > .item-inner:after {
background-color: transparent;
}
.list-item-with-multi-item .list-item-subitem:first-child .item-content {
padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
}
.list-item-with-multi-item .list-item-subitem .item-inner {
display: block;
width: 100%;
padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
padding-top: var(--f7-list-item-padding-vertical);
padding-bottom: var(--f7-list-item-padding-vertical);
}
.list-item-with-multi-item .list-item-subitem:first-child .item-inner {
padding-left: 0;
}
/** Combination list for framework7 **/
.combination-list-wrapper {
margin: 0;
padding: 0;
}
.combination-list-wrapper .block-title {
margin-top: 0;
margin-bottom: 0;
}
.combination-list-wrapper .list.combination-list-header {
margin: 0;
}
.combination-list-wrapper .list.combination-list-header .item-title {
width: 100%;
display: flex;
}
.combination-list-wrapper .list.combination-list-header > ul {
background-color: var(--f7-list-group-title-bg-color);
}
.combination-list-wrapper .list.combination-list-header.combination-list-opened > ul {
border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
}
.combination-list-wrapper .list.combination-list-header.combination-list-closed > ul {
border-radius: var(--f7-list-inset-border-radius);
}
.combination-list-wrapper .list.combination-list-header .combination-list-chevron-icon {
margin-left: auto;
}
.combination-list-wrapper .list.combination-list-content.inset > ul {
border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
}
/** Nested List item for framework7 **/
.nested-list-item .item-title {
width: 100%;
@@ -329,18 +491,11 @@ i.icon.la, i.icon.las, i.icon.lab {
text-overflow: ellipsis;
}
.nested-list-item:last-child > .swipeout-content > .item-link > .item-content > .item-inner:after {
background-color: transparent;
}
.sortable-enabled .nested-list-item .nested-list-item-child .item-inner {
padding-right: var(--f7-safe-area-right) !important;
}
/** Replacing the default style of Vue-pincode-input **/
.vue-pincode-input {
margin: 3px !important;
padding: 5px !important;
box-shadow: 0 0 2px rgba(0,0,0,.5) !important;
}
.theme-dark .vue-pincode-input {
box-shadow: 0 0 2px rgba(255,255,255,.5) !important;
}
</style>