mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-15 23:47:33 +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
+27 -16
View File
@@ -1,19 +1,23 @@
<template>
<v-dialog width="460" :persistent="!!persistent" v-model="showState">
<v-card>
<v-toolbar color="primary">
<v-toolbar-title>{{ title }}</v-toolbar-title>
</v-toolbar>
<v-card-text class="pa-4">
<p v-if="hint">{{ hint }}</p>
<span v-if="beginDateTime && endDateTime">
<v-dialog class="date-range-selection-dialog" width="640" :persistent="!!persistent" v-model="showState">
<v-card class="pa-2 pa-sm-4 pa-md-4">
<template #title>
<div class="d-flex align-center justify-center">
<h5 class="text-h5">{{ $t(title) }}</h5>
</div>
</template>
<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> - </span>
<span>{{ endDateTime }}</span>
</span>
<slot></slot>
</v-card-text>
<v-card-text class="pa-4 w-100 d-flex justify-center">
<slot></slot>
</div>
</template>
<v-card-text class="mb-md-4 w-100 d-flex justify-center">
<vue-date-picker range inline enable-seconds auto-apply
ref="datetimepicker"
month-name-format="long"
@@ -35,11 +39,12 @@
</template>
</vue-date-picker>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="gray" @click="cancel">{{ $t('Cancel') }}</v-btn>
<v-btn :disabled="!dateRange[0] || !dateRange[1]" @click="confirm">{{ $t('OK') }}</v-btn>
</v-card-actions>
<v-card-text class="overflow-y-visible">
<div class="w-100 d-flex justify-center gap-4">
<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>
</div>
</v-card-text>
</v-card>
</v-dialog>
</template>
@@ -196,3 +201,9 @@ export default {
}
}
</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>
<v-dialog width="400" v-model="showState">
<v-card>
<v-toolbar color="primary">
<v-toolbar-title>{{ $t('global.app.title') }}</v-toolbar-title>
</v-toolbar>
<v-card-text class="pa-4">
<p>{{ $t('You can scan the below QR code on your mobile device.') }}</p>
<v-dialog width="440" v-model="showState">
<v-card class="pa-2 pa-sm-4 pa-md-4">
<template #title>
<div class="d-flex align-center justify-center">
<h5 class="text-h5">{{ $t('Use on Mobile Device') }}</h5>
</div>
</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 class="pa-4 w-100 d-flex justify-center">
<img alt="qrcode" class="img-url-qrcode" :src="mobileUrlQrCodePath" />
<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 color="secondary" variant="tonal" @click="showState = false">{{ $t('Close') }}</v-btn>
</div>
</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-dialog>
</template>