aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views/SplashScreen.vue
diff options
context:
space:
mode:
authorZéro~Informatique2022-07-26 08:44:34 +0200
committerpacien2022-09-03 01:30:42 +0200
commit00510820a2794efcadbc83f7f8b54318fe198ecb (patch)
treea894d99c22a601197869c7a6928d40bb4ae2c392 /viewer/src/views/SplashScreen.vue
parent88aa098c07e067f9f737fbeba1f52a9bd5042e53 (diff)
downloadldgallery-00510820a2794efcadbc83f7f8b54318fe198ecb.tar.gz
viewer: migrate to vue 3, general refactoring and cleanup
Non-exhaustive list of fixes and improvements done at the same time: - html default background to grey (avoids white flash during init) - unified links behavior - added more theme variables - removed the flex-expand transition (it wasn't working) and replaced it with a slide - fixed LdLoading not centered on the content - title on removable tags - fixed an issue with encoded URI from vue-router - unified Item resource URLs - removed the iframe for PlainTextViewer (it wasn't working properly) and replaced it with a pre - fixed clear and search buttons tabindex - fixed the information panel bumping up during the fade animation of tag's dropdown - fixed some focus outlines not appearing correctly - moved CSS variables to the :root context - Code cleaning GitHub: closes #217 GitHub: closes #300 GitHub: closes #297 GitHub: closes #105 GitHub: closes #267 GitHub: closes #275 GitHub: closes #228 GitHub: closes #215 GitHub: closes #112
Diffstat (limited to 'viewer/src/views/SplashScreen.vue')
-rw-r--r--viewer/src/views/SplashScreen.vue106
1 files changed, 56 insertions, 50 deletions
diff --git a/viewer/src/views/SplashScreen.vue b/viewer/src/views/SplashScreen.vue
index 93d84a1..c6c2d09 100644
--- a/viewer/src/views/SplashScreen.vue
+++ b/viewer/src/views/SplashScreen.vue
@@ -1,62 +1,63 @@
1<!-- ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2019-2022 Guillaume FOUET
5--
6-- This program is free software: you can redistribute it and/or modify
7-- it under the terms of the GNU Affero General Public License as
8-- published by the Free Software Foundation, either version 3 of the
9-- License, or (at your option) any later version.
10--
11-- This program is distributed in the hope that it will be useful,
12-- but WITHOUT ANY WARRANTY; without even the implied warranty of
13-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14-- GNU Affero General Public License for more details.
15--
16-- You should have received a copy of the GNU Affero General Public License
17-- along with this program. If not, see <https://www.gnu.org/licenses/>.
18-->
19
1<template> 20<template>
2 <b-loading v-if="isLoading" active /> 21 <LdLoading v-if="isFetching" />
3 <div v-else-if="markdown" :class="$style.splashscreen" class="scrollbar"> 22 <div
4 <Markdown :style="config.style" class="flex-grow-1" :markdown="markdown" /> 23 v-else-if="!error && data"
5 <b-button size="is-large" :label="buttonAcknowledgeLabel" @click="validation" /> 24 :class="$style.splashscreen"
25 class="scrollbar"
26 >
27 <LdMarkdown
28 :style="config.style"
29 class="flex-grow-1"
30 :markdown="data"
31 />
32 <button
33 tabindex="1"
34 autofocus
35 @click="emit('validation')"
36 >
37 {{ buttonAcknowledgeLabel }}
38 </button>
6 </div> 39 </div>
7</template> 40</template>
8 41
9<script lang="ts"> 42<script setup lang="ts">
10import { SplashScreenConfig } from "@/@types/splashscreen"; 43import { LdMarkdown } from '@/components/async';
11import { Markdown } from "@/components/async"; 44import LdLoading from '@/components/LdLoading.vue';
12import FetchWithCheck from "@/services/fetchWithCheck"; 45import { useLdFetch } from '@/services/api/ldFetch';
13import { TranslateResult } from "vue-i18n"; 46import { useUiStore } from '@/store/uiStore';
14import { Component, Emit, Vue } from "vue-property-decorator"; 47import { computed, readonly } from 'vue';
15 48import { useI18n } from 'vue-i18n';
16@Component({
17 components: {
18 Markdown,
19 },
20})
21export default class SplashScreen extends Vue {
22 isLoading: boolean = true;
23 markdown: string | null = null;
24 49
25 get config(): SplashScreenConfig { 50const emit = defineEmits(['validation']);
26 return this.$uiStore.splashScreenConfig!;
27 }
28 51
29 created() { 52const { t } = useI18n();
30 this.fetchMarkdown(); 53const uiStore = useUiStore();
31 }
32 54
33 // TODO: Identical to LdMarkdownViewer.vue, use composition with Vue3. 55const config = readonly(uiStore.splashScreenConfig ?? {});
34 fetchMarkdown() {
35 FetchWithCheck.get(`${process.env.VUE_APP_DATA_URL}${this.config.resource}?${this.config.acknowledgmentKey ?? ""}`)
36 .then(response => response.text())
37 .then(text => (this.markdown = text))
38 .finally(() => (this.isLoading = false))
39 .catch(this.displayError);
40 }
41 56
42 displayError(reason: any) { 57const buttonAcknowledgeLabel = computed(() => config.buttonAcknowledgeLabel ?? t('splashScreen.button.acknowledge'));
43 this.$buefy.snackbar.open({ 58const itemResourceUrl = computed(() => `${process.env.VUE_APP_DATA_URL}${config.resource}?${config.acknowledgmentKey ?? ''}`);
44 message: `${reason}`,
45 actionText: this.$t("snack.retry"),
46 position: "is-top",
47 type: "is-danger",
48 indefinite: true,
49 onAction: this.fetchMarkdown,
50 });
51 }
52 59
53 get buttonAcknowledgeLabel(): TranslateResult { 60const { isFetching, data, error } = useLdFetch(itemResourceUrl).text();
54 return this.config.buttonAcknowledgeLabel ?? this.$t("splashScreen.button.acknowledge");
55 }
56
57 @Emit()
58 validation() {}
59}
60</script> 61</script>
61 62
62<style lang="scss" module> 63<style lang="scss" module>
@@ -65,5 +66,10 @@ export default class SplashScreen extends Vue {
65 flex-flow: column; 66 flex-flow: column;
66 align-items: center; 67 align-items: center;
67 padding: 32px; 68 padding: 32px;
69
70 button {
71 font-size: 1.5rem;
72 margin-top: 1em;
73 }
68} 74}
69</style> 75</style>