Merge pull request #137 from 67P/feature/mark_selected_profile

Mark contributor in list as selected when opening details

app/components/contributor-list/component.js

@@ -7,7 +7,7 @@ export default Component.extend({
 
   tagName: 'table',
   classNames: 'contributor-list',
-  selectedContributor: null,
+  selectedContributorId: null,
 
   actions: {
 

app/components/contributor-list/template.hbs

@@ -1,6 +1,8 @@
 <tbody>
   {{#each contributorList as |c|}}
-    <tr role="button" class={{if (is-current-user c.contributor) "current-user"}} {{action "openContributorDetails" c.contributor}}>
+    <tr role="button"
+        class="{{if (is-current-user c.contributor) "current-user"}} {{if (eq c.contributor.id selectedContributorId) "selected"}}"
+        {{action "openContributorDetails" c.contributor}}>
       <td class="person">
         {{user-avatar contributor=c.contributor}} {{c.contributor.name}}
       </td>

app/controllers/dashboard.js

@@ -7,6 +7,7 @@ export default Controller.extend({
   kredits: service(),
 
   showDetailsPane: false,
+  selectedContributorId: null,
 
   currentBlock: alias('kredits.currentBlock'),
 

app/routes/dashboard/contributors/show.js

@@ -11,14 +11,22 @@ export default Route.extend({
     return this.contributors.findBy('id', params.id);
   },
 
-  activate () {
+  setupController (controller, model) {
+    this._super(controller, model);
+
     this.controllerFor('dashboard')
-        .set('showDetailsPane', true);
+        .setProperties({
+          showDetailsPane: true,
+          selectedContributorId: model.id
+        });
   },
 
   deactivate () {
     this.controllerFor('dashboard')
-        .set('showDetailsPane', false);
+        .setProperties({
+          showDetailsPane: false,
+          selectedContributorId: null
+        });
   }
 
 });

app/styles/components/_contributor-list.scss

@@ -4,56 +4,20 @@ table.contributor-list {
   margin-bottom: 1.5rem;
 
   tr {
+    background-color: rgba(255,255,255,0.1);
     border-bottom: 1px solid rgba(255,255,255,0.2);
+    cursor: pointer;
+
     &:first-of-type {
       border-top: 1px solid rgba(255,255,255,0.2);
     }
-    background-color: rgba(255,255,255,0.1);
 
-    &.current-user {
+    &.selected {
       background-color: rgba(255,255,255,0.2);
     }
 
-    &.metadata {
+    &.current-user {
-      height: 0;
+      font-weight: 500;
-      visibility: hidden;
-
-      &:not(.visible) {
-        border-bottom: none;
-      }
-
-      td {
-        padding: 0 1.2rem;
-      }
-
-      a {
-        color: $primary-color;
-        &:hover, &:active {
-          color: #fff;
-        }
-      }
-
-      ul {
-        list-style: none;
-        display: block;
-        overflow: hidden;
-        height: 0;
-
-        li {
-          display: inline;
-          &+li {
-            margin-left: 1rem;
-          }
-        }
-      }
-
-      &.visible {
-        height: auto;
-        visibility: visible;
-        ul {
-          height: auto;
-        }
-      }
     }
 
     td {
@@ -71,20 +35,17 @@ table.contributor-list {
 
       &.kredits {
         text-align: right;
+
         .amount {
           font-size: 1.2rem;
           font-weight: 500;
         }
+
         .symbol {
           font-size: 0.8rem;
           padding-left: 0.2rem;
         }
       }
-
-      pre {
-        line-height: 1rem;
-        padding-bottom: 1rem;
-      }
     }
   }
 }

app/templates/dashboard.hbs

@@ -12,7 +12,8 @@
       </header>
       <div class="content">
         {{contributor-list contributorList=kreditsToplist
-                           showUnconfirmedKredits=showUnconfirmedKredits}}
+                           showUnconfirmedKredits=showUnconfirmedKredits
+                           selectedContributorId=selectedContributorId}}
 
         <p class="stats">
           <span class="number">{{await kredits.totalKreditsEarned}}</span> kredits confirmed and issued to