viewer: information panel scrollbar and collapse with animation

github: resolves #78

6 files changed, 34 insertions, 15 deletions

diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index 0c351e5..c59eba9 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -76,3 +76,7 @@ $proposed-category-bgcolor: $palette-700;
 
 $layout-top: 45px;
 $layout-left: 250px;
+
+// Transitions
+
+$transition-flex-expand: 0.1s;
diff --git a/viewer/src/assets/scss/transition.scss b/viewer/src/assets/scss/transition.scss
new file mode 100644
index 0000000..160f625
--- /dev/null
+++ b/viewer/src/assets/scss/transition.scss
@@ -0,0 +1,13 @@
+@import "~@/assets/scss/theme.scss";
+
+// === Transitions for Vue
+
+.flex-expand-enter-active, .flex-expand-leave-active {
+  transition: max-height $transition-flex-expand linear;
+}
+.flex-expand-enter, .flex-expand-leave-to {
+  max-height: 0%;
+}
+.flex-expand-enter-to, .flex-expand-leave {
+  max-height: 100%;
+}
diff --git a/viewer/src/main.ts b/viewer/src/main.ts
index 1c48c55..4d07835 100644
--- a/viewer/src/main.ts
+++ b/viewer/src/main.ts
@@ -20,6 +20,7 @@
 import Vue from "vue";
 import "@/assets/scss/global.scss";
 import "@/assets/scss/scrollbar.scss";
+import "@/assets/scss/transition.scss";
 import store from "@/store";
 import i18n from "@/plugins/i18n";
 import router from "@/plugins/router";
diff --git a/viewer/src/plugins/buefy.ts b/viewer/src/plugins/buefy.ts
index 6cca8e7..7a71019 100644
--- a/viewer/src/plugins/buefy.ts
+++ b/viewer/src/plugins/buefy.ts
@@ -28,8 +28,6 @@ import Button from "buefy/src/components/button";
 // @ts-ignore
 import SnackBar from "buefy/src/components/snackbar";
 // @ts-ignore
-import Collapse from "buefy/src/components/collapse";
-// @ts-ignore
 import Tag from "buefy/src/components/tag";
 
 import "@/assets/scss/buefy.scss";
@@ -38,7 +36,6 @@ Vue.use(Taginput);
 Vue.use(Loading);
 Vue.use(Button);
 Vue.use(SnackBar);
-Vue.use(Collapse);
 Vue.use(Tag);
 
 declare module "vue/types/vue" {
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 2dd7a57..80778f6 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -106,7 +106,7 @@ html {
 }
 .layout {
   position: fixed;
-  transition: all 0.1s linear;
+  transition: all $transition-flex-expand linear;
   top: 0;
   bottom: 0;
   left: 0;
diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
index f8d6faf..12c95d1 100644
--- a/viewer/src/views/PanelLeft.vue
+++ b/viewer/src/views/PanelLeft.vue
@@ -18,7 +18,7 @@
 -->
 
 <template>
-  <div class="flex-column sidebar">
+  <div class="flex-column" :class="$style.sidebar">
     <ld-tag-input
       :search-filters.sync="searchFilters"
       :tags-index="$galleryStore.tagsIndex"
@@ -26,7 +26,7 @@
     />
     <ld-command-search @clear="clear" @search="search" />
     <h1 class="title">{{ $t("panelLeft.propositions") }}</h1>
-    <div class="scrollbar no-scroll-x flex-grow-1">
+    <div class="scrollbar no-scroll-x flex-grow-1" :class="$style.flexShrink1000">
       <ld-proposition
         v-for="category in $galleryStore.tagsCategories"
         :key="category.tag"
@@ -37,13 +37,13 @@
         :current-tags="currentTags"
       />
     </div>
-    <b-collapse animation="slide" :open.sync="infoOpen">
-      <h1 slot="trigger" class="flex title">
-        {{ $t("panelLeft.information.title") }}
-        <fa-icon :icon="infoOpen ? 'caret-down' : 'caret-up'" />
-      </h1>
-      <ld-information :item="$galleryStore.currentItem" />
-    </b-collapse>
+    <h1 class="flex title" @click="infoOpen = !infoOpen">
+      {{ $t("panelLeft.information.title") }}
+      <fa-icon :icon="infoOpen ? 'caret-down' : 'caret-up'" />
+    </h1>
+    <transition name="flex-expand">
+      <ld-information v-show="infoOpen" :item="$galleryStore.currentItem" class="scrollbar no-scroll-x" />
+    </transition>
   </div>
 </template>
 
@@ -92,11 +92,11 @@ export default class PanelLeft extends Vue {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" module>
 @import "~@/assets/scss/theme.scss";
 
 .sidebar {
-  .title {
+  :global(.title) {
     background-color: $proposed-category-bgcolor;
     padding: 0.2em 0.5em;
     margin: 0 0 1px 0;
@@ -109,4 +109,8 @@ export default class PanelLeft extends Vue {
     }
   }
 }
+
+.flexShrink1000 {
+  flex-shrink: 1000;
+}
 </style>