aboutsummaryrefslogtreecommitdiff
path: root/viewer/src
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src')
-rw-r--r--viewer/src/@types/gallery/index.d.ts12
-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
5 files changed, 53 insertions, 15 deletions
diff --git a/viewer/src/@types/gallery/index.d.ts b/viewer/src/@types/gallery/index.d.ts
index 2dd11fb..b47c812 100644
--- a/viewer/src/@types/gallery/index.d.ts
+++ b/viewer/src/@types/gallery/index.d.ts
@@ -1,4 +1,10 @@
1declare namespace Gallery { 1declare namespace Gallery {
2 interface Image extends Item {
3 properties: ImageProperties,
4 }
5 interface Directory extends Item {
6 properties: DirectoryProperties,
7 }
2 interface Item { 8 interface Item {
3 title: string, 9 title: string,
4 date: string, 10 date: string,
@@ -8,9 +14,9 @@ declare namespace Gallery {
8 thumbnail: { 14 thumbnail: {
9 path: string, 15 path: string,
10 }, 16 },
11 properties: Image | Directory, 17 properties: ImageProperties | DirectoryProperties,
12 } 18 }
13 interface Image { 19 interface ImageProperties {
14 type: "image", 20 type: "image",
15 filesize: number, 21 filesize: number,
16 resolution: { 22 resolution: {
@@ -18,7 +24,7 @@ declare namespace Gallery {
18 height: number, 24 height: number,
19 } 25 }
20 } 26 }
21 interface Directory { 27 interface DirectoryProperties {
22 type: "directory", 28 type: "directory",
23 items: Item[] 29 items: Item[]
24 } 30 }
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>