Skip to content

Commit 74761ea

Browse files
ildyriad7415
ildyria
and
d7415
authored
Minor UI improvements (#2860)
* minor improvements * wording * do not display changing layout on small device, they are useless * fix download icon * enter/exit full screen when going to frame mode * fix button not accessible in mobile mode to get out of slideshow * Update resources/js/components/forms/album/AlbumShare.vue Co-authored-by: Martin Stone <1611702+d7415@users.noreply.github.com> --------- Co-authored-by: Martin Stone <1611702+d7415@users.noreply.github.com>
1 parent 2c13a95 commit 74761ea

File tree

11 files changed

+84
-66
lines changed

11 files changed

+84
-66
lines changed

‎resources/js/components/diagnostics/ErrorsDiagnostics.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<Panel header="Errors" class="border-none max-w-7xl mx-auto">
2+
<Panel header="Self-Diagnostic" class="border-none max-w-7xl mx-auto">
33
<div v-if="!errors" class="text-sky-400 font-bold">Loading...</div>
44
<div v-else v-for="error in errors" class="flex">
55
<div class="w-24 capitalize" :class="getCss(error.type)">{{ error.type }}</div>

‎resources/js/components/forms/album/AlbumShare.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
</div>
88
<div class="w-1/2 flex justify-around items-center">
99
<i class="pi pi-eye" v-tooltip.top="'Grants read access'" />
10-
<i class="pi pi-window-maximize" v-tooltip.top="'Grants full photo access'" />
11-
<i class="pi pi-download" v-tooltip.top="'Grants download'" />
10+
<i class="pi pi-window-maximize" v-tooltip.top="'Grants access to original photo'" />
11+
<i class="pi pi-cloud-download" v-tooltip.top="'Grants download'" />
1212
<i class="pi pi-upload" v-tooltip.top="'Grants upload'" />
1313
<i class="pi pi-file-edit" v-tooltip.top="'Grants edit'" />
1414
<i class="pi pi-trash" v-tooltip.top="'Grants delete'" />

‎resources/js/components/gallery/AlbumHero.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
:title="$t('lychee.DOWNLOAD_ALBUM')"
3636
@click="download"
3737
>
38-
<i class="pi pi-download" />
38+
<i class="pi pi-cloud-download" />
3939
</a>
4040
<a
4141
v-if="props.album.rights.can_share"

‎resources/js/components/gallery/PhotoThumbPanelControl.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<template>
2-
<a class="px-1 cursor-pointer group inline-block h-8" @click="layout = 'square'" :title="$t('lychee.LAYOUT_SQUARES')">
2+
<a class="px-1 cursor-pointer group hidden sm:inline-block h-8" @click="layout = 'square'" :title="$t('lychee.LAYOUT_SQUARES')">
33
<MiniIcon icon="squares" fill="fill-transparent" :class="squareClass" />
44
</a>
5-
<a class="px-1 cursor-pointer group inline-block h-8" @click="layout = 'justified'" :title="$t('lychee.LAYOUT_JUSTIFIED')">
5+
<a class="px-1 cursor-pointer group hidden sm:inline-block h-8" @click="layout = 'justified'" :title="$t('lychee.LAYOUT_JUSTIFIED')">
66
<MiniIcon icon="justified" fill="" :class="justifiedClass" />
77
</a>
8-
<a class="px-1 cursor-pointer group inline-block h-8" @click="layout = 'masonry'" :title="$t('lychee.LAYOUT_MASONRY')">
8+
<a class="px-1 cursor-pointer group hidden sm:inline-block h-8" @click="layout = 'masonry'" :title="$t('lychee.LAYOUT_MASONRY')">
99
<MiniIcon icon="masonry" fill="fill-transparent" :class="masonryClass" />
1010
</a>
11-
<a class="px-1 cursor-pointer group inline-block h-8" @click="layout = 'grid'" :title="$t('lychee.LAYOUT_GRID')">
11+
<a class="px-1 cursor-pointer group hidden sm:inline-block h-8" @click="layout = 'grid'" :title="$t('lychee.LAYOUT_GRID')">
1212
<MiniIcon icon="grid" fill="fill-transparent" :class="gridClass" />
1313
</a>
1414
</template>

‎resources/js/components/headers/PhotoHeader.vue‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,27 @@
99
<Button icon="pi pi-angle-left" class="mr-2" severity="secondary" text @click="goBack" />
1010
</template>
1111
<template #end>
12-
<Button text icon="pi pi-play" class="mr-2" severity="secondary" @click="toggleSlideShow" />
13-
<Button
14-
v-if="props.photo.rights.can_access_full_photo && props.photo.size_variants.original?.url"
15-
text
16-
icon="pi pi-window-maximize"
17-
class="mr-2 font-bold"
18-
severity="secondary"
19-
@click="openInNewTab(props.photo.size_variants.original.url)"
20-
/>
21-
<Button
22-
v-if="props.photo.rights.can_download"
23-
text
24-
icon="pi pi-cloud-download"
25-
class="mr-2"
26-
severity="secondary"
27-
@click="isDownloadOpen = !isDownloadOpen"
28-
/>
29-
<Button v-if="props.photo.rights.can_edit" text icon="pi pi-pencil" class="mr-2" severity="secondary" @click="toggleEdit" />
30-
<Button icon="pi pi-info" class="mr-2" severity="secondary" text @click="toggleDetails" />
12+
<div :class="is_slideshow_active ? 'hidden' : 'flex'">
13+
<Button text icon="pi pi-play" class="mr-2" severity="secondary" @click="toggleSlideShow" />
14+
<Button
15+
v-if="props.photo.rights.can_access_full_photo && props.photo.size_variants.original?.url"
16+
text
17+
icon="pi pi-window-maximize"
18+
class="mr-2 font-bold"
19+
severity="secondary"
20+
@click="openInNewTab(props.photo.size_variants.original.url)"
21+
/>
22+
<Button
23+
v-if="props.photo.rights.can_download"
24+
text
25+
icon="pi pi-cloud-download"
26+
class="mr-2"
27+
severity="secondary"
28+
@click="isDownloadOpen = !isDownloadOpen"
29+
/>
30+
<Button v-if="props.photo.rights.can_edit" text icon="pi pi-pencil" class="mr-2" severity="secondary" @click="toggleEdit" />
31+
<Button icon="pi pi-info" class="mr-2" severity="secondary" text @click="toggleDetails" />
32+
</div>
3133
</template>
3234
</Toolbar>
3335
</header>

‎resources/js/composables/photo/slideshow.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,5 +84,6 @@ export function useSlideshowFunction(
8484
next,
8585
previous,
8686
clearTimeouts,
87+
stop,
8788
};
8889
}

‎resources/js/views/Sharing.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<div class="w-1/2 flex items-center justify-around">
2222
<i class="pi pi-eye" v-tooltip.top="'Grants read access'" />
2323
<i class="pi pi-window-maximize" v-tooltip.top="'Grants full photo access'" />
24-
<i class="pi pi-download" v-tooltip.top="'Grants download'" />
24+
<i class="pi pi-cloud-download" v-tooltip.top="'Grants download'" />
2525
<i class="pi pi-upload" v-tooltip.top="'Grants upload'" />
2626
<i class="pi pi-file-edit" v-tooltip.top="'Grants edit'" />
2727
<i class="pi pi-trash" v-tooltip.top="'Grants delete'" />

‎resources/js/views/gallery-panels/Album.vue‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@
175175
</template>
176176
<script setup lang="ts">
177177
import { useAuthStore } from "@/stores/Auth";
178-
import { computed, ref, watch, onMounted } from "vue";
178+
import { computed, ref, watch, onMounted, onUnmounted } from "vue";
179179
import { useRoute, useRouter } from "vue-router";
180180
import AlbumThumbPanel from "@/components/gallery/AlbumThumbPanel.vue";
181181
import PhotoThumbPanel from "@/components/gallery/PhotoThumbPanel.vue";
@@ -237,8 +237,6 @@ const { onScroll, setScroll, scrollToTop } = useScrollable(togglableStore, album
237237
const { is_full_screen, is_login_open, is_slideshow_active, is_upload_visible, list_upload_files } = storeToRefs(togglableStore);
238238
const { are_nsfw_visible, nsfw_consented, is_se_enabled } = storeToRefs(lycheeStore);
239239
240-
// Reset the slideshow.
241-
is_slideshow_active.value = false;
242240
function toggleSlideShow() {
243241
if (album.value === undefined || album.value.photos.length === 0) {
244242
return;
@@ -383,11 +381,6 @@ function consent() {
383381
isAlbumConsented.value = true;
384382
}
385383
386-
onMounted(async () => {
387-
await Promise.all([loadLayoutConfig(), refresh()]);
388-
setScroll();
389-
});
390-
391384
onKeyStroke("h", () => !shouldIgnoreKeystroke() && (are_nsfw_visible.value = !are_nsfw_visible.value));
392385
onKeyStroke("f", () => !shouldIgnoreKeystroke() && togglableStore.toggleFullScreen());
393386
onKeyStroke(" ", () => !shouldIgnoreKeystroke() && unselect());
@@ -400,11 +393,21 @@ onKeyStroke([getModKey(), "a"], () => !shouldIgnoreKeystroke() && selectEverythi
400393
401394
const { onPaste, dragEnd, dropUpload } = useMouseEvents(rights, is_upload_visible, list_upload_files);
402395
403-
window.addEventListener("paste", onPaste);
404-
window.addEventListener("dragover", dragEnd);
405-
window.addEventListener("drop", dropUpload);
396+
onMounted(() => {
397+
// Reset the slideshow.
398+
is_slideshow_active.value = false;
399+
400+
window.addEventListener("paste", onPaste);
401+
window.addEventListener("dragover", dragEnd);
402+
window.addEventListener("drop", dropUpload);
403+
});
404+
405+
onMounted(async () => {
406+
await Promise.all([loadLayoutConfig(), refresh()]);
407+
setScroll();
408+
});
406409
407-
router.afterEach(() => {
410+
onUnmounted(() => {
408411
window.removeEventListener("paste", onPaste);
409412
window.removeEventListener("dragover", dragEnd);
410413
window.removeEventListener("drop", dropUpload);
@@ -416,9 +419,6 @@ watch(
416419
unselect();
417420
418421
albumid.value = newId as string;
419-
window.addEventListener("paste", onPaste);
420-
window.addEventListener("dragover", dragEnd);
421-
window.addEventListener("drop", dropUpload);
422422
refresh().then(setScroll);
423423
},
424424
);

‎resources/js/views/gallery-panels/Albums.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@
129129
<script setup lang="ts">
130130
import AlbumThumbPanel from "@/components/gallery/AlbumThumbPanel.vue";
131131
import { useAuthStore } from "@/stores/Auth";
132-
import { computed, ref, onMounted } from "vue";
132+
import { computed, ref, onMounted, onUnmounted } from "vue";
133133
import AlbumsHeader from "@/components/headers/AlbumsHeader.vue";
134134
import { useLycheeStateStore } from "@/stores/LycheeState";
135135
import { storeToRefs } from "pinia";
@@ -218,11 +218,6 @@ const albumPanelConfig = computed<AlbumThumbConfig>(() => ({
218218
album_decoration_orientation: lycheeStore.album_decoration_orientation,
219219
}));
220220
221-
onMounted(async () => {
222-
await refresh();
223-
setScroll();
224-
});
225-
226221
onKeyStroke("h", () => !shouldIgnoreKeystroke() && (are_nsfw_visible.value = !are_nsfw_visible.value));
227222
onKeyStroke("f", () => !shouldIgnoreKeystroke() && togglableStore.toggleFullScreen());
228223
onKeyStroke(" ", () => !shouldIgnoreKeystroke() && unselect());
@@ -242,7 +237,12 @@ onMounted(() => {
242237
togglableStore.left_menu_open = false;
243238
});
244239
245-
router.afterEach(() => {
240+
onMounted(async () => {
241+
await refresh();
242+
setScroll();
243+
});
244+
245+
onUnmounted(() => {
246246
window.removeEventListener("paste", onPaste);
247247
window.removeEventListener("dragover", dragEnd);
248248
window.removeEventListener("drop", dropUpload);

‎resources/js/views/gallery-panels/Frame.vue‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { useSlideshowFunction } from "@/composables/photo/slideshow";
2121
import AlbumService from "@/services/album-service";
2222
import { onKeyStroke } from "@vueuse/core";
2323
import Button from "primevue/button";
24-
import { ref } from "vue";
24+
import { ref, onMounted, onUnmounted } from "vue";
2525
import { useRouter } from "vue-router";
2626
2727
const props = defineProps<{
@@ -52,7 +52,20 @@ function start() {
5252
});
5353
}
5454
55-
start();
55+
onMounted(() => {
56+
let elem = document.getElementsByTagName("body")[0];
57+
58+
elem.requestFullscreen()
59+
.then(() => {})
60+
.catch((err) => console.log(err));
61+
62+
start();
63+
});
64+
65+
onUnmounted(() => {
66+
document.exitFullscreen();
67+
clearTimeouts();
68+
});
5669
5770
function goBack() {
5871
clearTimeouts();

0 commit comments

Comments
 (0)