diff --git a/app/Enum/SmallLargeType.php b/app/Enum/SmallLargeType.php
new file mode 100644
index 00000000000..1b4a610f0b8
--- /dev/null
+++ b/app/Enum/SmallLargeType.php
@@ -0,0 +1,18 @@
+can_autoplay = Configs::getValueAsBool('autoplay_enabled');
$this->is_exif_disabled = Configs::getValueAsBool('exif_disabled_for_all');
$this->is_favourite_enabled = Configs::getValueAsBool('client_side_favourite_enabled');
+ $this->photo_previous_next_size = Configs::getValueAsEnum('photo_previous_next_size', SmallLargeType::class);
// Thumbs configuration
$this->display_thumb_album_overlay = Configs::getValueAsEnum('display_thumb_album_overlay', ThumbOverlayVisibilityType::class);
diff --git a/database/migrations/2025_05_17_075632_optional-bigger-left-right-icons.php b/database/migrations/2025_05_17_075632_optional-bigger-left-right-icons.php
new file mode 100644
index 00000000000..00dd5e41c75
--- /dev/null
+++ b/database/migrations/2025_05_17_075632_optional-bigger-left-right-icons.php
@@ -0,0 +1,32 @@
+ 'photo_previous_next_size',
+ 'value' => 'small',
+ 'cat' => self::CAT,
+ 'type_range' => 'small|large',
+ 'description' => 'Select the size of the previous/next buttons in photo view.',
+ 'details' => 'Those buttons are hidden by default and only visible when the mouse get close to the left/right side of the screen.',
+ 'is_expert' => true,
+ 'is_secret' => true,
+ 'level' => 0,
+ 'order' => 36,
+ ],
+ ];
+ }
+};
\ No newline at end of file
diff --git a/resources/js/components/gallery/photoModule/NextPrevious.vue b/resources/js/components/gallery/photoModule/NextPrevious.vue
index 4639017d520..c222399ebb6 100644
--- a/resources/js/components/gallery/photoModule/NextPrevious.vue
+++ b/resources/js/components/gallery/photoModule/NextPrevious.vue
@@ -4,13 +4,17 @@
:to="photoRoute(props.photoId)"
:id="props.is_next ? 'nextButton' : 'previousButton'"
:class="{
- 'absolute top-1/2 border border-solid border-neutral-200 -mt-5 py-2 px-3 transition-all opacity-0 group-hover:opacity-100 bg-cover': true,
+ 'absolute top-1/2 border border-solid border-neutral-200 dark:border-neutral-700': true,
+ '-mt-5 transition-all opacity-0 group-hover:opacity-100 bg-cover': true,
+ 'py-10.75 px-11': photo_previous_next_size === 'large',
+ 'py-2 px-3': photo_previous_next_size === 'small',
+ 'hover:border-primary-400 fill-neutral-400 hover:fill-primary-400': true,
'-right-px group-hover:translate-x-0 translate-x-full': props.is_next,
'-left-px group-hover:translate-x-0 -translate-x-full': !props.is_next,
}"
:style="props.style"
>
-
+
@@ -18,6 +22,11 @@
import MiniIcon from "@/components/icons/MiniIcon.vue";
import { usePhotoRoute } from "@/composables/photo/photoRoute";
import { useRouter } from "vue-router";
+import { useLycheeStateStore } from "@/stores/LycheeState";
+import { storeToRefs } from "pinia";
+
+const lycheeStateStore = useLycheeStateStore();
+const { photo_previous_next_size } = storeToRefs(lycheeStateStore);
const props = defineProps<{
is_next: boolean;
diff --git a/resources/js/lychee.d.ts b/resources/js/lychee.d.ts
index 19db5edf16e..d7db6829a68 100644
--- a/resources/js/lychee.d.ts
+++ b/resources/js/lychee.d.ts
@@ -95,6 +95,7 @@ declare namespace App.Enum {
export type PhotoThumbInfoType = "title" | "description";
export type SeverityType = "emergency" | "alert" | "critical" | "error" | "warning" | "notice" | "info" | "debug";
export type SizeVariantType = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
+ export type SmallLargeType = "small" | "large";
export type SmartAlbumType = "unsorted" | "starred" | "recent" | "on_this_day";
export type StorageDiskType = "images" | "s3";
export type ThumbAlbumSubtitleType = "description" | "takedate" | "creation" | "oldstyle";
@@ -241,6 +242,7 @@ declare namespace App.Http.Resources.GalleryConfigs {
can_autoplay: boolean;
is_exif_disabled: boolean;
is_favourite_enabled: boolean;
+ photo_previous_next_size: App.Enum.SmallLargeType;
display_thumb_album_overlay: App.Enum.ThumbOverlayVisibilityType;
display_thumb_photo_overlay: App.Enum.ThumbOverlayVisibilityType;
album_subtitle_type: App.Enum.ThumbAlbumSubtitleType;
diff --git a/resources/js/stores/LycheeState.ts b/resources/js/stores/LycheeState.ts
index a499c26e86b..c54979765ff 100644
--- a/resources/js/stores/LycheeState.ts
+++ b/resources/js/stores/LycheeState.ts
@@ -29,6 +29,7 @@ export const useLycheeStateStore = defineStore("lychee-store", {
can_autoplay: false,
is_exif_disabled: false,
is_favourite_enabled: false,
+ photo_previous_next_size: "small" as App.Enum.SmallLargeType,
// keybinding help
show_keybinding_help_popup: false,
@@ -137,6 +138,7 @@ export const useLycheeStateStore = defineStore("lychee-store", {
this.is_small2x_download_enabled = data.is_small2x_download_enabled;
this.is_medium_download_enabled = data.is_medium_download_enabled;
this.is_medium2x_download_enabled = data.is_medium2x_download_enabled;
+ this.photo_previous_next_size = data.photo_previous_next_size;
})
.catch((error) => {
// In this specific case, even though it has been possibly disabled, we really need to see the error.