aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/views')
-rw-r--r--viewer/src/views/GalleryThumbnail.vue2
-rw-r--r--viewer/src/views/PanelLeft.vue5
-rw-r--r--viewer/src/views/PanelTop.vue78
3 files changed, 39 insertions, 46 deletions
diff --git a/viewer/src/views/GalleryThumbnail.vue b/viewer/src/views/GalleryThumbnail.vue
index 433a673..66e46d6 100644
--- a/viewer/src/views/GalleryThumbnail.vue
+++ b/viewer/src/views/GalleryThumbnail.vue
@@ -28,7 +28,7 @@
28 @load="loading=false" 28 @load="loading=false"
29 /> 29 />
30 <div v-else class="flex-column flex-center"> 30 <div v-else class="flex-column flex-center">
31 <fa-icon icon="folder" class="fa-4x" /> 31 <fa-icon icon="folder" size="4x" />
32 {{item.path}} 32 {{item.path}}
33 </div> 33 </div>
34 </div> 34 </div>
diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
index 16be249..35c092a 100644
--- a/viewer/src/views/PanelLeft.vue
+++ b/viewer/src/views/PanelLeft.vue
@@ -24,7 +24,7 @@
24 <h1>{{$t('panelLeft.filters')}}</h1> 24 <h1>{{$t('panelLeft.filters')}}</h1>
25 <ld-tag-input /> 25 <ld-tag-input />
26 <h1>{{$t('panelLeft.propositions')}}</h1> 26 <h1>{{$t('panelLeft.propositions')}}</h1>
27 <ld-proposition /> 27 <ld-proposition class="scrollbar" />
28 </div> 28 </div>
29</template> 29</template>
30 30
@@ -36,7 +36,4 @@ export default class PanelLeft extends Vue {}
36</script> 36</script>
37 37
38<style lang="scss"> 38<style lang="scss">
39.label {
40 color: white;
41}
42</style> 39</style>
diff --git a/viewer/src/views/PanelTop.vue b/viewer/src/views/PanelTop.vue
index 0efc9b6..7e24699 100644
--- a/viewer/src/views/PanelTop.vue
+++ b/viewer/src/views/PanelTop.vue
@@ -18,23 +18,25 @@
18--> 18-->
19 19
20<template> 20<template>
21 <div v-if="isReady"> 21 <div class="flex">
22 <b-steps 22 <div class="command-btns">
23 v-model="activeStep" 23 <fa-icon icon="filter" size="lg" class="disabled" />
24 class="pathBreadcrumb" 24 <router-link to="/" :class="{disabled: $galleryStore.currentItemPath.length <= 1}">
25 type="is-info" 25 <fa-icon icon="home" size="lg" />
26 :has-navigation="false" 26 </router-link>
27 :animated="false" 27 <div class="link" @click="$router.go(-1)">
28 @input="onStepClick" 28 <fa-icon icon="arrow-left" size="lg" />
29 > 29 </div>
30 <b-step-item 30 </div>
31 v-for="item in $galleryStore.currentItemPath" 31 <ul class="pathBreadcrumb">
32 :key="item.path" 32 <li v-for="(item,idx) in $galleryStore.currentItemPath" :key="item.path">
33 :label="item.title" 33 <router-link :to="item.path">
34 :icon="getIcon(item)" 34 <fa-icon :icon="getIcon(item)" size="lg" />
35 :to="item.path" 35 {{item.title}}
36 /> 36 </router-link>
37 </b-steps> 37 <fa-icon v-if="(idx+1) < $galleryStore.currentItemPath.length" icon="angle-right" />
38 </li>
39 </ul>
38 </div> 40 </div>
39</template> 41</template>
40 42
@@ -44,23 +46,8 @@ import Gallery from "./Gallery.vue";
44 46
45@Component 47@Component
46export default class PanelTop extends Vue { 48export default class PanelTop extends Vue {
47 activeStep: number = -1;
48
49 mounted() {
50 this.currentItemPathChanged();
51 }
52
53 get isReady() {
54 return this.activeStep >= 0;
55 }
56
57 @Watch("$galleryStore.currentItemPath")
58 currentItemPathChanged() {
59 this.activeStep = -1;
60 this.$nextTick(() => (this.activeStep = this.$galleryStore.currentItemPath.length - 1));
61 }
62
63 getIcon(item: Gallery.Item) { 49 getIcon(item: Gallery.Item) {
50 if (item.path.length <= 1) return "home";
64 switch (item.properties.type) { 51 switch (item.properties.type) {
65 case "picture": 52 case "picture":
66 return "image"; 53 return "image";
@@ -68,19 +55,28 @@ export default class PanelTop extends Vue {
68 return "folder"; 55 return "folder";
69 } 56 }
70 } 57 }
71
72 onStepClick(index: number) {
73 const item = this.$galleryStore.currentItemPath[index];
74 if (item) this.$router.push(item.path);
75 }
76} 58}
77</script> 59</script>
78 60
79<style lang="scss"> 61<style lang="scss">
62@import "@/assets/scss/theme.scss";
63
80.pathBreadcrumb { 64.pathBreadcrumb {
81 margin: 3px; 65 display: flex;
66 list-style: none;
67 margin: 5px;
68 a {
69 margin-right: 5px;
70 }
71 li:not(:first-child) {
72 margin-left: 10px;
73 }
82} 74}
83.step-title { 75.command-btns {
84 color: white; 76 display: flex;
77 justify-content: space-around;
78 vertical-align: middle;
79 align-items: center;
80 width: $layout-left;
85} 81}
86</style> 82</style>