modify dialog style
This commit is contained in:
MaysWind
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -22,6 +22,10 @@ input[type=number] {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.overflow-y-visible {
|
||||
overflow-y: visible !important;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
@@ -1,64 +1,68 @@
|
||||
<template>
|
||||
<v-dialog scrollable width="600" max-height="600" :persistent="!!persistent" v-model="showState">
|
||||
<v-card>
|
||||
<v-toolbar color="primary">
|
||||
<v-toolbar-title>
|
||||
<span>{{ $t(title) }}</span>
|
||||
<v-dialog width="800" max-height="600" :persistent="!!persistent" v-model="showState">
|
||||
<v-card class="pa-2 pa-sm-4 pa-md-8">
|
||||
<template #title>
|
||||
<div class="d-flex align-center justify-center">
|
||||
<h5 class="text-h5">{{ $t(title) }}</h5>
|
||||
<v-progress-circular indeterminate size="22" class="ml-2" v-if="loading"></v-progress-circular>
|
||||
</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-card-text class="px-5 pt-7 pb-5">
|
||||
<v-row>
|
||||
<v-col cols="12" md="12">
|
||||
<v-text-field
|
||||
type="text"
|
||||
clearable
|
||||
persistent-placeholder
|
||||
:disabled="loading || submitting"
|
||||
:label="$t('Category Name')"
|
||||
:placeholder="$t('Category Name')"
|
||||
v-model="category.name"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<icon-select icon-type="category"
|
||||
:all-icon-infos="allCategoryIcons"
|
||||
:label="$t('Category Icon')"
|
||||
:color="category.color"
|
||||
:disabled="loading || submitting"
|
||||
v-model="category.icon" />
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<color-select :all-color-infos="allCategoryColors"
|
||||
:label="$t('Category Color')"
|
||||
:disabled="loading || submitting"
|
||||
v-model="category.color" />
|
||||
</v-col>
|
||||
<v-col cols="12" md="12">
|
||||
<v-textarea
|
||||
type="text"
|
||||
persistent-placeholder
|
||||
rows="3"
|
||||
:disabled="loading || submitting"
|
||||
:label="$t('Description')"
|
||||
: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-switch inset :disabled="loading || submitting"
|
||||
:label="$t('Visible')" v-model="category.visible"/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
<v-card-text>
|
||||
<v-form class="mt-2 mt-md-6">
|
||||
<v-row>
|
||||
<v-col cols="12" md="12">
|
||||
<v-text-field
|
||||
type="text"
|
||||
clearable
|
||||
persistent-placeholder
|
||||
:disabled="loading || submitting"
|
||||
:label="$t('Category Name')"
|
||||
:placeholder="$t('Category Name')"
|
||||
v-model="category.name"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<icon-select icon-type="category"
|
||||
:all-icon-infos="allCategoryIcons"
|
||||
:label="$t('Category Icon')"
|
||||
:color="category.color"
|
||||
:disabled="loading || submitting"
|
||||
v-model="category.icon" />
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<color-select :all-color-infos="allCategoryColors"
|
||||
:label="$t('Category Color')"
|
||||
:disabled="loading || submitting"
|
||||
v-model="category.color" />
|
||||
</v-col>
|
||||
<v-col cols="12" md="12">
|
||||
<v-textarea
|
||||
type="text"
|
||||
persistent-placeholder
|
||||
rows="3"
|
||||
:disabled="loading || submitting"
|
||||
:label="$t('Description')"
|
||||
:placeholder="$t('Your category description (optional)')"
|
||||
v-model="category.comment"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col class="py-0" cols="12" md="12" v-if="editCategoryId">
|
||||
<v-switch inset :disabled="loading || submitting"
|
||||
:label="$t('Visible')" v-model="category.visible"/>
|
||||
</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-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-dialog>
|
||||
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
<template>
|
||||
<v-dialog scrollable width="600" max-height="600" :persistent="!!persistent" v-model="showState">
|
||||
<v-card>
|
||||
<v-toolbar color="primary">
|
||||
<v-toolbar-title>{{ $t('Default Categories') }}</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-card-text class="preset-transaction-categories pb-4">
|
||||
<v-dialog scrollable width="800" max-height="600" :persistent="!!persistent" v-model="showState">
|
||||
<v-card class="pa-2 pa-sm-4 pa-md-8">
|
||||
<template #title>
|
||||
<div class="d-flex align-center justify-center">
|
||||
<h5 class="text-h5">{{ $t('Default Categories') }}</h5>
|
||||
</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">
|
||||
<div class="d-flex align-center mb-1">
|
||||
<h4>{{ getCategoryTypeName(categoryType) }}</h4>
|
||||
@@ -48,14 +50,16 @@
|
||||
</v-expansion-panels>
|
||||
</template>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="gray" :disabled="submitting" @click="showState = false">{{ $t('Cancel') }}</v-btn>
|
||||
<v-btn :disabled="submitting" @click="save">
|
||||
{{ $t('Save') }}
|
||||
<v-progress-circular indeterminate size="24" class="ml-2" v-if="submitting"></v-progress-circular>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
<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="submitting" @click="save">
|
||||
{{ $t('Save') }}
|
||||
<v-progress-circular indeterminate size="24" class="ml-2" v-if="submitting"></v-progress-circular>
|
||||
</v-btn>
|
||||
<v-btn color="secondary" density="default" variant="tonal"
|
||||
:disabled="submitting" @click="showState = false">{{ $t('Cancel') }}</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
|
||||
@@ -195,13 +195,13 @@
|
||||
v-model:show="showCustomDateRangeDialog"
|
||||
@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
|
||||
:dialog-mode="true" :modify-default="false"
|
||||
@settings:change="showFilterAccountDialog = false" />
|
||||
</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
|
||||
:dialog-mode="true" :modify-default="false"
|
||||
@settings:change="showFilterCategoryDialog = false" />
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-toolbar color="primary" v-if="dialogMode">
|
||||
<v-toolbar-title>{{ $t('Default Account Filter') }}</v-toolbar-title>
|
||||
<v-spacer/>
|
||||
<v-btn density="comfortable" color="default" variant="text" class="ml-2"
|
||||
:disabled="loading || !hasAnyAvailableAccount" :icon="true">
|
||||
<v-icon :icon="icons.more" />
|
||||
<v-menu activator="parent">
|
||||
<v-list>
|
||||
<v-list-item :prepend-icon="icons.selectAll"
|
||||
:title="$t('Select All')"
|
||||
@click="selectAll"></v-list-item>
|
||||
<v-list-item :prepend-icon="icons.selectNone"
|
||||
:title="$t('Select None')"
|
||||
@click="selectNone"></v-list-item>
|
||||
<v-list-item :prepend-icon="icons.selectInverse"
|
||||
:title="$t('Invert Selection')"
|
||||
@click="selectInvert"></v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
|
||||
<template #title v-if="!dialogMode">
|
||||
<div class="d-flex align-center">
|
||||
<span>{{ $t('Default Account Filter') }}</span>
|
||||
<v-card :class="{ 'pa-2 pa-sm-4 pa-md-8': dialogMode }">
|
||||
<template #title>
|
||||
<div class="d-flex align-center justify-center" v-if="dialogMode">
|
||||
<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"
|
||||
:disabled="loading || !hasAnyAvailableAccount" :icon="true">
|
||||
<v-icon :icon="icons.more" />
|
||||
<v-menu activator="parent">
|
||||
<v-list>
|
||||
<v-list-item :prepend-icon="icons.selectAll"
|
||||
:title="$t('Select All')"
|
||||
@click="selectAll"></v-list-item>
|
||||
<v-list-item :prepend-icon="icons.selectNone"
|
||||
:title="$t('Select None')"
|
||||
@click="selectNone"></v-list-item>
|
||||
<v-list-item :prepend-icon="icons.selectInverse"
|
||||
:title="$t('Invert Selection')"
|
||||
@click="selectInvert"></v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-btn>
|
||||
</div>
|
||||
<div class="d-flex align-center" v-else-if="!dialogMode">
|
||||
<span>{{ $t(title) }}</span>
|
||||
<v-spacer/>
|
||||
<v-btn density="comfortable" color="default" variant="text" class="ml-2"
|
||||
:disabled="loading" :icon="true">
|
||||
@@ -51,11 +51,11 @@
|
||||
:key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]"></v-skeleton-loader>
|
||||
</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>
|
||||
</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-panel :key="accountCategory.category"
|
||||
:value="accountCategory.category"
|
||||
@@ -112,11 +112,12 @@
|
||||
</v-expansion-panels>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions class="mt-3" v-if="dialogMode">
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="gray" @click="cancel">{{ $t('Cancel') }}</v-btn>
|
||||
<v-btn color="primary" :disabled="!hasAnyAvailableAccount" @click="save">{{ $t('OK') }}</v-btn>
|
||||
</v-card-actions>
|
||||
<v-card-text class="overflow-y-visible" v-if="dialogMode">
|
||||
<div class="w-100 d-flex justify-center mt-2 mt-sm-4 mt-md-6 gap-4">
|
||||
<v-btn :disabled="!hasAnyAvailableAccount" @click="save">{{ $t(applyText) }}</v-btn>
|
||||
<v-btn color="secondary" variant="tonal" @click="cancel">{{ $t('Cancel') }}</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-toolbar color="primary" v-if="dialogMode">
|
||||
<v-toolbar-title>{{ $t('Default Transaction Category Filter') }}</v-toolbar-title>
|
||||
<v-spacer/>
|
||||
<v-btn density="comfortable" color="default" variant="text" class="ml-2"
|
||||
:disabled="loading || !hasAnyAvailableCategory" :icon="true">
|
||||
<v-icon :icon="icons.more" />
|
||||
<v-menu activator="parent">
|
||||
<v-list>
|
||||
<v-list-item :prepend-icon="icons.selectAll"
|
||||
:title="$t('Select All')"
|
||||
@click="selectAll"></v-list-item>
|
||||
<v-list-item :prepend-icon="icons.selectNone"
|
||||
:title="$t('Select None')"
|
||||
@click="selectNone"></v-list-item>
|
||||
<v-list-item :prepend-icon="icons.selectInverse"
|
||||
:title="$t('Invert Selection')"
|
||||
@click="selectInvert"></v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
|
||||
<template #title v-if="!dialogMode">
|
||||
<div class="d-flex align-center">
|
||||
<span>{{ $t('Default Transaction Category Filter') }}</span>
|
||||
<v-card :class="{ 'pa-2 pa-sm-4 pa-md-8': dialogMode }">
|
||||
<template #title>
|
||||
<div class="d-flex align-center justify-center" v-if="dialogMode">
|
||||
<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"
|
||||
:disabled="loading || !hasAnyAvailableCategory" :icon="true">
|
||||
<v-icon :icon="icons.more" />
|
||||
<v-menu activator="parent">
|
||||
<v-list>
|
||||
<v-list-item :prepend-icon="icons.selectAll"
|
||||
:title="$t('Select All')"
|
||||
@click="selectAll"></v-list-item>
|
||||
<v-list-item :prepend-icon="icons.selectNone"
|
||||
:title="$t('Select None')"
|
||||
@click="selectNone"></v-list-item>
|
||||
<v-list-item :prepend-icon="icons.selectInverse"
|
||||
:title="$t('Invert Selection')"
|
||||
@click="selectInvert"></v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-btn>
|
||||
</div>
|
||||
<div class="d-flex align-center" v-else-if="!dialogMode">
|
||||
<span>{{ $t(title) }}</span>
|
||||
<v-spacer/>
|
||||
<v-btn density="comfortable" color="default" variant="text" class="ml-2"
|
||||
:disabled="loading" :icon="true">
|
||||
@@ -51,7 +51,7 @@
|
||||
:key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]"></v-skeleton-loader>
|
||||
</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-panel :key="transactionType.type"
|
||||
:value="transactionType.type"
|
||||
@@ -110,11 +110,12 @@
|
||||
</v-expansion-panels>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions class="mt-3" v-if="dialogMode">
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="gray" @click="cancel">{{ $t('Cancel') }}</v-btn>
|
||||
<v-btn color="primary" :disabled="!hasAnyAvailableCategory" @click="save">{{ $t('OK') }}</v-btn>
|
||||
</v-card-actions>
|
||||
<v-card-text class="overflow-y-visible" v-if="dialogMode">
|
||||
<div class="w-100 d-flex justify-center mt-2 mt-sm-4 mt-md-6 gap-4">
|
||||
<v-btn :disabled="!hasAnyAvailableCategory" @click="save">{{ $t(applyText) }}</v-btn>
|
||||
<v-btn color="secondary" variant="tonal" @click="cancel">{{ $t('Cancel') }}</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user