From bd87999487407aaafebfd48aed235686a25e68c1 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 15 Sep 2022 15:10:09 +0200
Subject: [PATCH] Restore styling on instrument filters

---
 .../components/instruments/FilterEntry.vue    | 36 +++++++++++++++----
 .../gql/fragments/contentBlockParts.gql       |  6 ++++
 .../gql/queries/instrumentCategoriesQuery.gql |  2 ++
 3 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/client/src/components/instruments/FilterEntry.vue b/client/src/components/instruments/FilterEntry.vue
index 4d3ef067..0bb6f242 100644
--- a/client/src/components/instruments/FilterEntry.vue
+++ b/client/src/components/instruments/FilterEntry.vue
@@ -2,10 +2,17 @@
   <a
     :class="typeClass"
     class="filter-entry"
+    :style="categoryStyle"
   >
     <span class="filter-entry__text">{{ text }}</span>
-    <span class="filter-entry__icon-wrapper">
-      <chevron-right class="filter-entry__icon" />
+    <span
+      :style="activeStyle"
+      class="filter-entry__icon-wrapper"
+    >
+      <chevron-right
+        :style="{fill: category.foreground}"
+        class="filter-entry__icon"
+      />
     </span>
 
   </a>
@@ -13,6 +20,7 @@
 
 <script>
   import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
+
   const ChevronRight = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronRight');
 
   export default {
@@ -41,8 +49,8 @@
 
     apollo: {
       instrumentFilter: {
-        query: INSTRUMENT_FILTER_QUERY
-      }
+        query: INSTRUMENT_FILTER_QUERY,
+      },
     },
 
     data() {
@@ -56,11 +64,27 @@
     computed: {
       isActive() {
         if (!this.instrumentFilter.currentFilter) {
-          return this.type === '';
+          return this.id === '';
         }
         // eslint-disable-next-line
         const [_, identifier] = this.instrumentFilter.currentFilter.split(':');
-        return this.type === identifier;
+        return this.id === identifier;
+      },
+      activeStyle() {
+        if (this.isActive) {
+          return {
+            backgroundColor: this.category.background,
+          };
+        }
+        return {};
+      },
+      categoryStyle() {
+        if (this.isCategory) {
+          return {
+            color: this.category.foreground,
+          };
+        }
+        return {};
       },
       typeClass() {
         return {
diff --git a/client/src/graphql/gql/fragments/contentBlockParts.gql b/client/src/graphql/gql/fragments/contentBlockParts.gql
index b2728f47..7fb2ef7d 100644
--- a/client/src/graphql/gql/fragments/contentBlockParts.gql
+++ b/client/src/graphql/gql/fragments/contentBlockParts.gql
@@ -3,6 +3,12 @@ fragment ContentBlockParts on ContentBlockNode {
   slug
   userCreated
   mine
+  instrumentCategory {
+    id
+    foreground
+    background
+    name
+  }
   bookmarks {
     uuid
     note {
diff --git a/client/src/graphql/gql/queries/instrumentCategoriesQuery.gql b/client/src/graphql/gql/queries/instrumentCategoriesQuery.gql
index 0d565b1f..2fb8028e 100644
--- a/client/src/graphql/gql/queries/instrumentCategoriesQuery.gql
+++ b/client/src/graphql/gql/queries/instrumentCategoriesQuery.gql
@@ -2,6 +2,8 @@ query InstrumentCategoriesQuery {
   instrumentCategories {
     name
     id
+    foreground
+    background
     types {
       name
       id