From 5061b673e9df4184537d68ca139cf11a5d1e71b7 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Tue, 4 May 2021 18:53:55 +0800
Subject: [PATCH] code refactor

---
 src/Mobile.vue                         | 185 +++++++++++++------------
 src/views/mobile/transactions/Edit.vue |  38 ++---
 2 files changed, 113 insertions(+), 110 deletions(-)

diff --git a/src/Mobile.vue b/src/Mobile.vue
index e6b5f72b..5aedbb47 100644
--- a/src/Mobile.vue
+++ b/src/Mobile.vue
@@ -97,6 +97,7 @@ export default {
 </script>
 
 <style>
+/** Global style **/
 html, body {
     position: fixed;
 }
@@ -108,6 +109,24 @@ body {
     user-select: none;
 }
 
+/** Common class **/
+.no-right-border {
+    border-right: 0;
+}
+
+.no-bottom-border {
+    border-bottom: 0;
+}
+
+.work-break-all {
+    word-break: break-all;
+}
+
+.full-line {
+    width: 100%;
+}
+
+/** Replacing the default style of framework7 **/
 :root {
     --f7-theme-color: #c67e48;
     --f7-theme-color-rgb: 198, 126, 72;
@@ -121,14 +140,6 @@ body {
     --default-icon-color: var(--f7-text-color);
 }
 
-.no-right-border {
-    border-right: 0;
-}
-
-.no-bottom-border {
-    border-bottom: 0;
-}
-
 i.icon.la, i.icon.las, i.icon.lab {
     font-size: 28px;
 }
@@ -137,45 +148,11 @@ i.icon.la, i.icon.las, i.icon.lab {
     border: 0;
 }
 
+/** Common class for replacing the default style of framework7 **/
 .navbar .navbar-compact-icons.right a + a {
     margin-left: 0;
 }
 
-.vue-pincode-input {
-    margin: 3px !important;
-    padding: 5px !important;
-    box-shadow: 0 0 2px rgba(0,0,0,.5) !important;
-}
-
-.theme-dark .vue-pincode-input {
-    box-shadow: 0 0 2px rgba(255,255,255,.5) !important;
-}
-
-.work-break-all {
-    word-break: break-all;
-}
-
-.full-line {
-    width: 100%;
-}
-
-.icon-after-text {
-    margin-left: 6px;
-}
-
-.badge.right-bottom-icon {
-    margin-left: -12px;
-    margin-top: 14px;
-    width: 16px;
-    height: 16px;
-}
-
-.badge.right-bottom-icon > .icon {
-    font-size: 13px;
-    width: 13px;
-    height: 13px;
-}
-
 .toolbar-item-auto-size .toolbar-inner {
     padding-left: 16px;
     padding-right: 16px;
@@ -185,6 +162,10 @@ i.icon.la, i.icon.las, i.icon.lab {
     width: auto;
 }
 
+.tabbar-item-changed {
+    color: var(--f7-theme-color);
+}
+
 .tabbar-text-with-ellipsis > span {
     display: block;
     width: 100%;
@@ -195,48 +176,6 @@ i.icon.la, i.icon.las, i.icon.lab {
     white-space: nowrap;
 }
 
-.tabbar-item-changed {
-    color: var(--f7-theme-color);
-}
-
-.card-header-content {
-    opacity: 0.6;
-}
-
-.card-chevron-icon {
-    color: var(--f7-list-chevron-icon-color);
-    font-size: var(--f7-list-chevron-icon-font-size);
-    font-weight: bolder;
-}
-
-.nested-list-item .item-title {
-    width: 100%;
-}
-
-.nested-list-item .item-inner {
-    padding-right: 0;
-}
-
-.nested-list-item.has-child-list-item .nested-list-item-child .item-inner {
-    padding-bottom: var(--f7-list-item-padding-vertical);
-}
-
-.nested-list-item .nested-list-item-title {
-    align-self: center;
-    margin-left: var(--f7-list-item-media-margin);
-    margin-right: var(--f7-list-item-media-margin);
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.sortable-enabled .nested-list-item .nested-list-item-child .item-inner {
-    padding-right: var(--f7-safe-area-right) !important;
-}
-
-.no-sortable > .sortable-handler {
-    display: none;
-}
-
 .list-item-media-valign-middle .item-media {
     align-self: normal !important;
 }
@@ -245,6 +184,15 @@ i.icon.la, i.icon.las, i.icon.lab {
     display: none;
 }
 
+.list-item-with-header-and-title .item-content .item-header {
+    margin-bottom: 11px;
+}
+
+.list-item-with-header-and-title.list-item-title-hide-overflow .item-content .list-item-custom-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .list .item-content .input.list-title-input {
     margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
     margin-bottom: calc(-1 * var(--f7-list-item-padding-vertical));
@@ -276,4 +224,71 @@ i.icon.la, i.icon.las, i.icon.lab {
 .ebk-list-item-error-info div.item-footer {
     color: var(--f7-input-error-text-color)
 }
+
+.no-sortable > .sortable-handler {
+    display: none;
+}
+
+.card-header-content {
+    opacity: 0.6;
+}
+
+.card-chevron-icon {
+    color: var(--f7-list-chevron-icon-color);
+    font-size: var(--f7-list-chevron-icon-font-size);
+    font-weight: bolder;
+}
+
+.icon-after-text {
+    margin-left: 6px;
+}
+
+.badge.right-bottom-icon {
+    margin-left: -12px;
+    margin-top: 14px;
+    width: 16px;
+    height: 16px;
+}
+
+.badge.right-bottom-icon > .icon {
+    font-size: 13px;
+    width: 13px;
+    height: 13px;
+}
+
+/** Nested List item for framework7 **/
+.nested-list-item .item-title {
+    width: 100%;
+}
+
+.nested-list-item .item-inner {
+    padding-right: 0;
+}
+
+.nested-list-item.has-child-list-item .nested-list-item-child .item-inner {
+    padding-bottom: var(--f7-list-item-padding-vertical);
+}
+
+.nested-list-item .nested-list-item-title {
+    align-self: center;
+    margin-left: var(--f7-list-item-media-margin);
+    margin-right: var(--f7-list-item-media-margin);
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.sortable-enabled .nested-list-item .nested-list-item-child .item-inner {
+    padding-right: var(--f7-safe-area-right) !important;
+}
+
+/** Replacing the default style of Vue-pincode-input **/
+.vue-pincode-input {
+    margin: 3px !important;
+    padding: 5px !important;
+    box-shadow: 0 0 2px rgba(0,0,0,.5) !important;
+}
+
+.theme-dark .vue-pincode-input {
+    box-shadow: 0 0 2px rgba(255,255,255,.5) !important;
+}
 </style>
diff --git a/src/views/mobile/transactions/Edit.vue b/src/views/mobile/transactions/Edit.vue
index 65dcb75f..df980021 100644
--- a/src/views/mobile/transactions/Edit.vue
+++ b/src/views/mobile/transactions/Edit.vue
@@ -25,10 +25,10 @@
                         style="font-size: 40px;"
                         header="Expense Amount" title="0.00">
                     </f7-list-item>
-                    <f7-list-item class="transaction-edit-category" header="Category" title="Category Names" link="#"></f7-list-item>
-                    <f7-list-item class="transaction-edit-account" header="Account" title="Account Name" link="#"></f7-list-item>
+                    <f7-list-item class="list-item-with-header-and-title list-item-title-hide-overflow" header="Category" title="Category Names" link="#"></f7-list-item>
+                    <f7-list-item class="list-item-with-header-and-title" header="Account" title="Account Name" link="#"></f7-list-item>
                     <f7-list-input label="Transaction Time" placeholder="YYYY/MM/DD HH:mm"></f7-list-input>
-                    <f7-list-item class="transaction-edit-timezone" header="Transaction Time Zone" title="(UTC XX:XX) System Default" link="#"></f7-list-item>
+                    <f7-list-item class="list-item-with-header-and-title list-item-title-hide-overflow" header="Transaction Time Zone" title="(UTC XX:XX) System Default" link="#"></f7-list-item>
                     <f7-list-item header="Tags" link="#">
                         <f7-block class="margin-top-half no-padding" slot="footer">
                             <f7-chip class="transaction-edit-tag" text="None"></f7-chip>
@@ -75,7 +75,7 @@
                     </f7-list-item>
 
                     <f7-list-item
-                        class="transaction-edit-category"
+                        class="list-item-with-header-and-title list-item-title-hide-overflow"
                         key="expenseCategorySelection"
                         link="#"
                         :class="{ 'disabled': !hasAvailableExpenseCategories }"
@@ -83,7 +83,7 @@
                         @click="showCategorySheet = true"
                         v-if="transaction.type === $constants.transaction.allTransactionTypes.Expense"
                     >
-                        <div slot="title" class="transaction-edit-category-title">
+                        <div slot="title" class="list-item-custom-title">
                             <span>{{ transaction.expenseCategory | primaryCategoryName(allCategories[$constants.category.allCategoryTypes.Expense]) }}</span>
                             <f7-icon class="category-separate-icon" f7="chevron_right"></f7-icon>
                             <span>{{ transaction.expenseCategory | secondaryCategoryName(allCategories[$constants.category.allCategoryTypes.Expense]) }}</span>
@@ -100,7 +100,7 @@
                     </f7-list-item>
 
                     <f7-list-item
-                        class="transaction-edit-category"
+                        class="list-item-with-header-and-title list-item-title-hide-overflow"
                         key="incomeCategorySelection"
                         link="#"
                         :class="{ 'disabled': !hasAvailableIncomeCategories }"
@@ -108,7 +108,7 @@
                         @click="showCategorySheet = true"
                         v-if="transaction.type === $constants.transaction.allTransactionTypes.Income"
                     >
-                        <div slot="title" class="transaction-edit-category-title">
+                        <div slot="title" class="list-item-custom-title">
                             <span>{{ transaction.incomeCategory | primaryCategoryName(allCategories[$constants.category.allCategoryTypes.Income]) }}</span>
                             <f7-icon class="category-separate-icon" f7="chevron_right"></f7-icon>
                             <span>{{ transaction.incomeCategory | secondaryCategoryName(allCategories[$constants.category.allCategoryTypes.Income]) }}</span>
@@ -125,7 +125,7 @@
                     </f7-list-item>
 
                     <f7-list-item
-                        class="transaction-edit-category"
+                        class="list-item-with-header-and-title list-item-title-hide-overflow"
                         key="transferCategorySelection"
                         link="#"
                         :class="{ 'disabled': !hasAvailableTransferCategories }"
@@ -133,7 +133,7 @@
                         @click="showCategorySheet = true"
                         v-if="transaction.type === $constants.transaction.allTransactionTypes.Transfer"
                     >
-                        <div slot="title" class="transaction-edit-category-title">
+                        <div slot="title" class="list-item-custom-title">
                             <span>{{ transaction.transferCategory | primaryCategoryName(allCategories[$constants.category.allCategoryTypes.Transfer]) }}</span>
                             <f7-icon class="category-separate-icon" f7="chevron_right"></f7-icon>
                             <span>{{ transaction.transferCategory | secondaryCategoryName(allCategories[$constants.category.allCategoryTypes.Transfer]) }}</span>
@@ -150,7 +150,7 @@
                     </f7-list-item>
 
                     <f7-list-item
-                        class="transaction-edit-account"
+                        class="list-item-with-header-and-title"
                         link="#"
                         :class="{ 'disabled': !allVisibleAccounts.length }"
                         :header="$t(sourceAccountName)"
@@ -172,7 +172,7 @@
                     </f7-list-item>
 
                     <f7-list-item
-                        class="transaction-edit-account"
+                        class="list-item-with-header-and-title"
                         link="#"
                         :class="{ 'disabled': !allVisibleAccounts.length }"
                         :header="$t('Destination Account')"
@@ -215,7 +215,7 @@
                     </f7-list-input>
 
                     <f7-list-item
-                        class="transaction-edit-timezone list-item-no-item-after"
+                        class="list-item-with-header-and-title list-item-title-hide-overflow list-item-no-item-after"
                         :header="$t('Transaction Time Zone')"
                         smart-select :smart-select-params="{ openIn: 'popup', pageTitle: $t('Transaction Time Zone'), searchbar: true, searchbarPlaceholder: $t('Timezone'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }">
                         <select v-model="transaction.timeZone">
@@ -223,7 +223,7 @@
                                     :key="timezone.name"
                                     :value="timezone.name">{{ `(UTC${timezone.utcOffset}) ${timezone.displayName}` }}</option>
                         </select>
-                        <f7-block slot="title" class="transaction-edit-timezone-title no-padding">
+                        <f7-block slot="title" class="list-item-custom-title no-padding">
                             <span>{{ transaction.utcOffset | utcOffset }}</span>
                             <span class="transaction-edit-timezone-name" v-if="transaction.timeZone || transaction.timeZone === ''">{{ transaction.timeZone | timeZoneName(allTimezones) }}</span>
                         </f7-block>
@@ -916,18 +916,6 @@ export default {
     padding-top: calc(var(--f7-typography-padding) / 2);
 }
 
-.transaction-edit-category .item-header,
-.transaction-edit-account .item-header,
-.transaction-edit-timezone .item-header{
-    margin-bottom: 11px;
-}
-
-.transaction-edit-category-title,
-.transaction-edit-timezone-title {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
 .transaction-edit-timezone-name {
     padding-left: 4px;
 }