From 3de5f88f94a34deaa55f5b2af355cb90d0a9f786 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Tue, 24 Nov 2020 00:27:39 +0800
Subject: [PATCH] optimize ui

---
 src/locales/en.js                         |  1 +
 src/locales/zh_Hans.js                    |  1 +
 src/views/mobile/accounts/AccountList.vue | 77 +++++++++++++++--------
 3 files changed, 52 insertions(+), 27 deletions(-)

diff --git a/src/locales/en.js b/src/locales/en.js
index 95536fa9..28af4a13 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -442,4 +442,5 @@ export default {
     'Build Time': 'Build Time',
     'Official Website': 'Official Website',
     'License': 'License',
+    'An error has occurred': 'An error has occurred',
 };
diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js
index 82b57b67..86f415e8 100644
--- a/src/locales/zh_Hans.js
+++ b/src/locales/zh_Hans.js
@@ -442,4 +442,5 @@ export default {
     'Build Time': '编译时间',
     'Official Website': '官方网站',
     'License': '许可协议',
+    'An error has occurred': '发生错误',
 };
diff --git a/src/views/mobile/accounts/AccountList.vue b/src/views/mobile/accounts/AccountList.vue
index 280f3a46..58033cfb 100644
--- a/src/views/mobile/accounts/AccountList.vue
+++ b/src/views/mobile/accounts/AccountList.vue
@@ -125,6 +125,7 @@
                 </f7-list>
             </f7-card-content>
         </f7-card>
+
         <f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
             <f7-actions-group>
                 <f7-actions-button @click="setSortable()">{{ $t('Sort') }}</f7-actions-button>
@@ -134,6 +135,15 @@
             </f7-actions-group>
         </f7-actions>
 
+        <f7-actions close-by-outside-click close-on-escape :opened="showDeleteActionSheet" @actions:closed="showDeleteActionSheet = false">
+            <f7-actions-group>
+                <f7-actions-label>{{ $t('Are you sure you want to delete this account?') }}</f7-actions-label>
+                <f7-actions-button color="red" @click="remove(accountToDelete)">{{ $t('Delete') }}</f7-actions-button>
+            </f7-actions-group>
+            <f7-actions-group>
+                <f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
+            </f7-actions-group>
+        </f7-actions>
     </f7-page>
 </template>
 
@@ -145,8 +155,10 @@ export default {
             loading: true,
             showHidden: false,
             sortable: false,
+            accountToDelete: null,
             showAccountBalance: this.$settings.isShowAccountBalance(),
             showMoreActionSheet: false,
+            showDeleteActionSheet: false,
             displayOrderModified: false,
             displayOrderSaving: false
         };
@@ -540,39 +552,50 @@ export default {
             const app = self.$f7;
             const $$ = app.$;
 
-            self.$confirm('Are you sure you want to delete this account?', () => {
-                self.$showLoading();
+            if (!account) {
+                self.$alert('An error has occurred');
+                return;
+            }
 
-                self.$services.deleteAccount({
-                    id: account.id
-                }).then(response => {
-                    self.$hideLoading();
-                    const data = response.data;
+            if (!self.showDeleteActionSheet) {
+                self.accountToDelete = account;
+                self.showDeleteActionSheet = true;
+                return;
+            }
 
-                    if (!data || !data.success || !data.result) {
-                        self.$alert('Unable to delete this account');
-                        return;
-                    }
+            self.showDeleteActionSheet = false;
+            self.accountToDelete = null;
+            self.$showLoading();
 
-                    app.swipeout.delete($$(`#${self.$options.filters.accountDomId(account)}`), () => {
-                        const accountList = self.accounts[account.category];
-                        for (let i = 0; i < accountList.length; i++) {
-                            if (accountList[i].id === account.id) {
-                                accountList.splice(i, 1);
-                            }
+            self.$services.deleteAccount({
+                id: account.id
+            }).then(response => {
+                self.$hideLoading();
+                const data = response.data;
+
+                if (!data || !data.success || !data.result) {
+                    self.$alert('Unable to delete this account');
+                    return;
+                }
+
+                app.swipeout.delete($$(`#${self.$options.filters.accountDomId(account)}`), () => {
+                    const accountList = self.accounts[account.category];
+                    for (let i = 0; i < accountList.length; i++) {
+                        if (accountList[i].id === account.id) {
+                            accountList.splice(i, 1);
                         }
-                    });
-                }).catch(error => {
-                    self.$logger.error('failed to delete account', error);
-
-                    self.$hideLoading();
-
-                    if (error.response && error.response.data && error.response.data.errorMessage) {
-                        self.$alert({ error: error.response.data });
-                    } else if (!error.processed) {
-                        self.$alert('Unable to delete this account');
                     }
                 });
+            }).catch(error => {
+                self.$logger.error('failed to delete account', error);
+
+                self.$hideLoading();
+
+                if (error.response && error.response.data && error.response.data.errorMessage) {
+                    self.$alert({ error: error.response.data });
+                } else if (!error.processed) {
+                    self.$alert('Unable to delete this account');
+                }
             });
         }
     },