aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorZero~Informatique2020-05-11 22:42:20 +0200
committerG.Fouet2020-09-11 21:53:18 +0200
commit7e0e108d1d5d9a86a33322432c3d7e8218961121 (patch)
tree6874088c13fce10a57134da24e6cf406adf63e91
parent8bd5334799d7a666c9cb1c121b59a6cbb94b30e2 (diff)
downloadldgallery-7e0e108d1d5d9a86a33322432c3d7e8218961121.tar.gz
viewer: item information (raw implementation)
-rw-r--r--viewer/src/assets/scss/global.scss4
-rw-r--r--viewer/src/components/LdInformation.vue41
-rw-r--r--viewer/src/plugins/buefy.ts6
-rw-r--r--viewer/src/plugins/fontawesome-icons.ts2
-rw-r--r--viewer/src/views/PanelLeft.vue15
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 {
59 height: 100%; 59 height: 100%;
60} 60}
61 61
62.flex-grow-1 {
63 flex-grow: 1;
64}
65
62/** 66/**
63 * Class for containers that centers its content vertically and horizontally, 67 * Class for containers that centers its content vertically and horizontally,
64 * preferably sticking to the container start if the container is smaller than the content. 68 * 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 @@
1<!-- ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2019-2020 Guillaume FOUET
5--
6-- This program is free software: you can redistribute it and/or modify
7-- it under the terms of the GNU Affero General Public License as
8-- published by the Free Software Foundation, either version 3 of the
9-- License, or (at your option) any later version.
10--
11-- This program is distributed in the hope that it will be useful,
12-- but WITHOUT ANY WARRANTY; without even the implied warranty of
13-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14-- GNU Affero General Public License for more details.
15--
16-- You should have received a copy of the GNU Affero General Public License
17-- along with this program. If not, see <https://www.gnu.org/licenses/>.
18-->
19
20<template>
21 <div class="flex-column">
22 <div>{{item.title}}</div>
23 <div>{{item.description}}</div>
24 <div>{{item.datetime}}</div>
25 <b-taglist>
26 <b-tag v-for="tag in item.tags" :key="tag">{{tag}}</b-tag>
27 </b-taglist>
28 </div>
29</template>
30
31<script lang="ts">
32import { Component, Vue, Prop } from "vue-property-decorator";
33
34@Component
35export default class LdInformation extends Vue {
36 @Prop({ required: true }) readonly item!: Gallery.Item;
37}
38</script>
39
40<style lang="scss">
41</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";
27import Button from "buefy/src/components/button"; 27import Button from "buefy/src/components/button";
28// @ts-ignore 28// @ts-ignore
29import SnackBar from "buefy/src/components/snackbar"; 29import SnackBar from "buefy/src/components/snackbar";
30// @ts-ignore
31import Collapse from "buefy/src/components/collapse";
32// @ts-ignore
33import Tag from "buefy/src/components/tag";
30 34
31import "@/assets/scss/buefy.scss"; 35import "@/assets/scss/buefy.scss";
32 36
@@ -34,6 +38,8 @@ Vue.use(Taginput);
34Vue.use(Loading); 38Vue.use(Loading);
35Vue.use(Button); 39Vue.use(Button);
36Vue.use(SnackBar); 40Vue.use(SnackBar);
41Vue.use(Collapse);
42Vue.use(Tag);
37 43
38declare module "vue/types/vue" { 44declare module "vue/types/vue" {
39 interface Vue { 45 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 {
36 faFileVideo, 36 faFileVideo,
37 faFileAudio, 37 faFileAudio,
38 faFileDownload, 38 faFileDownload,
39 faCaretUp,
40 faCaretDown,
39} from "@fortawesome/free-solid-svg-icons"; 41} 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 @@
26 /> 26 />
27 <ld-command-search @clear="clear" @search="search" /> 27 <ld-command-search @clear="clear" @search="search" />
28 <h1 class="title">{{ $t("panelLeft.propositions") }}</h1> 28 <h1 class="title">{{ $t("panelLeft.propositions") }}</h1>
29 <div class="scrollbar no-scroll-x"> 29 <div class="scrollbar no-scroll-x flex-grow-1">
30 <ld-proposition 30 <ld-proposition
31 v-for="category in $galleryStore.tagsCategories" 31 v-for="category in $galleryStore.tagsCategories"
32 :key="category.tag" 32 :key="category.tag"
@@ -37,6 +37,13 @@
37 :current-tags="currentTags" 37 :current-tags="currentTags"
38 /> 38 />
39 </div> 39 </div>
40 <b-collapse animation="slide" :open.sync="infoOpen">
41 <h1 slot="trigger" class="title flex">
42 Informations
43 <fa-icon :icon="infoOpen ? 'caret-up' : 'caret-down'" />
44 </h1>
45 <ld-information :item="$galleryStore.currentItem" />
46 </b-collapse>
40 </div> 47 </div>
41</template> 48</template>
42 49
@@ -49,6 +56,7 @@ import IndexFactory from "@/services/indexfactory";
49@Component 56@Component
50export default class PanelLeft extends Vue { 57export default class PanelLeft extends Vue {
51 searchFilters: Tag.Search[] = []; 58 searchFilters: Tag.Search[] = [];
59 infoOpen: boolean = true;
52 60
53 mounted() { 61 mounted() {
54 this.restoreSearchFilters(this.$route); 62 this.restoreSearchFilters(this.$route);
@@ -93,6 +101,11 @@ export default class PanelLeft extends Vue {
93 padding: 0.2em 0.5em; 101 padding: 0.2em 0.5em;
94 margin: 0 0 1px 0; 102 margin: 0 0 1px 0;
95 font-variant: small-caps; 103 font-variant: small-caps;
104 justify-content: space-between;
105 user-select: none;
106 > svg {
107 color: $link;
108 }
96 } 109 }
97} 110}
98</style> 111</style>