From 0b17251f9477108dbbfd8cf6879d15bbddb3f130 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 4 Aug 2024 19:50:17 +0800
Subject: [PATCH] modify style

---
 src/consts/numeral.js                         |  2 +
 src/lib/i18n.js                               |  2 +
 .../settings/tabs/UserBasicSettingTab.vue     | 58 ++++++++++------
 src/views/mobile/users/UserProfilePage.vue    | 68 ++++++++++++-------
 4 files changed, 82 insertions(+), 48 deletions(-)

diff --git a/src/consts/numeral.js b/src/consts/numeral.js
index ca136caf..6e93abee 100644
--- a/src/consts/numeral.js
+++ b/src/consts/numeral.js
@@ -68,10 +68,12 @@ const allDigitGroupingSymbolMap = {
 const allDigitGroupingType = {
     None: {
         type: 1,
+        enabled: false,
         name: 'None'
     },
     ThousandsSeparator: {
         type: 2,
+        enabled: true,
         name: 'Thousands Separator'
     }
 };
diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index 7834e5d6..056e3488 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -726,6 +726,7 @@ function getAllDigitGroupingTypes(translateFn) {
 
     ret.push({
         type: numeralConstants.defaultValue,
+        enabled: defaultDigitGroupingType.enabled,
         displayName: `${translateFn('Language Default')} (${translateFn('numeral.' + defaultDigitGroupingType.name)})`
     });
 
@@ -734,6 +735,7 @@ function getAllDigitGroupingTypes(translateFn) {
 
         ret.push({
             type: type.type,
+            enabled: type.enabled,
             displayName: translateFn('numeral.' + type.name)
         });
     }
diff --git a/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue b/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
index c7b12160..a301d690 100644
--- a/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
+++ b/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
@@ -159,7 +159,11 @@
                                 />
                             </v-col>
                         </v-row>
+                    </v-card-text>
 
+                    <v-divider />
+
+                    <v-card-text>
                         <v-row>
                             <v-col cols="12" md="6">
                                 <v-select
@@ -213,7 +217,11 @@
                                 />
                             </v-col>
                         </v-row>
+                    </v-card-text>
 
+                    <v-divider />
+
+                    <v-card-text>
                         <v-row>
                             <v-col cols="12" md="6">
                                 <v-select
@@ -221,23 +229,10 @@
                                     item-value="type"
                                     persistent-placeholder
                                     :disabled="loading || saving"
-                                    :label="$t('Decimal Separator')"
-                                    :placeholder="$t('Decimal Separator')"
-                                    :items="allDecimalSeparators"
-                                    v-model="newProfile.decimalSeparator"
-                                />
-                            </v-col>
-
-                            <v-col cols="12" md="6">
-                                <v-select
-                                    item-title="displayName"
-                                    item-value="type"
-                                    persistent-placeholder
-                                    :disabled="loading || saving"
-                                    :label="$t('Digit Grouping Symbol')"
-                                    :placeholder="$t('Digit Grouping Symbol')"
-                                    :items="allDigitGroupingSymbols"
-                                    v-model="newProfile.digitGroupingSymbol"
+                                    :label="$t('Currency Display Mode')"
+                                    :placeholder="$t('Currency Display Mode')"
+                                    :items="allCurrencyDisplayTypes"
+                                    v-model="newProfile.currencyDisplayType"
                                 />
                             </v-col>
 
@@ -259,14 +254,33 @@
                                     item-title="displayName"
                                     item-value="type"
                                     persistent-placeholder
-                                    :disabled="loading || saving"
-                                    :label="$t('Currency Display Mode')"
-                                    :placeholder="$t('Currency Display Mode')"
-                                    :items="allCurrencyDisplayTypes"
-                                    v-model="newProfile.currencyDisplayType"
+                                    :disabled="loading || saving || !getNameByKeyValue(allDigitGroupingTypes, newProfile.digitGrouping, 'type', 'enabled')"
+                                    :label="$t('Digit Grouping Symbol')"
+                                    :placeholder="$t('Digit Grouping Symbol')"
+                                    :items="allDigitGroupingSymbols"
+                                    v-model="newProfile.digitGroupingSymbol"
                                 />
                             </v-col>
 
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="displayName"
+                                    item-value="type"
+                                    persistent-placeholder
+                                    :disabled="loading || saving"
+                                    :label="$t('Decimal Separator')"
+                                    :placeholder="$t('Decimal Separator')"
+                                    :items="allDecimalSeparators"
+                                    v-model="newProfile.decimalSeparator"
+                                />
+                            </v-col>
+                        </v-row>
+                    </v-card-text>
+
+                    <v-divider />
+
+                    <v-card-text>
+                        <v-row>
                             <v-col cols="12" md="6">
                                 <v-select
                                     item-title="displayName"
diff --git a/src/views/mobile/users/UserProfilePage.vue b/src/views/mobile/users/UserProfilePage.vue
index 38b3e761..53b3b2cb 100644
--- a/src/views/mobile/users/UserProfilePage.vue
+++ b/src/views/mobile/users/UserProfilePage.vue
@@ -25,14 +25,23 @@
             <f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Default Language" title="Language" link="#"></f7-list-item>
             <f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Default Currency" title="Currency" link="#"></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" link="#"></f7-list-item>
+        </f7-list>
+
+        <f7-list strong inset dividers class="margin-vertical skeleton-text" v-if="loading">
             <f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Long Date Format" title="YYYY-MM-DD" link="#"></f7-list-item>
             <f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Short Date Format" title="YYYY-MM-DD" link="#"></f7-list-item>
             <f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Long Time Format" title="HH:mm:ss" link="#"></f7-list-item>
             <f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Short Time Format" title="HH:mm" link="#"></f7-list-item>
-            <f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Decimal Separator" title="Dot (.)" link="#"></f7-list-item>
-            <f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Digit Grouping Symbol" title="Comma (,)" link="#"></f7-list-item>
-            <f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Digit Grouping" title="Thousands Separator" link="#"></f7-list-item>
+        </f7-list>
+
+        <f7-list strong inset dividers class="margin-vertical skeleton-text" v-if="loading">
             <f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Currency Display Mode" title="Currency Symbol" link="#"></f7-list-item>
+            <f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Digit Grouping" title="Thousands Separator" link="#"></f7-list-item>
+            <f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Digit Grouping Symbol" title="Comma (,)" link="#"></f7-list-item>
+            <f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Decimal Separator" title="Dot (.)" link="#"></f7-list-item>
+        </f7-list>
+
+        <f7-list strong inset dividers class="margin-vertical skeleton-text" v-if="loading">
             <f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Expense Amount Color" title="Amount Color" link="#"></f7-list-item>
             <f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Income Amount Color" title="Amount Color" link="#"></f7-list-item>
         </f7-list>
@@ -159,7 +168,9 @@
                             v-for="weekDay in allWeekDays">{{ weekDay.displayName }}</option>
                 </select>
             </f7-list-item>
+        </f7-list>
 
+        <f7-list form strong inset dividers class="margin-vertical" v-if="!loading">
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
                 :header="$t('Long Date Format')"
@@ -211,30 +222,19 @@
                             v-for="format in allShortTimeFormats">{{ format.displayName }}</option>
                 </select>
             </f7-list-item>
+        </f7-list>
 
+        <f7-list form strong inset dividers class="margin-vertical" v-if="!loading">
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
-                :header="$t('Decimal Separator')"
-                :title="getNameByKeyValue(allDecimalSeparators, newProfile.decimalSeparator, 'type', 'displayName')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Decimal Separator'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Decimal Separator'), popupCloseLinkText: $t('Done') }"
+                :header="$t('Currency Display Mode')"
+                :title="getNameByKeyValue(allCurrencyDisplayTypes, newProfile.currencyDisplayType, 'type', 'displayName')"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Currency Display Mode'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Currency Display Mode'), popupCloseLinkText: $t('Done') }"
             >
-                <select v-model="newProfile.decimalSeparator">
+                <select v-model="newProfile.currencyDisplayType">
                     <option :value="format.type"
                             :key="format.type"
-                            v-for="format in allDecimalSeparators">{{ format.displayName }}</option>
-                </select>
-            </f7-list-item>
-
-            <f7-list-item
-                class="list-item-with-header-and-title list-item-no-item-after"
-                :header="$t('Digit Grouping Symbol')"
-                :title="getNameByKeyValue(allDigitGroupingSymbols, newProfile.digitGroupingSymbol, 'type', 'displayName')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Digit Grouping Symbol'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Digit Grouping Symbol'), popupCloseLinkText: $t('Done') }"
-            >
-                <select v-model="newProfile.digitGroupingSymbol">
-                    <option :value="format.type"
-                            :key="format.type"
-                            v-for="format in allDigitGroupingSymbols">{{ format.displayName }}</option>
+                            v-for="format in allCurrencyDisplayTypes">{{ format.displayName }}</option>
                 </select>
             </f7-list-item>
 
@@ -253,17 +253,33 @@
 
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
-                :header="$t('Currency Display Mode')"
-                :title="getNameByKeyValue(allCurrencyDisplayTypes, newProfile.currencyDisplayType, 'type', 'displayName')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Currency Display Mode'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Currency Display Mode'), popupCloseLinkText: $t('Done') }"
+                :disabled="!getNameByKeyValue(allDigitGroupingTypes, newProfile.digitGrouping, 'type', 'enabled')"
+                :header="$t('Digit Grouping Symbol')"
+                :title="getNameByKeyValue(allDigitGroupingSymbols, newProfile.digitGroupingSymbol, 'type', 'displayName')"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Digit Grouping Symbol'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Digit Grouping Symbol'), popupCloseLinkText: $t('Done') }"
             >
-                <select v-model="newProfile.currencyDisplayType">
+                <select v-model="newProfile.digitGroupingSymbol">
                     <option :value="format.type"
                             :key="format.type"
-                            v-for="format in allCurrencyDisplayTypes">{{ format.displayName }}</option>
+                            v-for="format in allDigitGroupingSymbols">{{ format.displayName }}</option>
                 </select>
             </f7-list-item>
 
+            <f7-list-item
+                class="list-item-with-header-and-title list-item-no-item-after"
+                :header="$t('Decimal Separator')"
+                :title="getNameByKeyValue(allDecimalSeparators, newProfile.decimalSeparator, 'type', 'displayName')"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Decimal Separator'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Decimal Separator'), popupCloseLinkText: $t('Done') }"
+            >
+                <select v-model="newProfile.decimalSeparator">
+                    <option :value="format.type"
+                            :key="format.type"
+                            v-for="format in allDecimalSeparators">{{ format.displayName }}</option>
+                </select>
+            </f7-list-item>
+        </f7-list>
+
+        <f7-list form strong inset dividers class="margin-vertical" v-if="!loading">
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
                 :header="$t('Expense Amount Color')"