zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions 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
+27 -16
View File
@@ -1,19 +1,23 @@
<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>
<p v-if="hint">{{ hint }}</p> </template>
<span v-if="beginDateTime && endDateTime"> <template #subtitle>
<div class="text-body-1 text-center text-wrap mt-6">
<p v-if="hint">{{ hint }}</p>
<span v-if="beginDateTime && endDateTime">
<span>{{ beginDateTime }}</span> <span>{{ beginDateTime }}</span>
<span> - </span> <span> - </span>
<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-btn color="secondary" variant="tonal" @click="cancel">{{ $t('Cancel') }}</v-btn>
</v-card-actions> </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
+23 -14
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>
<template #subtitle>
<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" />
</div>
</v-col>
</v-row>
</v-card-text> </v-card-text>
<v-card-text class="pa-4 w-100 d-flex justify-center"> <v-card-text class="overflow-y-visible">
<img alt="qrcode" class="img-url-qrcode" :src="mobileUrlQrCodePath" /> <div class="w-100 d-flex justify-center gap-4">
<v-btn :href="mobileVersionPath">{{$t('Switch to Mobile Version') }}</v-btn>
<v-btn color="secondary" variant="tonal" @click="showState = false">{{ $t('Close') }}</v-btn>
</div>
</v-card-text> </v-card-text>
<v-card-actions>
<v-btn :href="mobileVersionPath">{{$t('Switch to Mobile Version') }}</v-btn>
<v-spacer></v-spacer>
<v-btn @click="showState = false">{{ $t('Close') }}</v-btn>
</v-card-actions>
</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
+62 -58
View File
@@ -1,64 +1,68 @@
<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-row> <v-form class="mt-2 mt-md-6">
<v-col cols="12" md="12"> <v-row>
<v-text-field <v-col cols="12" md="12">
type="text" <v-text-field
clearable type="text"
persistent-placeholder clearable
:disabled="loading || submitting" persistent-placeholder
:label="$t('Category Name')" :disabled="loading || submitting"
:placeholder="$t('Category Name')" :label="$t('Category Name')"
v-model="category.name" :placeholder="$t('Category Name')"
/> v-model="category.name"
</v-col> />
<v-col cols="12" md="6"> </v-col>
<icon-select icon-type="category" <v-col cols="12" md="6">
:all-icon-infos="allCategoryIcons" <icon-select icon-type="category"
:label="$t('Category Icon')" :all-icon-infos="allCategoryIcons"
:color="category.color" :label="$t('Category Icon')"
:disabled="loading || submitting" :color="category.color"
v-model="category.icon" /> :disabled="loading || submitting"
</v-col> v-model="category.icon" />
<v-col cols="12" md="6"> </v-col>
<color-select :all-color-infos="allCategoryColors" <v-col cols="12" md="6">
:label="$t('Category Color')" <color-select :all-color-infos="allCategoryColors"
:disabled="loading || submitting" :label="$t('Category Color')"
v-model="category.color" /> :disabled="loading || submitting"
</v-col> v-model="category.color" />
<v-col cols="12" md="12"> </v-col>
<v-textarea <v-col cols="12" md="12">
type="text" <v-textarea
persistent-placeholder type="text"
rows="3" persistent-placeholder
:disabled="loading || submitting" rows="3"
:label="$t('Description')" :disabled="loading || submitting"
:placeholder="$t('Your category description (optional)')" :label="$t('Description')"
v-model="category.comment" :placeholder="$t('Your category description (optional)')"
/> v-model="category.comment"
</v-col> />
<v-col class="pt-0" cols="12" md="12" v-if="editCategoryId"> </v-col>
<v-switch inset :disabled="loading || submitting" <v-col class="py-0" cols="12" md="12" v-if="editCategoryId">
:label="$t('Visible')" v-model="category.visible"/> <v-switch inset :disabled="loading || submitting"
</v-col> :label="$t('Visible')" v-model="category.visible"/>
</v-row> </v-col>
</v-row>
</v-form>
</v-card-text>
<v-card-text class="overflow-y-visible">
<div class="w-100 d-flex justify-center mt-2 mt-sm-4 mt-md-6 gap-4">
<v-btn :disabled="inputIsEmpty || loading || submitting" @click="save">
{{ $t(saveButtonTitle) }}
<v-progress-circular indeterminate size="24" class="ml-2" v-if="submitting"></v-progress-circular>
</v-btn>
<v-btn color="secondary" variant="tonal"
:disabled="loading || submitting" @click="cancel">{{ $t('Cancel') }}</v-btn>
</div>
</v-card-text> </v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="gray" :disabled="loading || submitting" @click="cancel">{{ $t('Cancel') }}</v-btn>
<v-btn :disabled="inputIsEmpty || loading || submitting" @click="save">
{{ $t(saveButtonTitle) }}
<v-progress-circular indeterminate size="24" class="ml-2" v-if="submitting"></v-progress-circular>
</v-btn>
</v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
src/views/desktop/categories/list/dialogs/PresetDialog.vue
+18 -14
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-btn color="secondary" density="default" variant="tonal"
</v-card-actions> :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
+34 -33
View File
@@ -1,30 +1,30 @@
<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">
<v-btn density="comfortable" color="default" variant="text" class="ml-2" <h5 class="text-h5">{{ $t(title) }}</h5>
:disabled="loading || !hasAnyAvailableAccount" :icon="true"> </div>
<v-icon :icon="icons.more" /> <v-btn density="comfortable" color="default" variant="text" class="ml-2"
<v-menu activator="parent"> :disabled="loading || !hasAnyAvailableAccount" :icon="true">
<v-list> <v-icon :icon="icons.more" />
<v-list-item :prepend-icon="icons.selectAll" <v-menu activator="parent">
:title="$t('Select All')" <v-list>
@click="selectAll"></v-list-item> <v-list-item :prepend-icon="icons.selectAll"
<v-list-item :prepend-icon="icons.selectNone" :title="$t('Select All')"
:title="$t('Select None')" @click="selectAll"></v-list-item>
@click="selectNone"></v-list-item> <v-list-item :prepend-icon="icons.selectNone"
<v-list-item :prepend-icon="icons.selectInverse" :title="$t('Select None')"
:title="$t('Invert Selection')" @click="selectNone"></v-list-item>
@click="selectInvert"></v-list-item> <v-list-item :prepend-icon="icons.selectInverse"
</v-list> :title="$t('Invert Selection')"
</v-menu> @click="selectInvert"></v-list-item>
</v-btn> </v-list>
</v-toolbar> </v-menu>
</v-btn>
<template #title v-if="!dialogMode"> </div>
<div class="d-flex align-center"> <div class="d-flex align-center" v-else-if="!dialogMode">
<span>{{ $t('Default Account Filter') }}</span> <span>{{ $t(title) }}</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
+33 -32
View File
@@ -1,30 +1,30 @@
<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">
<v-btn density="comfortable" color="default" variant="text" class="ml-2" <h5 class="text-h5">{{ $t(title) }}</h5>
:disabled="loading || !hasAnyAvailableCategory" :icon="true"> </div>
<v-icon :icon="icons.more" /> <v-btn density="comfortable" color="default" variant="text" class="ml-2"
<v-menu activator="parent"> :disabled="loading || !hasAnyAvailableCategory" :icon="true">
<v-list> <v-icon :icon="icons.more" />
<v-list-item :prepend-icon="icons.selectAll" <v-menu activator="parent">
:title="$t('Select All')" <v-list>
@click="selectAll"></v-list-item> <v-list-item :prepend-icon="icons.selectAll"
<v-list-item :prepend-icon="icons.selectNone" :title="$t('Select All')"
:title="$t('Select None')" @click="selectAll"></v-list-item>
@click="selectNone"></v-list-item> <v-list-item :prepend-icon="icons.selectNone"
<v-list-item :prepend-icon="icons.selectInverse" :title="$t('Select None')"
:title="$t('Invert Selection')" @click="selectNone"></v-list-item>
@click="selectInvert"></v-list-item> <v-list-item :prepend-icon="icons.selectInverse"
</v-list> :title="$t('Invert Selection')"
</v-menu> @click="selectInvert"></v-list-item>
</v-btn> </v-list>
</v-toolbar> </v-menu>
</v-btn>
<template #title v-if="!dialogMode"> </div>
<div class="d-flex align-center"> <div class="d-flex align-center" v-else-if="!dialogMode">
<span>{{ $t('Default Transaction Category Filter') }}</span> <span>{{ $t(title) }}</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>