diff --git a/app/components/contribution-list/template.hbs b/app/components/contribution-list/template.hbs index a654f7b..94a32aa 100644 --- a/app/components/contribution-list/template.hbs +++ b/app/components/contribution-list/template.hbs @@ -37,7 +37,7 @@ ({{contribution.kind}}) {{#if contribution.url}} - {{contribution.description}} + {{contribution.description}} {{else}} {{contribution.description}} {{/if}} diff --git a/app/components/contributor-list/component.js b/app/components/contributor-list/component.js index 851ef26..a9ae31e 100644 --- a/app/components/contributor-list/component.js +++ b/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) { - if (contributor.showMetadata) { - contributor.set('showMetadata', false); - } else { - this.contributorList.setEach('showMetadata', false); - contributor.set('showMetadata', true); - } + openContributorDetails(contributor) { + this.router.transitionTo('dashboard.contributors.show', contributor); } } diff --git a/app/components/contributor-list/template.hbs b/app/components/contributor-list/template.hbs index 1ecabf6..63c962b 100644 --- a/app/components/contributor-list/template.hbs +++ b/app/components/contributor-list/template.hbs @@ -1,6 +1,6 @@ {{#each contributorList as |c|}} - + {{user-avatar contributor=c.contributor}} {{c.contributor.name}} @@ -15,25 +15,5 @@ ₭S - - - - {{#if c.showMetadata}} - 
{{c.contributor.ipfsData}}
- {{/if}} - - {{/each}} diff --git a/app/components/external-account-link/component.js b/app/components/external-account-link/component.js new file mode 100644 index 0000000..a0c6c71 --- /dev/null +++ b/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'; + } + }) +}); diff --git a/app/components/external-account-link/template.hbs b/app/components/external-account-link/template.hbs new file mode 100644 index 0000000..3371c9d --- /dev/null +++ b/app/components/external-account-link/template.hbs @@ -0,0 +1,4 @@ + + {{account.site}} + {{component iconComponentName}} + \ No newline at end of file diff --git a/app/components/icon-account-gitea-kosmos-org/component.js b/app/components/icon-account-gitea-kosmos-org/component.js new file mode 100644 index 0000000..6858137 --- /dev/null +++ b/app/components/icon-account-gitea-kosmos-org/component.js @@ -0,0 +1,5 @@ +import Component from '@ember/component'; + +export default Component.extend({ + tagName: "" +}); diff --git a/app/components/icon-account-gitea-kosmos-org/template.hbs b/app/components/icon-account-gitea-kosmos-org/template.hbs new file mode 100644 index 0000000..2cf7cb9 --- /dev/null +++ b/app/components/icon-account-gitea-kosmos-org/template.hbs @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/components/icon-account-github-com/component.js b/app/components/icon-account-github-com/component.js new file mode 100644 index 0000000..6858137 --- /dev/null +++ b/app/components/icon-account-github-com/component.js @@ -0,0 +1,5 @@ +import Component from '@ember/component'; + +export default Component.extend({ + tagName: "" +}); diff --git a/app/components/icon-account-github-com/template.hbs b/app/components/icon-account-github-com/template.hbs new file mode 100644 index 0000000..85d6c45 --- /dev/null +++ b/app/components/icon-account-github-com/template.hbs @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/app/components/icon-account-wiki-kosmos-org/component.js b/app/components/icon-account-wiki-kosmos-org/component.js new file mode 100644 index 0000000..6858137 --- /dev/null +++ b/app/components/icon-account-wiki-kosmos-org/component.js @@ -0,0 +1,5 @@ +import Component from '@ember/component'; + +export default Component.extend({ + tagName: "" +}); diff --git a/app/components/icon-account-wiki-kosmos-org/template.hbs b/app/components/icon-account-wiki-kosmos-org/template.hbs new file mode 100644 index 0000000..ba95cd9 --- /dev/null +++ b/app/components/icon-account-wiki-kosmos-org/template.hbs @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/app/components/icon-web-globe/component.js b/app/components/icon-web-globe/component.js new file mode 100644 index 0000000..6858137 --- /dev/null +++ b/app/components/icon-web-globe/component.js @@ -0,0 +1,5 @@ +import Component from '@ember/component'; + +export default Component.extend({ + tagName: "" +}); diff --git a/app/components/icon-web-globe/template.hbs b/app/components/icon-web-globe/template.hbs new file mode 100644 index 0000000..0ff4bf5 --- /dev/null +++ b/app/components/icon-web-globe/template.hbs @@ -0,0 +1,3 @@ + + + diff --git a/app/components/user-avatar/component.js b/app/components/user-avatar/component.js index 9f2a99b..e37ab88 100644 --- a/app/components/user-avatar/component.js +++ b/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'), - title: alias('contributor.name') + size: 'small', + + 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]}`; + } + }) + }); diff --git a/app/controllers/index.js b/app/controllers/dashboard.js similarity index 98% rename from app/controllers/index.js rename to app/controllers/dashboard.js index 5bf9a5a..caccbb6 100644 --- a/app/controllers/index.js +++ b/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'), diff --git a/app/controllers/dashboard/contributors/show.js b/app/controllers/dashboard/contributors/show.js new file mode 100644 index 0000000..4c9909e --- /dev/null +++ b/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'; + }) + +}); diff --git a/app/models/contributor.js b/app/models/contributor.js index 223dd16..5d5b95d 100644 --- a/app/models/contributor.js +++ b/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`; - } - }), }); diff --git a/app/router.js b/app/router.js index e218bb7..e3003cd 100644 --- a/app/router.js +++ b/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'); }); diff --git a/app/routes/dashboard/contributors/show.js b/app/routes/dashboard/contributors/show.js new file mode 100644 index 0000000..b301518 --- /dev/null +++ b/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); + } + +}); diff --git a/app/routes/index.js b/app/routes/index.js new file mode 100644 index 0000000..2016530 --- /dev/null +++ b/app/routes/index.js @@ -0,0 +1,9 @@ +import Route from '@ember/routing/route'; + +export default Route.extend({ + + redirect () { + this.transitionTo('dashboard'); + } + +}); diff --git a/app/styles/_layout.scss b/app/styles/_layout.scss index ec0e401..f025692 100644 --- a/app/styles/_layout.scss +++ b/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"; + } } } } diff --git a/app/styles/app.scss b/app/styles/app.scss index cac8311..50b27d4 100644 --- a/app/styles/app.scss +++ b/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"; diff --git a/app/styles/components/_contribution-list.scss b/app/styles/components/_contribution-list.scss index 53bbc32..6660ee7 100644 --- a/app/styles/components/_contribution-list.scss +++ b/app/styles/components/_contribution-list.scss @@ -57,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; diff --git a/app/styles/components/_contributor-profile.scss b/app/styles/components/_contributor-profile.scss new file mode 100644 index 0000000..b911efe --- /dev/null +++ b/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; + } + } +} diff --git a/app/styles/components/_external-account-link.scss b/app/styles/components/_external-account-link.scss new file mode 100644 index 0000000..2326c66 --- /dev/null +++ b/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; + } + } + } +} diff --git a/app/styles/components/_topbar.scss b/app/styles/components/_topbar.scss index 43e931a..2c76be5 100644 --- a/app/styles/components/_topbar.scss +++ b/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 { diff --git a/app/styles/components/_user-avatar.scss b/app/styles/components/_user-avatar.scss index 3fdddfb..8c3d83a 100644 --- a/app/styles/components/_user-avatar.scss +++ b/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; + } } diff --git a/app/templates/application.hbs b/app/templates/application.hbs index aaa3df2..d82b972 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -1,5 +1,5 @@
-

Kosmos Kredits

+

{{link-to "Kosmos Kredits" "dashboard"}}

{{#if kredits.hasAccounts }} diff --git a/app/templates/index.hbs b/app/templates/dashboard.hbs similarity index 96% rename from app/templates/index.hbs rename to app/templates/dashboard.hbs index 1ecc5f0..ba85e93 100644 --- a/app/templates/index.hbs +++ b/app/templates/dashboard.hbs @@ -1,4 +1,4 @@ -
+
@@ -72,4 +72,8 @@
+
+ {{outlet}} +
+
diff --git a/app/templates/dashboard/contributors/show.hbs b/app/templates/dashboard/contributors/show.hbs new file mode 100644 index 0000000..8005793 --- /dev/null +++ b/app/templates/dashboard/contributors/show.hbs @@ -0,0 +1,36 @@ +
+
+ {{user-avatar contributor=model size="medium"}} +
+ +
+

{{model.name}}

+

{{roleName}}

+ +
    + {{#each model.accounts as |account|}} +
  • + {{external-account-link account=account}} +
    • + {{/each}} + {{#if model.url}} +
  • + + Web + {{icon-web-globe}} + +
    • + {{/if}} +
+
+ +
+

+ Inspect Ethereum transactions + {{#if model.ipfsHash}} + Inspect IPFS profile + {{/if}} + {{link-to "Edit profile" "contributors.edit" model class="button small"}} +

+
+
diff --git a/tests/fixtures/contributions.js b/tests/fixtures/contributions.js index c3a856a..f675937 100644 --- a/tests/fixtures/contributions.js +++ b/tests/fixtures/contributions.js @@ -1,4 +1,5 @@ import Model from 'kredits-web/models/contribution'; +import contributors from '../../tests/fixtures/contributors'; const items = []; @@ -14,6 +15,9 @@ const data = [ { 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; diff --git a/tests/fixtures/contributors.js b/tests/fixtures/contributors.js index a8f24b0..97c0fac 100644 --- a/tests/fixtures/contributors.js +++ b/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: 2, name: 'Râu Cao', totalKreditsEarned: 3000 }, - { id: 3, name: 'Manuel', totalKreditsEarned: 0 } + { id: 1, name: 'Bumi', totalKreditsEarned: 11500, github_uid: 318 }, + { id: 2, name: 'Râu Cao', totalKreditsEarned: 3000, github_uid: 842 }, + { id: 3, name: 'Manuel', totalKreditsEarned: 0, github_uid: 54812 } ]; data.forEach(attrs => contributors.push(Contributor.create(attrs))); diff --git a/tests/integration/components/contributor-list/component-test.js b/tests/integration/components/contributor-list/component-test.js index eff92ea..91e52f6 100644 --- a/tests/integration/components/contributor-list/component-test.js +++ b/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(3) span.amount').hasText('3500'); + assert.dom('tr:nth-child(2) td.person').hasText('Râu Cao'); + 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(3) span.amount').hasText('1500'); + assert.dom('tr:nth-child(2) td.person').hasText('Râu Cao'); + assert.dom('tr:nth-child(2) span.amount').hasText('1500'); }); }); diff --git a/tests/integration/components/user-avatar/component-test.js b/tests/integration/components/user-avatar/component-test.js index e96fe17..fbcbedd 100644 --- a/tests/integration/components/user-avatar/component-test.js +++ b/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`); + }); + }); diff --git a/tests/unit/controllers/index-test.js b/tests/unit/controllers/dashboard-test.js similarity index 100% rename from tests/unit/controllers/index-test.js rename to tests/unit/controllers/dashboard-test.js diff --git a/tests/unit/models/contributor-test.js b/tests/unit/models/contributor-test.js index ff58ec0..a7b888c 100644 --- a/tests/unit/models/contributor-test.js +++ b/tests/unit/models/contributor-test.js @@ -1,14 +1,7 @@ -import { module, test } from 'qunit'; -import { setupTest } from 'ember-qunit'; -import Contributor from 'kredits-web/models/contributor'; - -module('Unit | Model | contributor', function(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'); - }); -}); +// import { module, test } from 'qunit'; +// import { setupTest } from 'ember-qunit'; +// import Contributor from 'kredits-web/models/contributor'; +// +// module('Unit | Model | contributor', function(hooks) { +// setupTest(hooks); +// });