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

🎨 (Tag List) Add sticky icons

Browse Source
This commit is contained in:
Julien Calixte
2019-10-01 22:36:26 +02:00
parent 36b0cda263
commit 039294af73
1 changed files with 39 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/TagList.vue
View File

@@ -3,12 +3,19 @@
<div class="column is-half">
<h3 class="subtitle is-3">Légende</h3>
<table class="table">
<tr v-for="(slice, k) in slices" :key="k" :style="legendStyle(slice)" class="legend-item">
<tr
v-for="(slice, k) in slices"
:key="k"
:style="legendStyle(slice)"
class="legend-item"
>
<td>
<awe-icon :icon="categories[slice.key].tag.icon" />
</td>
<td class="legend-label">{{ slice.label }}</td>
<td class="percent-label numeric">{{ Math.round(slice.percent * 100) }}%</td>
<td class="percent-label numeric">
{{ Math.round(slice.percent * 100) }}%
</td>
</tr>
</table>
</div>
@@ -30,23 +37,39 @@
<div class="select is-fullwidth">
<select v-model="filterCategory">
<option value>Toutes</option>
<option
v-for="(category, k) in categories"
:key="k"
:value="k"
>{{ category.tag.label }}</option>
<option v-for="(category, k) in categories" :key="k" :value="k">{{
category.tag.label
}}</option>
</select>
</div>
</div>
</div>
<div class="columns is-multiline" :class="{ 'is-centered': !!filterCategory }">
<div v-for="(category, k) in filteredCategories" :key="k" class="column is-half">
<div
class="columns is-multiline"
:class="{ 'is-centered': !!filterCategory }"
>
<div
v-for="(category, k) in filteredCategories"
:key="k"
class="column is-half"
>
<div class="columns category-list">
<div class="column is-2 tag-element account-color">
<awe-icon :icon="category.tag.icon" />
<div class="icon-container">
<awe-icon :icon="category.tag.icon" />
</div>
</div>
<div class="column transaction-list" v-if="category.transactions.length">
<p>{{ $tc('account.total', category.transactions.length, { count: category.transactions.length }) }}</p>
<div
class="column transaction-list"
v-if="category.transactions.length"
>
<p>
{{
$tc('account.total', category.transactions.length, {
count: category.transactions.length
})
}}
</p>
<account-transaction-list
:filter="false"
:head="false"
@@ -161,10 +184,13 @@ export default class TagList extends Vue {
display: flex;
text-align: center;
align-items: center;
justify-content: center;
flex-flow: column;
font-size: 30pt;
}
.icon-container {
position: sticky;
top: calc(3.25rem + 15px);
}
.chart-container {
padding: 15px;
}