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

optimize display style when text is too long

Browse Source
This commit is contained in:
MaysWind
2021-03-14 21:47:43 +08:00
parent ca32c7b5de
commit 1de2cfa06d
9 changed files with 94 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Mobile.vue
+2
View File
@@ -220,6 +220,8 @@ i.icon.la, i.icon.las, i.icon.lab {
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 {
src/components/mobile/PieChart.vue
+11 -2
View File
@@ -28,7 +28,11 @@
:r="diameter / 2.5"
v-if="showCenterText"/>
<g class="pie-chart-text-group" v-if="showCenterText">
<clipPath id="pie-chart-text-clip">
<rect :x="-diameter / 2.5 + 2" :y="-diameter / 2.5 + 2" :width="diameter / 1.25 - 4" :height="diameter / 1.25 -4 "/>
</clipPath>
<g class="pie-chart-text-group" clip-path="url(#pie-chart-text-clip)" v-if="showCenterText">
<slot></slot>
</g>
</svg>
@@ -51,7 +55,7 @@
<p v-else-if="!validItems || !validItems.length">
<f7-chip outline text="---"></f7-chip>
</p>
<f7-link :no-link-class="!enableClickItem" v-if="selectedItem" @click="clickItem(selectedItem)">
<f7-link class="pie-chart-selected-item-info" :no-link-class="!enableClickItem" v-if="selectedItem" @click="clickItem(selectedItem)">
<span class="skeleton-text" v-if="skeleton">Name</span>
<span v-else-if="!skeleton && selectedItem.name">{{ selectedItem.name }}</span>
<span class="skeleton-text" v-if="skeleton">Value</span>
@@ -300,6 +304,11 @@ export default {
color: var(--f7-text-color);
}
.pie-chart-selected-item-info {
display: inline-block;
text-align: center;
}
.pie-chart-background {
fill: #f0f0f0;
}
src/components/mobile/TransactionTagSelectionSheet.vue
+6 -1
View File
@@ -23,7 +23,7 @@
<f7-block slot="title" class="no-padding no-margin">
<div class="display-flex">
<f7-icon slot="media" f7="number"></f7-icon>
<div class="list-item-valign-middle padding-left-half">
<div class="tag-selection-list-item list-item-valign-middle padding-left-half">
{{ item.name }}
</div>
</div>
@@ -164,5 +164,10 @@ export default {
height: 400px;
}
}
.tag-selection-list-item {
overflow: hidden;
text-overflow: ellipsis;
}
</style>
self
src/filters/textLimit.js
+19
View File
@@ -0,0 +1,19 @@
export default function (value, maxLength) {
let length = 0;
for (let i = 0; i < value.length; i++) {
const c = value.charCodeAt(i);
if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
length++;
} else {
length += 2;
}
}
if (length <= maxLength || maxLength <= 3) {
return value;
}
return value.substr(0, maxLength - 3) + '...';
}
src/mobile-main.js
+2
View File
@@ -73,6 +73,7 @@ import percentFilter from './filters/percent.js';
import itemFieldContentFilter from './filters/itemFieldContent.js';
import currencyFilter from './filters/currency.js';
import utcOffsetFilter from './filters/utcOffset.js';
import textLimitFilter from './filters/textLimit.js';
import iconFilter from './filters/icon.js';
import iconStyleFilter from './filters/iconStyle.js';
import defaultIconColorFilter from './filters/defaultIconColor.js';
@@ -155,6 +156,7 @@ Vue.filter('percent', (value, precision, lowPrecisionValue) => percentFilter(val
Vue.filter('itemFieldContent', (value, fieldName, defaultValue, translate) => itemFieldContentFilter({ i18n }, value, fieldName, defaultValue, translate));
Vue.filter('currency', (value, currencyCode) => currencyFilter({ i18n }, value, currencyCode));
Vue.filter('utcOffset', (value) => utcOffsetFilter(value));
Vue.filter('textLimit', (value, maxLength) => textLimitFilter(value, maxLength));
Vue.filter('icon', (value, iconType) => iconFilter(value, iconType));
Vue.filter('iconStyle', (value, iconType, defaultColor, additionalFieldName) => iconStyleFilter(value, iconType, defaultColor, additionalFieldName));
Vue.filter('defaultIconColor', (value, defaultColor) => defaultIconColorFilter(value, defaultColor));
src/views/mobile/statistics/Transaction.vue
+12 -5
View File
@@ -57,7 +57,7 @@
{{ query.chartDataType | totalAmountName(allChartDataTypes) | localized }}
</text>
<text class="statistics-pie-chart-total-amount-value" v-if="statisticsData.items && statisticsData.items.length">
{{ statisticsData.totalAmount | currency(defaultCurrency) }}
{{ statisticsData.totalAmount | currency(defaultCurrency) | textLimit(16) }}
</text>
<text class="statistics-pie-chart-total-no-data" cy="50%" v-if="!statisticsData.items || !statisticsData.items.length">
{{ $t('No data') }}
@@ -76,7 +76,7 @@
</div>
</div>
<div slot="title">
<div slot="title" class="statistics-list-item-text">
<span>Category Name 1</span>
<small class="statistics-percent">33.33</small>
</div>
@@ -98,7 +98,7 @@
</div>
</div>
<div slot="title">
<div slot="title" class="statistics-list-item-text">
<span>Category Name 2</span>
<small class="statistics-percent">33.33</small>
</div>
@@ -120,7 +120,7 @@
</div>
</div>
<div slot="title">
<div slot="title" class="statistics-list-item-text">
<span>Category Name 3</span>
<small class="statistics-percent">33.33</small>
</div>
@@ -166,7 +166,7 @@
</div>
</div>
<div slot="title">
<div slot="title" class="statistics-list-item-text">
<span>{{ item.name }}</span>
<small class="statistics-percent" v-if="item.percent >= 0">{{ item.percent | percent(2, '&lt;0.01') }}</small>
</div>
@@ -906,6 +906,13 @@ export default {
.statistics-list-item-overview-amount {
margin-top: 2px;
font-size: 1.5em;
overflow: hidden;
text-overflow: ellipsis;
}
.statistics-list-item-text {
overflow: hidden;
text-overflow: ellipsis;
}
.statistics-list-item .item-content {
src/views/mobile/tags/List.vue
+11 -4
View File
@@ -17,7 +17,7 @@
<f7-block slot="title" class="no-padding">
<div class="display-flex">
<f7-icon slot="media" f7="number"></f7-icon>
<div class="list-item-valign-middle padding-left-half">Tag Name</div>
<div class="transaction-tag-list-item-content list-item-valign-middle padding-left-half">Tag Name</div>
</div>
</f7-block>
</f7-list-item>
@@ -25,7 +25,7 @@
<f7-block slot="title" class="no-padding">
<div class="display-flex">
<f7-icon slot="media" f7="number"></f7-icon>
<div class="list-item-valign-middle padding-left-half">Tag Name 2</div>
<div class="transaction-tag-list-item-content list-item-valign-middle padding-left-half">Tag Name 2</div>
</div>
</f7-block>
</f7-list-item>
@@ -33,7 +33,7 @@
<f7-block slot="title" class="no-padding">
<div class="display-flex">
<f7-icon slot="media" f7="number"></f7-icon>
<div class="list-item-valign-middle padding-left-half">Tag Name 3</div>
<div class="transaction-tag-list-item-content list-item-valign-middle padding-left-half">Tag Name 3</div>
</div>
</f7-block>
</f7-list-item>
@@ -61,7 +61,7 @@
</f7-badge>
</f7-icon>
<div class="list-item-valign-middle padding-left-half"
<div class="transaction-tag-list-item-content list-item-valign-middle padding-left-half"
v-if="editingTag.id !== tag.id">
{{ tag.name }}
</div>
@@ -410,3 +410,10 @@ export default {
}
}
</script>
<style>
.transaction-tag-list-item-content {
overflow: hidden;
text-overflow: ellipsis;
}
</style>
src/views/mobile/transactions/Edit.vue
+11 -7
View File
@@ -82,7 +82,7 @@
@click="showCategorySheet = true"
v-if="transaction.type === $constants.transaction.allTransactionTypes.Expense"
>
<div slot="title">
<div slot="title" class="transaction-edit-category-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>
@@ -107,7 +107,7 @@
@click="showCategorySheet = true"
v-if="transaction.type === $constants.transaction.allTransactionTypes.Income"
>
<div slot="title">
<div slot="title" class="transaction-edit-category-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>
@@ -132,7 +132,7 @@
@click="showCategorySheet = true"
v-if="transaction.type === $constants.transaction.allTransactionTypes.Transfer"
>
<div slot="title">
<div slot="title" class="transaction-edit-category-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>
@@ -885,20 +885,24 @@ export default {
margin-bottom: 11px;
}
.transaction-edit-time input[type="datetime-local"] {
max-width: inherit;
}
.transaction-edit-category-title,
.transaction-edit-timezone-title {
overflow: hidden;
text-overflow: ellipsis;
}
.transaction-edit-time input[type="datetime-local"] {
max-width: inherit;
}
.transaction-edit-timezone-name {
padding-left: 4px;
}
.transaction-edit-tag {
margin-right: 4px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
src/views/mobile/transactions/List.vue
+20 -9
View File
@@ -62,7 +62,7 @@
<f7-icon slot="media" f7="app_fill"></f7-icon>
</div>
</div>
<div slot="title" class="no-padding">
<div slot="title" class="transaction-category-name no-padding">
<span>Category</span>
</div>
<div slot="footer" class="no-padding-horizontal transaction-footer">
@@ -84,7 +84,7 @@
<f7-icon slot="media" f7="app_fill"></f7-icon>
</div>
</div>
<div slot="title" class="no-padding">
<div slot="title" class="transaction-category-name no-padding">
<span>Category 2</span>
</div>
<div slot="footer" class="no-padding-horizontal transaction-footer">
@@ -106,7 +106,7 @@
<f7-icon slot="media" f7="app_fill"></f7-icon>
</div>
</div>
<div slot="title" class="no-padding">
<div slot="title" class="transaction-category-name no-padding">
<span>Category 3</span>
</div>
<div slot="footer" class="no-padding-horizontal transaction-footer">
@@ -128,7 +128,7 @@
<f7-icon slot="media" f7="app_fill"></f7-icon>
</div>
</div>
<div slot="title" class="no-padding">
<div slot="title" class="transaction-category-name no-padding">
<span>Category 4</span>
</div>
<div slot="footer" class="no-padding-horizontal transaction-footer">
@@ -150,7 +150,7 @@
<f7-icon slot="media" f7="app_fill"></f7-icon>
</div>
</div>
<div slot="title" class="no-padding">
<div slot="title" class="transaction-category-name no-padding">
<span>Category 5</span>
</div>
<div slot="footer" class="no-padding-horizontal transaction-footer">
@@ -189,7 +189,7 @@
<f7-icon slot="media" f7="app_fill"></f7-icon>
</div>
</div>
<div slot="title" class="no-padding">
<div slot="title" class="transaction-category-name no-padding">
<span>Category</span>
</div>
<div slot="footer" class="no-padding-horizontal transaction-footer">
@@ -211,7 +211,7 @@
<f7-icon slot="media" f7="app_fill"></f7-icon>
</div>
</div>
<div slot="title" class="no-padding">
<div slot="title" class="transaction-category-name no-padding">
<span>Category 2</span>
</div>
<div slot="footer" class="no-padding-horizontal transaction-footer">
@@ -233,7 +233,7 @@
<f7-icon slot="media" f7="app_fill"></f7-icon>
</div>
</div>
<div slot="title" class="no-padding">
<div slot="title" class="transaction-category-name no-padding">
<span>Category 3</span>
</div>
<div slot="footer" class="no-padding-horizontal transaction-footer">
@@ -305,7 +305,7 @@
</f7-icon>
</div>
</div>
<div slot="title" class="no-padding">
<div slot="title" class="transaction-category-name no-padding">
<span v-if="transaction.type === $constants.transaction.allTransactionTypes.ModifyBalance">
{{ $t('Modify Balance') }}
</span>
@@ -989,12 +989,18 @@ export default {
.transaction-amount {
color: var(--f7-list-item-after-text-color);
overflow: hidden;
text-overflow: ellipsis;
}
.transaction-info .item-inner:after {
background-color: transparent;
}
.transaction-info .item-after {
max-width: 70%;
}
.transaction-info .transaction-icon:after {
content: '';
position: absolute;
@@ -1010,6 +1016,11 @@ export default {
transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
}
.transaction-category-name {
overflow: hidden;
text-overflow: ellipsis;
}
.date-popover-menu .popover-inner, .category-popover-menu .popover-inner, .account-popover-menu .popover-inner {
max-height: 400px;
overflow-Y: auto;