julien/vaquant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 (account) remove transition :'(

Browse Source
This commit is contained in:
Julien Calixte
2019-12-29 11:50:31 +01:00
parent bdf854c7a5
commit 565f91600a
2 changed files with 69 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/TagList.vue
View File

@@ -1,29 +1,31 @@
<template> <template>
<div class="tag-list columns is-multiline is-centered"> <div class="tag-list">
<div class="column legend-container"> <div class="columns">
<table class="table"> <div class="column legend-container">
<tr <table class="table is-fullwidth">
v-for="(slice, k) in slices" <tr
:key="k" v-for="(slice, k) in slices"
:style="legendStyle(slice)" :key="k"
class="legend-item" :style="legendStyle(slice)"
> class="legend-item"
<td> >
<awe-icon :icon="categories[slice.key].tag.icon" /> <td>
</td> <awe-icon :icon="categories[slice.key].tag.icon" />
<td class="legend-label">{{ slice.label }}</td> </td>
<td class="percent-label numeric"> <td class="legend-label">{{ slice.label }}</td>
{{ Math.round(slice.percent * 100) }}% <td class="percent-label numeric">
</td> {{ Math.round(slice.percent * 100) }}%
</tr> </td>
</table> </tr>
</div> </table>
<div class="column"> </div>
<div class="chart-container"> <div class="column">
<chart-pie :slices="slices" /> <div class="chart-container">
<chart-pie :slices="slices" />
</div>
</div> </div>
</div> </div>
<div class="column is-12"> <div>
<div class="field has-addons has-addons-centered is-narrow"> <div class="field has-addons has-addons-centered is-narrow">
<div class="control" v-if="filterCategory"> <div class="control" v-if="filterCategory">
<button type="submit" class="button" @click="filterCategory = ''"> <button type="submit" class="button" @click="filterCategory = ''">
@@ -191,6 +193,9 @@ export default class TagList extends Vue {
} }
.legend-container { .legend-container {
display: flex; display: flex;
table {
max-width: 400px;
}
} }
.legend { .legend {
font-weight: bold; font-weight: bold;

102
src/views/accounts/AccountItem.vue
View File

@@ -87,63 +87,53 @@
</li> </li>
</ul> </ul>
</div> </div>
<transition-group <div
:name="transitionName" key="transaction"
tag="div" class="transaction-panel tab-content is-centered"
mode="out-in" v-if="activeTab === 'transaction'"
v-if="transactions.length" >
<account-transaction-list
:account="account"
:transactions="transactions"
/>
</div>
<div
key="tag"
class="tag-panel tab-content is-centered"
v-if="activeTab === 'tag'"
>
<tag-list :transactions="transactionWithoutRefund" :account="account" />
</div>
<div
key="balance"
class="balance-panel tab-content is-centered"
v-if="activeTab === 'balance'"
>
<chart-balance
:account="account"
:stats="userStats"
:currency="account.mainCurrency"
/>
</div>
<div
key="refund"
class="refund-panel tab-content is-centered"
v-if="activeTab === 'refund'"
> >
<div <div
key="transaction" v-if="userRefunds.length"
class="transaction-panel tab-content is-centered" class="refund-container columns is-centered is-multiline"
v-if="activeTab === 'transaction'"
>
<account-transaction-list
:account="account"
:transactions="transactions"
/>
</div>
<div
key="tag"
class="tag-panel tab-content is-centered"
v-if="activeTab === 'tag'"
>
<tag-list
:transactions="transactionWithoutRefund"
:account="account"
/>
</div>
<div
key="balance"
class="balance-panel tab-content is-centered"
v-if="activeTab === 'balance'"
>
<chart-balance
:account="account"
:stats="userStats"
:currency="account.mainCurrency"
/>
</div>
<div
key="refund"
class="refund-panel tab-content is-centered"
v-if="activeTab === 'refund'"
> >
<div <div
v-if="userRefunds.length" class="column is-one-fifth"
class="refund-container columns is-centered is-multiline" v-for="(refund, k) in userRefunds"
:key="`${refund.from.alias}-${refund.to.alias}`"
> >
<div <refund-transaction :refund="userRefunds[k]" :account="account" />
class="column is-one-fifth"
v-for="(refund, k) in userRefunds"
:key="`${refund.from.alias}-${refund.to.alias}`"
>
<refund-transaction :refund="userRefunds[k]" :account="account" />
</div>
</div> </div>
<div v-else class="equilibrium">Le compte est à l'équilibre !</div>
</div> </div>
</transition-group> <div v-else class="equilibrium">Le compte est à l'équilibre&nbsp;!</div>
</div>
</div> </div>
<fab-button <fab-button
v-if="!account.archive" v-if="!account.archive"
@@ -197,7 +187,6 @@ export default class AccountItem extends BaseAccount {
public transactions: ITransaction[] = [] public transactions: ITransaction[] = []
public activeTab: string = 'transaction' public activeTab: string = 'transaction'
public retrievingExchange: boolean = false public retrievingExchange: boolean = false
public transitionName: string = ''
public async getData(docIds?: string[]): Promise<void> { public async getData(docIds?: string[]): Promise<void> {
if (docIds && !docIds.find((i: string) => i === this.id)) { if (docIds && !docIds.find((i: string) => i === this.id)) {
@@ -444,13 +433,6 @@ export default class AccountItem extends BaseAccount {
public get isMultiUser(): boolean { public get isMultiUser(): boolean {
return !!this.account && this.account.users.length > 1 return !!this.account && this.account.users.length > 1
} }
@Watch('activeTab')
public onActiveTabChange(newTab: string, oldTab: string): void {
const tabs: string[] = ['transaction', 'tag', 'balance', 'refund']
this.transitionName =
tabs.indexOf(newTab) > tabs.indexOf(oldTab) ? 'slide-left' : 'slide-right'
}
} }
</script> </script>
@@ -529,9 +511,7 @@ export default class AccountItem extends BaseAccount {
.tab-content { .tab-content {
position: absolute; position: absolute;
width: 100%; width: 100%;
margin: 10px 0.75rem; margin: 10px 0;
transition: opacity 0.5s cubic-bezier(0.55, 0, 0.1, 1),
transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
&.columns { &.columns {
&:last-child { &:last-child {
margin-bottom: 60px; margin-bottom: 60px;