aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorZero~Informatique2020-01-09 02:10:35 +0100
committerZero~Informatique2020-01-09 02:10:35 +0100
commit89bcb2dbe5b5e6eb8e8ba13ceecee2770dfe4cd4 (patch)
tree8eb2c100707123f77ff6980c94e161d6214c648f
parentc1e334b883e28381851fca077ff36aee0387b1db (diff)
downloadldgallery-89bcb2dbe5b5e6eb8e8ba13ceecee2770dfe4cd4.tar.gz
viewer: Changed "image" type to "picture". Adapted the code to the current compiler output format. The currentItem and currentPath are calculated in the store for easier multi-component access. Breadcrumb for current's position and navigation.
-rw-r--r--viewer/src/@types/gallery/index.d.ts22
-rw-r--r--viewer/src/assets/scss/theme.scss10
-rw-r--r--viewer/src/components/LdProposition.vue1
-rw-r--r--viewer/src/locales/en.json3
-rw-r--r--viewer/src/plugins/fontawesome.ts2
-rw-r--r--viewer/src/store/galleryStore.ts31
-rw-r--r--viewer/src/views/Gallery.vue36
-rw-r--r--viewer/src/views/GalleryDirectory.vue1
-rw-r--r--viewer/src/views/GalleryImage.vue22
-rw-r--r--viewer/src/views/GalleryPicture.vue21
-rw-r--r--viewer/src/views/GallerySearch.vue2
-rw-r--r--viewer/src/views/GalleryThumbnail.vue4
-rw-r--r--viewer/src/views/MainLayout.vue19
-rw-r--r--viewer/src/views/PanelTop.vue67
14 files changed, 165 insertions, 76 deletions
diff --git a/viewer/src/@types/gallery/index.d.ts b/viewer/src/@types/gallery/index.d.ts
index 310c865..97cc207 100644
--- a/viewer/src/@types/gallery/index.d.ts
+++ b/viewer/src/@types/gallery/index.d.ts
@@ -1,28 +1,22 @@
1declare namespace Gallery { 1declare namespace Gallery {
2 interface Image extends Item { 2 interface Picture extends Item {
3 properties: ImageProperties, 3 properties: PictureProperties,
4 } 4 }
5 interface Directory extends Item { 5 interface Directory extends Item {
6 properties: DirectoryProperties, 6 properties: DirectoryProperties,
7 } 7 }
8 interface Item { 8 interface Item {
9 title: string, 9 title: string,
10 date: string, 10 datetime: string,
11 description: string, 11 description: string,
12 tags: RawTag[], 12 tags: RawTag[],
13 path: string, 13 path: string,
14 thumbnail: { 14 thumbnail?: string,
15 path: string, 15 properties: PictureProperties | DirectoryProperties,
16 },
17 properties: ImageProperties | DirectoryProperties,
18 } 16 }
19 interface ImageProperties { 17 interface PictureProperties {
20 type: "image", 18 type: "picture",
21 filesize: number, 19 resource: string,
22 resolution: {
23 width: number,
24 height: number,
25 }
26 } 20 }
27 interface DirectoryProperties { 21 interface DirectoryProperties {
28 type: "directory", 22 type: "directory",
diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
new file mode 100644
index 0000000..a8ee0be
--- /dev/null
+++ b/viewer/src/assets/scss/theme.scss
@@ -0,0 +1,10 @@
1// === Theme
2
3$layout-top: 70px;
4$layout-left: 250px;
5
6$panel-top-bgcolor: #225;
7$panel-top-txtcolor: white;
8$panel-left-bgcolor: $panel-top-bgcolor;
9$panel-left-txtcolor: $panel-top-txtcolor;
10$content-bgcolor: #1e1e1e;
diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index b23c14a..9e8d9dd 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -13,7 +13,6 @@
13<script lang="ts"> 13<script lang="ts">
14import { Component, Vue } from "vue-property-decorator"; 14import { Component, Vue } from "vue-property-decorator";
15import { Operation } from "@/@types/tag/Operation"; 15import { Operation } from "@/@types/tag/Operation";
16import Gallery from '../views/Gallery.vue';
17 16
18@Component 17@Component
19export default class LdTagInput extends Vue { 18export default class LdTagInput extends Vue {
diff --git a/viewer/src/locales/en.json b/viewer/src/locales/en.json
index 4c9f5d4..d44a116 100644
--- a/viewer/src/locales/en.json
+++ b/viewer/src/locales/en.json
@@ -6,5 +6,6 @@
6 "mode.navigation": "Navigation", 6 "mode.navigation": "Navigation",
7 "mode.search": "Search", 7 "mode.search": "Search",
8 "search.no-results": "No results", 8 "search.no-results": "No results",
9 "panelLeft.propositions": "Proposed tags" 9 "panelLeft.propositions": "Proposed tags",
10 "gallery.unknowntype": "Unknown item type"
10} \ No newline at end of file 11} \ No newline at end of file
diff --git a/viewer/src/plugins/fontawesome.ts b/viewer/src/plugins/fontawesome.ts
index 7308afe..3bd7d08 100644
--- a/viewer/src/plugins/fontawesome.ts
+++ b/viewer/src/plugins/fontawesome.ts
@@ -9,6 +9,7 @@ import {
9 faTag, 9 faTag,
10 faPlus, 10 faPlus,
11 faMinus, 11 faMinus,
12 faImage,
12} from "@fortawesome/free-solid-svg-icons"; 13} from "@fortawesome/free-solid-svg-icons";
13 14
14library.add( 15library.add(
@@ -18,6 +19,7 @@ library.add(
18 faTag, 19 faTag,
19 faPlus, 20 faPlus,
20 faMinus, 21 faMinus,
22 faImage,
21); 23);
22 24
23Vue.component("fa-icon", FontAwesomeIcon); 25Vue.component("fa-icon", FontAwesomeIcon);
diff --git a/viewer/src/store/galleryStore.ts b/viewer/src/store/galleryStore.ts
index 179fbe2..2d17fd6 100644
--- a/viewer/src/store/galleryStore.ts
+++ b/viewer/src/store/galleryStore.ts
@@ -9,6 +9,7 @@ export default class GalleryStore extends VuexModule {
9 9
10 galleryItemsRoot: Gallery.Item | null = null; 10 galleryItemsRoot: Gallery.Item | null = null;
11 tags: Tag.Index = {}; 11 tags: Tag.Index = {};
12 currentPath: string = "/";
12 13
13 // --- 14 // ---
14 15
@@ -20,6 +21,22 @@ export default class GalleryStore extends VuexModule {
20 this.tags = tags; 21 this.tags = tags;
21 } 22 }
22 23
24 @mutation setCurrentPath(currentPath: string) {
25 this.currentPath = currentPath;
26 }
27
28 get currentItemPath(): Gallery.Item[] {
29 const galleryItemsRoot = this.galleryItemsRoot;
30 if (galleryItemsRoot)
31 return GalleryStore.searchCurrentItemPath(galleryItemsRoot, this.currentPath);
32 return [];
33 }
34
35 get currentItem(): Gallery.Item | null {
36 const currentItemPath = this.currentItemPath;
37 return currentItemPath.length > 0 ? currentItemPath[currentItemPath.length - 1] : null;
38 }
39
23 // --- 40 // ---
24 41
25 // Fetches the gallery's JSON metadata 42 // Fetches the gallery's JSON metadata
@@ -61,14 +78,14 @@ export default class GalleryStore extends VuexModule {
61 } 78 }
62 79
63 // Searches for an item by path from a root item (navigation) 80 // Searches for an item by path from a root item (navigation)
64 static searchCurrentItem(item: Gallery.Item, path: string): Gallery.Item | null { 81 private static searchCurrentItemPath(item: Gallery.Item, path: string): Gallery.Item[] {
65 if (path === item.path) return item; 82 if (path === item.path) return [item];
66 if (item.properties.type === "directory" && path.startsWith(item.path)) { 83 if (item.properties.type === "directory" && path.startsWith(item.path)) {
67 const itemFound = item.properties.items 84 const itemChain = item.properties.items
68 .map(item => this.searchCurrentItem(item, path)) 85 .map(item => this.searchCurrentItemPath(item, path))
69 .find(item => Boolean(item)); 86 .find(itemChain => itemChain.length > 0);
70 return itemFound ?? null; 87 if (itemChain) return [item, ...itemChain];
71 } 88 }
72 return null; 89 return [];
73 } 90 }
74} \ No newline at end of file 91} \ No newline at end of file
diff --git a/viewer/src/views/Gallery.vue b/viewer/src/views/Gallery.vue
index 4deb937..a53df3d 100644
--- a/viewer/src/views/Gallery.vue
+++ b/viewer/src/views/Gallery.vue
@@ -1,32 +1,41 @@
1<template> 1<template>
2 <div> 2 <div>
3 <gallery-search v-if="$uiStore.isModeSearch" :items="currentSearch" /> 3 <gallery-search v-if="$uiStore.isModeSearch" :items="currentSearch" />
4 <gallery-directory v-else-if="isDirectory" :directory="currentItem" /> 4 <gallery-directory v-else-if="isDirectory" :directory="$galleryStore.currentItem" />
5 <gallery-image v-else-if="isImage" :image="currentItem" /> 5 <gallery-picture v-else-if="isPicture" :picture="$galleryStore.currentItem" />
6 <div v-else>Unknown type</div> 6 <div v-else>{{$t("gallery.unknowntype")}}</div>
7 </div> 7 </div>
8</template> 8</template>
9 9
10<script lang="ts"> 10<script lang="ts">
11import { Component, Vue, Prop } from "vue-property-decorator"; 11import { Component, Vue, Prop, Watch } from "vue-property-decorator";
12import { Operation } from '@/@types/tag/Operation'; 12import { Operation } from '@/@types/tag/Operation';
13import GallerySearch from "./GallerySearch.vue"; 13import GallerySearch from "./GallerySearch.vue";
14import GalleryDirectory from "./GalleryDirectory.vue"; 14import GalleryDirectory from "./GalleryDirectory.vue";
15import GalleryImage from "./GalleryImage.vue"; 15import GalleryPicture from "./GalleryPicture.vue";
16import GalleryStore from "../store/galleryStore";
17 16
18@Component({ 17@Component({
19 components: { GallerySearch, GalleryDirectory, GalleryImage }, 18 components: { GallerySearch, GalleryDirectory, GalleryPicture },
20}) 19})
21export default class Gallery extends Vue { 20export default class Gallery extends Vue {
22 @Prop(String) readonly pathMatch!: string; 21 @Prop(String) readonly pathMatch!: string;
23 22
23 mounted() {
24 this.pathChanged()
25 }
26
27 @Watch("pathMatch")
28 pathChanged() {
29 console.log("Path: ", this.pathMatch);
30 this.$galleryStore.setCurrentPath(this.pathMatch);
31 }
32
24 get isDirectory(): boolean {