1.5.0

Use local default IPFS gateway

app/components/contribution-list/component.js

@@ -1,9 +1,53 @@
 import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { sort } from '@ember/object/computed';
+import { isPresent } from '@ember/utils';
+import { inject as service } from '@ember/service';
 
 export default Component.extend({
 
-  tagName: 'ul',
+  tagName: 'div',
-  classNames: ['contribution-list'],
+  classNames: ['contributions'],
+
+  showQuickFilter: false,
+  hideSmallContributions: false,
+  contributorId: null,
+  contributionKind: null,
+
+  kredits: service(),
+
+  contributorsSorting: Object.freeze(['name:asc']),
+  contributors: sort('kredits.contributors', 'contributorsSorting'),
+
+  contributorsActive: computed('contributors.[]', 'contributions', function() {
+    let activeIds = this.contributions.mapBy('contributorId')
+                                      .map(id => id.toString())
+                                      .uniq();
+    return this.contributors.filter(c => {
+      return activeIds.includes(c.id.toString());
+    });
+  }),
+
+  contributionKinds: computed('contributions.[]', function() {
+    return this.contributions.mapBy('kind').uniq();
+  }),
+
+  contributionsFiltered: computed('contributions.[]', 'hideSmallContributions', 'contributorId', 'contributionKind', function() {
+    return this.contributions.filter(c => {
+      let included = true;
+
+      if (this.hideSmallContributions &&
+          c.amount <= 500) { included = false; }
+
+      if (isPresent(this.contributorId) &&
+          c.contributorId.toString() !== this.contributorId.toString()) { included = false; }
+
+      if (isPresent(this.contributionKind) &&
+          c.kind !== this.contributionKind) { included = false; }
+
+      return included;
+    });
+  }),
 
   actions: {
 

app/components/contribution-list/template.hbs

@@ -1,25 +1,58 @@
-{{#each contributions as |contribution|}}
+{{#if showQuickFilter}}
-  <li data-contribution-id={{contribution.id}} class="{{contribution-status contribution}} {{if contribution.vetoed "vetoed"}}">
+  <div class="quick-filter">
-    <p class="meta">
+    <p>
-      <span class="recipient">{{user-avatar contributor=contribution.contributor}}</span>
+      <label class="filter-contributor">
-      <span class="category {{contribution.kind}}">({{contribution.kind}})</span>
+        Contributor:
-      <span class="title">
+        <select onchange={{action (mut contributorId) value="target.value"}}>
-        {{#if contribution.url}}
+          <option value="" selected>all</option>
-          <a href={{contribution.url}} target="_blank" rel="noopener">{{contribution.description}}</a>
+          {{#each contributorsActive as |contributor|}}
-        {{else}}
+            <option value={{contributor.id}} selected={{eq contributorId contributor.id}}>{{contributor.name}}</option>
-          {{contribution.description}}
+          {{/each}}
-        {{/if}}
+        </select>
-      </span>
+      </label>
+
+      <label class="filter-contribution-kind">
+        Kind:
+        <select onchange={{action (mut contributionKind) value="target.value"}}>
+          <option value="" selected>all</option>
+          {{#each contributionKinds as |kind|}}
+            <option value={{kind}} selected={{eq contributionKind kind}}>{{capitalize-string kind}}</option>
+          {{/each}}
+        </select>
+      </label>
+
+      <label class="filter-contribution-size">
+        {{input type="checkbox" checked=hideSmallContributions}}
+        Hide small contributions
+      </label>
     </p>
-    <p class="kredits-amount">
+  </div>
-      <span class="amount">{{contribution.amount}}</span><span class="symbol">₭S</span>
+{{/if}}
-    </p>
+
-    {{#unless contribution.vetoed}}
+<ul class="contribution-list">
-      {{#unless (is-confirmed-contribution contribution)}}
+  {{#each contributionsFiltered as |contribution|}}
-        <p class="voting">
+    <li data-contribution-id={{contribution.id}} class="{{contribution-status contribution}} {{if contribution.vetoed "vetoed"}}">
-          <button {{action "veto" contribution.id}} class="small danger">veto</button>
+      <p class="meta">
-        </p>
+        <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" title={{contribution.description}}>{{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>
+      {{#unless contribution.vetoed}}
+        {{#unless (is-confirmed-contribution contribution)}}
+          <p class="voting">
+            <button {{action "veto" contribution.id}} class="small danger">veto</button>
+          </p>
+        {{/unless}}
       {{/unless}}
-    {{/unless}}
+    </li>
-  </li>
+  {{/each}}
-{{/each}}
+</ul>

app/components/contributor-list/component.js

@@ -1,20 +1,18 @@
 import Component from '@ember/component';
+import { inject as service } from '@ember/service';
 
 export default Component.extend({
 
+  router: service(),
+
   tagName: 'table',
   classNames: 'contributor-list',
   selectedContributor: null,
 
   actions: {
 
-    toggleContributorInfo(contributor) {
+    openContributorDetails(contributor) {
-      if (contributor.showMetadata) {
+      this.router.transitionTo('dashboard.contributors.show', contributor);
-        contributor.set('showMetadata', false);
-      } else {
-        this.contributorList.setEach('showMetadata', false);
-        contributor.set('showMetadata', true);
-      }
     }
 
   }

app/components/contributor-list/template.hbs

@@ -1,6 +1,6 @@
 <tbody>
   {{#each contributorList as |c|}}
-    <tr role="button" class={{if (is-current-user c.contributor) "current-user"}} {{action "toggleContributorInfo" c}}>
+    <tr role="button" class={{if (is-current-user c.contributor) "current-user"}} {{action "openContributorDetails" c.contributor}}>
       <td class="person">
         {{user-avatar contributor=c.contributor}} {{c.contributor.name}}
       </td>
@@ -15,25 +15,5 @@
         <span class="symbol">₭S</span>
       </td>
     </tr>
-    <tr class="metadata {{if (is-current-user c.contributor) "current-user"}} {{if c.showMetadata "visible"}}">
-      <td colspan="2">
-        <ul>
-          <li>
-            <a href="https://rinkeby.etherscan.io/address/{{c.contributor.account}}" target="_blank" rel="noopener">Inspect Ethereum transactions</a>
-          </li>
-          {{#if c.contributor.ipfsHash}}
-            <li>
-              <a href="https://ipfs.io/ipfs/{{c.contributor.ipfsHash}}" target="_blank" rel="noopener">Inspect IPFS profile</a>
-            </li>
-          {{/if}}
-          <li>
-            {{link-to "Edit profile" "contributors.edit" c.contributor.id}}
-          </li>
-        </ul>
-        {{#if c.showMetadata}}
-          <pre>{{c.contributor.ipfsData}}</pre>
-        {{/if}}
-      </td>
-    </tr>
   {{/each}}
 </tbody>

app/components/external-account-link/component.js

@@ -0,0 +1,15 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  tagName: "",
+  account: null,
+
+  iconComponentName: computed('account.site', function() {
+    if (this.account.site.match(/github|gitea|wiki/)) {
+      return 'icon-account-' + this.account.site.replace(/\./g, '-');
+    } else {
+      return 'icon-web-globe';
+    }
+  })
+});

app/components/external-account-link/template.hbs

@@ -0,0 +1,4 @@
+<a href={{account.url}} target="_blank" rel="noopener" title="{{account.username}} on {{account.site}}">
+  <span class="site">{{account.site}}</span>
+  {{component iconComponentName}}
+</a>

app/components/icon-account-gitea-kosmos-org/component.js

@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: ""
+});

app/components/icon-account-github-com/component.js

@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: ""
+});

app/components/icon-account-github-com/template.hbs

@@ -0,0 +1,8 @@
+<svg id="svg825" class="icon-github" width="260" height="260" enable-background="new 0 0 212.4575 186.23" version="1.1" viewBox="0 0 260 260" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+  <g transform="translate(23.766 36.885)">
+    <path d="m151.79 86.234c-7.078 0.1229-14.154 0.5605-21.232 0.7069-12.318 0.248-24.64 0.5664-36.961 0.512-11.176-0.0472-22.358-0.9728-33.518-0.7052-7.3164 0.1776-14.373 2.2948-20.131 7.584-9.9472 9.1368-12.522 21-11.314 33.807 1.92 20.357 9.2716 31.449 29.115 37.064 15.793 4.4704 31.963 5.2088 48.199 4.9744 5.254 0 10.51 0.1367 15.758-0.0292 12.723-0.4064 25.264-2.2072 37.358-6.3596 10.846-3.7225 18.799-10.691 22.572-22.166 2.6736-8.1288 3.7148-16.388 2.5544-24.853-1.7772-12.959-13.275-30.86-32.4-30.535zm-81.576 59.996c-8.836 0-16-8.9551-16-20 0-11.045 7.164-20 16-20s16 8.9553 16 20c0 11.045-7.164 20-16 20zm76 0c-8.836 0-16-8.9551-16-20 0-11.045 7.164-20 16-20s16 8.9553 16 20c0 11.045-7.164 20-16 20z" fill="none"/>
+    <path class="fg" d="m200.25 59.188c-2.5076-3.4493-4.3632-6.3888-3.8748-11.44 0.6796-7.0664-0.3536-14.396-1.3204-21.518-1.2188-8.9843-3.5236-17.74-7.1776-26.23-9.0332 1.9356-17.981 3.49-25.963 8.0976-8.4648 4.8908-16.695 10.215-25.08 15.25-0.9532 0.5704-2.3124 0.8848-3.3848 0.7032-17.967-3.1368-35.92-3.0196-53.898-0.086-1.3632 0.2244-3.0724-0.2345-4.2948-0.9608-4.4436-2.6604-8.6564-5.7344-13.123-8.3516-11.656-6.844-23.66-12.822-37.494-14.59-0.3928 0.8597-0.7188 1.4785-0.9612 2.1253-4.164 11.22-6.6424 22.844-7.4276 34.82-0.2872 4.3516-0.6092 8.8048 0 13.072 0.3456 2.4296-4e-3 3.8788-1.3924 5.6132-4.8516 6.0488-8.6368 12.717-11.102 20.219-4.6972 14.295-4.4004 28.861-2.2756 43.475 1.7268 11.974 4.7344 23.537 11.324 33.873 13.186 20.682 32.892 29.774 55.572 31.705 19.308 1.6464 38.8 1.1992 58.213 1.2364 13.855 0.0251 27.57-1.4924 40.715-6.6389 20.375-7.9727 33.859-22.604 40.275-44.166 3.7344-12.545 5.2324-25.396 4.8144-38.498-0.4412-13.81-4.0504-26.566-12.144-37.711zm-18.609 82.435c-3.7736 11.475-11.727 18.444-22.572 22.166-12.094 4.1524-24.635 5.9532-37.358 6.3596-5.248 0.1659-10.504 0.0292-15.758 0.0292-16.236 0.2344-32.406-0.504-48.199-4.9744-19.844-5.6152-27.195-16.707-29.115-37.064-1.2072-12.807 1.3672-24.67 11.314-33.807 5.7576-5.2892 12.814-7.4064 20.131-7.584 11.16-0.2676 22.342 0.658 33.518 0.7052 12.32 0.0544 24.642-0.264 36.961-0.512 7.0784-0.1464 14.154-0.584 21.232-0.7069 19.125-0.3243 30.623 17.576 32.4 30.535 1.1604 8.4647 0.1192 16.724-2.5544 24.853z"/>
+    <ellipse class="fg" cx="70.214" cy="126.23" rx="16" ry="20"/>
+    <ellipse class="fg" cx="146.21" cy="126.23" rx="16" ry="20"/>
+  </g>
+</svg>

app/components/icon-account-wiki-kosmos-org/component.js

@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: ""
+});

app/components/icon-account-wiki-kosmos-org/template.hbs

@@ -0,0 +1,8 @@
+<svg class="icon-wiki" width="120" height="120" version="1.1" viewBox="0 0 120 120" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+  <g transform="translate(18.1,3)">
+    <polygon class="fg" transform="translate(-6.2,9)" points="6.2 5 45.7 20.5 45.7 91 6.2 75.5"/>
+    <polygon class="fg" transform="translate(-6.2,9)" points="90 5 50.5 20.5 50.5 91 90 75.5"/>
+    <polygon class="fg" transform="translate(-6.2,9)" points="87 88 87 81.8 60.4 91"/>
+    <polygon class="fg" transform="translate(-6.2,9)" points="9.2 88 9.2 81.8 34.9 91"/>
+  </g>
+</svg>

app/components/icon-web-globe/component.js

@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: ""
+});

app/components/icon-web-globe/template.hbs

@@ -0,0 +1,3 @@
+<svg class="icon-web-globe" width="60" height="60" enable-background="new 0 0 64 64" version="1.1" viewBox="0 0 60 60" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+  <path class="fg" d="m48.1 14.3c-0.4-0.5-0.9-1-1.4-1.5-4.3-4.2-10.2-6.8-16.7-6.8s-12.4 2.6-16.7 6.8c-0.5 0.5-1 1-1.4 1.5-3.7 4.2-5.9 9.7-5.9 15.7s2.2 11.5 5.8 15.7c0.4 0.5 0.9 1 1.4 1.5 4.3 4.2 10.3 6.8 16.8 6.8s12.5-2.6 16.8-6.9c0.5-0.5 0.9-0.9 1.4-1.5 3.6-4.1 5.8-9.6 5.8-15.6s-2.2-11.5-5.9-15.7zm3.9 14.7h-8.1c-0.1-3-1-7.3-2.4-10.5 1.8-0.8 3.5-1.8 5.1-3 3.1 3.6 5.1 8.5 5.4 13.5zm-21-20.1c3 2.3 5.8 5.2 7.6 8.5-2.4 0.9-4.6 1.3-7.6 1.4zm-2 9.9c-3-0.1-5.2-0.6-7.6-1.4 1.8-3.3 4.6-6.3 7.6-8.5zm0 2v8.2h-10.8c0.1-3 0.9-6.8 2.3-9.8 2.7 1 5.5 1.5 8.5 1.6zm0 10.2v8c-3 0.1-5.9 0.7-8.6 1.7-1.4-3-2.1-5.7-2.3-9.7zm0 10v10.1c-3-2.3-5.8-5.3-7.7-8.6 2.4-0.9 4.7-1.4 7.7-1.5zm2 0c3 0.1 5.3 0.6 7.7 1.5-1.9 3.4-4.7 6.3-7.7 8.6zm0-2v-8h10.8c-0.1 4-0.9 6.7-2.3 9.7-2.6-1-5.5-1.5-8.5-1.7zm0-10v-8.2c3-0.1 5.8-0.7 8.5-1.6 1.4 3 2.2 6.8 2.3 9.8zm9.5-12.3c-1.7-3.2-4.1-6-6.9-8.3 4.4 0.6 8.4 2.7 11.5 5.6-1.4 1.1-3 1.9-4.6 2.7zm-14.1-8.4c-2.9 2.3-5.2 5.2-6.9 8.3-1.6-0.7-3.2-1.6-4.6-2.6 3.1-2.9 7.1-5 11.5-5.7zm-12.9 7.2c1.6 1.2 3.3 2.2 5.1 3-1.5 3.3-2.3 7.5-2.4 10.5h-8.2c0.3-5 2.3-9.9 5.5-13.5zm-5.5 15.5h8.1c0.1 4 1 7.2 2.4 10.5-1.8 0.8-3.5 1.8-5.1 3-3.2-3.7-5.1-8.5-5.4-13.5zm11.4 12.2c1.7 3.2 4.1 6.1 7 8.4-4.5-0.7-8.5-2.8-11.6-5.8 1.5-1 3-1.8 4.6-2.6zm14.2 8.5c2.9-2.4 5.3-5.2 7-8.4 1.6 0.7 3.2 1.6 4.6 2.6-3.1 3-7.2 5-11.6 5.8zm13-7.3c-1.6-1.2-3.3-2.2-5.1-3 1.4-3.2 2.3-6.5 2.4-10.5h8.1c-0.3 5.1-2.2 9.9-5.4 13.5z"/>
+</svg>

app/components/user-avatar/component.js

@@ -1,11 +1,30 @@
 import Component from '@ember/component';
 import { alias } from '@ember/object/computed';
+import { computed } from '@ember/object';
+
+const SIZES = {
+  'small':  '128', // pixels
+  'medium': '256',
+  'large':  '512'
+}
 
 export default Component.extend({
   contributor: null,
   tagName: 'img',
   classNames: ['avatar'],
+  classNameBindings: ['size'],
   attributeBindings: ['src', 'title'],
-  src: alias('contributor.avatarURL'),
+  size: 'small',
-  title: alias('contributor.name')
+
+  src: alias('avatarURL'),
+  title: alias('contributor.name'),
+
+  avatarURL: computed('contributor.github_uid', 'size', function() {
+    const github_uid = this.contributor.github_uid;
+
+    if (github_uid) {
+      return `https://avatars2.githubusercontent.com/u/${github_uid}?v=3&s=${SIZES[this.size]}`;
+    }
+  })
+
 });

app/controllers/dashboard.js

@@ -5,6 +5,9 @@ import { inject as service } from '@ember/service';
 
 export default Controller.extend({
   kredits: service(),
+
+  showDetailsPane: false,
+
   currentBlock: alias('kredits.currentBlock'),
 
   contributions: alias('kredits.contributions'),
@@ -25,6 +28,9 @@ export default Controller.extend({
   showUnconfirmedKredits: true,
   hideUnconfirmedKredits: not('showUnconfirmedKredits'),
 
+  showQuickFilterUnconfirmed: false,
+  showQuickFilterConfirmed: false,
+
   actions: {
 
     vetoContribution (contributionId) {
@@ -37,6 +43,14 @@ export default Controller.extend({
       this.kredits.vote(proposalId).then(transaction => {
         console.debug('[controllers:index] Vote submitted to Ethereum blockhain: '+transaction.hash);
       });
+    },
+
+    toggleQuickFilterUnconfirmed () {
+      this.toggleProperty('showQuickFilterUnconfirmed');
+    },
+
+    toggleQuickFilterConfirmed () {
+      this.toggleProperty('showQuickFilterConfirmed');
     }
 
   }

app/controllers/dashboard/contributors/show.js

@@ -0,0 +1,12 @@
+import Controller from '@ember/controller';
+import { computed } from '@ember/object';
+
+export default Controller.extend({
+
+  roleName: computed('model.isCore', 'totalKreditsEarned', function() {
+    if (this.model.isCore) return 'Core Contributor';
+    if (this.model.totalKreditsEarned <= 5000) return 'Newcomer';
+    return 'Contributor';
+  })
+
+});

app/helpers/capitalize-string.js

@@ -0,0 +1,7 @@
+import Helper from '@ember/component/helper';
+
+export default Helper.extend({
+  compute([string]) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+  }
+});

app/models/contributor.js

@@ -1,4 +1,3 @@
-import { computed } from '@ember/object';
 import EmberObject from '@ember/object';
 import bignumber from 'kredits-web/utils/cps/bignumber';
 import kreditsValue from 'kredits-web/utils/cps/kredits';
@@ -20,12 +19,6 @@ export default EmberObject.extend({
   github_username: null,
   github_uid: null,
   wiki_username: null,
-  ipfsData: '',
+  ipfsData: ''
 
-  avatarURL: computed('github_uid', function() {
-    let github_uid = this.github_uid;
-    if (github_uid) {
-      return `https://avatars2.githubusercontent.com/u/${github_uid}?v=3&s=128`;
-    }
-  }),
 });

app/router.js

@@ -7,6 +7,11 @@ const Router = EmberRouter.extend({
 });
 
 Router.map(function() {
+  this.route('dashboard', function() {
+    this.route('contributors', function() {
+      this.route('show', { path: ':id' });
+    });
+  });
   this.route('proposals', function() {
     this.route('new');
   });

app/routes/dashboard/contributors/show.js

@@ -0,0 +1,24 @@
+import { inject as service } from '@ember/service';
+import Route from '@ember/routing/route';
+import { alias } from '@ember/object/computed';
+
+export default Route.extend({
+
+  kredits: service(),
+  contributors: alias('kredits.contributors'),
+
+  model (params) {
+    return this.contributors.findBy('id', params.id);
+  },
+
+  activate () {
+    this.controllerFor('dashboard')
+        .set('showDetailsPane', true);
+  },
+
+  deactivate () {
+    this.controllerFor('dashboard')
+        .set('showDetailsPane', false);
+  }
+
+});

app/routes/index.js

@@ -0,0 +1,9 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+
+  redirect () {
+    this.transitionTo('dashboard');
+  }
+
+});

app/styles/_buttons.scss

@@ -11,10 +11,18 @@ button, input[type=submit], .button {
   cursor: pointer;
   letter-spacing: 0.1em;
 
+  &+button, &+input[type=submit], &+.button {
+    margin-left: 0.5rem;
+  }
+
   &:hover {
     background-color: rgba(22, 21, 40, 0.8);
   }
 
+  &:active, &.active {
+    border-color: $primary-color;
+  }
+
   &.small {
     font-size: 0.8rem;
     padding: 0.2rem 0.8rem;
@@ -28,6 +36,9 @@ button, input[type=submit], .button {
     &:hover {
       background-color: rgba(40, 21, 21, 0.8);
     }
+    &:active, &.active {
+      border-color: $red;
+    }
   }
 
   &.green {
@@ -38,5 +49,8 @@ button, input[type=submit], .button {
     &:hover {
       background-color: rgba(21, 40, 21, 0.8);
     }
+    &:active, &.active {
+      border-color: $green;
+    }
   }
 }

app/styles/_layout.scss

@@ -5,7 +5,7 @@ main {
     padding: 1rem;
   }
 
-  &#index {
+  &#dashboard {
     width: 100%;
     display: grid;
     grid-row-gap: 2rem;
@@ -32,12 +32,19 @@ main {
 
 @media (min-width: 550px) {
   main {
-    &#index {
+    &#dashboard {
       grid-column-gap: 4rem;
       grid-row-gap: 2rem;
       grid-template-columns: 2fr 4fr;
       grid-template-areas:
         "stats contributions";
+
+      &.with-details {
+        grid-column-gap: 3rem;
+        grid-template-columns: 2fr 4fr 2fr;
+        grid-template-areas:
+          "stats contributions details";
+      }
     }
   }
 }

app/styles/app.scss

@@ -97,9 +97,12 @@ section {
 
 @import "buttons";
 @import "forms";
-@import "components/topbar";
+
-@import "components/loading-spinner";
-@import "components/contributor-list";
-@import "components/proposal-list";
 @import "components/contribution-list";
+@import "components/contributor-list";
+@import "components/contributor-profile";
+@import "components/external-account-link";
+@import "components/loading-spinner";
+@import "components/proposal-list";
+@import "components/topbar";
 @import "components/user-avatar";

app/styles/components/_contribution-list.scss

@@ -6,6 +6,24 @@ main section {
   }
 }
 
+.quick-filter {
+  font-size: 1.2rem;
+  margin-bottom: 2rem;
+
+  p {
+    font-size: inherit;
+    padding: 0.2rem 0 0;
+  }
+
+  label {
+    font-size: inherit;
+
+    &+ label {
+      margin-left: 3.6rem;
+    }
+  }
+}
+
 ul.contribution-list {
   clear: both;
   width: 100%;
@@ -39,6 +57,9 @@ ul.contribution-list {
       margin: 0;
       font-size: inherit;
       line-height: 2rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
 
       &.kredits-amount, &.voting {
         text-align: right;

app/styles/components/_contributor-profile.scss

@@ -0,0 +1,52 @@
+section#contributor-profile {
+  text-align: center;
+
+  header {
+    z-index: 2;
+    width: 100%;
+    text-align: center;
+
+    img {
+      margin: 0 auto;
+      border: 3px solid rgba(255,255,255,0.2);
+    }
+  }
+
+  .content {
+    z-index: 1;
+    width: 100%;
+    margin: -7.2rem 0 1.5rem;
+    padding: 6rem 1.2rem 2rem;
+
+    border-top: 1px solid rgba(255,255,255,0.2);
+    border-bottom: 1px solid rgba(255,255,255,0.2);
+    background-color: rgba(255,255,255,0.1);
+
+    h2 {
+      text-align: center;
+      margin-bottom: 0.6rem;
+    }
+
+    p.role {
+      margin-bottom: 2rem;
+    }
+
+    ul.external-accounts {
+      list-style: none;
+
+      li {
+        display: inline-block;
+
+        &+li {
+          margin-left: 0.6rem;
+        }
+      }
+    }
+  }
+
+  .actions {
+    .button {
+      margin-bottom: 0.6rem;
+    }
+  }
+}

app/styles/components/_external-account-link.scss

@@ -0,0 +1,34 @@
+.external-accounts a {
+  display: inline-block;
+  width: 4rem;
+  height: 4rem;
+  padding: 0.8rem;
+  background-color: rgba(0, 0, 0, 0.3);
+  color: $body-text-color;
+  border-radius: 2rem;
+
+  span.site {
+    display: none;
+  }
+
+  svg {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .fg {
+      fill: $body-text-color;
+    }
+  }
+
+  &:hover, &:active {
+    background-color: rgba(0, 0, 0, 0.5);
+
+    svg {
+      .fg {
+        fill: $primary-color;
+      }
+    }
+  }
+}

app/styles/components/_topbar.scss

@@ -13,6 +13,11 @@
   h1 {
     display: inline-block;
     text-transform: uppercase;
+
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
   }
 
   section#user-account {

app/styles/components/_user-avatar.scss

@@ -4,4 +4,18 @@ img.avatar {
   vertical-align: middle;
   margin-right: 0.2rem;
   border-radius: 1rem;
+
+  &.medium {
+    margin: 0;
+    width: 10rem;
+    height: 10rem;
+    border-radius: 5rem;
+  }
+
+  &.large {
+    margin: 0;
+    width: 256px;
+    height: 256px;
+    border-radius: 128px;
+  }
 }

app/templates/application.hbs

@@ -1,5 +1,5 @@
 <header id="topbar">
-  <h1>Kosmos Kredits</h1>
+  <h1>{{link-to "Kosmos Kredits" "dashboard"}}</h1>
 
   <section id="user-account">
     {{#if kredits.hasAccounts }}

app/templates/dashboard.hbs

@@ -1,4 +1,4 @@
-<main id="index">
+<main id="dashboard" class={{if showDetailsPane "with-details"}}>
 
   <div id="stats">
     <section id="people">
@@ -42,6 +42,7 @@
           <h2>Latest Contributions</h2>
           {{#if kredits.hasAccounts}}
             <nav>
+              <button {{action "toggleQuickFilterUnconfirmed"}} class="small {{if showQuickFilterUnconfirmed "active"}}">filter</button>
               {{link-to "add" "contributions.new" title="Submit a contribution" class="button small green"}}
             </nav>
           {{/if}}
@@ -50,20 +51,29 @@
           {{!-- TODO: We need a better naming for kredits.hasAccounts --}}
           {{contribution-list contributions=contributionsUnconfirmedSorted
                               vetoContribution=(action "vetoContribution")
-                              contractInteractionEnabled=kredits.hasAccounts}}
+                              contractInteractionEnabled=kredits.hasAccounts
+                              showQuickFilter=showQuickFilterUnconfirmed}}
         </div>
       </section>
     {{/if}}
 
     <section id="contributions-confirmed">
-      <header>
+      <header class="with-nav">
         <h2>Confirmed Contributions</h2>
+        <nav>
+          <button {{action "toggleQuickFilterConfirmed"}} class="small {{if showQuickFilterConfirmed "active"}}">filter</button>
+        </nav>
       </header>
       <div class="content">
         {{contribution-list contributions=contributionsConfirmedSorted
-                            vetoContribution=(action "vetoContribution")}}
+                            vetoContribution=(action "vetoContribution")
+                            showQuickFilter=showQuickFilterConfirmed}}
       </div>
     </section>
   </div>
 
+  <div id="details">
+    {{outlet}}
+  </div>
+
 </main>

app/templates/dashboard/contributors/show.hbs

@@ -0,0 +1,36 @@
+<section id="contributor-profile">
+  <header>
+    {{user-avatar contributor=model size="medium"}}
+  </header>
+
+  <div class="content">
+    <h2>{{model.name}}</h2>
+    <p class="role">{{roleName}}</p>
+
+    <ul class="external-accounts">
+      {{#each model.accounts as |account|}}
+        <li>
+          {{external-account-link account=account}}
+        </li>
+      {{/each}}
+      {{#if model.url}}
+        <li>
+          <a href={{model.url}} target="_blank" rel="noopener" title="Website">
+            <span class="site">Web</span>
+            {{icon-web-globe}}
+          </a>
+        </li>
+      {{/if}}
+    </ul>
+  </div>
+
+  <div class="actions">
+    <p>
+      <a href="https://rinkeby.etherscan.io/address/{{model.account}}" class="button small" target="_blank" rel="noopener">Inspect Ethereum transactions</a>
+      {{#if model.ipfsHash}}
+        <a href="https://ipfs.io/ipfs/{{model.ipfsHash}}" class="button small" target="_blank" rel="noopener">Inspect IPFS profile</a>
+      {{/if}}
+      {{link-to "Edit profile" "contributors.edit" model class="button small"}}
+    </p>
+  </div>
+</section>

config/environment.js

@@ -56,7 +56,8 @@ module.exports = function(environment) {
     ENV.ipfs = {
       host: 'localhost',
       port: '5001',
-      protocol: 'http'
+      protocol: 'http',
+      gatewayUrl: 'http://localhost:8080/ipfs'
     };
   }
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "kredits-web",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kredits-web",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "private": true,
   "description": "Contribution dashboard of the Kosmos project",
   "repository": "https://github.com/67P/kredits-web",

release/index.html

@@ -8,10 +8,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 
     
-<meta name="kredits-web/config/environment" content="%7B%22modulePrefix%22%3A%22kredits-web%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22%2F%22%2C%22locationType%22%3A%22auto%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%7D%7D%2C%22APP%22%3A%7B%22name%22%3A%22kredits-web%22%2C%22version%22%3A%221.3.0%2B091ebf4b%22%7D%2C%22browserify%22%3A%7B%22tests%22%3Atrue%2C%22transform%22%3A%5B%5B%22babelify%22%2C%7B%22presets%22%3A%5B%22es2015%22%5D%2C%22global%22%3Atrue%7D%5D%5D%7D%2C%22web3ProviderUrl%22%3A%22https%3A%2F%2Frinkeby.infura.io%2Fv3%2Fd4f788b7a6584f7db2fc3c268d4d09e9%22%2C%22ipfs%22%3A%7B%22host%22%3A%22ipfs.kosmos.org%22%2C%22port%22%3A%225444%22%2C%22protocol%22%3A%22https%22%2C%22gatewayUrl%22%3A%22https%3A%2F%2Fipfs.kosmos.org%2Fipfs%22%7D%2C%22kreditsApmDomain%22%3A%22open.aragonpm.eth%22%2C%22exportApplicationGlobal%22%3Afalse%7D" />
+<meta name="kredits-web/config/environment" content="%7B%22modulePrefix%22%3A%22kredits-web%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22%2F%22%2C%22locationType%22%3A%22auto%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%7D%7D%2C%22APP%22%3A%7B%22name%22%3A%22kredits-web%22%2C%22version%22%3A%221.5.0%2Bfe16a605%22%7D%2C%22browserify%22%3A%7B%22tests%22%3Atrue%2C%22transform%22%3A%5B%5B%22babelify%22%2C%7B%22presets%22%3A%5B%22es2015%22%5D%2C%22global%22%3Atrue%7D%5D%5D%7D%2C%22web3ProviderUrl%22%3A%22https%3A%2F%2Frinkeby.infura.io%2Fv3%2Fd4f788b7a6584f7db2fc3c268d4d09e9%22%2C%22ipfs%22%3A%7B%22host%22%3A%22ipfs.kosmos.org%22%2C%22port%22%3A%225444%22%2C%22protocol%22%3A%22https%22%2C%22gatewayUrl%22%3A%22https%3A%2F%2Fipfs.kosmos.org%2Fipfs%22%7D%2C%22kreditsApmDomain%22%3A%22open.aragonpm.eth%22%2C%22exportApplicationGlobal%22%3Afalse%7D" />
 
     <link integrity="" rel="stylesheet" href="/assets/vendor-179cf27a97ea5bbb0ce72403a401cc8c.css">
-    <link integrity="" rel="stylesheet" href="/assets/kredits-web-29d147f9bc6d79dbc7aff481f8ee5541.css">
+    <link integrity="" rel="stylesheet" href="/assets/kredits-web-87a975d1ebfb073f8c85b3f709cd0bcd.css">
 
     
 
@@ -25,7 +25,7 @@
     
 
     <script src="/assets/vendor-80a68be62538fc452f619ea272efa683.js" integrity="sha256-1SzKk/ufxNyb/CdyXniFRUByZMpFGEz+hUTtfJVw7mw= sha512-ixkdWl+f7KrwA+YRsH92A8FSnK9ZG31nJa74FIskk2y40KHDpm6zOln2VVeApLpKdkj+FF7huYSGqJZwE7PRvA==" ></script>
-    <script src="/assets/kredits-web-6306723cba42580aec32537c077ed2db.js" integrity="sha256-W+Xiso5/zyqiqXL6GzknDMsJpJdKWdEmxcocqICH//c= sha512-I4RbGUJS2842cKdecxx+bXcYE954At7+pz19P3n4Cc2hcIbgiIk5jyGh6Kc4hCwfsq6cTciO6e8vMvgDVs/ItA==" ></script>
+    <script src="/assets/kredits-web-2de55b3ff6969b257370b5e81cc2ea84.js" integrity="sha256-1slvruOM4AQ4rAeDnRnq5GfJhdaCztEDuvxYwmlaaXc= sha512-EHAQKlPE/+z5GjJ07T3CyBkKNHy7TNW+ILAP6AeXfC91iYcaEebXJ8cGbZoeXweF4RWPTza2gkpWSlucye+tsA==" ></script>
 
     
   </body>

tests/fixtures/contributions.js

@@ -1,19 +1,23 @@
 import Model from 'kredits-web/models/contribution';
+import contributors from '../../tests/fixtures/contributors';
 
 const items = [];
 
 const data = [
-  { id: 1, contributorId: 1, confirmedAtBlock: 1000, claimed: false, vetoed: false, amount: 1500 },
+  { id: 1, contributorId: 1, confirmedAtBlock: 1000, claimed: false, vetoed: false, amount: 1500, kind: 'dev' },
-  { id: 2, contributorId: 1, confirmedAtBlock: 1000, claimed: false, vetoed: false, amount: 5000 },
+  { id: 2, contributorId: 1, confirmedAtBlock: 1000, claimed: false, vetoed: false, amount: 5000, kind: 'ops' },
-  { id: 3, contributorId: 2, confirmedAtBlock: 1000, claimed: false, vetoed: false, amount: 1500 },
+  { id: 3, contributorId: 2, confirmedAtBlock: 1000, claimed: false, vetoed: false, amount: 1500, kind: 'ops' },
-  { id: 4, contributorId: 2, confirmedAtBlock: 1000, claimed: false, vetoed: false, amount: 1500 },
+  { id: 4, contributorId: 2, confirmedAtBlock: 1000, claimed: false, vetoed: false, amount: 1500, kind: 'docs' },
-  { id: 5, contributorId: 1, confirmedAtBlock: 1000, claimed: false, vetoed: false, amount: 5000 },
+  { id: 5, contributorId: 1, confirmedAtBlock: 1000, claimed: false, vetoed: false, amount: 5000, kind: 'design' },
-  { id: 6, contributorId: 1, confirmedAtBlock: 1000, claimed: false, vetoed: true, amount: 500 },
+  { id: 6, contributorId: 1, confirmedAtBlock: 1000, claimed: false, vetoed: true, amount: 500, kind: 'dev' },
-  { id: 7, contributorId: 3, confirmedAtBlock: 2000, claimed: false, vetoed: false, amount: 5000 },
+  { id: 7, contributorId: 3, confirmedAtBlock: 2000, claimed: false, vetoed: false, amount: 5000, kind: 'dev' },
-  { id: 8, contributorId: 1, confirmedAtBlock: 2000, claimed: false, vetoed: false, amount: 1500 },
+  { id: 8, contributorId: 1, confirmedAtBlock: 2000, claimed: false, vetoed: false, amount: 1500, kind: 'community' },
-  { id: 9, contributorId: 3, confirmedAtBlock: 2000, claimed: false, vetoed: true, amount: 1500 },
+  { id: 9, contributorId: 3, confirmedAtBlock: 2000, claimed: false, vetoed: true, amount: 1500, kind: 'docs' },
 ];
 
-data.forEach(attrs => items.push(Model.create(attrs)));
+data.forEach(attrs => {
+  attrs.contributor = contributors.findBy('id', attrs.contributorId.toString());
+  items.push(Model.create(attrs))
+});
 
 export default items;

tests/fixtures/contributors.js

@@ -3,9 +3,9 @@ import Contributor from 'kredits-web/models/contributor';
 const contributors = [];
 
 const data = [
-  { id: 1, name: 'Bumi', totalKreditsEarned: 11500 },
+  { id: 1, name: 'Bumi', totalKreditsEarned: 11500, github_uid: 318 },
-  { id: 2, name: 'Râu Cao', totalKreditsEarned: 3000 },
+  { id: 2, name: 'Râu Cao', totalKreditsEarned: 3000, github_uid: 842 },
-  { id: 3, name: 'Manuel', totalKreditsEarned: 0 }
+  { id: 3, name: 'Manuel', totalKreditsEarned: 0, github_uid: 54812 }
 ];
 
 data.forEach(attrs => contributors.push(Contributor.create(attrs)));

tests/integration/components/contribution-list/component-test.js

@@ -1,17 +1,34 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { click, fillIn, render } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
+import contributors from '../../../fixtures/contributors';
+import contributions from '../../../fixtures/contributions';
 
 module('Integration | Component | contribution-list', function(hooks) {
   setupRenderingTest(hooks);
 
-  test('it renders', async function(assert) {
+  test('it renders all contributions', async function(assert) {
-    // Set any properties with this.set('myProperty', 'value');
+    this.set('fixtures', contributions);
-    // Handle any actions with this.set('myAction', function(val) { ... });
+    await render(hbs`{{contribution-list contributions=fixtures}}`);
 
-    await render(hbs`{{contribution-list}}`);
+    assert.equal(this.element.querySelectorAll('li').length, 9);
+  });
 
-    assert.equal(this.element.textContent.trim(), '');
+  test('it renders filtered contributions', async function(assert) {
+    let service = this.owner.lookup('service:kredits');
+    service.set('contributors', contributors);
+
+    this.set('fixtures', contributions);
+    await render(hbs`{{contribution-list contributions=fixtures showQuickFilter=true}}`);
+
+    await fillIn('.filter-contributor select', '1');
+    assert.equal(this.element.querySelectorAll('li').length, 5, 'select contributor');
+
+    await click('.filter-contribution-size input');
+    assert.equal(this.element.querySelectorAll('li').length, 4, 'hide small contributions');
+
+    await fillIn('.filter-contribution-kind select', 'dev');
+    assert.equal(this.element.querySelectorAll('li').length, 1, 'select kind');
   });
 });

tests/integration/components/contributor-list/component-test.js

@@ -9,13 +9,13 @@ module('Integration | Component | contributor list', function(hooks) {
 
   const toplist = [
     {
-      contributor: Contributor.create({ id: 1, name: 'Bumi' }),
+      contributor: Contributor.create({ id: 1, name: 'Bumi', github_uid: 318 }),
       amountConfirmed: 5500,
       amountUnconfirmed: 1000,
       amountTotal: 6500
     },
     {
-      contributor: Contributor.create({ id: 2, name: 'Râu Cao' }),
+      contributor: Contributor.create({ id: 2, name: 'Râu Cao', github_uid: 842 }),
       amountConfirmed: 1500,
       amountUnconfirmed: 2000,
       amountTotal: 3500
@@ -28,8 +28,8 @@ module('Integration | Component | contributor list', function(hooks) {
 
     assert.dom('tr:nth-child(1) td.person').hasText('Bumi');
     assert.dom('tr:nth-child(1) span.amount').hasText('6500');
-    assert.dom('tr:nth-child(3) td.person').hasText('Râu Cao');
+    assert.dom('tr:nth-child(2) td.person').hasText('Râu Cao');
-    assert.dom('tr:nth-child(3) span.amount').hasText('3500');
+    assert.dom('tr:nth-child(2) span.amount').hasText('3500');
   });
 
   test('it renders confirmed kredits earned', async function(assert) {
@@ -38,7 +38,7 @@ module('Integration | Component | contributor list', function(hooks) {
 
     assert.dom('tr:nth-child(1) td.person').hasText('Bumi');
     assert.dom('tr:nth-child(1) span.amount').hasText('5500');
-    assert.dom('tr:nth-child(3) td.person').hasText('Râu Cao');
+    assert.dom('tr:nth-child(2) td.person').hasText('Râu Cao');
-    assert.dom('tr:nth-child(3) span.amount').hasText('1500');
+    assert.dom('tr:nth-child(2) span.amount').hasText('1500');
   });
 });

tests/integration/components/user-avatar/component-test.js

@@ -2,13 +2,39 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
+import contributors from '../../../fixtures/contributors';
 
 module('Integration | Component | user-avatar', function(hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function(assert) {
-    await render(hbs`{{user-avatar}}`);
+    this.set('bumi', contributors.findBy('id', '1'));
+    await render(hbs`{{user-avatar contributor=bumi}}`);
 
     assert.equal(this.element.textContent.trim(), '');
   });
+
+  test('default image source URL', async function(assert) {
+    this.set('bumi', contributors.findBy('id', '1'));
+    await render(hbs`{{user-avatar contributor=bumi}}`);
+
+    assert.equal(this.element.querySelector('img').src,
+                 `https://avatars2.githubusercontent.com/u/318?v=3&s=128`);
+  });
+
+  test('size-specific image source URLs', async function(assert) {
+    this.set('bumi', contributors.findBy('id', '1'));
+    this.set('size', 'medium');
+
+    await render(hbs`{{user-avatar contributor=bumi size=size}}`);
+
+    assert.equal(this.element.querySelector('img').src,
+                 `https://avatars2.githubusercontent.com/u/318?v=3&s=256`);
+
+    this.set('size', 'large');
+
+    assert.equal(this.element.querySelector('img').src,
+                 `https://avatars2.githubusercontent.com/u/318?v=3&s=512`);
+  });
+
 });

tests/unit/models/contributor-test.js

@@ -1,14 +1,7 @@
-import { module, test } from 'qunit';
+// import { module, test } from 'qunit';
-import { setupTest } from 'ember-qunit';
+// import { setupTest } from 'ember-qunit';
-import Contributor from 'kredits-web/models/contributor';
+// import Contributor from 'kredits-web/models/contributor';
-
+//
-module('Unit | Model | contributor', function(hooks) {
+// module('Unit | Model | contributor', function(hooks) {
-  setupTest(hooks);
+//   setupTest(hooks);
-
+// });
-  test('#avatarURL() returns correct URL', function(assert) {
-    let model = Contributor.create();
-    model.set('github_uid', '318');
-
-    assert.equal(model.get('avatarURL'), 'https://avatars2.githubusercontent.com/u/318?v=3&s=128');
-  });
-});