From a93be41e087c32f522ef0ffd93d871f47dfef815 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A2u=20Cao?= Date: Fri, 13 Jan 2023 14:56:43 +0800 Subject: [PATCH 1/4] Add expense-list component, DRY up code, add tags --- app/components/add-reimbursement/template.hbs | 24 +++---------- app/components/expense-list/component.js | 9 +++++ app/components/expense-list/template.hbs | 27 ++++++++++++++ .../reimbursement-list/template.hbs | 19 ++-------- app/styles/components/_expense-list.scss | 36 +++++++++---------- 5 files changed, 60 insertions(+), 55 deletions(-) create mode 100644 app/components/expense-list/component.js create mode 100644 app/components/expense-list/template.hbs diff --git a/app/components/add-reimbursement/template.hbs b/app/components/add-reimbursement/template.hbs index 43235b3..145b8e3 100644 --- a/app/components/add-reimbursement/template.hbs +++ b/app/components/add-reimbursement/template.hbs @@ -44,26 +44,10 @@

Expense items

{{#if this.expenses}} - + +

diff --git a/app/components/expense-list/component.js b/app/components/expense-list/component.js new file mode 100644 index 0000000..640d820 --- /dev/null +++ b/app/components/expense-list/component.js @@ -0,0 +1,9 @@ +import Component from '@glimmer/component'; + +export default class ExpenseListComponent extends Component { + + get showDeleteButton () { + return !!this.args.deletable; + } + +} diff --git a/app/components/expense-list/template.hbs b/app/components/expense-list/template.hbs new file mode 100644 index 0000000..dcfc5ee --- /dev/null +++ b/app/components/expense-list/template.hbs @@ -0,0 +1,27 @@ +

diff --git a/app/components/reimbursement-list/template.hbs b/app/components/reimbursement-list/template.hbs index 2a3a187..50dcedf 100644 --- a/app/components/reimbursement-list/template.hbs +++ b/app/components/reimbursement-list/template.hbs @@ -14,22 +14,9 @@ {{sats-to-btc reimbursement.amount}} BTC

- + + +

diff --git a/app/styles/components/_expense-list.scss b/app/styles/components/_expense-list.scss index b369f5f..b5a9650 100644 --- a/app/styles/components/_expense-list.scss +++ b/app/styles/components/_expense-list.scss @@ -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; + } + } From 138cec0389ad0783e3a57ad1b42ec2ac9a0b8405 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A2u=20Cao?= Date: Fri, 13 Jan 2023 15:34:43 +0800 Subject: [PATCH 2/4] Localize date in expense list --- app/components/expense-list/template.hbs | 2 +- app/helpers/fmt-date-localized.js | 8 ++++++++ app/utils/get-locale.js | 5 +++++ 3 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 app/helpers/fmt-date-localized.js create mode 100644 app/utils/get-locale.js diff --git a/app/components/expense-list/template.hbs b/app/components/expense-list/template.hbs index dcfc5ee..64b033c 100644 --- a/app/components/expense-list/template.hbs +++ b/app/components/expense-list/template.hbs @@ -2,7 +2,7 @@ {{#each @expenses as |expense|}}

  • - {{expense.date}}: + {{fmt-date-localized expense.date}}: {{expense.title}}

    diff --git a/app/helpers/fmt-date-localized.js b/app/helpers/fmt-date-localized.js new file mode 100644 index 0000000..a27bb28 --- /dev/null +++ b/app/helpers/fmt-date-localized.js @@ -0,0 +1,8 @@ +import { helper } from '@ember/component/helper'; +import getLocale from 'kredits-web/utils/get-locale'; + +export default helper(function(dateStr) { + const date = new Date(dateStr); + const locale = getLocale(); + return new Intl.DateTimeFormat(locale).format(date); +}); diff --git a/app/utils/get-locale.js b/app/utils/get-locale.js new file mode 100644 index 0000000..f80eb77 --- /dev/null +++ b/app/utils/get-locale.js @@ -0,0 +1,5 @@ +export default function() { + return (navigator.languages && navigator.languages.length) ? + navigator.languages[0] : + navigator.language; +} From 1095bf021825380cfb9b880d438f3e73baeaa473 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A2u=20Cao?= Date: Fri, 13 Jan 2023 15:35:22 +0800 Subject: [PATCH 3/4] Add more button colors, icon style for small buttons Plus tag icon for the tag buttons --- app/components/expense-list/template.hbs | 4 +- app/styles/_buttons.scss | 47 +++++++++++++++++------- app/templates/components/icon-tag.hbs | 1 + 3 files changed, 38 insertions(+), 14 deletions(-) create mode 100644 app/templates/components/icon-tag.hbs diff --git a/app/components/expense-list/template.hbs b/app/components/expense-list/template.hbs index 64b033c..3633663 100644 --- a/app/components/expense-list/template.hbs +++ b/app/components/expense-list/template.hbs @@ -13,7 +13,9 @@

    {{#each expense.tags as |tag|}} - + {{/each}}

    {{#if this.showDeleteButton}} diff --git a/app/styles/_buttons.scss b/app/styles/_buttons.scss index eb0c2ff..db5a8bc 100644 --- a/app/styles/_buttons.scss +++ b/app/styles/_buttons.scss @@ -31,32 +31,53 @@ button, input[type=submit], .button { &.small { font-size: 0.86rem; padding: 0.2rem 0.8rem; + + svg { + width: 1em; + height: 1em; + vertical-align: middle; + margin-right: 0.4rem; + } } &.danger:not(:disabled) { color: $red; background-color: rgba(40, 21, 21, 0.6); border-color: rgba(40, 21, 21, 1); - - &:hover { - background-color: rgba(40, 21, 21, 0.8); - } - &:focus, &:active, &.active { - border-color: $red; - } + &:hover { background-color: rgba(40, 21, 21, 0.8); } + &:focus, &:active, &.active { border-color: $red; } } &.green:not(:disabled) { color: $green; background-color: rgba(21, 40, 21, 0.6); border-color: rgba(21, 40, 21, 1); + &:hover { background-color: rgba(21, 40, 21, 0.8); } + &:focus, &:active, &.active { border-color: $green; } + } - &:hover { - background-color: rgba(21, 40, 21, 0.8); - } - &:focus, &:active, &.active { - border-color: $green; - } + &.pink:not(:disabled) { + color: $pink; + background-color: rgba(40, 21, 40, 0.6); + border-color: rgba(40, 21, 40, 1); + &:hover { background-color: rgba(40, 21, 40, 0.8); } + &:focus, &:active, &.active { border-color: $pink; } + } + + &.purple:not(:disabled) { + color: $purple; + background-color: rgba(24, 21, 40, 0.6); + border-color: rgba(24, 21, 40, 1); + &:hover { background-color: rgba(24, 21, 40, 0.8); } + &:focus, &:active, &.active { border-color: $purple; } + } + + &.yellow:not(:disabled) { + color: $yellow; + background-color: rgba(40, 40, 21, 0.6); + border-color: rgba(40, 40, 21, 1); + &:hover { background-color: rgba(40, 40, 21, 0.8); } + &:focus, &:active, &.active { border-color: $yellow; } } &.icon { diff --git a/app/templates/components/icon-tag.hbs b/app/templates/components/icon-tag.hbs new file mode 100644 index 0000000..7219b15 --- /dev/null +++ b/app/templates/components/icon-tag.hbs @@ -0,0 +1 @@ + \ No newline at end of file From 7cd023a21bb03341ea0e7e8b506de30e8d14f6fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A2u=20Cao?= <842+raucao@users.noreply.github.com> Date: Sun, 15 Jan 2023 12:34:40 +0800 Subject: [PATCH 4/4] Update app/components/add-reimbursement/template.hbs Co-authored-by: Manuel Wiedenmann --- app/components/add-reimbursement/template.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/add-reimbursement/template.hbs b/app/components/add-reimbursement/template.hbs index 145b8e3..0e6a74c 100644 --- a/app/components/add-reimbursement/template.hbs +++ b/app/components/add-reimbursement/template.hbs @@ -46,7 +46,7 @@ {{#if this.expenses}} + @deletable={{true}} />