Merge pull request #109 from 67P/feature/contribution_lists

Improve contribution lists

app/components/contribution-list/template.hbs

@@ -1,16 +1,18 @@
 {{#each contributions as |contribution|}}
   <li data-contribution-id={{contribution.id}} class={{if contribution.confirmed "confirmed" "unconfirmed"}}>
     <p class="meta">
-      <span class="category {{contribution.kind}}">♥ ({{contribution.kind}})</span>
-      <span class="recipient">{{contribution.contributor.name}}:</span>
+      <span class="recipient">{{user-avatar contributor=contribution.contributor}}</span>
+      <span class="category {{contribution.kind}}">({{contribution.kind}})</span>
+      <span class="title">
+        {{#if contribution.url}}
+          <a href={{contribution.url}} target="_blank" rel="noopener">{{contribution.description}}</a>
+        {{else}}
+          {{contribution.description}}
+        {{/if}}
+      </span>
     </p>
     <p class="kredits-amount">
       <span class="amount">{{contribution.amount}}</span><span class="symbol">₭S</span>
     </p>
-    <p class="description">
-      <span class="description">{{contribution.description}}</span>
-    </p>
-    <p class="voting">
-    </p>
   </li>
 {{/each}}

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>

app/components/loading-spinner/template.hbs

@@ -2,7 +2,7 @@
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        version="1.1" x="0px" y="0px" viewBox="0 0 132 100"
        enable-background="new 0 0 100 100" xml:space="preserve">
-    <path id="path-comet" 
+    <path id="path-comet"
           d="M79.062,24.173L79.062,24.173l-0.021-0.011c-0.068-0.03-0.137-0.062-0.204-0.093L42.392,7.337
              c0,0,3.065,14.104,4.458,18.019l0,0c0,0-41.754-12.481-46.85-13.67c1.67,6.52,30.607,62.492,30.607,62.492
              c5.848,11.873,19.394,18.485,33.522,18.485c19.811,0,35.87-16.059,35.87-35.869C100,42.313,91.418,29.837,79.062,24.173z">
@@ -10,5 +10,5 @@
   </svg>
 </p>
 <p>
-  Loading data from Ethereum...
+  Loading data...
 </p>

app/components/user-avatar/component.js

@@ -0,0 +1,11 @@
+import Component from '@ember/component';
+import { alias } from '@ember/object/computed';
+
+export default Component.extend({
+  contributor: null,
+  tagName: 'img',
+  classNames: ['avatar'],
+  attributeBindings: ['src', 'title'],
+  src: alias('contributor.avatarURL'),
+  title: alias('contributor.name')
+});

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";

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 {

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;
         }
       }
 

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;
+}

app/templates/index.hbs

@@ -29,7 +29,7 @@
     {{#if contributionsUnconfirmed}}
       <section id="contributions-unconfirmed">
         <header>
-          <h2>Unconfirmed Contributions</h2>
+          <h2>Latest Contributions</h2>
         </header>
         <div class="content">
           {{!-- TODO: We need a better naming for kredits.hasAccounts --}}

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...');
   });
 });

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(), '');
+  });
+});