From 9f328402d869cba68f8dccbe8bdd38f9140613a2 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Wed, 11 Nov 2020 00:18:36 +0800
Subject: [PATCH] modify account list page style

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

diff --git a/src/locales/en.js b/src/locales/en.js
index dc0315de..9fa4f797 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -245,6 +245,8 @@ export default {
     'Disable': 'Disable',
     'Disabled': 'Disabled',
     'Version': 'Version',
+    'Edit': 'Edit',
+    'Delete': 'Delete',
     'Search': 'Search',
     'User': 'User',
     'Application': 'Application',
diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js
index 575ed7ce..ae23d6fd 100644
--- a/src/locales/zh_Hans.js
+++ b/src/locales/zh_Hans.js
@@ -245,6 +245,8 @@ export default {
     'Disable': '禁用',
     'Disabled': '禁用',
     'Version': '版本',
+    'Edit': '编辑',
+    'Delete': '删除',
     'Search': '搜索',
     'User': '用户',
     'Application': '应用',
diff --git a/src/views/mobile/accounts/AccountList.vue b/src/views/mobile/accounts/AccountList.vue
index 8514ca20..f784016a 100644
--- a/src/views/mobile/accounts/AccountList.vue
+++ b/src/views/mobile/accounts/AccountList.vue
@@ -8,36 +8,51 @@
             </f7-nav-right>
         </f7-navbar>
 
-        <f7-block class="skeleton-text" v-if="loading">
-            <f7-block-title>Account Category</f7-block-title>
-            <f7-list media-list>
-                <f7-list-item title="Account Name" after="0.00 USD"></f7-list-item>
-            </f7-list>
-        </f7-block>
+        <f7-card class="skeleton-text" v-if="loading">
+            <f7-card-header>Account Category</f7-card-header>
+            <f7-card-content :padding="false">
+                <f7-list>
+                    <f7-list-item title="Account Name" after="0.00 USD"></f7-list-item>
+                </f7-list>
+            </f7-card-content>
+        </f7-card>
 
-        <f7-block class="skeleton-text" v-if="loading">
-            <f7-block-title>Account Category 2</f7-block-title>
-            <f7-list media-list>
-                <f7-list-item title="Account Name" after="0.00 USD"></f7-list-item>
-                <f7-list-item title="Account Name 2" after="0.00 USD"></f7-list-item>
-            </f7-list>
-        </f7-block>
+        <f7-card class="skeleton-text" v-if="loading">
+            <f7-card-header>Account Category 2</f7-card-header>
+            <f7-card-content :padding="false">
+                <f7-list>
+                    <f7-list-item title="Account Name" after="0.00 USD"></f7-list-item>
+                    <f7-list-item title="Account Name 2" after="0.00 USD"></f7-list-item>
+                </f7-list>
+            </f7-card-content>
+        </f7-card>
 
-        <f7-block class="skeleton-text" v-if="loading">
-            <f7-block-title>Account Category 3</f7-block-title>
-            <f7-list media-list>
-                <f7-list-item title="Account Name" after="0.00 USD"></f7-list-item>
-                <f7-list-item title="Account Name 2" after="0.00 USD"></f7-list-item>
-            </f7-list>
-        </f7-block>
+        <f7-card class="skeleton-text" v-if="loading">
+            <f7-card-header>Account Category 3</f7-card-header>
+            <f7-card-content :padding="false">
+                <f7-list>
+                    <f7-list-item title="Account Name" after="0.00 USD"></f7-list-item>
+                    <f7-list-item title="Account Name 2" after="0.00 USD"></f7-list-item>
+                </f7-list>
+            </f7-card-content>
+        </f7-card>
 
-        <f7-block v-for="accountCategory in usedAccountCategories" :key="accountCategory.id">
-            <f7-block-title>{{ $t(accountCategory.name) }}</f7-block-title>
-            <f7-list media-list>
-                <f7-list-item v-for="account in accounts[accountCategory.id]" :key="account.id"
-                    :title="account.name" :after="account.balance | currency(account.currency)"></f7-list-item>
-            </f7-list>
-        </f7-block>
+        <f7-card v-for="accountCategory in usedAccountCategories" :key="accountCategory.id">
+            <f7-card-header>{{ $t(accountCategory.name) }}</f7-card-header>
+            <f7-card-content :padding="false">
+                <f7-list>
+                    <f7-list-item v-for="account in accounts[accountCategory.id]" :key="account.id"
+                                  :title="account.name" :after="account.balance | currency(account.currency)"
+                                  link="#" swipeout
+                    >
+                        <f7-swipeout-actions right>
+                            <f7-swipeout-button color="orange" :text="$t('Edit')" @click="edit(account)"></f7-swipeout-button>
+                            <f7-swipeout-button color="red" :text="$t('Delete')" @click="remove(account)"></f7-swipeout-button>
+                        </f7-swipeout-actions>
+                    </f7-list-item>
+                </f7-list>
+            </f7-card-content>
+        </f7-card>
     </f7-page>
 </template>
 
@@ -109,7 +124,12 @@ export default {
         });
     },
     methods: {
+        edit() {
 
+        },
+        remove() {
+
+        }
     }
 };
 </script>