From e9110bb6ec8612315bfd5e98316b5e413203a0ea Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 5 Dec 2020 11:21:16 +0800
Subject: [PATCH] optimize ui

---
 src/views/mobile/ExchangeRates.vue        |  2 +-
 src/views/mobile/Signup.vue               | 29 ++++++++++--------
 src/views/mobile/accounts/AccountEdit.vue | 36 +++++++++++------------
 src/views/mobile/users/UserProfile.vue    | 22 +++++++-------
 4 files changed, 46 insertions(+), 43 deletions(-)

diff --git a/src/views/mobile/ExchangeRates.vue b/src/views/mobile/ExchangeRates.vue
index 86a68e18..cc29f03f 100644
--- a/src/views/mobile/ExchangeRates.vue
+++ b/src/views/mobile/ExchangeRates.vue
@@ -13,7 +13,7 @@
                 <f7-list>
                     <f7-list-item
                         :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">
                             <option v-for="exchangeRate in availableExchangeRates"
                                     :key="exchangeRate.currencyCode"
diff --git a/src/views/mobile/Signup.vue b/src/views/mobile/Signup.vue
index 3a59041e..89bcf0b9 100644
--- a/src/views/mobile/Signup.vue
+++ b/src/views/mobile/Signup.vue
@@ -61,22 +61,27 @@
                         @input="user.nickname = $event.target.value"
                     ></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>
             </f7-card-content>
         </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>
 </template>
 
diff --git a/src/views/mobile/accounts/AccountEdit.vue b/src/views/mobile/accounts/AccountEdit.vue
index d78d4531..2503ece7 100644
--- a/src/views/mobile/accounts/AccountEdit.vue
+++ b/src/views/mobile/accounts/AccountEdit.vue
@@ -79,17 +79,17 @@
                         <f7-icon slot="after" f7="app_fill" :style="{ color: '#' + account.color }"></f7-icon>
                     </f7-list-item>
 
-                    <f7-list-input
-                        type="select"
+                    <f7-list-item
                         :class="{ 'disabled': editAccountId }"
-                        :label="$t('Currency')"
-                        :value="account.currency"
-                        @input="account.currency = $event.target.value"
+                        :header="$t('Currency')"
+                        smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Close'), scrollToSelectedItem: true }"
                     >
-                        <option v-for="currency in allCurrencies"
-                                :key="currency.code"
-                                :value="currency.code">{{ currency.displayName }}</option>
-                    </f7-list-input>
+                        <select autocomplete="transaction-currency" v-model="account.currency">
+                            <option v-for="currency in allCurrencies"
+                                    :key="currency.code"
+                                    :value="currency.code">{{ currency.displayName }}</option>
+                        </select>
+                    </f7-list-item>
 
                     <f7-list-input
                         type="textarea"
@@ -170,17 +170,17 @@
                             <f7-icon slot="after" f7="app_fill" :style="{ color: '#' + subAccount.color }"></f7-icon>
                         </f7-list-item>
 
-                        <f7-list-input
-                            type="select"
+                        <f7-list-item
                             :class="{ 'disabled': editAccountId }"
-                            :label="$t('Currency')"
-                            :value="subAccount.currency"
-                            @input="subAccount.currency = $event.target.value"
+                            :header="$t('Currency')"
+                            smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Close'), scrollToSelectedItem: true }"
                         >
-                            <option v-for="currency in allCurrencies"
-                                    :key="currency.code"
-                                    :value="currency.code">{{ currency.displayName }}</option>
-                        </f7-list-input>
+                            <select autocomplete="transaction-currency" v-model="subAccount.currency">
+                                <option v-for="currency in allCurrencies"
+                                        :key="currency.code"
+                                        :value="currency.code">{{ currency.displayName }}</option>
+                            </select>
+                        </f7-list-item>
 
                         <f7-list-input
                             type="textarea"
diff --git a/src/views/mobile/users/UserProfile.vue b/src/views/mobile/users/UserProfile.vue
index 944eef45..5db99e78 100644
--- a/src/views/mobile/users/UserProfile.vue
+++ b/src/views/mobile/users/UserProfile.vue
@@ -15,14 +15,13 @@
                     <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-input label="Default Currency" placeholder="Default Currency"></f7-list-input>
                 </f7-list>
             </f7-card-content>
         </f7-card>
 
         <f7-card v-else-if="!loading">
             <f7-card-content class="no-safe-areas" :padding="false">
-                <f7-list form>
+                <f7-list form inline-labels>
                     <f7-list-input
                         type="password"
                         autocomplete="new-password"
@@ -63,17 +62,16 @@
                         @input="newProfile.nickname = $event.target.value"
                     ></f7-list-input>
 
-                    <f7-list-input
-                        type="select"
-                        autocomplete="transaction-currency"
-                        :label="$t('Default Currency')"
-                        :value="newProfile.defaultCurrency"
-                        @input="newProfile.defaultCurrency = $event.target.value"
+                    <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('Close'), scrollToSelectedItem: true }"
                     >
-                        <option v-for="currency in allCurrencies"
-                                :key="currency.code"
-                                :value="currency.code">{{ currency.displayName }}</option>
-                    </f7-list-input>
+                        <select autocomplete="transaction-currency" v-model="newProfile.defaultCurrency">
+                            <option v-for="currency in allCurrencies"
+                                    :key="currency.code"
+                                    :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>