From 3c73ddd443d22d51a74ec51d6854c2c3756671f4 Mon Sep 17 00:00:00 2001
From: Sebastian Kippe <sebastian@kip.pe>
Date: Thu, 25 Apr 2019 19:08:22 +0100
Subject: [PATCH] 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|}}
     <tr role="button" class={{if (is-current-user contributor) "current-user"}} {{action "toggleContributorInfo" contributor}}>
       <td class="person">
-        <img class="avatar" src={{contributor.avatarURL}} alt="">
-        {{contributor.name}}
+        {{user-avatar contributor=contributor}} {{contributor.name}}
       </td>
       <td class="kredits">
         <span class="amount">{{contributor.totalKreditsEarned}}</span>
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(), '');
+  });
+});