From 0e0b1afe3ac02c767703062dc3746b10b2b0a79f Mon Sep 17 00:00:00 2001
From: Sebastian Kippe <sebastian@kip.pe>
Date: Fri, 28 Jun 2019 16:50:20 +0200
Subject: [PATCH] WIP: add quick filter buttons

---
 app/controllers/index.js | 11 +++++++++++
 app/styles/_buttons.scss | 14 ++++++++++++++
 app/templates/index.hbs  |  6 +++++-
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/app/controllers/index.js b/app/controllers/index.js
index 20fc370..5bf9a5a 100644
--- a/app/controllers/index.js
+++ b/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');
     }
 
   }
diff --git a/app/styles/_buttons.scss b/app/styles/_buttons.scss
index 41780e2..0e80146 100644
--- a/app/styles/_buttons.scss
+++ b/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;
+    }
   }
 }
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
index 58fc3f0..312337b 100644
--- a/app/templates/index.hbs
+++ b/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