mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-15 23:47:33 +08:00
modify style
This commit is contained in:
MaysWind
@@ -70,9 +70,11 @@
|
||||
<f7-card-content class="no-safe-areas" :padding="false">
|
||||
<f7-list form>
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:key="currentLocale + '_lang'"
|
||||
:title="$t('Language')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, searchbarPlaceholder: $t('Language'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
|
||||
:header="$t('Language')"
|
||||
:title="currentLocale | languageName"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', pageTitle: $t('Language'), searchbar: true, searchbarPlaceholder: $t('Language'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
|
||||
>
|
||||
<select v-model="currentLocale">
|
||||
<option v-for="(lang, locale) in allLanguages"
|
||||
@@ -82,9 +84,11 @@
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:key="currentLocale + '_currency'"
|
||||
:title="$t('Default Currency')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
|
||||
:header="$t('Default Currency')"
|
||||
:title="`currency.${user.defaultCurrency}` | localized"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', pageTitle: $t('Default Currency'), searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
|
||||
>
|
||||
<select autocomplete="transaction-currency" v-model="user.defaultCurrency">
|
||||
<option v-for="currency in allCurrencies"
|
||||
@@ -94,9 +98,11 @@
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:key="currentLocale + '_firstDayOfWeek'"
|
||||
:title="$t('First Day of Week')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
|
||||
:header="$t('First Day of Week')"
|
||||
:title="user.firstDayOfWeek | optionName(allWeekDays, 'type', 'name') | format('datetime.#{value}.long') | localized"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', pageTitle: $t('First Day of Week'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
|
||||
>
|
||||
<select v-model="user.firstDayOfWeek">
|
||||
<option v-for="weekDay in allWeekDays"
|
||||
|
||||
@@ -12,8 +12,8 @@
|
||||
<f7-card class="skeleton-text" v-if="loading">
|
||||
<f7-card-content class="no-safe-areas" :padding="false">
|
||||
<f7-list>
|
||||
<f7-list-item link="#" title="Account Category" after="Category"></f7-list-item>
|
||||
<f7-list-item link="#" title="Account Type" after="Account Type"></f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title" link="#" header="Account Category" title="Category"></f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title" link="#" header="Account Type" title="Account Type"></f7-list-item>
|
||||
</f7-list>
|
||||
</f7-card-content>
|
||||
</f7-card>
|
||||
@@ -22,9 +22,10 @@
|
||||
<f7-card-content class="no-safe-areas" :padding="false">
|
||||
<f7-list form>
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title"
|
||||
link="#"
|
||||
:title="$t('Account Category')"
|
||||
:after="account.category | accountCategoryName(allAccountCategories) | localized"
|
||||
:header="$t('Account Category')"
|
||||
:title="account.category | accountCategoryName(allAccountCategories) | localized"
|
||||
@click="showAccountCategorySheet = true"
|
||||
>
|
||||
<list-item-selection-sheet value-type="item"
|
||||
@@ -38,10 +39,12 @@
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title"
|
||||
link="#"
|
||||
:class="{ 'disabled': editAccountId }"
|
||||
:title="$t('Account Type')"
|
||||
:after="account.type | accountTypeName | localized"
|
||||
:header="$t('Account Type')"
|
||||
:title="account.type | accountTypeName | localized"
|
||||
:no-chevron="!!editAccountId"
|
||||
@click="showAccountTypeSheet = true"
|
||||
>
|
||||
<list-item-selection-sheet value-type="item"
|
||||
@@ -59,17 +62,21 @@
|
||||
<f7-card class="skeleton-text" v-if="loading">
|
||||
<f7-card-content class="no-safe-areas" :padding="false">
|
||||
<f7-list>
|
||||
<f7-list-input inline-label label="Account Name" placeholder="Your account name"></f7-list-input>
|
||||
<f7-list-item title="Account Icon" link="#">
|
||||
<f7-icon f7="app_fill"></f7-icon>
|
||||
<f7-list-input label="Account Name" placeholder="Your account name"></f7-list-input>
|
||||
<f7-list-item class="list-item-with-header-and-title" header="Account Icon" link="#">
|
||||
<f7-block slot="title" class="list-item-custom-title no-padding">
|
||||
<f7-icon f7="app_fill"></f7-icon>
|
||||
</f7-block>
|
||||
</f7-list-item>
|
||||
<f7-list-item title="Account Color" link="#">
|
||||
<f7-icon f7="app_fill"></f7-icon>
|
||||
<f7-list-item class="list-item-with-header-and-title" header="Account Color" link="#">
|
||||
<f7-block slot="title" class="list-item-custom-title no-padding">
|
||||
<f7-icon f7="app_fill"></f7-icon>
|
||||
</f7-block>
|
||||
</f7-list-item>
|
||||
<f7-list-item title="Currency" after="Currency" link="#"></f7-list-item>
|
||||
<f7-list-item title="Account Balance" after="Balance" link="#"></f7-list-item>
|
||||
<f7-list-item title="Visible" after="Visible"></f7-list-item>
|
||||
<f7-list-input type="textarea" placeholder="Your account description (optional)"></f7-list-input>
|
||||
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Currency" title="Currency" link="#"></f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title" header="Account Balance" title="Balance" link="#"></f7-list-item>
|
||||
<f7-list-item class="list-item-toggle" header="Visible" after="True"></f7-list-item>
|
||||
<f7-list-input label="Description" type="textarea" placeholder="Your account description (optional)"></f7-list-input>
|
||||
</f7-list>
|
||||
</f7-card-content>
|
||||
</f7-card>
|
||||
@@ -79,7 +86,6 @@
|
||||
<f7-list form>
|
||||
<f7-list-input
|
||||
type="text"
|
||||
inline-label
|
||||
clear-button
|
||||
:label="$t('Account Name')"
|
||||
:placeholder="$t('Your account name')"
|
||||
@@ -87,11 +93,13 @@
|
||||
@input="account.name = $event.target.value"
|
||||
></f7-list-input>
|
||||
|
||||
<f7-list-item :title="$t('Account Icon')" link="#"
|
||||
<f7-list-item class="list-item-with-header-and-title"
|
||||
:header="$t('Account Icon')" link="#"
|
||||
@click="account.showIconSelectionSheet = true">
|
||||
<f7-icon slot="after"
|
||||
:icon="account.icon | accountIcon"
|
||||
:style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
<f7-block slot="title" class="list-item-custom-title no-padding">
|
||||
<f7-icon :icon="account.icon | accountIcon"
|
||||
:style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
</f7-block>
|
||||
<icon-selection-sheet :all-icon-infos="allAccountIcons"
|
||||
:show.sync="account.showIconSelectionSheet"
|
||||
:color="account.color"
|
||||
@@ -99,11 +107,13 @@
|
||||
></icon-selection-sheet>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item :title="$t('Account Color')" link="#"
|
||||
<f7-list-item class="list-item-with-header-and-title"
|
||||
:header="$t('Account Color')" link="#"
|
||||
@click="account.showColorSelectionSheet = true">
|
||||
<f7-icon slot="after"
|
||||
f7="app_fill"
|
||||
:style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
<f7-block slot="title" class="list-item-custom-title no-padding">
|
||||
<f7-icon f7="app_fill"
|
||||
:style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
</f7-block>
|
||||
<color-selection-sheet :all-color-infos="allAccountColors"
|
||||
:show.sync="account.showColorSelectionSheet"
|
||||
v-model="account.color"
|
||||
@@ -111,8 +121,11 @@
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:class="{ 'disabled': editAccountId }"
|
||||
:title="$t('Currency')"
|
||||
:header="$t('Currency')"
|
||||
:title="`currency.${account.currency}` | localized"
|
||||
:no-chevron="!!editAccountId"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
|
||||
>
|
||||
<select autocomplete="transaction-currency" v-model="account.currency">
|
||||
@@ -123,10 +136,11 @@
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
link="#"
|
||||
class="list-item-with-header-and-title"
|
||||
:link="editAccountId ? null : '#'"
|
||||
:class="{ 'disabled': editAccountId }"
|
||||
:title="$t('Account Balance')"
|
||||
:after="account.balance | currency(account.currency)"
|
||||
:header="$t('Account Balance')"
|
||||
:title="account.balance | currency(account.currency)"
|
||||
@click="account.showBalanceSheet = true"
|
||||
>
|
||||
<number-pad-sheet :min-value="$constants.transaction.minAmount"
|
||||
@@ -136,7 +150,7 @@
|
||||
></number-pad-sheet>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item :title="$t('Visible')" v-if="editAccountId">
|
||||
<f7-list-item :header="$t('Visible')" v-if="editAccountId">
|
||||
<f7-toggle :checked="account.visible" @toggle:change="account.visible = $event"></f7-toggle>
|
||||
</f7-list-item>
|
||||
|
||||
@@ -144,6 +158,7 @@
|
||||
type="textarea"
|
||||
class="textarea-auto-size"
|
||||
style="height: auto"
|
||||
:label="$t('Description')"
|
||||
:placeholder="$t('Your account description (optional)')"
|
||||
:value="account.comment"
|
||||
@input="account.comment = $event.target.value"
|
||||
@@ -157,7 +172,6 @@
|
||||
<f7-list form>
|
||||
<f7-list-input
|
||||
type="text"
|
||||
inline-label
|
||||
clear-button
|
||||
:label="$t('Account Name')"
|
||||
:placeholder="$t('Your account name')"
|
||||
@@ -165,11 +179,13 @@
|
||||
@input="account.name = $event.target.value"
|
||||
></f7-list-input>
|
||||
|
||||
<f7-list-item :title="$t('Account Icon')" link="#"
|
||||
<f7-list-item class="list-item-with-header-and-title"
|
||||
:header="$t('Account Icon')" link="#"
|
||||
@click="account.showIconSelectionSheet = true">
|
||||
<f7-icon slot="after"
|
||||
:icon="account.icon | accountIcon"
|
||||
:style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
<f7-block slot="title" class="list-item-custom-title no-padding">
|
||||
<f7-icon :icon="account.icon | accountIcon"
|
||||
:style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
</f7-block>
|
||||
<icon-selection-sheet :all-icon-infos="allAccountIcons"
|
||||
:show.sync="account.showIconSelectionSheet"
|
||||
:color="account.color"
|
||||
@@ -177,18 +193,20 @@
|
||||
></icon-selection-sheet>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item :title="$t('Account Color')" link="#"
|
||||
<f7-list-item class="list-item-with-header-and-title"
|
||||
:header="$t('Account Color')" link="#"
|
||||
@click="account.showColorSelectionSheet = true">
|
||||
<f7-icon slot="after"
|
||||
f7="app_fill"
|
||||
:style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
<f7-block slot="title" class="list-item-custom-title no-padding">
|
||||
<f7-icon f7="app_fill"
|
||||
:style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
</f7-block>
|
||||
<color-selection-sheet :all-color-infos="allAccountColors"
|
||||
:show.sync="account.showColorSelectionSheet"
|
||||
v-model="account.color"
|
||||
></color-selection-sheet>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item :title="$t('Visible')" v-if="editAccountId">
|
||||
<f7-list-item :header="$t('Visible')" v-if="editAccountId">
|
||||
<f7-toggle :checked="account.visible" @toggle:change="account.visible = $event"></f7-toggle>
|
||||
</f7-list-item>
|
||||
|
||||
@@ -196,6 +214,7 @@
|
||||
type="textarea"
|
||||
class="textarea-auto-size"
|
||||
style="height: auto"
|
||||
:label="$t('Description')"
|
||||
:placeholder="$t('Your account description (optional)')"
|
||||
:value="account.comment"
|
||||
@input="account.comment = $event.target.value"
|
||||
@@ -206,10 +225,11 @@
|
||||
|
||||
<f7-block class="no-padding no-margin" v-if="!loading && account.type === $constants.account.allAccountTypes.MultiSubAccounts">
|
||||
<f7-card v-for="(subAccount, idx) in subAccounts" :key="idx">
|
||||
<f7-card-header v-if="!editAccountId">
|
||||
<f7-button rasied fill color="red"
|
||||
icon-f7="trash" icon-size="16px"
|
||||
<f7-card-header>
|
||||
<small class="subaccount-header-content">{{ $t('Sub Account') + ' #' + (idx + 1) }}</small>
|
||||
<f7-button rasied fill color="red" icon-f7="trash" icon-size="16px"
|
||||
:tooltip="$t('Remove Sub Account')"
|
||||
v-if="!editAccountId"
|
||||
@click="removeSubAccount(subAccount, false)">
|
||||
</f7-button>
|
||||
</f7-card-header>
|
||||
@@ -217,7 +237,6 @@
|
||||
<f7-list>
|
||||
<f7-list-input
|
||||
type="text"
|
||||
inline-label
|
||||
clear-button
|
||||
:label="$t('Sub Account Name')"
|
||||
:placeholder="$t('Your sub account name')"
|
||||
@@ -225,11 +244,13 @@
|
||||
@input="subAccount.name = $event.target.value"
|
||||
></f7-list-input>
|
||||
|
||||
<f7-list-item :title="$t('Sub Account Icon')" link="#"
|
||||
<f7-list-item class="list-item-with-header-and-title"
|
||||
:header="$t('Sub Account Icon')" link="#"
|
||||
@click="subAccount.showIconSelectionSheet = true">
|
||||
<f7-icon slot="after"
|
||||
:icon="subAccount.icon | accountIcon"
|
||||
:style="subAccount.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
<f7-block slot="title" class="list-item-custom-title no-padding">
|
||||
<f7-icon :icon="subAccount.icon | accountIcon"
|
||||
:style="subAccount.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
</f7-block>
|
||||
<icon-selection-sheet :all-icon-infos="allAccountIcons"
|
||||
:show.sync="subAccount.showIconSelectionSheet"
|
||||
:color="subAccount.color"
|
||||
@@ -237,11 +258,13 @@
|
||||
></icon-selection-sheet>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item :title="$t('Sub Account Color')" link="#"
|
||||
<f7-list-item class="list-item-with-header-and-title"
|
||||
:header="$t('Sub Account Color')" link="#"
|
||||
@click="subAccount.showColorSelectionSheet = true">
|
||||
<f7-icon slot="after"
|
||||
f7="app_fill"
|
||||
:style="subAccount.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
<f7-block slot="title" class="list-item-custom-title no-padding">
|
||||
<f7-icon f7="app_fill"
|
||||
:style="subAccount.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
</f7-block>
|
||||
<color-selection-sheet :all-color-infos="allAccountColors"
|
||||
:show.sync="subAccount.showColorSelectionSheet"
|
||||
v-model="subAccount.color"
|
||||
@@ -249,8 +272,11 @@
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:class="{ 'disabled': editAccountId }"
|
||||
:title="$t('Currency')"
|
||||
:header="$t('Currency')"
|
||||
:title="`currency.${subAccount.currency}` | localized"
|
||||
:no-chevron="!!editAccountId"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
|
||||
>
|
||||
<select autocomplete="transaction-currency" v-model="subAccount.currency">
|
||||
@@ -261,10 +287,11 @@
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
link="#"
|
||||
class="list-item-with-header-and-title"
|
||||
:link="editAccountId ? null : '#'"
|
||||
:class="{ 'disabled': editAccountId }"
|
||||
:title="$t('Sub Account Balance')"
|
||||
:after="subAccount.balance | currency(subAccount.currency)"
|
||||
:header="$t('Sub Account Balance')"
|
||||
:title="subAccount.balance | currency(subAccount.currency)"
|
||||
@click="subAccount.showBalanceSheet = true"
|
||||
>
|
||||
<number-pad-sheet :min-value="$constants.transaction.minAmount"
|
||||
@@ -274,7 +301,7 @@
|
||||
></number-pad-sheet>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item :title="$t('Visible')" v-if="editAccountId">
|
||||
<f7-list-item :header="$t('Visible')" v-if="editAccountId">
|
||||
<f7-toggle :checked="subAccount.visible" @toggle:change="subAccount.visible = $event"></f7-toggle>
|
||||
</f7-list-item>
|
||||
|
||||
@@ -282,6 +309,7 @@
|
||||
type="textarea"
|
||||
class="textarea-auto-size"
|
||||
style="height: auto"
|
||||
:label="$t('Description')"
|
||||
:placeholder="$t('Your sub account description (optional)')"
|
||||
:value="subAccount.comment"
|
||||
@input="subAccount.comment = $event.target.value"
|
||||
@@ -663,3 +691,9 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.subaccount-header-content {
|
||||
opacity: 0.6;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -11,15 +11,19 @@
|
||||
<f7-card class="skeleton-text" v-if="loading">
|
||||
<f7-card-content class="no-safe-areas" :padding="false">
|
||||
<f7-list>
|
||||
<f7-list-input inline-label label="Category Name" placeholder="Your category name"></f7-list-input>
|
||||
<f7-list-item title="Category Icon" link="#">
|
||||
<f7-icon f7="app_fill"></f7-icon>
|
||||
<f7-list-input label="Category Name" placeholder="Your category name"></f7-list-input>
|
||||
<f7-list-item class="list-item-with-header-and-title" header="Category Icon" link="#">
|
||||
<f7-block slot="title" class="list-item-custom-title no-padding">
|
||||
<f7-icon f7="app_fill"></f7-icon>
|
||||
</f7-block>
|
||||
</f7-list-item>
|
||||
<f7-list-item title="Category Color" link="#">
|
||||
<f7-icon f7="app_fill"></f7-icon>
|
||||
<f7-list-item class="list-item-with-header-and-title" header="Category Color" link="#">
|
||||
<f7-block slot="title" class="list-item-custom-title no-padding">
|
||||
<f7-icon f7="app_fill"></f7-icon>
|
||||
</f7-block>
|
||||
</f7-list-item>
|
||||
<f7-list-item title="Visible" after="Visible"></f7-list-item>
|
||||
<f7-list-input type="textarea" placeholder="Your category description (optional)"></f7-list-input>
|
||||
<f7-list-item class="list-item-toggle" header="Visible" after="True"></f7-list-item>
|
||||
<f7-list-input label="Description" type="textarea" placeholder="Your category description (optional)"></f7-list-input>
|
||||
</f7-list>
|
||||
</f7-card-content>
|
||||
</f7-card>
|
||||
@@ -29,7 +33,6 @@
|
||||
<f7-list form>
|
||||
<f7-list-input
|
||||
type="text"
|
||||
inline-label
|
||||
clear-button
|
||||
:label="$t('Category Name')"
|
||||
:placeholder="$t('Your category name')"
|
||||
@@ -37,11 +40,14 @@
|
||||
@input="category.name = $event.target.value"
|
||||
></f7-list-input>
|
||||
|
||||
<f7-list-item :title="$t('Category Icon')" key="singleTypeCategoryIconSelection" link="#"
|
||||
<f7-list-item class="list-item-with-header-and-title"
|
||||
key="singleTypeCategoryIconSelection" link="#"
|
||||
:header="$t('Category Icon')"
|
||||
@click="category.showIconSelectionSheet = true">
|
||||
<f7-icon slot="after"
|
||||
:icon="category.icon | categoryIcon"
|
||||
:style="category.color | categoryIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
<f7-block slot="title" class="list-item-custom-title no-padding">
|
||||
<f7-icon :icon="category.icon | categoryIcon"
|
||||
:style="category.color | categoryIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
</f7-block>
|
||||
<icon-selection-sheet :all-icon-infos="allCategoryIcons"
|
||||
:show.sync="category.showIconSelectionSheet"
|
||||
:color="category.color"
|
||||
@@ -49,18 +55,21 @@
|
||||
></icon-selection-sheet>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item :title="$t('Category Color')" key="singleTypeCategoryColorSelection" link="#"
|
||||
<f7-list-item class="list-item-with-header-and-title"
|
||||
key="singleTypeCategoryColorSelection" link="#"
|
||||
:header="$t('Category Color')"
|
||||
@click="category.showColorSelectionSheet = true">
|
||||
<f7-icon slot="after"
|
||||
f7="app_fill"
|
||||
:style="category.color | categoryIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
<f7-block slot="title" class="list-item-custom-title no-padding">
|
||||
<f7-icon f7="app_fill"
|
||||
:style="category.color | categoryIconStyle('var(--default-icon-color)')"></f7-icon>
|
||||
</f7-block>
|
||||
<color-selection-sheet :all-color-infos="allCategoryColors"
|
||||
:show.sync="category.showColorSelectionSheet"
|
||||
v-model="category.color"
|
||||
></color-selection-sheet>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item :title="$t('Visible')" v-if="editCategoryId">
|
||||
<f7-list-item :header="$t('Visible')" v-if="editCategoryId">
|
||||
<f7-toggle :checked="category.visible" @toggle:change="category.visible = $event"></f7-toggle>
|
||||
</f7-list-item>
|
||||
|
||||
@@ -68,6 +77,7 @@
|
||||
type="textarea"
|
||||
class="textarea-auto-size"
|
||||
style="height: auto"
|
||||
:label="$t('Description')"
|
||||
:placeholder="$t('Your category description (optional)')"
|
||||
:value="category.comment"
|
||||
@input="category.comment = $event.target.value"
|
||||
|
||||
@@ -10,20 +10,28 @@
|
||||
|
||||
<f7-card class="skeleton-text" v-if="loading">
|
||||
<f7-card-content class="no-safe-areas" :padding="false">
|
||||
<f7-list inline-labels>
|
||||
<f7-list>
|
||||
<f7-list-input label="Password" placeholder="Your password"></f7-list-input>
|
||||
<f7-list-input label="Confirmation Password" placeholder="Re-enter the password"></f7-list-input>
|
||||
<f7-list-input label="E-mail" placeholder="Your email address"></f7-list-input>
|
||||
<f7-list-input label="Nickname" placeholder="Your nickname"></f7-list-input>
|
||||
<f7-list-item title="Default Currency" after="Currency"></f7-list-item>
|
||||
<f7-list-item title="First Day of Week" after="Week Day"></f7-list-item>
|
||||
</f7-list>
|
||||
</f7-card-content>
|
||||
</f7-card>
|
||||
|
||||
<f7-card v-else-if="!loading">
|
||||
<f7-card class="skeleton-text" v-if="loading">
|
||||
<f7-card-content class="no-safe-areas" :padding="false">
|
||||
<f7-list form inline-labels>
|
||||
<f7-list>
|
||||
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Default Currency" title="Currency"></f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="First Day of Week" title="Week Day"></f7-list-item>
|
||||
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Editable Transaction Scope" title="All"></f7-list-item>
|
||||
</f7-list>
|
||||
</f7-card-content>
|
||||
</f7-card>
|
||||
|
||||
<f7-card v-if="!loading">
|
||||
<f7-card-content class="no-safe-areas" :padding="false">
|
||||
<f7-list form>
|
||||
<f7-list-input
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
@@ -64,9 +72,19 @@
|
||||
@input="newProfile.nickname = $event.target.value"
|
||||
></f7-list-input>
|
||||
|
||||
<f7-list-item class="ebk-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item>
|
||||
</f7-list>
|
||||
</f7-card-content>
|
||||
</f7-card>
|
||||
|
||||
<f7-card v-if="!loading">
|
||||
<f7-card-content class="no-safe-areas" :padding="false">
|
||||
<f7-list form>
|
||||
<f7-list-item
|
||||
:title="$t('Default Currency')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('Default Currency')"
|
||||
:title="`currency.${newProfile.defaultCurrency}` | localized"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', pageTitle: $t('Default Currency'), searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
|
||||
>
|
||||
<select autocomplete="transaction-currency" v-model="newProfile.defaultCurrency">
|
||||
<option v-for="currency in allCurrencies"
|
||||
@@ -76,8 +94,10 @@
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
:title="$t('First Day of Week')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('First Day of Week')"
|
||||
:title="newProfile.firstDayOfWeek | optionName(allWeekDays, 'type', 'name') | format('datetime.#{value}.long') | localized"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', pageTitle: $t('First Day of Week'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
|
||||
>
|
||||
<select v-model="newProfile.firstDayOfWeek">
|
||||
<option v-for="weekDay in allWeekDays"
|
||||
@@ -87,21 +107,19 @@
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item
|
||||
:title="$t('Editable Transaction Scope')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:header="$t('Editable Transaction Scope')"
|
||||
:title="newProfile.transactionEditScope | optionName(allTransactionEditScopeTypes, 'value', 'name') | localized"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', pageTitle: $t('Editable Transaction Scope'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
|
||||
>
|
||||
<select v-model="newProfile.transactionEditScope">
|
||||
<option :value="0">{{ $t('None') }}</option>
|
||||
<option :value="1">{{ $t('All') }}</option>
|
||||
<option :value="2">{{ $t('Today or later') }}</option>
|
||||
<option :value="3">{{ $t('Recent 24 hours or later') }}</option>
|
||||
<option :value="4">{{ $t('This week or later') }}</option>
|
||||
<option :value="5">{{ $t('This month or later') }}</option>
|
||||
<option :value="6">{{ $t('This year or later') }}</option>
|
||||
<option v-for="option in allTransactionEditScopeTypes"
|
||||
:key="option.value"
|
||||
:value="option.value">{{ option.name | localized }}</option>
|
||||
</select>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-item class="ebk-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item>
|
||||
<f7-list-item class="ebk-list-item-error-info" v-if="extendInputIsInvalid" :footer="$t(extendInvalidProblemMessage)"></f7-list-item>
|
||||
</f7-list>
|
||||
</f7-card-content>
|
||||
</f7-card>
|
||||
@@ -151,12 +169,39 @@ export default {
|
||||
allWeekDays() {
|
||||
return this.$constants.datetime.allWeekDays;
|
||||
},
|
||||
allTransactionEditScopeTypes() {
|
||||
return [{
|
||||
value: 0,
|
||||
name: 'None'
|
||||
},{
|
||||
value: 1,
|
||||
name: 'All'
|
||||
},{
|
||||
value: 2,
|
||||
name: 'Today or later'
|
||||
},{
|
||||
value: 3,
|
||||
name: 'Recent 24 hours or later'
|
||||
},{
|
||||
value: 4,
|
||||
name: 'This week or later'
|
||||
},{
|
||||
value: 5,
|
||||
name: 'This month or later'
|
||||
},{
|
||||
value: 6,
|
||||
name: 'This year or later'
|
||||
}];
|
||||
},
|
||||
inputIsNotChanged() {
|
||||
return !!this.inputIsNotChangedProblemMessage;
|
||||
},
|
||||
inputIsInvalid() {
|
||||
return !!this.inputInvalidProblemMessage;
|
||||
},
|
||||
extendInputIsInvalid() {
|
||||
return !!this.extendInputInvalidProblemMessage;
|
||||
},
|
||||
inputIsNotChangedProblemMessage() {
|
||||
if (!this.newProfile.password && !this.newProfile.confirmPassword && !this.newProfile.email && !this.newProfile.nickname) {
|
||||
return 'Nothing has been modified';
|
||||
@@ -187,6 +232,13 @@ export default {
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
extendInputInvalidProblemMessage() {
|
||||
if (!this.newProfile.defaultCurrency) {
|
||||
return 'Default currency cannot be empty';
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -227,7 +279,7 @@ export default {
|
||||
|
||||
self.showInputPasswordSheet = false;
|
||||
|
||||
let problemMessage = self.inputIsNotChangedProblemMessage || self.inputInvalidProblemMessage;
|
||||
let problemMessage = self.inputIsNotChangedProblemMessage || self.inputInvalidProblemMessage || self.extendInputInvalidProblemMessage;
|
||||
|
||||
if (problemMessage) {
|
||||
self.$alert(problemMessage);
|
||||
|
||||
Reference in New Issue
Block a user