aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorZero~Informatique2019-12-21 20:14:33 +0100
committerZero~Informatique2019-12-21 20:14:33 +0100
commit57d1b89d314970bf56d3d398c393f6a67a4ed0b5 (patch)
tree611a184e545296607bdb855dd4a4eaa3ae82198f
parentbbae6ddb97c0825f6b0b689f4d9eeac67515d1c1 (diff)
downloadldgallery-57d1b89d314970bf56d3d398c393f6a67a4ed0b5.tar.gz
viewer: Isolated the Directory and Image views in their own components
-rw-r--r--viewer/src/views/Gallery.vue15
-rw-r--r--viewer/src/views/GalleryDirectory.vue20
-rw-r--r--viewer/src/views/GalleryImage.vue17
3 files changed, 44 insertions, 8 deletions
diff --git a/viewer/src/views/Gallery.vue b/viewer/src/views/Gallery.vue
index 55b93db..10ff323 100644
--- a/viewer/src/views/Gallery.vue
+++ b/viewer/src/views/Gallery.vue
@@ -1,19 +1,18 @@
1<template> 1<template>
2 <div id="test-flex-col"> 2 <div id="test-flex-col">
3 <div v-if="isDirectory"> 3 <gallery-directory v-if="isDirectory" :directory="currentItem" />
4 <strong>Directory: {{currentItem.path}}</strong> 4 <gallery-image v-if="isImage" :image="currentItem" />
5 <div v-for="(item, index) in currentItem.properties.items" :key="item.path">
6 <router-link :to="item.path">Thumbnail: {{index}}-{{item.path}}</router-link>
7 </div>
8 </div>
9 <div v-if="isImage">Image: {{currentItem.path}}</div>
10 </div> 5 </div>
11</template> 6</template>
12 7
13<script lang="ts"> 8<script lang="ts">
14import { Component, Vue, Prop } from "vue-property-decorator"; 9import { Component, Vue, Prop } from "vue-property-decorator";
10import GalleryDirectory from "./GalleryDirectory.vue";
11import GalleryImage from "./GalleryImage.vue";
15 12
16@Component 13@Component({
14 components: { GalleryDirectory, GalleryImage },
15})
17export default class Root extends Vue { 16export default class Root extends Vue {
18 @Prop(String) readonly pathMatch!: string; 17 @Prop(String) readonly pathMatch!: string;
19 18
diff --git a/viewer/src/views/GalleryDirectory.vue b/viewer/src/views/GalleryDirectory.vue
new file mode 100644
index 0000000..bed1664
--- /dev/null
+++ b/viewer/src/views/GalleryDirectory.vue
@@ -0,0 +1,20 @@
1<template>
2 <div>
3 <strong>Directory: {{directory.path}}</strong>
4 <div v-for="(item, index) in directory.properties.items" :key="item.path">
5 <router-link :to="item.path">Thumbnail: {{index}}-{{item.path}}</router-link>
6 </div>
7 </div>
8</template>
9
10<script lang="ts">
11import { Component, Vue, Prop } from "vue-property-decorator";
12
13@Component
14export default class GalleryDirectory extends Vue {
15 @Prop({ type: Array, required: true }) readonly directory!: Gallery.Directory;
16}
17</script>
18
19<style lang="scss">
20</style>
diff --git a/viewer/src/views/GalleryImage.vue b/viewer/src/views/GalleryImage.vue
new file mode 100644
index 0000000..daaa504
--- /dev/null
+++ b/viewer/src/views/GalleryImage.vue
@@ -0,0 +1,17 @@
1<template>
2 <div>
3 <strong>Image: {{image.path}}</strong>
4 </div>
5</template>
6
7<script lang="ts">
8import { Component, Vue, Prop } from "vue-property-decorator";
9
10@Component
11export default class GalleryDirectory extends Vue {
12 @Prop({ required: true }) readonly image!: Gallery.Image;
13}
14</script>
15
16<style lang="scss">
17</style>