mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-21 10:14:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

modify dialog style

Browse Source
This commit is contained in:
MaysWind
2023-08-12 19:11:56 +08:00
parent ac2adaf4ba
commit 9a626b0d4f
8 changed files with 203 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/desktop/DateRangeSelectionDialog.vue
+23 -12
View File
@@ -1,10 +1,13 @@
<template> <template>
<v-dialog width="460" :persistent="!!persistent" v-model="showState"> <v-dialog class="date-range-selection-dialog" width="640" :persistent="!!persistent" v-model="showState">
<v-card> <v-card class="pa-2 pa-sm-4 pa-md-4">
<v-toolbar color="primary"> <template #title>
<v-toolbar-title>{{ title }}</v-toolbar-title> <div class="d-flex align-center justify-center">
</v-toolbar> <h5 class="text-h5">{{ $t(title) }}</h5>
<v-card-text class="pa-4"> </div>
</template>
<template #subtitle>
<div class="text-body-1 text-center text-wrap mt-6">
<p v-if="hint">{{ hint }}</p> <p v-if="hint">{{ hint }}</p>
<span v-if="beginDateTime && endDateTime"> <span v-if="beginDateTime && endDateTime">
<span>{{ beginDateTime }}</span> <span>{{ beginDateTime }}</span>
@@ -12,8 +15,9 @@
<span>{{ endDateTime }}</span> <span>{{ endDateTime }}</span>
</span> </span>
<slot></slot> <slot></slot>
</v-card-text> </div>
<v-card-text class="pa-4 w-100 d-flex justify-center"> </template>
<v-card-text class="mb-md-4 w-100 d-flex justify-center">
<vue-date-picker range inline enable-seconds auto-apply <vue-date-picker range inline enable-seconds auto-apply
ref="datetimepicker" ref="datetimepicker"
month-name-format="long" month-name-format="long"
@@ -35,11 +39,12 @@
</template> </template>
</vue-date-picker> </vue-date-picker>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-text class="overflow-y-visible">
<v-spacer></v-spacer> <div class="w-100 d-flex justify-center gap-4">
<v-btn color="gray" @click="cancel">{{ $t('Cancel') }}</v-btn>
<v-btn :disabled="!dateRange[0] || !dateRange[1]" @click="confirm">{{ $t('OK') }}</v-btn> <v-btn :disabled="!dateRange[0] || !dateRange[1]" @click="confirm">{{ $t('OK') }}</v-btn>
</v-card-actions> <v-btn color="secondary" variant="tonal" @click="cancel">{{ $t('Cancel') }}</v-btn>
</div>
</v-card-text>
</v-card> </v-card>
</v-dialog> </v-dialog>
</template> </template>
@@ -196,3 +201,9 @@ export default {
} }
} }
</script> </script>
<style>
.date-range-selection-dialog .dp__preset_ranges {
white-space: nowrap !important;
}
</style>
src/components/desktop/SwitchToMobileDialog.vue
+22 -13
View File
@@ -1,20 +1,29 @@
<template> <template>
<v-dialog width="400" v-model="showState"> <v-dialog width="440" v-model="showState">
<v-card> <v-card class="pa-2 pa-sm-4 pa-md-4">
<v-toolbar color="primary"> <template #title>
<v-toolbar-title>{{ $t('global.app.title') }}</v-toolbar-title> <div class="d-flex align-center justify-center">
</v-toolbar> <h5 class="text-h5">{{ $t('Use on Mobile Device') }}</h5>
<v-card-text class="pa-4"> </div>
<p>{{ $t('You can scan the below QR code on your mobile device.') }}</p> </template>
</v-card-text> <template #subtitle>
<v-card-text class="pa-4 w-100 d-flex justify-center"> <div class="text-body-1 text-center text-wrap mt-6">{{ $t('You can scan the below QR code on your mobile device.') }}</div>
</template>
<v-card-text class="mb-md-4">
<v-row>
<v-col cols="12" md="12">
<div class="w-100 d-flex justify-center">
<img alt="qrcode" class="img-url-qrcode" :src="mobileUrlQrCodePath" /> <img alt="qrcode" class="img-url-qrcode" :src="mobileUrlQrCodePath" />
</div>
</v-col>
</v-row>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-text class="overflow-y-visible">
<div class="w-100 d-flex justify-center gap-4">
<v-btn :href="mobileVersionPath">{{$t('Switch to Mobile Version') }}</v-btn> <v-btn :href="mobileVersionPath">{{$t('Switch to Mobile Version') }}</v-btn>
<v-spacer></v-spacer> <v-btn color="secondary" variant="tonal" @click="showState = false">{{ $t('Close') }}</v-btn>
<v-btn @click="showState = false">{{ $t('Close') }}</v-btn> </div>
</v-card-actions> </v-card-text>
</v-card> </v-card>
</v-dialog> </v-dialog>
</template> </template>
src/styles/desktop/global.scss
+4
View File
@@ -22,6 +22,10 @@ input[type=number] {
pointer-events: none !important; pointer-events: none !important;
} }
.overflow-y-visible {
overflow-y: visible !important;
}
.drag-handle { .drag-handle {
cursor: grab; cursor: grab;
} }
src/views/desktop/categories/list/dialogs/EditDialog.vue
+17 -13
View File
@@ -1,13 +1,14 @@
<template> <template>
<v-dialog scrollable width="600" max-height="600" :persistent="!!persistent" v-model="showState"> <v-dialog width="800" max-height="600" :persistent="!!persistent" v-model="showState">
<v-card> <v-card class="pa-2 pa-sm-4 pa-md-8">
<v-toolbar color="primary"> <template #title>
<v-toolbar-title> <div class="d-flex align-center justify-center">
<span>{{ $t(title) }}</span> <h5 class="text-h5">{{ $t(title) }}</h5>
<v-progress-circular indeterminate size="22" class="ml-2" v-if="loading"></v-progress-circular> <v-progress-circular indeterminate size="22" class="ml-2" v-if="loading"></v-progress-circular>
</v-toolbar-title> </div>
</v-toolbar> </template>
<v-card-text class="px-5 pt-7 pb-5"> <v-card-text>
<v-form class="mt-2 mt-md-6">
<v-row> <v-row>
<v-col cols="12" md="12"> <v-col cols="12" md="12">
<v-text-field <v-text-field
@@ -45,20 +46,23 @@
v-model="category.comment" v-model="category.comment"
/> />
</v-col> </v-col>
<v-col class="pt-0" cols="12" md="12" v-if="editCategoryId"> <v-col class="py-0" cols="12" md="12" v-if="editCategoryId">
<v-switch inset :disabled="loading || submitting" <v-switch inset :disabled="loading || submitting"
:label="$t('Visible')" v-model="category.visible"/> :label="$t('Visible')" v-model="category.visible"/>
</v-col> </v-col>
</v-row> </v-row>
</v-form>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-text class="overflow-y-visible">
<v-spacer></v-spacer> <div class="w-100 d-flex justify-center mt-2 mt-sm-4 mt-md-6 gap-4">
<v-btn color="gray" :disabled="loading || submitting" @click="cancel">{{ $t('Cancel') }}</v-btn>
<v-btn :disabled="inputIsEmpty || loading || submitting" @click="save"> <v-btn :disabled="inputIsEmpty || loading || submitting" @click="save">
{{ $t(saveButtonTitle) }} {{ $t(saveButtonTitle) }}
<v-progress-circular indeterminate size="24" class="ml-2" v-if="submitting"></v-progress-circular> <v-progress-circular indeterminate size="24" class="ml-2" v-if="submitting"></v-progress-circular>
</v-btn> </v-btn>
</v-card-actions> <v-btn color="secondary" variant="tonal"
:disabled="loading || submitting" @click="cancel">{{ $t('Cancel') }}</v-btn>
</div>
</v-card-text>
</v-card> </v-card>
</v-dialog> </v-dialog>
src/views/desktop/categories/list/dialogs/PresetDialog.vue
+14 -10
View File
@@ -1,10 +1,12 @@
<template> <template>
<v-dialog scrollable width="600" max-height="600" :persistent="!!persistent" v-model="showState"> <v-dialog scrollable width="800" max-height="600" :persistent="!!persistent" v-model="showState">
<v-card> <v-card class="pa-2 pa-sm-4 pa-md-8">
<v-toolbar color="primary"> <template #title>
<v-toolbar-title>{{ $t('Default Categories') }}</v-toolbar-title> <div class="d-flex align-center justify-center">
</v-toolbar> <h5 class="text-h5">{{ $t('Default Categories') }}</h5>
<v-card-text class="preset-transaction-categories pb-4"> </div>
</template>
<v-card-text class="preset-transaction-categories mt-0 mt-sm-2 mt-md-4 pb-4">
<template :key="categoryType" v-for="(categories, categoryType) in allPresetCategories"> <template :key="categoryType" v-for="(categories, categoryType) in allPresetCategories">
<div class="d-flex align-center mb-1"> <div class="d-flex align-center mb-1">
<h4>{{ getCategoryTypeName(categoryType) }}</h4> <h4>{{ getCategoryTypeName(categoryType) }}</h4>
@@ -48,14 +50,16 @@
</v-expansion-panels> </v-expansion-panels>
</template> </template>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-text class="overflow-y-visible">
<v-spacer></v-spacer> <div class="w-100 d-flex justify-center mt-2 mt-sm-4 mt-md-6 gap-4">
<v-btn color="gray" :disabled="submitting" @click="showState = false">{{ $t('Cancel') }}</v-btn>
<v-btn :disabled="submitting" @click="save"> <v-btn :disabled="submitting" @click="save">
{{ $t('Save') }} {{ $t('Save') }}
<v-progress-circular indeterminate size="24" class="ml-2" v-if="submitting"></v-progress-circular> <v-progress-circular indeterminate size="24" class="ml-2" v-if="submitting"></v-progress-circular>
</v-btn> </v-btn>
</v-card-actions> <v-btn color="secondary" density="default" variant="tonal"
:disabled="submitting" @click="showState = false">{{ $t('Cancel') }}</v-btn>
</div>
</v-card-text>
</v-card> </v-card>
</v-dialog> </v-dialog>
src/views/desktop/statistics/TransactionPage.vue
+2 -2
View File
@@ -195,13 +195,13 @@
v-model:show="showCustomDateRangeDialog" v-model:show="showCustomDateRangeDialog"
@dateRange:change="setCustomDateFilter" /> @dateRange:change="setCustomDateFilter" />
<v-dialog scrollable max-width="600" max-height="600" v-model="showFilterAccountDialog"> <v-dialog scrollable width="800" max-height="600" v-model="showFilterAccountDialog">
<account-filter-settings-card <account-filter-settings-card
:dialog-mode="true" :modify-default="false" :dialog-mode="true" :modify-default="false"
@settings:change="showFilterAccountDialog = false" /> @settings:change="showFilterAccountDialog = false" />
</v-dialog> </v-dialog>
<v-dialog scrollable max-width="600" max-height="600" v-model="showFilterCategoryDialog"> <v-dialog scrollable width="800" max-height="600" v-model="showFilterCategoryDialog">
<category-filter-settings-card <category-filter-settings-card
:dialog-mode="true" :modify-default="false" :dialog-mode="true" :modify-default="false"
@settings:change="showFilterCategoryDialog = false" /> @settings:change="showFilterCategoryDialog = false" />
src/views/desktop/statistics/settings/cards/AccountFilterSettingsCard.vue
+17 -16
View File
@@ -1,8 +1,10 @@
<template> <template>
<v-card> <v-card :class="{ 'pa-2 pa-sm-4 pa-md-8': dialogMode }">
<v-toolbar color="primary" v-if="dialogMode"> <template #title>
<v-toolbar-title>{{ $t('Default Account Filter') }}</v-toolbar-title> <div class="d-flex align-center justify-center" v-if="dialogMode">
<v-spacer/> <div class="w-100 text-center">
<h5 class="text-h5">{{ $t(title) }}</h5>
</div>
<v-btn density="comfortable" color="default" variant="text" class="ml-2" <v-btn density="comfortable" color="default" variant="text" class="ml-2"
:disabled="loading || !hasAnyAvailableAccount" :icon="true"> :disabled="loading || !hasAnyAvailableAccount" :icon="true">
<v-icon :icon="icons.more" /> <v-icon :icon="icons.more" />
@@ -20,11 +22,9 @@
</v-list> </v-list>
</v-menu> </v-menu>
</v-btn> </v-btn>
</v-toolbar> </div>
<div class="d-flex align-center" v-else-if="!dialogMode">
<template #title v-if="!dialogMode"> <span>{{ $t(title) }}</span>
<div class="d-flex align-center">
<span>{{ $t('Default Account Filter') }}</span>
<v-spacer/> <v-spacer/>
<v-btn density="comfortable" color="default" variant="text" class="ml-2" <v-btn density="comfortable" color="default" variant="text" class="ml-2"
:disabled="loading" :icon="true"> :disabled="loading" :icon="true">
@@ -51,11 +51,11 @@
:key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]"></v-skeleton-loader> :key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]"></v-skeleton-loader>
</div> </div>
<v-card-text v-if="!loading && !hasAnyAvailableAccount"> <v-card-text :class="{ 'mt-0 mt-sm-2 mt-md-4': dialogMode }" v-if="!loading && !hasAnyAvailableAccount">
<span class="text-body-1">{{ $t('No available account') }}</span> <span class="text-body-1">{{ $t('No available account') }}</span>
</v-card-text> </v-card-text>
<v-card-text v-else-if="!loading && hasAnyAvailableAccount"> <v-card-text :class="{ 'mt-0 mt-sm-2 mt-md-4': dialogMode }" v-else-if="!loading && hasAnyAvailableAccount">
<v-expansion-panels class="account-categories" multiple v-model="expandAccountCategories"> <v-expansion-panels class="account-categories" multiple v-model="expandAccountCategories">
<v-expansion-panel :key="accountCategory.category" <v-expansion-panel :key="accountCategory.category"
:value="accountCategory.category" :value="accountCategory.category"
@@ -112,11 +112,12 @@
</v-expansion-panels> </v-expansion-panels>
</v-card-text> </v-card-text>
<v-card-actions class="mt-3" v-if="dialogMode"> <v-card-text class="overflow-y-visible" v-if="dialogMode">
<v-spacer></v-spacer> <div class="w-100 d-flex justify-center mt-2 mt-sm-4 mt-md-6 gap-4">
<v-btn color="gray" @click="cancel">{{ $t('Cancel') }}</v-btn> <v-btn :disabled="!hasAnyAvailableAccount" @click="save">{{ $t(applyText) }}</v-btn>
<v-btn color="primary" :disabled="!hasAnyAvailableAccount" @click="save">{{ $t('OK') }}</v-btn> <v-btn color="secondary" variant="tonal" @click="cancel">{{ $t('Cancel') }}</v-btn>
</v-card-actions> </div>
</v-card-text>
</v-card> </v-card>
</template> </template>
src/views/desktop/statistics/settings/cards/CategoryFilterSettingsCard.vue
+16 -15
View File
@@ -1,8 +1,10 @@
<template> <template>
<v-card> <v-card :class="{ 'pa-2 pa-sm-4 pa-md-8': dialogMode }">
<v-toolbar color="primary" v-if="dialogMode"> <template #title>
<v-toolbar-title>{{ $t('Default Transaction Category Filter') }}</v-toolbar-title> <div class="d-flex align-center justify-center" v-if="dialogMode">
<v-spacer/> <div class="w-100 text-center">
<h5 class="text-h5">{{ $t(title) }}</h5>
</div>
<v-btn density="comfortable" color="default" variant="text" class="ml-2" <v-btn density="comfortable" color="default" variant="text" class="ml-2"
:disabled="loading || !hasAnyAvailableCategory" :icon="true"> :disabled="loading || !hasAnyAvailableCategory" :icon="true">
<v-icon :icon="icons.more" /> <v-icon :icon="icons.more" />
@@ -20,11 +22,9 @@
</v-list> </v-list>
</v-menu> </v-menu>
</v-btn> </v-btn>
</v-toolbar> </div>
<div class="d-flex align-center" v-else-if="!dialogMode">
<template #title v-if="!dialogMode"> <span>{{ $t(title) }}</span>
<div class="d-flex align-center">
<span>{{ $t('Default Transaction Category Filter') }}</span>
<v-spacer/> <v-spacer/>
<v-btn density="comfortable" color="default" variant="text" class="ml-2" <v-btn density="comfortable" color="default" variant="text" class="ml-2"
:disabled="loading" :icon="true"> :disabled="loading" :icon="true">
@@ -51,7 +51,7 @@
:key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]"></v-skeleton-loader> :key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]"></v-skeleton-loader>
</div> </div>
<v-card-text v-else-if="!loading"> <v-card-text :class="{ 'mt-0 mt-sm-2 mt-md-4': dialogMode }" v-else-if="!loading">
<v-expansion-panels class="category-types" multiple v-model="expandCategoryTypes"> <v-expansion-panels class="category-types" multiple v-model="expandCategoryTypes">
<v-expansion-panel :key="transactionType.type" <v-expansion-panel :key="transactionType.type"
:value="transactionType.type" :value="transactionType.type"
@@ -110,11 +110,12 @@
</v-expansion-panels> </v-expansion-panels>
</v-card-text> </v-card-text>
<v-card-actions class="mt-3" v-if="dialogMode"> <v-card-text class="overflow-y-visible" v-if="dialogMode">
<v-spacer></v-spacer> <div class="w-100 d-flex justify-center mt-2 mt-sm-4 mt-md-6 gap-4">
<v-btn color="gray" @click="cancel">{{ $t('Cancel') }}</v-btn> <v-btn :disabled="!hasAnyAvailableCategory" @click="save">{{ $t(applyText) }}</v-btn>
<v-btn color="primary" :disabled="!hasAnyAvailableCategory" @click="save">{{ $t('OK') }}</v-btn> <v-btn color="secondary" variant="tonal" @click="cancel">{{ $t('Cancel') }}</v-btn>
</v-card-actions> </div>
</v-card-text>
</v-card> </v-card>
</template> </template>