Skip to content

Commit 0682901

Browse files
mayswindmayswind
committed
use the new dialog style on the desktop version
1 parent 6bd20e4 commit 0682901

35 files changed

Lines changed: 1517 additions & 1409 deletions

‎src/components/desktop/AccountBalanceTrendsChart.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -442,7 +442,7 @@ function formatDisplayChangeRate(current: BigDecimal, reference: BigDecimal): st
442442
<style scoped>
443443
.account-balance-trends-chart-container {
444444
width: 100%;
445-
height: 418px;
445+
height: 404px;
446446
margin-top: 10px;
447447
}
448448
</style>

‎src/components/desktop/AmountInput.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
:label="label" :placeholder="placeholder"
2828
:persistent-placeholder="!!persistentPlaceholder"
2929
v-model="currentFormula" v-if="!hide && formulaMode"
30-
@keydown.enter="calculateFormula" @click="onClick">
30+
@keydown.enter.prevent @keyup.enter.stop.prevent="calculateFormula" @click="onClick">
3131
<template #prepend-inner v-if="currency && prependText">
3232
<div>{{ prependText }}</div>
3333
</template>

‎src/components/desktop/AmountInputDialog.vue‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,34 @@
11
<template>
2-
<v-dialog persistent min-width="320" width="auto" v-model="showState">
3-
<v-card>
4-
<v-toolbar :color="finalColor">
5-
<v-toolbar-title>{{ titleContent }}</v-toolbar-title>
6-
</v-toolbar>
7-
<v-card-text v-if="textContent" class="pa-4 pb-6">{{ textContent }}</v-card-text>
8-
<v-card-text>
9-
<v-form>
10-
<v-row>
11-
<v-col cols="12">
12-
<amount-input :persistent-placeholder="true"
13-
:autofocus="true"
14-
:currency="dialogOptions?.currency"
15-
:show-currency="!!dialogOptions?.currency"
16-
:label="inputLabelContent"
17-
:placeholder="inputPlaceholderContent"
18-
v-model="amount"
19-
@enter="confirm" />
20-
</v-col>
21-
</v-row>
22-
</v-form>
23-
</v-card-text>
24-
<v-card-actions class="px-4 pb-4">
25-
<v-spacer></v-spacer>
26-
<v-btn color="gray" @click="cancel">{{ tt('Cancel') }}</v-btn>
2+
<v-dialog persistent width="500" v-model="showState">
3+
<one-column-dialog-layout :title="titleContent" :cancel-button-title="tt('Cancel')"
4+
@cancel="cancel">
5+
<template #content>
6+
<div class="text-body-1 text-wrap my-4" v-if="textContent">{{ textContent }}</div>
7+
<div class="d-flex justify-center w-100">
8+
<v-form class="w-100">
9+
<v-row>
10+
<v-col cols="12">
11+
<amount-input :persistent-placeholder="true"
12+
:autofocus="true"
13+
:currency="dialogOptions?.currency"
14+
:show-currency="!!dialogOptions?.currency"
15+
:enable-formula="true"
16+
:label="inputLabelContent"
17+
:placeholder="inputPlaceholderContent"
18+
v-model="amount"
19+
@enter="confirm" />
20+
</v-col>
21+
</v-row>
22+
</v-form>
23+
</div>
24+
</template>
25+
26+
<template #footer>
27+
<v-btn color="secondary" variant="tonal" @click="cancel">{{ tt('Cancel') }}</v-btn>
28+
<v-spacer />
2729
<v-btn :color="finalColor" @click="confirm">{{ tt('OK') }}</v-btn>
28-
</v-card-actions>
29-
</v-card>
30+
</template>
31+
</one-column-dialog-layout>
3032
</v-dialog>
3133
</template>
3234

‎src/components/desktop/DateRangeSelectionDialog.vue‎

Lines changed: 19 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
11
<template>
22
<v-dialog class="date-range-selection-dialog" width="640" :persistent="!!persistent" v-model="showState">
3-
<v-card class="pa-sm-1 pa-md-2">
4-
<template #title>
5-
<h4 class="text-h4">{{ title }}</h4>
3+
<one-column-dialog-layout :title="title" :cancel-button-title="tt('Cancel')"
4+
@cancel="cancel">
5+
<template #toolbar>
6+
<v-btn class="me-2" density="comfortable" variant="outlined"
7+
:disabled="!dateRange[0] || !dateRange[1]" @click="confirm">{{ tt('OK') }}</v-btn>
68
</template>
7-
<template #subtitle>
8-
<div class="text-body-1 text-wrap mt-2">
9-
<p v-if="hint">{{ hint }}</p>
10-
<span v-if="beginDateTime && endDateTime">
11-
<span>{{ beginDateTime }}</span>
12-
<span> - </span>
13-
<span>{{ endDateTime }}</span>
14-
</span>
9+
10+
<template #content>
11+
<div class="text-body-1 mt-3" v-if="beginDateTime && endDateTime">
12+
<span>{{ beginDateTime }}</span>
13+
<span> - </span>
14+
<span>{{ endDateTime }}</span>
15+
</div>
16+
17+
<div class="text-body-1 text-wrap mt-2" v-if="hint">
18+
<span>{{ hint }}</span>
1519
<slot></slot>
1620
</div>
17-
</template>
18-
<v-card-text class="w-100 d-flex justify-center">
19-
<v-row class="match-height">
21+
22+
<v-row class="mt-1">
2023
<v-col>
2124
<date-time-picker :is-dark-mode="isDarkMode"
2225
:enable-time-picker="true"
@@ -27,14 +30,8 @@
2730
</date-time-picker>
2831
</v-col>
2932
</v-row>
30-
</v-card-text>
31-
<v-card-text>
32-
<div class="w-100 d-flex justify-center flex-wrap mt-sm-1 mt-md-2 gap-4">
33-
<v-btn :disabled="!dateRange[0] || !dateRange[1]" @click="confirm">{{ tt('OK') }}</v-btn>
34-
<v-btn color="secondary" variant="tonal" @click="cancel">{{ tt('Cancel') }}</v-btn>
35-
</div>
36-
</v-card-text>
37-
</v-card>
33+
</template>
34+
</one-column-dialog-layout>
3835
</v-dialog>
3936
</template>
4037

‎src/components/desktop/MonthRangeSelectionDialog.vue‎

Lines changed: 19 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,34 @@
11
<template>
22
<v-dialog class="month-range-selection-dialog" width="640" :persistent="!!persistent" v-model="showState">
3-
<v-card class="pa-sm-1 pa-md-2">
4-
<template #title>
5-
<h4 class="text-h4">{{ title }}</h4>
3+
<one-column-dialog-layout :title="title" :cancel-button-title="tt('Cancel')"
4+
@cancel="cancel">
5+
<template #toolbar>
6+
<v-btn class="me-2" density="comfortable" variant="outlined"
7+
:disabled="!dateRange[0] || !dateRange[1]" @click="confirm">{{ tt('OK') }}</v-btn>
68
</template>
7-
<template #subtitle>
8-
<div class="text-body-1 text-wrap mt-2">
9-
<p v-if="hint">{{ hint }}</p>
10-
<span v-if="beginDateTime && endDateTime">
11-
<span>{{ beginDateTime }}</span>
12-
<span> - </span>
13-
<span>{{ endDateTime }}</span>
14-
</span>
9+
10+
<template #content>
11+
<div class="text-body-1 mt-3" v-if="beginDateTime && endDateTime">
12+
<span>{{ beginDateTime }}</span>
13+
<span> - </span>
14+
<span>{{ endDateTime }}</span>
15+
</div>
16+
17+
<div class="text-body-1 text-wrap mt-2" v-if="hint">
18+
<span>{{ hint }}</span>
1519
<slot></slot>
1620
</div>
17-
</template>
18-
<v-card-text class="d-flex flex-column flex-md-row flex-grow-1 overflow-y-auto">
19-
<v-row class="match-height">
21+
22+
<v-row class="mt-1">
2023
<v-col cols="12" md="6">
2124
<month-picker :is-dark-mode="isDarkMode" v-model="dateRange[0]"></month-picker>
2225
</v-col>
2326
<v-col cols="12" md="6">
2427
<month-picker :is-dark-mode="isDarkMode" v-model="dateRange[1]"></month-picker>
2528
</v-col>
2629
</v-row>
27-
</v-card-text>
28-
<v-card-text>
29-
<div class="w-100 d-flex justify-center mt-2 gap-4">
30-
<v-btn :disabled="!dateRange[0] || !dateRange[1]" @click="confirm">{{ tt('OK') }}</v-btn>
31-
<v-btn color="secondary" variant="tonal" @click="cancel">{{ tt('Cancel') }}</v-btn>
32-
</div>
33-
</v-card-text>
34-
</v-card>
30+
</template>
31+
</one-column-dialog-layout>
3532
</v-dialog>
3633
</template>
3734

‎src/components/desktop/MonthSelectionDialog.vue‎

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,24 @@
11
<template>
22
<v-dialog class="month-selection-dialog" width="640" :persistent="!!persistent" v-model="showState">
3-
<v-card class="pa-sm-1 pa-md-2">
4-
<template #title>
5-
<h4 class="text-h4">{{ title }}</h4>
3+
<one-column-dialog-layout :title="title" :cancel-button-title="tt('Cancel')"
4+
@cancel="cancel">
5+
<template #toolbar>
6+
<v-btn class="me-2" density="comfortable" variant="outlined"
7+
:disabled="!monthValue" @click="confirm">{{ tt('OK') }}</v-btn>
68
</template>
7-
<template #subtitle>
9+
10+
<template #content>
811
<div class="text-body-1 text-wrap mt-2" v-if="hint">
9-
<p>{{ hint }}</p>
12+
<span>{{ hint }}</span>
1013
<slot></slot>
1114
</div>
12-
</template>
13-
<v-card-text class="w-100 d-flex justify-center">
14-
<v-row class="match-height">
15+
<v-row class="mt-2">
1516
<v-col>
1617
<month-picker :is-dark-mode="isDarkMode" v-model="monthValue"></month-picker>
1718
</v-col>
1819
</v-row>
19-
</v-card-text>
20-
<v-card-text>
21-
<div class="w-100 d-flex justify-center flex-wrap mt-sm-1 mt-md-2 gap-4">
22-
<v-btn :disabled="!monthValue" @click="confirm">{{ tt('OK') }}</v-btn>
23-
<v-btn color="secondary" variant="tonal" @click="cancel">{{ tt('Cancel') }}</v-btn>
24-
</div>
25-
</v-card-text>
26-
</v-card>
20+
</template>
21+
</one-column-dialog-layout>
2722
</v-dialog>
2823
</template>
2924

‎src/components/desktop/OneColumnDialogLayout.vue‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<template>
2+
<v-card>
3+
<v-card-item class="px-0 pt-3 pb-2">
4+
<v-card-title>
5+
<div class="d-flex align-center justify-center ms-5">
6+
<div class="d-flex align-center">
7+
<h4 class="text-h4 text-wrap">{{ title }}</h4>
8+
<v-progress-circular indeterminate size="22" class="ms-2" v-if="loading"></v-progress-circular>
9+
</div>
10+
<slot name="after-title" />
11+
<v-spacer/>
12+
<slot name="toolbar" />
13+
<v-divider vertical class="ms-2" v-if="cancelButtonTitle" />
14+
<div class="d-flex align-items-center mx-3" v-if="cancelButtonTitle">
15+
<v-icon size="22" :icon="mdiClose" :disabled="disabled" @click="emit('cancel')"></v-icon>
16+
<v-tooltip activator="parent">{{ cancelButtonTitle }}</v-tooltip>
17+
</div>
18+
</div>
19+
<slot name="subtitle" />
20+
</v-card-title>
21+
</v-card-item>
22+
<v-divider />
23+
<v-card-text class="flex-grow-1 overflow-y-auto" :class="contentClass" :style="contentStyle">
24+
<slot name="content" />
25+
</v-card-text>
26+
<v-divider v-if="$slots['footer']" />
27+
<v-card-text class="py-3" v-if="$slots['footer']">
28+
<div class="w-100 d-flex justify-center flex-wrap gap-4">
29+
<slot name="footer" />
30+
</div>
31+
</v-card-text>
32+
</v-card>
33+
</template>
34+
35+
<script setup lang="ts">
36+
import {
37+
mdiClose
38+
} from '@mdi/js';
39+
40+
defineProps<{
41+
title: string;
42+
cancelButtonTitle?: string;
43+
loading?: boolean;
44+
disabled?: boolean;
45+
contentClass?: string;
46+
contentStyle?: string;
47+
}>();
48+
49+
const emit = defineEmits<{
50+
(e: 'cancel'): void;
51+
}>();
52+
</script>

‎src/components/desktop/RenameDialog.vue‎

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,23 @@
11
<template>
2-
<v-dialog max-width="500" :persistent="oldName !== newName" v-model="showState">
3-
<v-card class="pa-sm-1 pa-md-2">
4-
<template #title>
5-
<h4 class="text-h4 text-wrap">{{ dialogTitle || defaultTitle }}</h4>
6-
</template>
7-
<v-card-text class="w-100 d-flex justify-center">
8-
<v-text-field persistent-placeholder
9-
:autofocus="true"
10-
:label="label"
11-
:placeholder="placeholder"
12-
v-model="newName"
13-
@keyup.enter="save" />
14-
</v-card-text>
15-
<v-card-text>
16-
<div class="w-100 d-flex justify-center flex-wrap mt-sm-1 mt-md-2 gap-4">
17-
<v-btn color="primary" :disabled="!newName || oldName === newName" @click="save">
18-
{{ tt('Save') }}
19-
</v-btn>
20-
<v-btn color="secondary" variant="tonal" @click="cancel">
21-
{{ tt('Cancel') }}
22-
</v-btn>
2+
<v-dialog width="500" :persistent="oldName !== newName" v-model="showState">
3+
<one-column-dialog-layout :title="dialogTitle || defaultTitle" :cancel-button-title="tt('Cancel')"
4+
@cancel="cancel">
5+
<template #content>
6+
<div class="mt-4">
7+
<v-text-field persistent-placeholder
8+
:autofocus="true"
9+
:label="label"
10+
:placeholder="placeholder"
11+
v-model="newName"
12+
@keyup.enter="save" />
2313
</div>
24-
</v-card-text>
25-
</v-card>
14+
</template>
15+
16+
<template #footer>
17+
<v-spacer />
18+
<v-btn color="primary" :disabled="!newName || oldName === newName" @click="save">{{ tt('Save') }}</v-btn>
19+
</template>
20+
</one-column-dialog-layout>
2621
</v-dialog>
2722
</template>
2823

‎src/components/desktop/SwitchToMobileDialog.vue‎

Lines changed: 23 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,30 @@
11
<template>
22
<v-dialog width="420" v-model="showState">
3-
<v-card class="pa-sm-1 pa-md-2">
4-
<template #title>
5-
<h4 class="text-h4">{{ tt('Use on Mobile Device') }}</h4>
3+
<one-column-dialog-layout :title="tt('Use on Mobile Device')" :cancel-button-title="tt('Close')"
4+
@cancel="showState = false">
5+
<template #content>
6+
<div class="text-body-1 text-wrap my-4">{{ tt('You can scan the QR code below on your mobile device.') }}</div>
7+
<div class="d-flex justify-center w-100">
8+
<v-img alt="qrcode" class="img-url-qrcode" :src="mobileUrlQrCodePath">
9+
<template #placeholder>
10+
<div class="d-flex align-center justify-center fill-height">
11+
<v-progress-circular color="grey-500" indeterminate size="48"></v-progress-circular>
12+
</div>
13+
</template>
14+
<template #error>
15+
<div class="d-flex align-center justify-center fill-height">
16+
<span class="text-body-1">{{ tt('Failed to load QR code') }}</span>
17+
</div>
18+
</template>
19+
</v-img>
20+
</div>
621
</template>
7-
<template #subtitle>
8-
<div class="text-body-1 text-wrap mt-4">{{ tt('You can scan the QR code below on your mobile device.') }}</div>
22+
23+
<template #footer>
24+
<v-spacer />
25+
<v-btn :href="mobileVersionPath">{{ tt('Switch to Mobile Version') }}</v-btn>
926
</template>
10-
<v-card-text>
11-
<v-row>
12-
<v-col cols="12" md="12">
13-
<div class="w-100 d-flex justify-center">
14-
<v-img alt="qrcode" class="img-url-qrcode" :src="mobileUrlQrCodePath">
15-
<template #placeholder>
16-
<div class="d-flex align-center justify-center fill-height">
17-
<v-progress-circular color="grey-500" indeterminate size="48"></v-progress-circular>
18-
</div>
19-
</template>
20-
<template #error>
21-
<div class="d-flex align-center justify-center fill-height">
22-
<span class="text-body-1">{{ tt('Failed to load QR code') }}</span>
23-
</div>
24-
</template>
25-
</v-img>
26-
</div>
27-
</v-col>
28-
</v-row>
29-
</v-card-text>
30-
<v-card-text>
31-
<div class="w-100 d-flex justify-center flex-wrap mt-sm-1 mt-md-2 gap-4">
32-
<v-btn :href="mobileVersionPath">{{ tt('Switch to Mobile Version') }}</v-btn>
33-
<v-btn color="secondary" variant="tonal" @click="showState = false">{{ tt('Close') }}</v-btn>
34-
</div>
35-
</v-card-text>
36-
</v-card>
27+
</one-column-dialog-layout>
3728
</v-dialog>
3829
</template>
3930

0 commit comments

Comments
 (0)