aiolabs/libra
8
0
Fork 1
Code Issues 36 Pull requests Projects Releases 6 Packages Wiki Activity Actions

Use a type-colored trend icon instead of an inline INCOME/EXPENSE badge

Browse source 
The inline badge ate horizontal space in the description column and
forced "room for 3 nights" to wrap. Move the type signal to the
existing avatar slot — green trending_up for income, red trending_down
for expense — which was previously a redundant orange pending icon
(the whole card is pending entries). Tooltip now distinguishes
income vs expense pending state.
This commit is contained in:
Padreug 2026-05-17 15:23:47 +02:00
commit 5b6daa48c0
1 changed files with 9 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

20
templates/libra/index.html
View file

@ -76,20 +76,18 @@
<q-list separator> <q-list separator>
<q-item v-for="entry in pendingExpenses" :key="entry.id"> <q-item v-for="entry in pendingExpenses" :key="entry.id">
<q-item-section avatar> <q-item-section avatar>
<q-icon name="pending" color="orange" size="sm"> <q-icon
<q-tooltip>Pending approval</q-tooltip> :name="isIncomeEntry(entry) ? 'trending_up' : 'trending_down'"
:color="isIncomeEntry(entry) ? 'green' : 'red'"
size="sm"
>
<q-tooltip>
{% raw %}{{ isIncomeEntry(entry) ? 'Pending income approval' : 'Pending expense approval' }}{% endraw %}
</q-tooltip>
</q-icon> </q-icon>
</q-item-section> </q-item-section>
<q-item-section> <q-item-section>
<q-item-label> <q-item-label>{% raw %}{{ entry.description }}{% endraw %}</q-item-label>
<q-badge
:color="isIncomeEntry(entry) ? 'green' : 'red'"
class="q-mr-sm"
>
{% raw %}{{ isIncomeEntry(entry) ? 'INCOME' : 'EXPENSE' }}{% endraw %}
</q-badge>
{% raw %}{{ entry.description }}{% endraw %}
</q-item-label>
<q-item-label caption> <q-item-label caption>
{% raw %}{{ formatDate(entry.entry_date) }}{% endraw %} {% raw %}{{ formatDate(entry.entry_date) }}{% endraw %}
</q-item-label> </q-item-label>