From 928c501dda0c3580e3cb0389efc16fc1dde16b68 Mon Sep 17 00:00:00 2001 From: Zero~Informatique Date: Sat, 3 Jul 2021 05:06:44 +0200 Subject: viewer: optional user-defined markdown splash screen GitHub: closes #284 --- viewer/src/views/MainLayout.vue | 46 +++++++++++++++---------- viewer/src/views/SplashScreen.vue | 72 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 100 insertions(+), 18 deletions(-) create mode 100644 viewer/src/views/SplashScreen.vue (limited to 'viewer/src/views') diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue index c54f183..2347ba7 100644 --- a/viewer/src/views/MainLayout.vue +++ b/viewer/src/views/MainLayout.vue @@ -22,14 +22,13 @@ - + - + @@ -40,18 +39,32 @@ import { Component, Ref, Vue, Watch } from "vue-property-decorator"; import { Route } from "vue-router"; import PanelLeft from "./PanelLeft.vue"; import PanelTop from "./PanelTop.vue"; +import SplashScreen from "./SplashScreen.vue"; @Component({ - components: { PanelLeft, PanelTop }, + components: { + PanelLeft, + PanelTop, + SplashScreen, + }, }) export default class MainLayout extends Vue { - @Ref() readonly content!: Vue; + @Ref() readonly content?: Vue; isLoading: boolean = true; scrollPositions: ScrollPosition = {}; - get contentDiv() { - return this.content.$el as HTMLDivElement; + get contentDiv(): HTMLDivElement | null { + return (this.content?.$el as HTMLDivElement) ?? null; + } + + get isReady(): boolean { + return ( + !this.$uiStore.splashScreenEnabled && + !this.isLoading && + this.$galleryStore.config !== null && + this.$galleryStore.currentPath !== null + ); } mounted() { @@ -65,13 +78,14 @@ export default class MainLayout extends Vue { } moveFocusToContentDiv() { - setTimeout(() => this.contentDiv.focus()); + setTimeout(() => this.contentDiv?.focus()); } @Watch("$route") routeChanged(newRoute: Route, oldRoute: Route) { + if (!this.contentDiv) return; this.scrollPositions[oldRoute.path] = this.contentDiv.scrollTop; - this.$nextTick(() => (this.contentDiv.scrollTop = this.scrollPositions[newRoute.path])); + this.$nextTick(() => (this.contentDiv!.scrollTop = this.scrollPositions[newRoute.path])); this.moveFocusToContentDiv(); } @@ -86,14 +100,10 @@ export default class MainLayout extends Vue { .catch(this.displayError); } - get isReady() { - return !this.isLoading && this.$galleryStore.config && this.$galleryStore.currentPath !== null; - } - displayError(reason: any) { this.$buefy.snackbar.open({ message: `${reason}`, - actionText: "Retry", + actionText: this.$t("snack.retry"), position: "is-top", type: "is-danger", indefinite: true, diff --git a/viewer/src/views/SplashScreen.vue b/viewer/src/views/SplashScreen.vue new file mode 100644 index 0000000..808567e --- /dev/null +++ b/viewer/src/views/SplashScreen.vue @@ -0,0 +1,72 @@ + + + + + -- cgit v1.2.3