From 3c73ddd443d22d51a74ec51d6854c2c3756671f4 Mon Sep 17 00:00:00 2001 From: Sebastian Kippe Date: Thu, 25 Apr 2019 19:08:22 +0100 Subject: [PATCH 1/6] Turn user avatars into a component This allows us to add them anywhere in the app, and also to add more features, like e.g. hover info boxes, links, and so on. --- app/components/contributor-list/template.hbs | 3 +-- app/components/user-avatar/component.js | 10 ++++++++++ app/components/user-avatar/template.hbs | 0 app/styles/app.scss | 1 + app/styles/components/_contributor-list.scss | 5 +---- app/styles/components/_user-avatar.scss | 7 +++++++ .../components/user-avatar/component-test.js | 14 ++++++++++++++ 7 files changed, 34 insertions(+), 6 deletions(-) create mode 100644 app/components/user-avatar/component.js create mode 100644 app/components/user-avatar/template.hbs create mode 100644 app/styles/components/_user-avatar.scss create mode 100644 tests/integration/components/user-avatar/component-test.js diff --git a/app/components/contributor-list/template.hbs b/app/components/contributor-list/template.hbs index 64f997f..3c5b4fb 100644 --- a/app/components/contributor-list/template.hbs +++ b/app/components/contributor-list/template.hbs @@ -2,8 +2,7 @@ {{#each contributors as |contributor|}} - - {{contributor.name}} + {{user-avatar contributor=contributor}} {{contributor.name}} {{contributor.totalKreditsEarned}} diff --git a/app/components/user-avatar/component.js b/app/components/user-avatar/component.js new file mode 100644 index 0000000..19a31d1 --- /dev/null +++ b/app/components/user-avatar/component.js @@ -0,0 +1,10 @@ +import Component from '@ember/component'; +import { alias } from '@ember/object/computed'; + +export default Component.extend({ + contributor: null, + tagName: 'img', + classNames: ['avatar'], + attributeBindings: ['src'], + src: alias('contributor.avatarURL') +}); diff --git a/app/components/user-avatar/template.hbs b/app/components/user-avatar/template.hbs new file mode 100644 index 0000000..e69de29 diff --git a/app/styles/app.scss b/app/styles/app.scss index b3207f8..84ec881 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -120,3 +120,4 @@ button, input[type=submit] { @import "components/add-contributor"; @import "components/proposal-list"; @import "components/contribution-list"; +@import "components/user-avatar"; diff --git a/app/styles/components/_contributor-list.scss b/app/styles/components/_contributor-list.scss index 5478587..1a0dbfa 100644 --- a/app/styles/components/_contributor-list.scss +++ b/app/styles/components/_contributor-list.scss @@ -58,12 +58,9 @@ table.contributor-list { &.person { text-align: left; font-size: 1.4rem; + img.avatar { - width: 2rem; - height: 2rem; - vertical-align: middle; margin-right: 0.2rem; - border-radius: 1rem; } } diff --git a/app/styles/components/_user-avatar.scss b/app/styles/components/_user-avatar.scss new file mode 100644 index 0000000..3fdddfb --- /dev/null +++ b/app/styles/components/_user-avatar.scss @@ -0,0 +1,7 @@ +img.avatar { + width: 2rem; + height: 2rem; + vertical-align: middle; + margin-right: 0.2rem; + border-radius: 1rem; +} diff --git a/tests/integration/components/user-avatar/component-test.js b/tests/integration/components/user-avatar/component-test.js new file mode 100644 index 0000000..e96fe17 --- /dev/null +++ b/tests/integration/components/user-avatar/component-test.js @@ -0,0 +1,14 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render } from '@ember/test-helpers'; +import hbs from 'htmlbars-inline-precompile'; + +module('Integration | Component | user-avatar', function(hooks) { + setupRenderingTest(hooks); + + test('it renders', async function(assert) { + await render(hbs`{{user-avatar}}`); + + assert.equal(this.element.textContent.trim(), ''); + }); +}); From efd1b371f93698793e793f380337a1ff1179a91c Mon Sep 17 00:00:00 2001 From: Sebastian Kippe Date: Thu, 25 Apr 2019 19:09:20 +0100 Subject: [PATCH 2/6] Make contribution lists much more dense We have too many contributions for them to be multiple lines by default. --- app/components/contribution-list/template.hbs | 8 +++++--- app/templates/index.hbs | 2 +- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/app/components/contribution-list/template.hbs b/app/components/contribution-list/template.hbs index 60885ae..fa0351c 100644 --- a/app/components/contribution-list/template.hbs +++ b/app/components/contribution-list/template.hbs @@ -1,16 +1,18 @@ {{#each contributions as |contribution|}}

  • - ♥ ({{contribution.kind}}) - {{contribution.contributor.name}}: + {{user-avatar contributor=contribution.contributor}} + ({{contribution.kind}}) + {{contribution.description}}

    {{contribution.amount}}₭S

    +
    • {{/each}} \ No newline at end of file diff --git a/app/templates/index.hbs b/app/templates/index.hbs index a766066..dad1202 100644 --- a/app/templates/index.hbs +++ b/app/templates/index.hbs @@ -29,7 +29,7 @@ {{#if contributionsUnconfirmed}}
    -

    Unconfirmed Contributions

    +

    Latest Contributions

    {{!-- TODO: We need a better naming for kredits.hasAccounts --}} From 247fc8785aa0d04d87d651c974efea8a702910e8 Mon Sep 17 00:00:00 2001 From: Sebastian Kippe Date: Thu, 25 Apr 2019 19:21:55 +0100 Subject: [PATCH 3/6] Link contributions to their main URL --- app/components/contribution-list/template.hbs | 16 ++++++++-------- app/styles/components/_contribution-list.scss | 11 +++++++++++ 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/app/components/contribution-list/template.hbs b/app/components/contribution-list/template.hbs index fa0351c..d53ad52 100644 --- a/app/components/contribution-list/template.hbs +++ b/app/components/contribution-list/template.hbs @@ -2,17 +2,17 @@

  • {{user-avatar contributor=contribution.contributor}} - ({{contribution.kind}}) - {{contribution.description}} + ({{contribution.kind}}) + + {{#if contribution.url}} + {{contribution.description}} + {{else}} + {{contribution.description}} + {{/if}} +

    {{contribution.amount}}₭S

    -
    • {{/each}} \ No newline at end of file diff --git a/app/styles/components/_contribution-list.scss b/app/styles/components/_contribution-list.scss index 49e8339..c865532 100644 --- a/app/styles/components/_contribution-list.scss +++ b/app/styles/components/_contribution-list.scss @@ -45,6 +45,17 @@ ul.contribution-list { span { font-size: inherit; + + &.title { + a { + font-size: inherit; + text-decoration: none; + color: $body-text-color; + } + a:hover, a:active { + color: $primary-color; + } + } } .description { From 85a9d1c73bf69853a8d33bcf6745ca4549822180 Mon Sep 17 00:00:00 2001 From: Sebastian Kippe Date: Thu, 25 Apr 2019 19:22:29 +0100 Subject: [PATCH 4/6] Show person's name when hovering their avatar --- app/components/user-avatar/component.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/components/user-avatar/component.js b/app/components/user-avatar/component.js index 19a31d1..9f2a99b 100644 --- a/app/components/user-avatar/component.js +++ b/app/components/user-avatar/component.js @@ -5,6 +5,7 @@ export default Component.extend({ contributor: null, tagName: 'img', classNames: ['avatar'], - attributeBindings: ['src'], - src: alias('contributor.avatarURL') + attributeBindings: ['src', 'title'], + src: alias('contributor.avatarURL'), + title: alias('contributor.name') }); From 25ead15014dbd2e9f8770ccaad7d89922393119e Mon Sep 17 00:00:00 2001 From: Sebastian Kippe Date: Thu, 25 Apr 2019 19:22:47 +0100 Subject: [PATCH 5/6] Fix incorrect loading text It's mostly waiting for IPFS, not Ethereum. --- app/components/loading-spinner/template.hbs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/loading-spinner/template.hbs b/app/components/loading-spinner/template.hbs index f52a577..4803b4d 100644 --- a/app/components/loading-spinner/template.hbs +++ b/app/components/loading-spinner/template.hbs @@ -2,7 +2,7 @@ - @@ -10,5 +10,5 @@

    - Loading data from Ethereum... + Loading data...

    From 49bfad51b63d9dde072a1fcf0f941520664f454e Mon Sep 17 00:00:00 2001 From: Sebastian Kippe Date: Thu, 25 Apr 2019 19:28:10 +0100 Subject: [PATCH 6/6] Fix failing test --- tests/integration/components/loading-spinner/component-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/integration/components/loading-spinner/component-test.js b/tests/integration/components/loading-spinner/component-test.js index 9845fba..93949f0 100644 --- a/tests/integration/components/loading-spinner/component-test.js +++ b/tests/integration/components/loading-spinner/component-test.js @@ -13,6 +13,6 @@ module('Integration | Component | loading spinner', function(hooks) { await render(hbs`{{loading-spinner}}`); - assert.dom('*').hasText('Loading data from Ethereum...'); + assert.dom('*').hasText('Loading data...'); }); });