aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components
diff options
context:
space:
mode:
authorZero~Informatique2020-02-14 09:19:53 +0100
committerZero~Informatique2020-02-24 00:04:39 +0100
commit370e3db3455f548699ff5e046e0f8dcc304991ac (patch)
treee29fe9e2afb940eea74c8ed510c46a1eb0fa4d84 /viewer/src/components
parente42f4e864bac21ed3b19d1869df2cdd4f8c3433c (diff)
downloadldgallery-370e3db3455f548699ff5e046e0f8dcc304991ac.tar.gz
viewer: major code and search mode overhaul
Updated libraries to the lastest version SCSS Formatter as suggested VSC extensions Renamed toolbar-color by scrollbar-color LD components use Props in favor of touching the stores directly (when possible) Moved most common algorithms to a "services" folder Complete search overhaul (lots of code change)
Diffstat (limited to 'viewer/src/components')
-rw-r--r--viewer/src/components/LdBreadcrumb.vue17
-rw-r--r--viewer/src/components/LdCommand.vue16
-rw-r--r--viewer/src/components/LdCommandSearch.vue (renamed from viewer/src/components/LdModeRadio.vue)32
-rw-r--r--viewer/src/components/LdGallery.vue47
-rw-r--r--viewer/src/components/LdPicture.vue2
-rw-r--r--viewer/src/components/LdProposition.vue35
-rw-r--r--viewer/src/components/LdTagInput.vue75
-rw-r--r--viewer/src/components/LdThumbnail.vue4
8 files changed, 117 insertions, 111 deletions
diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue
index 7f7ef7d..643bfb6 100644
--- a/viewer/src/components/LdBreadcrumb.vue
+++ b/viewer/src/components/LdBreadcrumb.vue
@@ -29,24 +29,29 @@
29 > 29 >
30 <div v-show="overflowMask" class="ld-breadcrumb-overflow-mask"></div> 30 <div v-show="overflowMask" class="ld-breadcrumb-overflow-mask"></div>
31 <ul class="ld-breadcrumb"> 31 <ul class="ld-breadcrumb">
32 <li v-for="(item,idx) in $galleryStore.currentItemPath" :key="item.path"> 32 <li v-for="(item,idx) in currentItemPath" :key="item.path">
33 <fa-icon v-if="idx > 0" icon="angle-right" class="disabled" /> 33 <fa-icon v-if="idx > 0" icon="angle-right" class="disabled" />
34 <router-link :to="item.path" class="link"> 34 <router-link :to="item.path" class="link">
35 <fa-icon :icon="getIcon(item)" size="lg" /> 35 <fa-icon :icon="getIcon(item)" size="lg" />
36 {{item.title}} 36 {{item.title}}
37 </router-link> 37 </router-link>
38 </li> 38 </li>
39 <li v-if="searchMode">
40 <fa-icon icon="search" size="lg" class="disabled" />
41 </li>
39 </ul> 42 </ul>
40 </div> 43 </div>
41</template> 44</template>
42 45
43<script lang="ts"> 46<script lang="ts">
44import { Component, Vue, Ref, Watch } from "vue-property-decorator"; 47import { Component, Vue, Ref, Watch, Prop } from "vue-property-decorator";
45import DragScrollClickFix from "@/dragscrollclickfix"; 48import DragScrollClickFix from "@/services/dragscrollclickfix";
46import Tools from "@/tools"; 49import Navigation from "@/services/navigation";
47 50
48@Component 51@Component
49export default class LdBreadcrumb extends Vue { 52export default class LdBreadcrumb extends Vue {
53 @Prop({ required: true }) readonly currentItemPath!: Gallery.Item[];
54 @Prop(Boolean) readonly searchMode!: boolean;
50 @Ref() readonly breadcrumb!: HTMLUListElement; 55 @Ref() readonly breadcrumb!: HTMLUListElement;
51 56
52 readonly dragScrollClickFix = new DragScrollClickFix(); 57 readonly dragScrollClickFix = new DragScrollClickFix();
@@ -66,7 +71,7 @@ export default class LdBreadcrumb extends Vue {
66 this.overflowMask = this.breadcrumb.scrollLeft > 1; 71 this.overflowMask = this.breadcrumb.scrollLeft > 1;
67 } 72 }
68 73
69 @Watch("$galleryStore.currentItemPath") 74 @Watch("currentItemPath")
70 changedCurrentItemPath() { 75 changedCurrentItemPath() {
71 this.$nextTick(() => { 76 this.$nextTick(() => {
72 this.breadcrumb.scrollLeft = this.breadcrumb.scrollWidth; 77 this.breadcrumb.scrollLeft = this.breadcrumb.scrollWidth;
@@ -75,7 +80,7 @@ export default class LdBreadcrumb extends Vue {
75 } 80 }
76 81
77 getIcon(item: Gallery.Item) { 82 getIcon(item: Gallery.Item) {
78 return Tools.getIcon(item); 83 return Navigation.getIcon(item);
79 } 84 }
80} 85}
81</script> 86</script>
diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 7590ea7..468c241 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -23,14 +23,6 @@
23 <a class="link" :title="$t('command.search')" @click="$uiStore.toggleFullWidth()"> 23 <a class="link" :title="$t('command.search')" @click="$uiStore.toggleFullWidth()">
24 <fa-icon :icon="commandToggleSearchPanelIcon()" size="lg" /> 24 <fa-icon :icon="commandToggleSearchPanelIcon()" size="lg" />
25 </a> 25 </a>
26 <router-link
27 to="/"
28 class="command-secondary"
29 :class="{'disabled': isRoot()}"
30 :title="$t('command.home')"
31 >
32 <fa-icon icon="home" size="lg" />
33 </router-link>
34 <a class="link command-secondary" :title="$t('command.back')" @click="$router.go(-1)"> 26 <a class="link command-secondary" :title="$t('command.back')" @click="$router.go(-1)">
35 <fa-icon icon="arrow-left" size="lg" /> 27 <fa-icon icon="arrow-left" size="lg" />
36 </a> 28 </a>
@@ -42,21 +34,23 @@
42</template> 34</template>
43 35
44<script lang="ts"> 36<script lang="ts">
45import { Component, Vue } from "vue-property-decorator"; 37import { Component, Vue, Prop } from "vue-property-decorator";
46import { RawLocation } from "vue-router"; 38import { RawLocation } from "vue-router";
47 39
48@Component 40@Component
49export default class LdCommand extends Vue { 41export default class LdCommand extends Vue {
42 @Prop({ required: true }) readonly currentItemPath!: Gallery.Item[];
43
50 commandToggleSearchPanelIcon(): string { 44 commandToggleSearchPanelIcon(): string {
51 return this.$uiStore.fullWidth ? "search" : "angle-double-left"; 45 return this.$uiStore.fullWidth ? "search" : "angle-double-left";
52 } 46 }
53 47
54 isRoot(): boolean { 48 isRoot(): boolean {
55 return this.$galleryStore.currentItemPath.length <= 1; 49 return this.currentItemPath.length <= 1;
56 } 50 }
57 51
58 parent(): RawLocation { 52 parent(): RawLocation {
59 if (!this.isRoot()) return this.$galleryStore.currentItemPath[this.$galleryStore.currentItemPath.length - 2]; 53 if (!this.isRoot()) return this.currentItemPath[this.currentItemPath.length - 2];
60 return ""; 54 return "";
61 } 55 }
62} 56}
diff --git a/viewer/src/components/LdModeRadio.vue b/viewer/src/components/LdCommandSearch.vue
index c1d5702..bd18060 100644
--- a/viewer/src/components/LdModeRadio.vue
+++ b/viewer/src/components/LdCommandSearch.vue
@@ -19,22 +19,36 @@
19 19
20<template> 20<template>
21 <div class="flex"> 21 <div class="flex">
22 <b-radio-button v-model="$uiStore.mode" native-value="navigation" type="is-green"> 22 <b-button @click="clear">
23 <fa-icon icon="folder" /> 23 <fa-icon icon="eraser" />
24 <span>{{$t('mode.navigation')}}</span> 24 <span>{{$t('command.search.clear')}}</span>
25 </b-radio-button> 25 </b-button>
26 <b-radio-button v-model="$uiStore.mode" native-value="search" type="is-purple"> 26 <b-button expanded :loading="loading" @click="search">
27 <fa-icon icon="search" /> 27 <fa-icon icon="search" />
28 <span>{{$t('mode.search')}}</span> 28 <span>{{$t('command.search.search')}}</span>
29 </b-radio-button> 29 </b-button>
30 </div> 30 </div>
31</template> 31</template>
32 32
33<script lang="ts"> 33<script lang="ts">
34import { Component, Vue } from "vue-property-decorator"; 34import { Component, Vue, Emit } from "vue-property-decorator";
35 35
36@Component 36@Component
37export default class LdModeRadio extends Vue {} 37export default class LdCommandSearch extends Vue {
38 loading: boolean = false;
39
40 @Emit()
41 clear(e: HTMLButtonElement) {
42 return e;
43 }
44
45 @Emit()
46 search(e: HTMLButtonElement) {
47 this.loading = true;
48 this.$nextTick(() => (this.loading = false));
49 return e;
50 }
51}
38</script> 52</script>
39 53
40<style lang="scss"> 54<style lang="scss">
diff --git a/viewer/src/components/LdGallery.vue b/viewer/src/components/LdGallery.vue
new file mode 100644
index 0000000..169bc54
--- /dev/null
+++ b/viewer/src/components/LdGallery.vue
@@ -0,0 +1,47 @@
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="thumbnail-tiles">
22 <div v-for="item in items" :key="item.path">
23 <router-link :to="item.path">
24 <ld-thumbnail :item="item" />
25 </router-link>
26 </div>
27 <div v-if="hasNoResults()">{{noresult}}</div>
28 </div>
29</template>
30
31<script lang="ts">
32import { Component, Vue, Prop, Model } from "vue-property-decorator";
33