Add option to hide photo action dock instead of transparency

Author: ildyria

app/Http/Resources/GalleryConfigs/InitConfig.php

@@ -47,6 +47,8 @@ class InitConfig extends Data
 	public bool $is_favourite_enabled;
 	public SmallLargeType $photo_previous_next_size;
 	public bool $is_details_links_enabled;
+	public bool $is_desktop_dock_full_transparency_enabled;
+	public bool $is_mobile_dock_full_transparency_enabled;
 
 	// Thumbs configuration
 	public ThumbOverlayVisibilityType $display_thumb_album_overlay;
@@ -130,6 +132,8 @@ public function __construct()
 		if (Configs::getValueAsBool('details_links_enabled')) {
 			$this->is_details_links_enabled = !Auth::guest() || Configs::getValueAsBool('details_links_public');
 		}
+		$this->is_desktop_dock_full_transparency_enabled = Configs::getValueAsBool('desktop_dock_full_transparency_enabled');
+		$this->is_mobile_dock_full_transparency_enabled = Configs::getValueAsBool('mobile_dock_full_transparency_enabled');
 
 		// Thumbs configuration
 		$this->display_thumb_album_overlay = Configs::getValueAsEnum('display_thumb_album_overlay', ThumbOverlayVisibilityType::class);

database/migrations/2025_11_15_092400_optional_dock_transparency.php

@@ -0,0 +1,48 @@
+<?php
+
+/**
+ * SPDX-License-Identifier: MIT
+ * Copyright (c) 2017-2018 Tobias Reich
+ * Copyright (c) 2018-2025 LycheeOrg.
+ */
+
+use App\Models\Extensions\BaseConfigMigration;
+
+return new class() extends BaseConfigMigration {
+	public const MOD_GALLERY = 'Gallery';
+
+	/**
+	 * @return array<int,array{key:string,value:string,is_secret:bool,cat:string,type_range:string,description:string,order?:int,not_on_docker?:bool,is_expert?:bool}>
+	 */
+	public function getConfigs(): array
+	{
+		return [
+			[
+				'key' => 'desktop_dock_full_transparency_enabled',
+				'value' => '0',
+				'cat' => self::MOD_GALLERY,
+				'type_range' => self::BOOL,
+				'description' => 'Enable dock full transparency for desktop.',
+				'details' => 'On the photo view, actions on top of the page are slightly transparent. Enable this to have them fully transparent and only appear on hover.',
+				'is_secret' => false,
+				'is_expert' => true,
+				'order' => 40,
+				'not_on_docker' => false,
+				'level' => 0,
+			],
+			[
+				'key' => 'mobile_dock_full_transparency_enabled',
+				'value' => '0',
+				'cat' => self::MOD_GALLERY,
+				'type_range' => self::BOOL,
+				'description' => 'Enable dock transparency for mobile.',
+				'details' => '<span class="pi pi-exclamation-triangle text-orange-500"></span> This will impact usability on mobile. On the photo view, actions on top of the page are slightly transparent. Enable this to have them fully transparent and only appear on tap.',
+				'is_secret' => false,
+				'is_expert' => true,
+				'order' => 41,
+				'not_on_docker' => false,
+				'level' => 0,
+			],
+		];
+	}
+};

resources/js/components/gallery/photoModule/Dock.vue

@@ -3,8 +3,12 @@
 		v-if="photoStore.photo"
 		:class="{
 			'absolute top-0 w-full sm:w-1/2 left-1/2 -translate-x-1/2': true,
-			'opacity-50 lg:opacity-20 lg:hover:opacity-100 transition-opacity duration-500 ease-in-out': !isTouchDevice(),
-			'opacity-75': isTouchDevice(),
+			'lg:hover:opacity-100 transition-opacity duration-500 ease-in-out': !isTouchDevice(),
+			'opacity-50 lg:opacity-20': !isTouchDevice() && !lycheeStore.is_desktop_dock_full_transparency_enabled,
+			'opacity-75': isTouchDevice() && !lycheeStore.is_mobile_dock_full_transparency_enabled,
+			'opacity-0':
+				(!isTouchDevice() && lycheeStore.is_desktop_dock_full_transparency_enabled) ||
+				(isTouchDevice() && lycheeStore.is_mobile_dock_full_transparency_enabled),
 			'z-20 mt-14 sm:mt-0': true,
 			'sm:h-1/4': !props.isNarrowMenu,
 			'h-14': props.isNarrowMenu,

resources/js/lychee.d.ts

@@ -256,14 +256,7 @@ declare namespace App.Http.Resources.Editable {
 }
 declare namespace App.Http.Resources.Embed {
 	export type EmbedAlbumResource = {
-		album: {
-			id: string;
-			title: string;
-			description: string | null;
-			photo_count: number;
-			copyright: string | null;
-			license: string | null;
-		};
+		album: { [key: string]: any };
 		photos: App.Http.Resources.Embed.EmbedPhotoResource[];
 	};
 	export type EmbedPhotoResource = {
@@ -273,6 +266,10 @@ declare namespace App.Http.Resources.Embed {
 		size_variants: App.Http.Resources.Models.SizeVariantsResouce;
 		exif: { [key: string]: string | null };
 	};
+	export type EmbedStreamResource = {
+		site_title: string;
+		photos: App.Http.Resources.Embed.EmbedPhotoResource[];
+	};
 }
 declare namespace App.Http.Resources.Flow {
 	export type FlowItemResource = {
@@ -360,6 +357,8 @@ declare namespace App.Http.Resources.GalleryConfigs {
 		is_favourite_enabled: boolean;
 		photo_previous_next_size: App.Enum.SmallLargeType;
 		is_details_links_enabled: boolean;
+		is_desktop_dock_full_transparency_enabled: boolean;
+		is_mobile_dock_full_transparency_enabled: boolean;
 		display_thumb_album_overlay: App.Enum.ThumbOverlayVisibilityType;
 		display_thumb_photo_overlay: App.Enum.ThumbOverlayVisibilityType;
 		album_subtitle_type: App.Enum.ThumbAlbumSubtitleType;

resources/js/stores/LycheeState.ts

@@ -30,6 +30,8 @@ export const useLycheeStateStore = defineStore("lychee-store", {
 		is_favourite_enabled: false,
 		photo_previous_next_size: "small" as App.Enum.SmallLargeType,
 		is_details_links_enabled: false,
+		is_desktop_dock_full_transparency_enabled: false,
+		is_mobile_dock_full_transparency_enabled: false,
 
 		// keybinding help
 		show_keybinding_help_popup: false,
@@ -156,6 +158,8 @@ export const useLycheeStateStore = defineStore("lychee-store", {
 					this.is_medium2x_download_enabled = data.is_medium2x_download_enabled;
 					this.photo_previous_next_size = data.photo_previous_next_size;
 					this.is_details_links_enabled = data.is_details_links_enabled;
+					this.is_desktop_dock_full_transparency_enabled = data.is_desktop_dock_full_transparency_enabled;
+					this.is_mobile_dock_full_transparency_enabled = data.is_mobile_dock_full_transparency_enabled;
 
 					this.is_registration_enabled = data.is_registration_enabled;