zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

code refactor

Browse Source
This commit is contained in:
MaysWind
2021-05-04 18:53:55 +08:00
parent 86dd8b9418
commit 5061b673e9
2 changed files with 113 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Mobile.vue
+100 -85
View File
@@ -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>
src/views/mobile/transactions/Edit.vue
+13 -25
View File
@@ -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;
}