viewer: item information (raw implementation)

5 files changed, 67 insertions, 1 deletions

diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index 1c1000c..4d6c707 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -59,6 +59,10 @@ button svg + span {
   height: 100%;
 }
 
+.flex-grow-1 {
+  flex-grow: 1;
+}
+
 /**
  * Class for containers that centers its content vertically and horizontally,
  * preferably sticking to the container start if the container is smaller than the content.
diff --git a/viewer/src/components/LdInformation.vue b/viewer/src/components/LdInformation.vue
new file mode 100644
index 0000000..ac526d5
--- /dev/null
+++ b/viewer/src/components/LdInformation.vue
@@ -0,0 +1,41 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2020  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <div class="flex-column">
+    <div>{{item.title}}</div>
+    <div>{{item.description}}</div>
+    <div>{{item.datetime}}</div>
+    <b-taglist>
+      <b-tag v-for="tag in item.tags" :key="tag">{{tag}}</b-tag>
+    </b-taglist>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+@Component
+export default class LdInformation extends Vue {
+  @Prop({ required: true }) readonly item!: Gallery.Item;
+}
+</script>
+
+<style lang="scss">
+</style>
diff --git a/viewer/src/plugins/buefy.ts b/viewer/src/plugins/buefy.ts
index 0f8e16b..6cca8e7 100644
--- a/viewer/src/plugins/buefy.ts
+++ b/viewer/src/plugins/buefy.ts
@@ -27,6 +27,10 @@ import Loading from "buefy/src/components/loading";
 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";
 
@@ -34,6 +38,8 @@ Vue.use(Taginput);
 Vue.use(Loading);
 Vue.use(Button);
 Vue.use(SnackBar);
+Vue.use(Collapse);
+Vue.use(Tag);
 
 declare module "vue/types/vue" {
   interface Vue {
diff --git a/viewer/src/plugins/fontawesome-icons.ts b/viewer/src/plugins/fontawesome-icons.ts
index 51eda7e..9dca208 100644
--- a/viewer/src/plugins/fontawesome-icons.ts
+++ b/viewer/src/plugins/fontawesome-icons.ts
@@ -36,4 +36,6 @@ export {
   faFileVideo,
   faFileAudio,
   faFileDownload,
+  faCaretUp,
+  faCaretDown,
 } from "@fortawesome/free-solid-svg-icons";
diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
index 9dc76a0..6341beb 100644
--- a/viewer/src/views/PanelLeft.vue
+++ b/viewer/src/views/PanelLeft.vue
@@ -26,7 +26,7 @@
     />
     <ld-command-search @clear="clear" @search="search" />
     <h1 class="title">{{ $t("panelLeft.propositions") }}</h1>
-    <div class="scrollbar no-scroll-x">
+    <div class="scrollbar no-scroll-x flex-grow-1">
       <ld-proposition
         v-for="category in $galleryStore.tagsCategories"
         :key="category.tag"
@@ -37,6 +37,13 @@
         :current-tags="currentTags"
       />
     </div>
+    <b-collapse animation="slide" :open.sync="infoOpen">
+      <h1 slot="trigger" class="title flex">
+        Informations
+        <fa-icon :icon="infoOpen ? 'caret-up' : 'caret-down'" />
+      </h1>
+      <ld-information :item="$galleryStore.currentItem" />
+    </b-collapse>
   </div>
 </template>
 
@@ -49,6 +56,7 @@ import IndexFactory from "@/services/indexfactory";
 @Component
 export default class PanelLeft extends Vue {
   searchFilters: Tag.Search[] = [];
+  infoOpen: boolean = true;
 
   mounted() {
     this.restoreSearchFilters(this.$route);
@@ -93,6 +101,11 @@ export default class PanelLeft extends Vue {
     padding: 0.2em 0.5em;
     margin: 0 0 1px 0;
     font-variant: small-caps;
+    justify-content: space-between;
+    user-select: none;
+    > svg {
+      color: $link;
+  }
   }
 }
 </style>