1.15.0

Add "give kredits" button to contributor profiles

app/components/add-contribution/component.js

@@ -1,7 +1,7 @@
 import Component from '@ember/component';
 import { computed } from '@ember/object';
 import { and, notEmpty } from '@ember/object/computed';
-import { isEmpty } from '@ember/utils';
+import { assign } from '@ember/polyfills';
 import moment from 'moment';
 
 export default Component.extend({
@@ -24,10 +24,7 @@ export default Component.extend({
   init () {
     this._super(...arguments);
     this.set('defaultDate', moment().startOf('hour').toDate());
-
+    this.set('defaultAttr', {
-    // Default attributes used by reset
-    if (isEmpty(this.attributes)) {
-      this.set('attributes', {
       contributorId: null,
       kind: null,
       date: this.defaultDate,
@@ -36,7 +33,8 @@ export default Component.extend({
       url: null,
       details: null
     });
-    }
+
+    this.set('attributes', assign({}, this.defaultAttr, this.attributes));
 
     this.reset();
   },

app/components/topbar-account-panel/template.hbs

@@ -8,7 +8,7 @@
         <span class="core-flag">(core)</span>
       {{/if}}
     {{else}}
-      Anonymous
+      <span class="anonymous">Anonymous</span>
       <button {{action "signup"}} class="small">Sign up</button>
       {{#if showConnectButton}}
         <button {{action "connectAccount"}} class="small green">Connect account</button>

app/controllers/contributions/new.js

@@ -6,6 +6,8 @@ export default Controller.extend({
 
   kredits: service(),
 
+  queryParams: ['contributorId', 'kind', 'amount'],
+
   contributors: alias('kredits.contributors'),
   minedContributors: filterBy('contributors', 'id'),
 

app/controllers/dashboard.js

@@ -33,6 +33,10 @@ export default Controller.extend({
   showQuickFilterUnconfirmed: false,
   showQuickFilterConfirmed: false,
 
+  showIntroText: computed('kredits.{hasAccounts,currentUser}', function(){
+    return (!this.kredits.hasAccounts || !this.kredits.currentUser);
+  }),
+
   actions: {
 
     vetoContribution (contributionId) {

app/router.js

@@ -20,7 +20,7 @@ Router.map(function() {
     this.route('new');
   });
   this.route('contributions', function() {
-    this.route('new');
+    this.route('new', { queryParams: ['contributorId', 'kind', 'amount'] });
     this.route('resubmit', { path: ':id/resubmit' });
   });
   this.route('contributors', function() {

app/routes/contributions/new.js

@@ -0,0 +1,9 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+
+  model (params) {
+    return { params };
+  }
+
+});

app/styles/_buttons.scss

@@ -10,6 +10,7 @@ button, input[type=submit], .button {
   text-transform: uppercase;
   cursor: pointer;
   letter-spacing: 0.1em;
+  -webkit-appearance: none;
 
   &+button, &+input[type=submit], &+.button {
     margin-left: 0.5rem;

app/styles/_colors.scss

@@ -8,8 +8,3 @@ $red: #fb6868;
 $primary-color: $blue;
 
 $body-text-color: #fff;
-
-#topbar {
-  background-color: rgba(255, 0, 255, .2);
-}
-

app/styles/_layout.scss

@@ -61,6 +61,40 @@ main {
   }
 }
 
+#intro {
+  padding: 2rem;
+  background-color: rgba(0,0,0,.2);
+  font-size: 1.6rem;
+
+  @include media-max(small) {
+    padding: 2rem 1rem;
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: inherit;
+    margin-bottom: 1em;
+  }
+
+  p {
+    margin-bottom: 1em;
+    line-height: 1.5em;
+    font-size: 1.2rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    text-decoration: none;
+
+    &:hover, &:active {
+      text-decoration: underline;
+    }
+  }
+}
+
 @media (min-width: 550px) {
   main {
     &#dashboard {

app/styles/components/_contribution-details.scss

@@ -84,5 +84,17 @@ section#contribution-details {
       }
     }
   }
-
+}
+
+// On small screens, hide intro text, contributor and contributions list when
+// showing details
+@include media-max(small) {
+  #dashboard.with-details {
+    #contributions, #stats {
+      display: none;
+    }
+  }
+  #intro.with-details {
+    display: none;
+  }
 }

app/styles/components/_contributor-profile.scss

@@ -42,6 +42,10 @@ section#contributor-profile {
         }
       }
     }
+
+    .actions {
+      margin-top: 2rem;
+    }
   }
 
   .actions {

app/styles/components/_topbar-account-panel.scss

@@ -8,4 +8,10 @@ header#topbar section#user-account {
     margin-left: 0.6rem;
   }
 
+  @include media-max(small) {
+    .anonymous {
+      display: none;
+    }
+  }
+
 }

app/templates/contributions/new.hbs

@@ -6,7 +6,9 @@
     </header>
 
     <div class="content">
-      {{add-contribution contributors=sortedContributors save=(action "save")}}
+      {{add-contribution contributors=sortedContributors
+                         attributes=model.params
+                         save=(action "save")}}
     </div>
   </section>
 

app/templates/dashboard.hbs

@@ -1,3 +1,19 @@
+{{#if showIntroText}}
+  <div id="intro" class={{if showDetailsPane "with-details"}}>
+    <h2>
+      Welcome to the contribution dashboard of the
+      <a href="https://kosmos.org" target="_blank" rel="noopener">Kosmos</a> project!
+    </h2>
+    <p>
+      If you want to learn more about what the numbers mean and how this works,
+      check out the
+      <a href="https://wiki.kosmos.org/Kredits" target="_blank" rel="noopener">Kredits documentation</a>.
+      If you want to start earning kredits for your contributions,
+      {{link-to "create a contributor profile" "signup"}}.
+    </p>
+  </div>
+{{/if}}
+
 <main id="dashboard" class={{if showDetailsPane "with-details"}}>
 
   <div id="stats">
@@ -41,12 +57,12 @@
       <section id="contributions-unconfirmed">
         <header class="with-nav">
           <h2>Latest Contributions</h2>
-          {{#if kredits.hasAccounts}}
           <nav>
             <button {{action "toggleQuickFilterUnconfirmed"}} class="small {{if showQuickFilterUnconfirmed "active"}}">filter</button>
+            {{#if kredits.hasAccounts}}
               {{link-to "add" "contributions.new" title="Submit a contribution" class="button small green"}}
-            </nav>
             {{/if}}
+          </nav>
         </header>
         <div class="content">
           {{!-- TODO: We need a better naming for kredits.hasAccounts --}}

app/templates/dashboard/contributions/show.hbs

@@ -42,7 +42,7 @@
           kredits will be issued.
         </p>
         <p>
-          {{link-to "Re-submit contribution …" "contributions.resubmit" model class="button small green"}}.
+          {{link-to "Re-submit contribution …" "contributions.resubmit" model class="button small green"}}
         </p>
       </div>
     {{/if}}
@@ -50,7 +50,7 @@
 
   <div class="actions">
     <p>
-      {{link-to "Copy & edit as new" "contributions.resubmit" model class="button small"}}.
+      {{link-to "Copy & edit as new" "contributions.resubmit" model class="button small"}}
       {{#if model.ipfsHash}}
         <a href="{{ipfsGatewayUrl}}/{{model.ipfsHash}}"
            class="button small" target="_blank" rel="noopener">

app/templates/dashboard/contributors/show.hbs

@@ -22,6 +22,13 @@
         </li>
       {{/if}}
     </ul>
+    <div class="actions">
+      <p>
+        {{link-to "♥ Give kredits" "contributions.new"
+                  (query-params contributorId=model.id)
+                  class="button green"}}
+      </p>
+    </div>
   </div>
 
   <div class="actions">

package-lock.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kredits-web",
-  "version": "1.12.0",
+  "version": "1.15.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%2C%22_JQUERY_INTEGRATION%22%3Atrue%7D%2C%22APP%22%3A%7B%22name%22%3A%22kredits-web%22%2C%22version%22%3A%221.12.0%2B5a618f7e%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%22web3RequiredNetwork%22%3A%22rinkeby%22%2C%22githubConnectUrl%22%3A%22https%3A%2F%2Fhal8000.chat.kosmos.org%2Fkredits%2Fsignup%2Fconnect%2Fgithub%22%2C%22githubSignupUrl%22%3A%22https%3A%2F%2Fhal8000.chat.kosmos.org%2Fkredits%2Fsignup%2Fgithub%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%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%2C%22_JQUERY_INTEGRATION%22%3Atrue%7D%2C%22APP%22%3A%7B%22name%22%3A%22kredits-web%22%2C%22version%22%3A%221.15.0%2B215ad1d6%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%22web3RequiredNetwork%22%3A%22rinkeby%22%2C%22githubConnectUrl%22%3A%22https%3A%2F%2Fhal8000.chat.kosmos.org%2Fkredits%2Fsignup%2Fconnect%2Fgithub%22%2C%22githubSignupUrl%22%3A%22https%3A%2F%2Fhal8000.chat.kosmos.org%2Fkredits%2Fsignup%2Fgithub%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%22exportApplicationGlobal%22%3Afalse%7D" />
 
     <link integrity="" rel="stylesheet" href="/assets/vendor-179cf27a97ea5bbb0ce72403a401cc8c.css">
-    <link integrity="" rel="stylesheet" href="/assets/kredits-web-a1a46af359f6abc5253690f6a7b29c6b.css">
+    <link integrity="" rel="stylesheet" href="/assets/kredits-web-6b341df3a0facb8197a92e426fccd7ce.css">
 
     
 
@@ -25,7 +25,7 @@
     
 
     <script src="/assets/vendor-21c31ba5343c7b72f638899d335a0531.js" integrity="sha256-5QKR4/TvbS9UoThtAlcyvj54wU+Bcn0hnM0FzjUbvfA= sha512-tHxWM5t9FYFz6DBnXuzWiIMPPW/gNwPaFDOdUL32cWvWcMfjyrhIEPM5I1D6+HQE1kXCEd64a+7UiMdU2hH5JQ==" ></script>
-    <script src="/assets/kredits-web-afbc29b08c72e5915f60326c02c8aaf0.js" integrity="sha256-7NimDs4gj3uLie/5x8Y5dQZDjLbYaxqwWOn8eCQMZ84= sha512-L4P1fbUTM9zXge/og2OyK7pKHEG81XUFSWJMeBfMEvamlttklZqZCLXHHfrKyEip8RKPX1/ud7BUGvw01weptQ==" ></script>
+    <script src="/assets/kredits-web-8e76b81273d6c0097f587de0a50886a5.js" integrity="sha256-XITXC2+4rHKAMRTko5/Lm3/QfPulcAhldCaNQC7xJu4= sha512-COQxwB23J3NmW5jAA2YIiLrsqmJRv3wAdTEv9aGjsqVEpGw3ve9dD2zeN+pz44NkbyrtJD52iJw8ai0Y1RubLg==" ></script>
 
     
   </body>

tests/unit/components/add-contribution-test.js

@@ -0,0 +1,41 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+import moment from 'moment';
+
+module('Unit | Component | add-contribution', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let component = this.owner.factoryFor('component:add-contribution').create();
+    assert.ok(component);
+  });
+
+  test('default attributes', function(assert) {
+    let component = this.owner.factoryFor('component:add-contribution').create();
+
+    ['contributorId', 'kind', 'amount', 'description', 'url', 'details'].forEach(a => {
+      assert.equal(component.attributes[a], null, `sets the default ${a} attribute`);
+      assert.equal(component.get(a), null, `sets the ${a} property`);
+    });
+
+    assert.ok(moment.isDate(component.attributes.date), 'sets the default date attribute');
+    assert.ok(moment.isDate(component.date), 'sets the default date');
+  });
+
+  test('override default attributes', function(assert) {
+    let component = this.owner.factoryFor('component:add-contribution').create({
+      attributes: { contributorId: '1' }
+    });
+
+    assert.equal(component.contributorId, '1', `overrides the default property`);
+
+    ['kind', 'amount', 'description', 'url', 'details'].forEach(a => {
+      assert.equal(component.attributes[a], null, `sets the default ${a} attribute`);
+      assert.equal(component.get(a), null, `sets the ${a} property`);
+    });
+
+    assert.ok(moment.isDate(component.attributes.date), 'sets the default date attribute');
+    assert.ok(moment.isDate(component.date), 'sets the default date');
+  });
+
+});