From 577f49ab6e1fd9cd8007804a13dea1471ee2fb1f Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 3 Apr 2020 03:42:35 +0200
Subject: viewer: tag categories implementation

GitHub: Resolves #29
---
 viewer/src/views/PanelLeft.vue | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

(limited to 'viewer/src/views/PanelLeft.vue')

diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
index 9e9a600..824d1ae 100644
--- a/viewer/src/views/PanelLeft.vue
+++ b/viewer/src/views/PanelLeft.vue
@@ -22,12 +22,17 @@
     <ld-tag-input :search-filters.sync="searchFilters" :tags-index="$galleryStore.tagsIndex" />
     <ld-command-search @clear="clear" @search="search" />
     <h1 class="title">{{$t('panelLeft.propositions')}}</h1>
-    <ld-proposition
-      :search-filters.sync="searchFilters"
-      :tags-index="$galleryStore.tagsIndex"
-      :current-tags="currentTags()"
-      class="scrollbar no-scroll-x"
-    />
+    <div v-dragscroll class="scrollbar no-scroll-x">
+      <ld-proposition
+        v-for="(category) in $galleryStore.tagsCategories"
+        :key="category.tag"
+        :title="category.tag"
+        :show-title="$galleryStore.tagsCategories.length > 1"
+        :search-filters.sync="searchFilters"
+        :tags-index="category.index"
+        :current-tags="currentTags()"
+      />
+    </div>
   </div>
 </template>
 
@@ -76,9 +81,14 @@ export default class PanelLeft extends Vue {
 </script>
 
 <style lang="scss">
+@import "@/assets/scss/theme.scss";
+
 .sidebar {
   .title {
-    margin: 0.2em 0.5em !important;
+    background-color: $proposed-category-bgcolor;
+    padding: 0.2em 0.5em;
+    margin: 0 0 1px 0;
+    font-variant: small-caps;
   }
 }
 </style>
-- 
cgit v1.2.3