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.