From 09624c0089f0e29ffb1abc578525b6a07fd95e81 Mon Sep 17 00:00:00 2001 From: pacien Date: Sun, 3 May 2020 23:05:38 +0200 Subject: viewer/GallerySearch: use proper i18n pluralisation --- viewer/src/locales/en.json | 3 +-- viewer/src/views/GallerySearch.vue | 6 ++---- 2 files changed, 3 insertions(+), 6 deletions(-) (limited to 'viewer') diff --git a/viewer/src/locales/en.json b/viewer/src/locales/en.json index 9e0fd4b..e6c1df2 100644 --- a/viewer/src/locales/en.json +++ b/viewer/src/locales/en.json @@ -1,8 +1,7 @@ { "tagInput.placeholder": "Filters", "tagInput.nomatch": "No match", - "search.no-results": "No results", - "search.no-results.otherfolders": "No results • {0} result{1} in other folders", + "search.no-result-fmt": "No result
({0} match in other folders) | No result
({0} matches in other folders)", "panelLeft.propositions": "Related filters", "tag-propositions.substraction": "Exclude items with this tag", "tag-propositions.addition": "Include all items with this tag", diff --git a/viewer/src/views/GallerySearch.vue b/viewer/src/views/GallerySearch.vue index e75a37e..dfaa5d3 100644 --- a/viewer/src/views/GallerySearch.vue +++ b/viewer/src/views/GallerySearch.vue @@ -29,8 +29,7 @@ import IndexSearch from "@/services/indexsearch"; @Component export default class GalleryPicture extends Vue { @Prop(String) readonly path!: string; - - otherCount: Number = 0; + otherCount: number = 0; mounted() { this.$uiStore.toggleFullscreen(false); @@ -50,8 +49,7 @@ export default class GalleryPicture extends Vue { } noResult() { - const params = [this.otherCount, this.otherCount > 1 ? "s" : ""]; - return this.$t("search.no-results.otherfolders", params); + return this.$tc("search.no-result-fmt", this.otherCount, [this.otherCount]); } } -- cgit v1.2.3 From 665139f7d25a64f66e1149a6403fc26efcbabb2a Mon Sep 17 00:00:00 2001 From: pacien Date: Sun, 3 May 2020 23:07:51 +0200 Subject: viewer/GalleryNavigation: better error messages Introducing a generic error page with some icon and a different error for unknown resources GitHub: closes #190 --- viewer/src/components/LdError.vue | 64 ++++++++++++++++++++++++++++++++++ viewer/src/components/LdGallery.vue | 8 ++--- viewer/src/locales/en.json | 3 +- viewer/src/plugins/fontawesome.ts | 2 ++ viewer/src/views/GalleryNavigation.vue | 32 ++++++++++++----- 5 files changed, 95 insertions(+), 14 deletions(-) create mode 100644 viewer/src/components/LdError.vue (limited to 'viewer') diff --git a/viewer/src/components/LdError.vue b/viewer/src/components/LdError.vue new file mode 100644 index 0000000..5e266ab --- /dev/null +++ b/viewer/src/components/LdError.vue @@ -0,0 +1,64 @@ + + + + + + + diff --git a/viewer/src/components/LdGallery.vue b/viewer/src/components/LdGallery.vue index 29c18b9..e512758 100644 --- a/viewer/src/components/LdGallery.vue +++ b/viewer/src/components/LdGallery.vue @@ -18,11 +18,11 @@ --> @@ -47,11 +47,9 @@ export default class LdPicture extends Vue { flex-wrap: wrap; align-items: center; justify-content: space-evenly; + & > a { margin: 2px; } - & .noresult { - margin-top: 40px; - } } diff --git a/viewer/src/locales/en.json b/viewer/src/locales/en.json index e6c1df2..c011552 100644 --- a/viewer/src/locales/en.json +++ b/viewer/src/locales/en.json @@ -7,7 +7,8 @@ "tag-propositions.addition": "Include all items with this tag", "tag-propositions.intersection": "Search for this tag", "tag-propositions.item-count": "Item count", - "gallery.unknowntype": "Unknown item type", + "gallery.unknown-type": "Could not display item of unknown type", + "gallery.unknown-resource": "Resource not found", "command.search": "Open/close search panel", "command.search.clear": "Clear", "command.search.search": "Search", diff --git a/viewer/src/plugins/fontawesome.ts b/viewer/src/plugins/fontawesome.ts index 480e8e0..933bce6 100644 --- a/viewer/src/plugins/fontawesome.ts +++ b/viewer/src/plugins/fontawesome.ts @@ -23,6 +23,7 @@ import { library, config } from "@fortawesome/fontawesome-svg-core"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { faFolder, + faFolderOpen, faEraser, faSearch, faPlus, @@ -38,6 +39,7 @@ import { library.add( faFolder, + faFolderOpen, faEraser, faSearch, faPlus, diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue index 7c6d11b..08c8218 100644 --- a/viewer/src/views/GalleryNavigation.vue +++ b/viewer/src/views/GalleryNavigation.vue @@ -18,18 +18,14 @@ --> -- cgit v1.2.3 From f328a730b516f5e9104f85e553c083c2865660a8 Mon Sep 17 00:00:00 2001 From: pacien Date: Mon, 4 May 2020 00:10:39 +0200 Subject: viewer/galleryStore: unify resource root parametrisation --- viewer/src/components/LdPicture.vue | 2 +- viewer/src/components/LdThumbnail.vue | 2 +- viewer/src/store/galleryStore.ts | 4 ++++ 3 files changed, 6 insertions(+), 2 deletions(-) (limited to 'viewer') diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/LdPicture.vue index de46bcb..78829ec 100644 --- a/viewer/src/components/LdPicture.vue +++ b/viewer/src/components/LdPicture.vue @@ -76,7 +76,7 @@ export default class LdPicture extends Vue { } pictureSrc(resource: string) { - return `${process.env.VUE_APP_DATA_URL}${this.$galleryStore.config!.galleryRoot}${resource}`; + return this.$galleryStore.resourceRoot + resource; } generateSlowLoadingStyle() { diff --git a/viewer/src/components/LdThumbnail.vue b/viewer/src/components/LdThumbnail.vue index e774f00..bfcc595 100644 --- a/viewer/src/components/LdThumbnail.vue +++ b/viewer/src/components/LdThumbnail.vue @@ -47,7 +47,7 @@ export default class LdThumbnail extends Vue { loading: boolean = false; pictureSrc(resource: string) { - return `${process.env.VUE_APP_DATA_URL}${this.$galleryStore.config!.galleryRoot}${resource}`; + return this.$galleryStore.resourceRoot + resource; } pictureStyle() { diff --git a/viewer/src/store/galleryStore.ts b/viewer/src/store/galleryStore.ts index 0cffdd9..a57122c 100644 --- a/viewer/src/store/galleryStore.ts +++ b/viewer/src/store/galleryStore.ts @@ -79,6 +79,10 @@ export default class GalleryStore extends VuexModule { return this.galleryIndex?.properties.galleryTitle ?? "ldgallery"; } + get resourceRoot(): string { + return process.env.VUE_APP_DATA_URL + this.config!.galleryRoot; + } + // --- // Fetches the gallery's JSON config -- cgit v1.2.3 From 35456c6183c199b23ded85838414eb28a6d4b60f Mon Sep 17 00:00:00 2001 From: pacien Date: Mon, 4 May 2020 00:11:31 +0200 Subject: viewer/LdDownload: add generic file download handler GitHub: closes #209 --- viewer/src/@types/gallery.d.ts | 1 + viewer/src/components/LdDownload.vue | 67 ++++++++++++++++++++++++++++++++++ viewer/src/locales/en.json | 2 +- viewer/src/plugins/fontawesome.ts | 2 + viewer/src/views/GalleryNavigation.vue | 5 +-- 5 files changed, 72 insertions(+), 5 deletions(-) create mode 100644 viewer/src/components/LdDownload.vue (limited to 'viewer') diff --git a/viewer/src/@types/gallery.d.ts b/viewer/src/@types/gallery.d.ts index 066aedf..3246894 100644 --- a/viewer/src/@types/gallery.d.ts +++ b/viewer/src/@types/gallery.d.ts @@ -55,6 +55,7 @@ declare namespace Gallery { } interface OtherProperties { type: "other", + resource: string } interface PictureProperties { type: "picture", diff --git a/viewer/src/components/LdDownload.vue b/viewer/src/components/LdDownload.vue new file mode 100644 index 0000000..3b13e99 --- /dev/null +++ b/viewer/src/components/LdDownload.vue @@ -0,0 +1,67 @@ + + + + + + + diff --git a/viewer/src/locales/en.json b/viewer/src/locales/en.json index c011552..824064e 100644 --- a/viewer/src/locales/en.json +++ b/viewer/src/locales/en.json @@ -7,8 +7,8 @@ "tag-propositions.addition": "Include all items with this tag", "tag-propositions.intersection": "Search for this tag", "tag-propositions.item-count": "Item count", - "gallery.unknown-type": "Could not display item of unknown type", "gallery.unknown-resource": "Resource not found", + "download.download-file-fmt": "Download {0}", "command.search": "Open/close search panel", "command.search.clear": "Clear", "command.search.search": "Search", diff --git a/viewer/src/plugins/fontawesome.ts b/viewer/src/plugins/fontawesome.ts index 933bce6..886d680 100644 --- a/viewer/src/plugins/fontawesome.ts +++ b/viewer/src/plugins/fontawesome.ts @@ -35,6 +35,7 @@ import { faAngleRight, faAngleDoubleLeft, faFile, + faFileDownload, } from "@fortawesome/free-solid-svg-icons"; library.add( @@ -51,6 +52,7 @@ library.add( faAngleRight, faAngleDoubleLeft, faFile, + faFileDownload, ); config.autoAddCss = false; diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue index 08c8218..2e40409 100644 --- a/viewer/src/views/GalleryNavigation.vue +++ b/viewer/src/views/GalleryNavigation.vue @@ -65,10 +65,7 @@ export default class GalleryNavigation extends Vue { return { component: "ld-picture", properties: { picture: this.$galleryStore.currentItem } }; default: - return { - component: "ld-error", - properties: { icon: "file", message: this.$t("gallery.unknown-type") } - }; + return { component: "ld-download", properties: { item: this.$galleryStore.currentItem } }; } } } -- cgit v1.2.3 From c175db32132201cefec699b69f71fb23bdd2c687 Mon Sep 17 00:00:00 2001 From: pacien Date: Fri, 8 May 2020 19:03:09 +0200 Subject: viewer/LdDownload: fix item type and remove getters For consistency. --- viewer/src/components/LdDownload.vue | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) (limited to 'viewer') diff --git a/viewer/src/components/LdDownload.vue b/viewer/src/components/LdDownload.vue index 3b13e99..f86d455 100644 --- a/viewer/src/components/LdDownload.vue +++ b/viewer/src/components/LdDownload.vue @@ -20,10 +20,10 @@ @@ -32,19 +32,19 @@ import { Component, Prop, Vue } from "vue-property-decorator"; @Component export default class LdDownload extends Vue { - @Prop({ required: true }) readonly item!: Gallery.Item; + @Prop({ required: true }) readonly item!: Gallery.Other; - get itemResource(): string { - return (this.item.properties as Gallery.OtherProperties).resource; + itemResource(): string { + return this.item.properties.resource; } - get itemFileName(): string { - const timeStamped = this.itemResource.split("/").pop() ?? ""; + itemFileName(): string { + const timeStamped = this.itemResource().split("/").pop() ?? ""; return timeStamped.split("?")[0]; } - get itemDownloadUrl(): string { - return this.$galleryStore.resourceRoot + this.itemResource; + itemDownloadUrl(): string { + return this.$galleryStore.resourceRoot + this.itemResource(); } } -- cgit v1.2.3 From 3cf40298471995fddea8a66860353a2b1ceeeeee Mon Sep 17 00:00:00 2001 From: pacien Date: Fri, 8 May 2020 19:04:29 +0200 Subject: viewer/LdError: fix prop constructor type --- viewer/src/components/LdError.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'viewer') diff --git a/viewer/src/components/LdError.vue b/viewer/src/components/LdError.vue index 5e266ab..4b958dc 100644 --- a/viewer/src/components/LdError.vue +++ b/viewer/src/components/LdError.vue @@ -31,8 +31,8 @@ import { Component, Prop, Vue } from "vue-property-decorator"; @Component export default class LdError extends Vue { - @Prop({ required: true }) readonly icon!: string; - @Prop({ required: true }) readonly message!: string; + @Prop({ required: true, type: String }) readonly icon!: string; + @Prop({ required: true, type: String }) readonly message!: string; } -- cgit v1.2.3 From e02b09f405c81fd3eb612b0bb1f78f5860b0a5e8 Mon Sep 17 00:00:00 2001 From: pacien Date: Fri, 8 May 2020 19:10:52 +0200 Subject: viewer/style/global: factorise flex centering container --- viewer/src/assets/scss/global.scss | 11 +++++++++++ viewer/src/components/LdDownload.vue | 9 +-------- viewer/src/components/LdError.vue | 9 +-------- 3 files changed, 13 insertions(+), 16 deletions(-) (limited to 'viewer') diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss index 9444548..5d2e6dc 100644 --- a/viewer/src/assets/scss/global.scss +++ b/viewer/src/assets/scss/global.scss @@ -51,6 +51,17 @@ button svg + span { align-items: center; } +/** + * Class for containers that centers its content vertically and horizontally, + * preferably sticking to the container start if the container is smaller than the content. + */ +.container-vh-centering { + min-height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + // === Links .link { diff --git a/viewer/src/components/LdDownload.vue b/viewer/src/components/LdDownload.vue index f86d455..aea4123 100644 --- a/viewer/src/components/LdDownload.vue +++ b/viewer/src/components/LdDownload.vue @@ -19,7 +19,7 @@ --> -- cgit v1.2.3 From e9e46a3b3392ab435f7414729592b2b5af4071b6 Mon Sep 17 00:00:00 2001 From: pacien Date: Mon, 18 May 2020 20:05:14 +0200 Subject: compiler: add pdf resource type --- viewer/src/@types/gallery.d.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) (limited to 'viewer') diff --git a/viewer/src/@types/gallery.d.ts b/viewer/src/@types/gallery.d.ts index 04df1bb..7345ef9 100644 --- a/viewer/src/@types/gallery.d.ts +++ b/viewer/src/@types/gallery.d.ts @@ -40,6 +40,9 @@ declare namespace Gallery { interface PlainText extends Item { properties: PlainTextProperties, } + interface PDF extends Item { + properties: PDFProperties, + } interface Directory extends Item { properties: DirectoryProperties, } @@ -50,7 +53,7 @@ declare namespace Gallery { tags: RawTag[], path: string, thumbnail?: Thumbnail - properties: OtherProperties | PictureProperties | PlainTextProperties | DirectoryProperties, + properties: OtherProperties | PictureProperties | PlainTextProperties | PDFProperties | DirectoryProperties, } interface Resolution { width: number, @@ -69,6 +72,10 @@ declare namespace Gallery { type: "plaintext", resource: string, } + interface PDFProperties { + type: "pdf", + resource: string, + } interface DirectoryProperties { type: "directory", items: Item[] @@ -78,5 +85,5 @@ declare namespace Gallery { resolution: Resolution } type RawTag = string; - type ItemType = "other" | "picture" | "plaintext" | "directory"; + type ItemType = "other" | "picture" | "plaintext" | "pdf" | "directory"; } -- cgit v1.2.3 From 185b84fbed180e4d2da7d4cc2ee91a3481f47406 Mon Sep 17 00:00:00 2001 From: pacien Date: Mon, 18 May 2020 20:05:32 +0200 Subject: viewer: add icon for pdf files --- viewer/src/plugins/fontawesome-icons.ts | 1 + viewer/src/services/navigation.ts | 2 ++ 2 files changed, 3 insertions(+) (limited to 'viewer') diff --git a/viewer/src/plugins/fontawesome-icons.ts b/viewer/src/plugins/fontawesome-icons.ts index b5df176..ffe3709 100644 --- a/viewer/src/plugins/fontawesome-icons.ts +++ b/viewer/src/plugins/fontawesome-icons.ts @@ -32,5 +32,6 @@ export { faAngleDoubleLeft, faFile, faFileAlt, + faFilePdf, faFileDownload, } from "@fortawesome/free-solid-svg-icons"; diff --git a/viewer/src/services/navigation.ts b/viewer/src/services/navigation.ts index 4d3b376..7d1ae50 100644 --- a/viewer/src/services/navigation.ts +++ b/viewer/src/services/navigation.ts @@ -72,6 +72,8 @@ export default class Navigation { return "image"; case "plaintext": return "file-alt"; + case "pdf": + return "file-pdf"; case "directory": return "folder"; case "other": -- cgit v1.2.3 From 226e0beb50061844470bd8a717a74307b975bd96 Mon Sep 17 00:00:00 2001 From: pacien Date: Mon, 18 May 2020 20:06:22 +0200 Subject: viewer: add pdf viewer Based on native browser rendering. GitHub: closes #211 --- viewer/src/components/LdPdfViewer.vue | 50 ++++++++++++++++++++++++++++++++++ viewer/src/views/GalleryNavigation.vue | 1 + 2 files changed, 51 insertions(+) create mode 100644 viewer/src/components/LdPdfViewer.vue (limited to 'viewer') diff --git a/viewer/src/components/LdPdfViewer.vue b/viewer/src/components/LdPdfViewer.vue new file mode 100644 index 0000000..78ff3d2 --- /dev/null +++ b/viewer/src/components/LdPdfViewer.vue @@ -0,0 +1,50 @@ + + + + + + + diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue index b5f06a2..e1c860b 100644 --- a/viewer/src/views/GalleryNavigation.vue +++ b/viewer/src/views/GalleryNavigation.vue @@ -25,6 +25,7 @@ + -- cgit v1.2.3 From 037db071d42d4a7fdb8ed5cf88bc2c37fba4ae93 Mon Sep 17 00:00:00 2001 From: pacien Date: Tue, 19 May 2020 21:04:50 +0200 Subject: viewer/css/global: factorise util classes --- viewer/src/assets/scss/global.scss | 8 ++++++++ viewer/src/components/LdPdfViewer.vue | 10 +++------- viewer/src/components/LdPlainTextViewer.vue | 11 ++--------- 3 files changed, 13 insertions(+), 16 deletions(-) (limited to 'viewer') diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss index 5d2e6dc..f95a54d 100644 --- a/viewer/src/assets/scss/global.scss +++ b/viewer/src/assets/scss/global.scss @@ -36,6 +36,9 @@ button svg + span { .nowrap { white-space: nowrap; } +.no-scroll { + overflow: hidden; +} .no-scroll-x { overflow-x: hidden; } @@ -51,6 +54,11 @@ button svg + span { align-items: center; } +.fill { + width: 100%; + height: 100%; +} + /** * Class for containers that centers its content vertically and horizontally, * preferably sticking to the container start if the container is smaller than the content. diff --git a/viewer/src/components/LdPdfViewer.vue b/viewer/src/components/LdPdfViewer.vue index 78ff3d2..20055cc 100644 --- a/viewer/src/components/LdPdfViewer.vue +++ b/viewer/src/components/LdPdfViewer.vue @@ -20,9 +20,9 @@