WIP: add quick filter buttons

app/controllers/index.js

@@ -25,6 +25,9 @@ export default Controller.extend({
   showUnconfirmedKredits: true,
   hideUnconfirmedKredits: not('showUnconfirmedKredits'),
 
+  showQuickFilterUnconfirmed: false,
+  showQuickFilterConfirmed: false,
+
   actions: {
 
     vetoContribution (contributionId) {
@@ -37,6 +40,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/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/templates/index.hbs

@@ -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}}
@@ -56,8 +57,11 @@
     {{/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