diff --git a/app/components/reimbursement-item/component.js b/app/components/reimbursement-item/component.js index 51e8b82..8afcee0 100644 --- a/app/components/reimbursement-item/component.js +++ b/app/components/reimbursement-item/component.js @@ -1,10 +1,19 @@ import Component from '@glimmer/component'; import { action } from '@ember/object'; +import { tracked } from '@glimmer/tracking'; import { inject as service } from '@ember/service'; import config from 'kredits-web/config/environment'; export default class ReimbursementItemComponent extends Component { @service kredits; + @tracked showExpenseDetails = false; + + constructor(owner, args) { + super(owner, args); + if (this.isUnconfirmed && !this.args.reimbursement.vetoed) { + this.showExpenseDetails = true; + } + } get ipfsGatewayUrl () { return config.ipfs.gatewayUrl; @@ -22,6 +31,11 @@ export default class ReimbursementItemComponent extends Component { return this.isUnconfirmed && this.kredits.currentUserIsCore; } + @action + toggleExpenseDetails () { + this.showExpenseDetails = !this.showExpenseDetails; + } + @action veto (id) { this.kredits.vetoReimbursement(id).then(transaction => { diff --git a/app/components/reimbursement-item/template.hbs b/app/components/reimbursement-item/template.hbs index e3f4140..7a2276d 100644 --- a/app/components/reimbursement-item/template.hbs +++ b/app/components/reimbursement-item/template.hbs @@ -1,5 +1,6 @@
  • + class="{{item-status @reimbursement}}" + {{on "click" this.toggleExpenseDetails}}>

    @@ -13,7 +14,9 @@ {{sats-to-btc @reimbursement.amount}}BTC

    + {{#if this.showExpenseDetails}} + {{/if}}

    diff --git a/app/components/reimbursement-list/template.hbs b/app/components/reimbursement-list/template.hbs index 98cd41f..3988acc 100644 --- a/app/components/reimbursement-list/template.hbs +++ b/app/components/reimbursement-list/template.hbs @@ -1,4 +1,4 @@ -

      +
        {{#each this.itemsSorted as |item|}} {{/each}} diff --git a/app/styles/_item-list.scss b/app/styles/_item-list.scss index 548bf3c..6f33b3e 100644 --- a/app/styles/_item-list.scss +++ b/app/styles/_item-list.scss @@ -16,6 +16,16 @@ ul.item-list { } } + &.collapsible { + > li { + border-left: 1px solid transparent; + + &:hover { + border-left: 1px solid $blue; + } + } + } + &.loading { @include loading-border-top;