aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/views')
-rw-r--r--viewer/src/views/Gallery.vue8
-rw-r--r--viewer/src/views/GalleryDirectory.vue18
-rw-r--r--viewer/src/views/GalleryImage.vue7
-rw-r--r--viewer/src/views/GalleryThumbnail.vue23
4 files changed, 44 insertions, 12 deletions
diff --git a/viewer/src/views/Gallery.vue b/viewer/src/views/Gallery.vue
index 10ff323..954903a 100644
--- a/viewer/src/views/Gallery.vue
+++ b/viewer/src/views/Gallery.vue
@@ -1,5 +1,5 @@
1<template> 1<template>
2 <div id="test-flex-col"> 2 <div>
3 <gallery-directory v-if="isDirectory" :directory="currentItem" /> 3 <gallery-directory v-if="isDirectory" :directory="currentItem" />
4 <gallery-image v-if="isImage" :image="currentItem" /> 4 <gallery-image v-if="isImage" :image="currentItem" />
5 </div> 5 </div>
@@ -50,10 +50,4 @@ export default class Root extends Vue {
50</script> 50</script>
51 51
52<style lang="scss"> 52<style lang="scss">
53#test-flex-col {
54 display: flex;
55 flex-direction: column;
56 align-items: center;
57 justify-content: center;
58}
59</style> 53</style>
diff --git a/viewer/src/views/GalleryDirectory.vue b/viewer/src/views/GalleryDirectory.vue
index bed1664..1dda027 100644
--- a/viewer/src/views/GalleryDirectory.vue
+++ b/viewer/src/views/GalleryDirectory.vue
@@ -1,20 +1,30 @@
1<template> 1<template>
2 <div> 2 <div>
3 <strong>Directory: {{directory.path}}</strong> 3 <strong>Directory: {{directory.path}}</strong>
4 <div v-for="(item, index) in directory.properties.items" :key="item.path"> 4 <div class="flex-thumbnails">
5 <router-link :to="item.path">Thumbnail: {{index}}-{{item.path}}</router-link> 5 <div v-for="(item) in directory.properties.items" :key="item.path">
6 <router-link :to="item.path">
7 <gallery-thumbnail :item="item" />
8 </router-link>
9 </div>
6 </div> 10 </div>
7 </div> 11 </div>
8</template> 12</template>
9 13
10<script lang="ts"> 14<script lang="ts">
11import { Component, Vue, Prop } from "vue-property-decorator"; 15import { Component, Vue, Prop } from "vue-property-decorator";
16import GalleryThumbnail from "./GalleryThumbnail.vue";
12 17
13@Component 18@Component({
19 components: { GalleryThumbnail },
20})
14export default class GalleryDirectory extends Vue { 21export default class GalleryDirectory extends Vue {
15 @Prop({ type: Array, required: true }) readonly directory!: Gallery.Directory; 22 @Prop({ required: true }) readonly directory!: Gallery.Directory;
16} 23}
17</script> 24</script>
18 25
19<style lang="scss"> 26<style lang="scss">
27.flex-thumbnails {
28 display: flex;
29}
20</style> 30</style>
diff --git a/viewer/src/views/GalleryImage.vue b/viewer/src/views/GalleryImage.vue
index daaa504..07f8cc8 100644
--- a/viewer/src/views/GalleryImage.vue
+++ b/viewer/src/views/GalleryImage.vue
@@ -1,6 +1,7 @@
1<template> 1<template>
2 <div> 2 <div>
3 <strong>Image: {{image.path}}</strong> 3 <strong>Image: {{image.path}}</strong>
4 <img :src="imageSrc" />
4 </div> 5 </div>
5</template> 6</template>
6 7
@@ -8,8 +9,12 @@
8import { Component, Vue, Prop } from "vue-property-decorator"; 9import { Component, Vue, Prop } from "vue-property-decorator";
9 10
10@Component 11@Component
11export default class GalleryDirectory extends Vue { 12export default class GalleryImage extends Vue {
12 @Prop({ required: true }) readonly image!: Gallery.Image; 13 @Prop({ required: true }) readonly image!: Gallery.Image;
14
15 get imageSrc() {
16 return `/gallery${this.image.path}`;
17 }
13} 18}
14</script> 19</script>
15 20
diff --git a/viewer/src/views/GalleryThumbnail.vue b/viewer/src/views/GalleryThumbnail.vue
new file mode 100644
index 0000000..8e3e826
--- /dev/null
+++ b/viewer/src/views/GalleryThumbnail.vue
@@ -0,0 +1,23 @@
1<template>
2 <img class="thumbnail" :src="imageSrc" :title="item.path" />
3</template>
4
5<script lang="ts">
6import { Component, Vue, Prop } from "vue-property-decorator";
7
8@Component
9export default class GalleryThumbnail extends Vue {
10 @Prop({ required: true }) readonly item!: Gallery.Item;
11
12 get imageSrc() {
13 return `/gallery${this.item.thumbnail.path}`;
14 }
15}
16</script>
17
18<style lang="scss">
19.thumbnail {
20 max-width: 250px;
21 max-height: 250px;
22}
23</style>