From 46820c070f65d72ec82c0db65407d562a91056e6 Mon Sep 17 00:00:00 2001
From: Justin DiRose <justin@justindirose.com>
Date: Sun, 14 Jul 2019 16:31:29 -0500
Subject: [PATCH] Basic styling, set up query params

---
 .../knowledge-explorer-topic-list.js.es6      |  3 ++
 .../controllers/knowledge-explorer.js.es6     |  8 +++-
 .../routes/knowledge-explorer.js.es6          |  3 +-
 .../templates/knowledge-explorer.hbs          | 10 ++--
 .../common/knowledge-explorer.scss            | 46 +++++++++++++++++++
 5 files changed, 64 insertions(+), 6 deletions(-)
 create mode 100644 assets/javascripts/discourse/components/knowledge-explorer-topic-list.js.es6

diff --git a/assets/javascripts/discourse/components/knowledge-explorer-topic-list.js.es6 b/assets/javascripts/discourse/components/knowledge-explorer-topic-list.js.es6
new file mode 100644
index 0000000..a612cba
--- /dev/null
+++ b/assets/javascripts/discourse/components/knowledge-explorer-topic-list.js.es6
@@ -0,0 +1,3 @@
+export default Ember.Component.extend({
+  classNames: "knowledge-explorer-topic-list"
+});
diff --git a/assets/javascripts/discourse/controllers/knowledge-explorer.js.es6 b/assets/javascripts/discourse/controllers/knowledge-explorer.js.es6
index 4a071a7..4e9213a 100644
--- a/assets/javascripts/discourse/controllers/knowledge-explorer.js.es6
+++ b/assets/javascripts/discourse/controllers/knowledge-explorer.js.es6
@@ -5,5 +5,11 @@ import {
 } from "ember-addons/ember-computed-decorators";
 
 export default Ember.Controller.extend({
-  application: Ember.inject.controller()
+  application: Ember.inject.controller(),
+  queryParams: {
+    filterCategory: 'category',
+    filterTags: 'tags'
+  },
+  filterTags: null,
+  filterCategory: null,
 });
diff --git a/assets/javascripts/discourse/routes/knowledge-explorer.js.es6 b/assets/javascripts/discourse/routes/knowledge-explorer.js.es6
index a94d4e5..5e7cc08 100644
--- a/assets/javascripts/discourse/routes/knowledge-explorer.js.es6
+++ b/assets/javascripts/discourse/routes/knowledge-explorer.js.es6
@@ -7,7 +7,8 @@ export default Ember.Route.extend({
 
   setupController(controller, model) {
     controller.setProperties({
-      model: model
+      tags: model.tags,
+      topics: model.topics
     });
   }
 });
diff --git a/assets/javascripts/discourse/templates/knowledge-explorer.hbs b/assets/javascripts/discourse/templates/knowledge-explorer.hbs
index 4b5e72e..646af76 100644
--- a/assets/javascripts/discourse/templates/knowledge-explorer.hbs
+++ b/assets/javascripts/discourse/templates/knowledge-explorer.hbs
@@ -1,6 +1,8 @@
 <div class="knowledge-explorer">
-  {{knowledge-explorer-tags
-      tags=model.tags
-      searchResults=searchResults}}
-  {{knowledge-explorer-topic-list topics=model.topics}}
+  <div class="knowledge-explorer-browse">
+    {{knowledge-explorer-tags
+        tags=tags
+        searchResults=searchResults}}
+    {{knowledge-explorer-topic-list topics=topics}}
+  </div>
 </div>
diff --git a/assets/stylesheets/common/knowledge-explorer.scss b/assets/stylesheets/common/knowledge-explorer.scss
index e69de29..7e641d0 100644
--- a/assets/stylesheets/common/knowledge-explorer.scss
+++ b/assets/stylesheets/common/knowledge-explorer.scss
@@ -0,0 +1,46 @@
+.knowledge-explorer {
+ .knowledge-explorer-browse {
+   display: flex;
+   .knowledge-explorer-tags {
+     flex-basis: 25%;
+      padding: 10px 10px 10px 0;
+      a {
+        color: $primary;
+      }
+      .knowledge-explorer-tag {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        height: 30px;
+        padding-left: 10px;
+        .d-icon {
+          height: 1em;
+          &.d-icon-plus {
+            height: 0.75em;
+            margin-right: 0.25em;
+          }
+          &.d-icon-times-circle {
+            margin-left: 0.25em;
+          }
+        }
+        &:hover {
+          background: $highlight-medium;
+        }
+        &.selected:hover {
+          background: $danger-low;
+
+          .d-icon {
+            color: $danger;
+          }
+        }
+      }
+
+      .selected {
+        font-weight: bold;
+      }
+    }
+    .knowledge-explorer-topic-list {
+      flex-basis: 75%;
+    }
+ } 
+}