aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views
diff options
context:
space:
mode:
authorOzoneGrif2020-02-24 01:15:14 +0100
committerGitHub2020-02-24 01:15:14 +0100
commit2a458e25c0510798120dddbd85cef5ee440c2a2a (patch)
tree77d6958950e1c6a2ad425da1c095fefce58b05e4 /viewer/src/views
parente42f4e864bac21ed3b19d1869df2cdd4f8c3433c (diff)
parenteb00c2a7874608f70ec7768eae8d006a22bc0a54 (diff)
downloadldgallery-2a458e25c0510798120dddbd85cef5ee440c2a2a.tar.gz
Merge pull request #144 from pacien/oz-search-overhaul
viewer: major code and search mode overhaul > Search indicator in the breadcrumbs: should be shown as clickable instead of being .disabled Not agreeing with this one.
Diffstat (limited to 'viewer/src/views')
-rw-r--r--viewer/src/views/GalleryDirectory.vue14
-rw-r--r--viewer/src/views/GalleryNavigation.vue63
-rw-r--r--viewer/src/views/GallerySearch.vue36
-rw-r--r--viewer/src/views/MainGallery.vue110
-rw-r--r--viewer/src/views/MainLayout.vue4
-rw-r--r--viewer/src/views/PanelLeft.vue36
-rw-r--r--viewer/src/views/PanelTop.vue7
7 files changed, 131 insertions, 139 deletions
diff --git a/viewer/src/views/GalleryDirectory.vue b/viewer/src/views/GalleryDirectory.vue
index 162ef6e..6e68578 100644
--- a/viewer/src/views/GalleryDirectory.vue
+++ b/viewer/src/views/GalleryDirectory.vue
@@ -18,18 +18,12 @@
18--> 18-->
19 19
20<template> 20<template>
21 <div class="thumbnail-tiles"> 21 <ld-gallery :items="orderedItems()" :noresult="$t('directory.no-results')" />
22 <div v-for="(item) in orderedItems" :key="item.path">
23 <router-link :to="item.path">
24 <ld-thumbnail :item="item" />
25 </router-link>
26 </div>
27 </div>
28</template> 22</template>
29 23
30<script lang="ts"> 24<script lang="ts">
31import { Component, Vue, Prop } from "vue-property-decorator"; 25import { Component, Vue, Prop } from "vue-property-decorator";
32import Tools from "@/tools"; 26import Navigation from "@/services/navigation";
33 27
34@Component 28@Component
35export default class GalleryDirectory extends Vue { 29export default class GalleryDirectory extends Vue {
@@ -39,8 +33,8 @@ export default class GalleryDirectory extends Vue {
39 this.$uiStore.fullscreen = false; 33 this.$uiStore.fullscreen = false;
40 } 34 }
41 35
42 get orderedItems() { 36 orderedItems() {
43 return Tools.directoriesFirst(this.directory.properties.items); 37 return Navigation.directoriesFirst(this.directory.properties.items);
44 } 38 }
45} 39}
46</script> 40</script>
diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue
new file mode 100644
index 0000000..e09b292
--- /dev/null
+++ b/viewer/src/views/GalleryNavigation.vue
@@ -0,0 +1,63 @@
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>
22 <gallery-search v-if="query.length" :path="path" :query="query" />
23 <gallery-directory v-else-if="checkType('directory')" :directory="$galleryStore.currentItem" />
24 <ld-picture v-else-if="checkType('picture')" :picture="$galleryStore.currentItem" />
25 <div v-else>{{$t("gallery.unknowntype")}}</div>
26 </div>
27</template>
28
29<script lang="ts">
30import { Component, Vue, Prop, Watch } from "vue-property-decorator";
31import { Operation } from "@/@types/Operation";
32import Navigation from "@/services/navigation";
33import GalleryDirectory from "./GalleryDirectory.vue";
34import GallerySearch from "@/views/GallerySearch.vue";
35
36@Component({
37 components: {
38 GalleryDirectory,
39 GallerySearch,
40 },
41})
42export default class GalleryNavigation extends Vue {
43 @Prop(String) readonly path!: string;
44 @Prop(Array) readonly query!: string[];
45
46 mounted() {
47 this.pathChanged();
48 }
49
50 @Watch("path")
51 pathChanged() {
52 console.log("Path: ", this.path);
53 this.$galleryStore.setCurrentPath(this.path);
54 }
55
56 private checkType(type: Gallery.ItemType): boolean {
57 return Navigation.checkType(this.$galleryStore.currentItem, type);
58 }
59}
60</script>
61
62<style lang="scss">
63</style>
diff --git a/viewer/src/views/GallerySearch.vue b/viewer/src/views/GallerySearch.vue
index 97c5c66..f4c28b0 100644
--- a/viewer/src/views/GallerySearch.vue
+++ b/viewer/src/views/GallerySearch.vue
@@ -18,25 +18,41 @@
18--> 18-->
19 19
20<template> 20<template>
21 <div class="thumbnail-tiles"> 21 <ld-gallery :items="items()" :noresult="$t('search.no-results')" />
22 <div v-for="(item) in items" :key="item.path">
23 <router-link :to="item.path" @click.native="$uiStore.setModeNavigation()">
24 <ld-thumbnail :item="item" />
25 </router-link>
26 </div>
27 <div v-if="items.length===0">{{$t('search.no-results')}}</div>
28 </div>
29</template> 22</template>
30 23
31<script lang="ts"> 24<script lang="ts">
32import { Component, Vue, Prop } from "vue-property-decorator"; 25import { Component, Vue, Prop, Watch } from "vue-property-decorator";
26import { Operation } from "@/@types/Operation";
27import IndexSearch from "@/services/indexsearch";
28import IndexFactory from "@/services/indexfactory";
33 29
34@Component 30@Component
35export default class GalleryPicture extends Vue { 31export default class GalleryPicture extends Vue {
36 @Prop({ required: true }) readonly items!: Gallery.Item[]; 32 @Prop(String) readonly path!: string;
33 @Prop(Array) readonly query!: string[];
34
35 currentSearch: Tag.Search[] = [];
37 36
38 mounted() { 37 mounted() {
39 this.$uiStore.fullscreen = false; 38 this.$uiStore.fullscreen = false;
39 this.$uiStore.searchMode = true;
40 this.restoreSearchFilters();
41 }
42
43 destroyed() {
44 this.$uiStore.searchMode = false;
45 }
46
47 items() {
48 return IndexSearch.search(this.currentSearch, this.path);
49 }
50
51 @Watch("query")
52 restoreSearchFilters() {
53 const tagsIndex = this.$galleryStore.tagsIndex;
54 this.currentSearch = this.query.flatMap(filter => IndexFactory.searchTags(tagsIndex, filter));
55 this.$uiStore.searchFilters = [...this.currentSearch];
40 } 56 }
41} 57}
42</script> 58</script>
diff --git a/viewer/src/views/MainGallery.vue b/viewer/src/views/MainGallery.vue
deleted file mode 100644
index 5767cce..0000000
--- a/viewer/src/views/MainGallery.vue
+++ /dev/null
@@ -1,110 +0,0 @@
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>
22 <gallery-search v-if="$uiStore.isModeSearch" :items="currentSearch" />
23 <gallery-directory v-else-if="checkType('directory')" :directory="$galleryStore.currentItem" />
24 <ld-picture v-else-if="checkType('picture')" :picture="$galleryStore.currentItem" />
25 <div v-else>{{$t("gallery.unknowntype")}}</div>
26 </div>
27</template>
28
29<script lang="ts">
30import { Component, Vue, Prop, Watch } from "vue-property-decorator";
31import { Operation } from "@/@types/Operation";
32import Tools from "@/tools";
33import GallerySearch from "./GallerySearch.vue";
34import GalleryDirectory from "./GalleryDirectory.vue";
35
36@Component({
37 components: {
38 GallerySearch,
39 GalleryDirectory,
40 },
41})
42export default class Gallery extends Vue {
43 @Prop(String) readonly pathMatch!: string;
44
45 mounted() {
46 this.pathChanged();
47 }
48
49 @Watch("pathMatch")
50 pathChanged() {
51 console.log("Path: ", this.pathMatch);