From 7eae3e9923ef921e6ebdc1943aee275fd979f644 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Thu, 21 Jul 2022 01:07:43 +0800
Subject: [PATCH] show currency code when show currency name

---
 src/Mobile.vue                         |  4 ++++
 src/views/mobile/ExchangeRates.vue     | 10 ++++++++--
 src/views/mobile/Signup.vue            |  5 ++++-
 src/views/mobile/accounts/Edit.vue     | 10 ++++++++--
 src/views/mobile/users/UserProfile.vue |  5 ++++-
 5 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/Mobile.vue b/src/Mobile.vue
index 22092d21..0060df4a 100644
--- a/src/Mobile.vue
+++ b/src/Mobile.vue
@@ -126,6 +126,10 @@ body {
     width: 100%;
 }
 
+.smaller {
+    font-size: 10px;
+}
+
 /** Replacing the default style of framework7 **/
 :root {
     --f7-theme-color: #c67e48;
diff --git a/src/views/mobile/ExchangeRates.vue b/src/views/mobile/ExchangeRates.vue
index 6f250ab0..eb7eaa9f 100644
--- a/src/views/mobile/ExchangeRates.vue
+++ b/src/views/mobile/ExchangeRates.vue
@@ -14,9 +14,12 @@
                     <f7-list-item
                         class="list-item-with-header-and-title list-item-no-item-after"
                         :header="$t('Base Currency')"
-                        :title="`currency.${baseCurrency}` | localized"
                         smart-select :smart-select-params="{ openIn: 'popup', pageTitle: $t('Base Currency'), searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
                     >
+                        <f7-block slot="title" class="no-padding no-margin">
+                            <span>{{ `currency.${baseCurrency}` | localized }}&nbsp;</span>
+                            <small class="smaller">{{ baseCurrency }}</small>
+                        </f7-block>
                         <select v-model="baseCurrency">
                             <option v-for="exchangeRate in availableExchangeRates"
                                     :key="exchangeRate.currencyCode"
@@ -50,9 +53,12 @@
             <f7-card-content class="no-safe-areas" :padding="false" v-if="exchangeRatesData && exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
                 <f7-list>
                     <f7-list-item v-for="exchangeRate in availableExchangeRates" :key="exchangeRate.currencyCode"
-                                  :title="exchangeRate.currencyDisplayName"
                                   :after="getConvertedAmount(exchangeRate) | exchangeRate"
                                   swipeout>
+                        <f7-block slot="title" class="no-padding no-margin">
+                            <span>{{ exchangeRate.currencyDisplayName }}&nbsp;</span>
+                            <small class="smaller">{{ exchangeRate.currencyCode }}</small>
+                        </f7-block>
                         <f7-swipeout-actions right>
                             <f7-swipeout-button color="primary" close :text="$t('Set As Baseline')" @click="setAsBaseline(exchangeRate.currencyCode, getConvertedAmount(exchangeRate))"></f7-swipeout-button>
                         </f7-swipeout-actions>
diff --git a/src/views/mobile/Signup.vue b/src/views/mobile/Signup.vue
index 4cf6aff5..3bfa507f 100644
--- a/src/views/mobile/Signup.vue
+++ b/src/views/mobile/Signup.vue
@@ -87,9 +87,12 @@
                         class="list-item-with-header-and-title list-item-no-item-after"
                         :key="currentLocale + '_currency'"
                         :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 }"
                     >
+                        <f7-block slot="title" class="no-padding no-margin">
+                            <span>{{ `currency.${user.defaultCurrency}` | localized }}&nbsp;</span>
+                            <small class="smaller">{{ user.defaultCurrency }}</small>
+                        </f7-block>
                         <select autocomplete="transaction-currency" v-model="user.defaultCurrency">
                             <option v-for="currency in allCurrencies"
                                     :key="currency.code"
diff --git a/src/views/mobile/accounts/Edit.vue b/src/views/mobile/accounts/Edit.vue
index c3dabb7a..51076885 100644
--- a/src/views/mobile/accounts/Edit.vue
+++ b/src/views/mobile/accounts/Edit.vue
@@ -124,10 +124,13 @@
                         class="list-item-with-header-and-title list-item-no-item-after"
                         :class="{ 'disabled': editAccountId }"
                         :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 }"
                     >
+                        <f7-block slot="title" class="no-padding no-margin">
+                            <span>{{ `currency.${account.currency}` | localized }}&nbsp;</span>
+                            <small class="smaller">{{ account.currency }}</small>
+                        </f7-block>
                         <select autocomplete="transaction-currency" v-model="account.currency">
                             <option v-for="currency in allCurrencies"
                                     :key="currency.code"
@@ -275,10 +278,13 @@
                             class="list-item-with-header-and-title list-item-no-item-after"
                             :class="{ 'disabled': editAccountId }"
                             :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 }"
                         >
+                            <f7-block slot="title" class="no-padding no-margin">
+                                <span>{{ `currency.${subAccount.currency}` | localized }}&nbsp;</span>
+                                <small class="smaller">{{ subAccount.currency }}</small>
+                            </f7-block>
                             <select autocomplete="transaction-currency" v-model="subAccount.currency">
                                 <option v-for="currency in allCurrencies"
                                         :key="currency.code"
diff --git a/src/views/mobile/users/UserProfile.vue b/src/views/mobile/users/UserProfile.vue
index 765b33f7..1762dae4 100644
--- a/src/views/mobile/users/UserProfile.vue
+++ b/src/views/mobile/users/UserProfile.vue
@@ -83,9 +83,12 @@
                     <f7-list-item
                         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 }"
                     >
+                        <f7-block slot="title" class="no-padding no-margin">
+                            <span>{{ `currency.${newProfile.defaultCurrency}` | localized }}&nbsp;</span>
+                            <small class="smaller">{{ newProfile.defaultCurrency }}</small>
+                        </f7-block>
                         <select autocomplete="transaction-currency" v-model="newProfile.defaultCurrency">
                             <option v-for="currency in allCurrencies"
                                     :key="currency.code"