kredits/kredits-web
9
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Releases 18 Activity

Expense list UI improvements #211

Merged
raucao merged 4 commits from feature/expense-list into feature/confirmation-eta 2023-01-15 04:35:17 +00:00
Conversation 3 Commits 4 Files Changed 9
+60 -55
5 changed files with 60 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a93be41e08 - Show all commits
app/components/add-reimbursement/template.hbs
+4 -20
View File
@@ -44,26 +44,10 @@
fsmanuel commented 2023-01-14 09:20:11 +00:00 (Migrated from github.com)
Review
Copy Link
Copy Source

Shouldn't it be

                  @deletable={{true}} />
Shouldn't it be ```suggestion @deletable={{true}} /> ```
raucao commented 2023-01-15 04:34:35 +00:00 (Migrated from github.com)
Review
Copy Link
Copy Source

I figured it's truthy and looks nice. Weak opinion though. Let's go with your version!

I figured it's truthy and looks nice. Weak opinion though. Let's go with your version!
<h3>Expense items</h3>
{{#if this.expenses}}
<ul class="expense-list">
{{#each this.expenses as |expense|}}
<li>
<div class="description" rowspan="2">
<h4>
<span class="date">{{expense.date}}:</span>
<span class="title">{{expense.title}}</span>
</h4>
<p class="description">{{expense.description}}</p>
</div>
<div class="amount">
{{fmt-fiat-currency expense.amount expense.currency}}
</div>
<div class="actions">
<button {{on "click" (fn this.removeExpenseItem expense)}}
class="danger small" type="button">delete</button>
</div>
</li>
{{/each}}
</ul>
<ExpenseList @expenses={{this.expenses}}
@removeExpenseItem={{this.removeExpenseItem}}
@deletable=yes />
<p class="actions">
<button {{on "click" this.showExpenseForm}}
class="green small" type="button">+ Add another item</button>
app/components/expense-list/component.js
+9
View File
@@ -0,0 +1,9 @@
import Component from '@glimmer/component';
export default class ExpenseListComponent extends Component {
get showDeleteButton () {
return !!this.args.deletable;
}
}
app/components/expense-list/template.hbs
+27
View File
@@ -0,0 +1,27 @@
<ul class="expense-list">
{{#each @expenses as |expense|}}
<li class="expense-item">
<h4>
<span class="date">{{expense.date}}:</span>
<span class="title">{{expense.title}}</span>
</h4>
<div class="amount">
{{fmt-fiat-currency expense.amount expense.currency}}
</div>
<p class="description">
{{expense.description}}
</p>
<p class="tags">
{{#each expense.tags as |tag|}}
<button class="small" role="none">{{tag}}</button>
{{/each}}
</p>
{{#if this.showDeleteButton}}
<div class="actions">
<button {{on "click" (fn @removeExpenseItem expense)}}
class="danger small" type="button">delete</button>
</div>
{{/if}}
</li>
{{/each}}
</ul>
app/components/reimbursement-list/template.hbs
+3 -16
View File
@@ -14,22 +14,9 @@
<span class="amount">
{{sats-to-btc reimbursement.amount}}</span>&#8239;<span class="symbol">BTC</span>
</p>
<ul class="expense-list">
{{#each reimbursement.expenses as |expense|}}
<li>
<div class="description" rowspan="2">
<h4>
<span class="date">{{expense.date}}:</span>
<span class="title">{{expense.title}}</span>
</h4>
<p class="description">{{expense.description}}</p>
</div>
<div class="amount">
{{fmt-fiat-currency expense.amount expense.currency}}
</div>
</li>
{{/each}}
</ul>
<ExpenseList @expenses={{reimbursement.expenses}} />
<div class="meta">
<p class="confirmation-eta">
<ConfirmedIn @confirmedAtBlock={{reimbursement.confirmedAt}} />
app/styles/components/_expense-list.scss
+17 -19
View File
@@ -17,32 +17,30 @@ ul.expense-list {
}
}
.description {
grid-row-start: 1;
grid-row-end: 3;
}
.amount {
justify-self: end;
// font-weight: normal;
}
.actions {
justify-self: end;
}
h4 {
font-size: 1.2rem;
font-weight: normal;
line-height: 2rem;
}
p {
line-height: 2rem;
.amount {
justify-self: end;
}
&.description {
font-size: 1rem;
opacity: 0.7;
.description {
font-size: 1rem;
opacity: 0.7;
grid-column-start: span 2;
}
.tags {
button {
margin-left: 0;
}
}
.actions {
justify-self: end;
}
}