feat: filter buttons

oaeproject · Dec 17, 2019 · c35220d · c35220d · datreeio · Dec 17, 2019
1 parent 9849b0f
commit c35220d
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 7 deletions.
diff --git a/src/components/dashboard.js b/src/components/dashboard.js
@@ -1,6 +1,7 @@
 import { html } from 'lit-element';
 import sharedStyles from '../../style/app.scss';
 import dashboardStyles from '../../style/dashboard.scss';
+import dashboardButtonsStyles from '../../style/dashboard-filter.scss';
 import { PageViewElement } from './page-view-element.js';
 import '@polymer/iron-icons/iron-icons.js';
 import './sidebar.js';
@@ -13,7 +14,7 @@ import './tags.js';
 
 class OAEDashboard extends PageViewElement {
   static get styles() {
-    return [sharedStyles, dashboardStyles];
+    return [sharedStyles, dashboardStyles, dashboardButtonsStyles];
   }
 
   render() {
@@ -39,12 +40,24 @@ class OAEDashboard extends PageViewElement {
                             <li>Dashboard</li>
                           </ul>
                         </section>
-                        <section class="is-flex">
-                          <span class="dashboard-icon">
-                            <iron-icon icon="icons:update"></iron-icon>
-                          </span>
-                          <h3>Recent Activity</h3>
-                        </section>
+                          <nav class="level">
+                            <!-- Left side -->
+                            <div class="level-left">
+                              <div class="level-item">
+                                <span class="dashboard-icon">
+                                  <iron-icon icon="icons:update"></iron-icon>
+                                </span>
+                                <h3>Recent Activity</h3>
+                              </div>
+                            </div>
+                            <!-- Right side -->
+                            <div class="level-right">
+                              <div class="buttons">
+                                <button class="button filter-feed filter-active-feed">Most Recent</button>
+                                <button class="button filter-feed">Oldest</button>
+                              </div>
+                            </div>
+                          </nav>
                         <news-feed></news-feed>
                         <news-feed></news-feed>
                         <news-feed></news-feed>

diff --git a/style/dashboard-filter.scss b/style/dashboard-filter.scss
@@ -0,0 +1,18 @@
+.filter-feed {
+  color: #0060df;
+  margin-right: 15px;
+  font-size: 13px;
+  height: 20px;
+  width: 6em;
+  border-radius: 25px;
+  border: none;
+  background-color: transparent;
+}
+
+.filter-active-feed {
+    background-color: #0060df;
+    color: white;
+    &:hover {
+        color: white;
+    }
+}