optimize ui

This commit is contained in:
MaysWind
2020-12-05 11:21:16 +08:00
parent 5de68fad1e
commit e9110bb6ec
4 changed files with 46 additions and 43 deletions
+1 -1
View File
@@ -13,7 +13,7 @@
<f7-list> <f7-list>
<f7-list-item <f7-list-item
:title="$t('Base Currency')" :title="$t('Base Currency')"
smart-select :smart-select-params="{ openIn: 'popup', closeOnSelect: true, popupCloseLinkText: $t('Close') }"> smart-select :smart-select-params="{ openIn: 'popup', closeOnSelect: true, popupCloseLinkText: $t('Close'), scrollToSelectedItem: true }">
<select v-model="baseCurrency"> <select v-model="baseCurrency">
<option v-for="exchangeRate in availableExchangeRates" <option v-for="exchangeRate in availableExchangeRates"
:key="exchangeRate.currencyCode" :key="exchangeRate.currencyCode"
+17 -12
View File
@@ -61,22 +61,27 @@
@input="user.nickname = $event.target.value" @input="user.nickname = $event.target.value"
></f7-list-input> ></f7-list-input>
<f7-list-input
type="select"
autocomplete="transaction-currency"
:label="$t('Default Currency')"
:value="user.defaultCurrency"
@input="user.defaultCurrency = $event.target.value"
>
<option v-for="currency in allCurrencies"
:key="currency.code"
:value="currency.code">{{ currency.displayName }}</option>
</f7-list-input>
<f7-list-item class="lab-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item> <f7-list-item class="lab-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item>
</f7-list> </f7-list>
</f7-card-content> </f7-card-content>
</f7-card> </f7-card>
<f7-card>
<f7-card-content class="no-safe-areas" :padding="false">
<f7-list form>
<f7-list-item
:header="$t('Default Currency')"
smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Close'), scrollToSelectedItem: true }"
>
<select autocomplete="transaction-currency" v-model="user.defaultCurrency">
<option v-for="currency in allCurrencies"
:key="currency.code"
:value="currency.code">{{ currency.displayName }}</option>
</select>
</f7-list-item>
</f7-list>
</f7-card-content>
</f7-card>
</f7-page> </f7-page>
</template> </template>
+18 -18
View File
@@ -79,17 +79,17 @@
<f7-icon slot="after" f7="app_fill" :style="{ color: '#' + account.color }"></f7-icon> <f7-icon slot="after" f7="app_fill" :style="{ color: '#' + account.color }"></f7-icon>
</f7-list-item> </f7-list-item>
<f7-list-input <f7-list-item
type="select"
:class="{ 'disabled': editAccountId }" :class="{ 'disabled': editAccountId }"
:label="$t('Currency')" :header="$t('Currency')"
:value="account.currency" smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Close'), scrollToSelectedItem: true }"
@input="account.currency = $event.target.value"
> >
<option v-for="currency in allCurrencies" <select autocomplete="transaction-currency" v-model="account.currency">
:key="currency.code" <option v-for="currency in allCurrencies"
:value="currency.code">{{ currency.displayName }}</option> :key="currency.code"
</f7-list-input> :value="currency.code">{{ currency.displayName }}</option>
</select>
</f7-list-item>
<f7-list-input <f7-list-input
type="textarea" type="textarea"
@@ -170,17 +170,17 @@
<f7-icon slot="after" f7="app_fill" :style="{ color: '#' + subAccount.color }"></f7-icon> <f7-icon slot="after" f7="app_fill" :style="{ color: '#' + subAccount.color }"></f7-icon>
</f7-list-item> </f7-list-item>
<f7-list-input <f7-list-item
type="select"
:class="{ 'disabled': editAccountId }" :class="{ 'disabled': editAccountId }"
:label="$t('Currency')" :header="$t('Currency')"
:value="subAccount.currency" smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Close'), scrollToSelectedItem: true }"
@input="subAccount.currency = $event.target.value"
> >
<option v-for="currency in allCurrencies" <select autocomplete="transaction-currency" v-model="subAccount.currency">
:key="currency.code" <option v-for="currency in allCurrencies"
:value="currency.code">{{ currency.displayName }}</option> :key="currency.code"
</f7-list-input> :value="currency.code">{{ currency.displayName }}</option>
</select>
</f7-list-item>
<f7-list-input <f7-list-input
type="textarea" type="textarea"
+10 -12
View File
@@ -15,14 +15,13 @@
<f7-list-input label="Confirmation Password" placeholder="Re-enter the 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="E-mail" placeholder="Your email address"></f7-list-input>
<f7-list-input label="Nickname" placeholder="Your nickname"></f7-list-input> <f7-list-input label="Nickname" placeholder="Your nickname"></f7-list-input>
<f7-list-input label="Default Currency" placeholder="Default Currency"></f7-list-input>
</f7-list> </f7-list>
</f7-card-content> </f7-card-content>
</f7-card> </f7-card>
<f7-card v-else-if="!loading"> <f7-card v-else-if="!loading">
<f7-card-content class="no-safe-areas" :padding="false"> <f7-card-content class="no-safe-areas" :padding="false">
<f7-list form> <f7-list form inline-labels>
<f7-list-input <f7-list-input
type="password" type="password"
autocomplete="new-password" autocomplete="new-password"
@@ -63,17 +62,16 @@
@input="newProfile.nickname = $event.target.value" @input="newProfile.nickname = $event.target.value"
></f7-list-input> ></f7-list-input>
<f7-list-input <f7-list-item
type="select" :title="$t('Default Currency')"
autocomplete="transaction-currency" smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Close'), scrollToSelectedItem: true }"
:label="$t('Default Currency')"
:value="newProfile.defaultCurrency"
@input="newProfile.defaultCurrency = $event.target.value"
> >
<option v-for="currency in allCurrencies" <select autocomplete="transaction-currency" v-model="newProfile.defaultCurrency">
:key="currency.code" <option v-for="currency in allCurrencies"
:value="currency.code">{{ currency.displayName }}</option> :key="currency.code"
</f7-list-input> :value="currency.code">{{ currency.displayName }}</option>
</select>
</f7-list-item>
<f7-list-item class="lab-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item> <f7-list-item class="lab-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item>
</f7-list> </f7-list>