add scroll to top element when pressing the 'i' or clicking on detail…

…s in albums
LycheeOrg · Dec 27, 2024 · 282e049 · 282e049
1 parent 148ec74
commit 282e049
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/resources/js/components/headers/AlbumHeader.vue b/resources/js/components/headers/AlbumHeader.vue
@@ -86,7 +86,6 @@ const props = defineProps<{
 	user: App.Http.Resources.Models.UserResource;
 }>();
 
-const toggleDetails = () => (are_details_open.value = !are_details_open.value);
 const togglableStore = useTogglablesStateStore();
 const lycheeStore = useLycheeStateStore();
 lycheeStore.init();
@@ -101,6 +100,7 @@ const { toggleCreateAlbum, isImportFromLinkOpen, toggleImportFromLink, isImportF
 const emits = defineEmits<{
 	refresh: [];
 	toggleSlideShow: [];
+	toggleDetails: [];
 }>();
 
 function toggleUploadTrack() {
@@ -111,6 +111,13 @@ function toggleSlideShow() {
 	emits("toggleSlideShow");
 }
 
+function toggleDetails() {
+	are_details_open.value = !are_details_open.value;
+	if (are_details_open.value) {
+		emits("toggleDetails");
+	}
+}
+
 function uploadTrack(e: Event) {
 	const target: HTMLInputElement = e.target as HTMLInputElement;
 	if (target.files === null) {

diff --git a/resources/js/composables/album/scrollable.ts b/resources/js/composables/album/scrollable.ts
@@ -21,8 +21,14 @@ export function useScrollable(toggleableStore: TogglablesStateStore, path: Ref<s
 		}
 	}
 
+	function scrollToTop() {
+		const e = document.getElementById("galleryView") as HTMLElement;
+		e.scrollTop = 0;
+	}
+
 	return {
 		onScroll,
 		setScroll,
+		scrollToTop,
 	};
 }
diff --git a/resources/js/views/gallery-panels/Album.vue b/resources/js/views/gallery-panels/Album.vue
@@ -14,6 +14,7 @@
 				:user="user"
 				@refresh="refresh"
 				@toggle-slide-show="toggleSlideShow"
+				@toggle-details="toggleDetails"
 			/>
 		</Collapse>
 		<Unlock :albumid="albumid" :visible="isPasswordProtected" @reload="refresh" @fail="is_login_open = true" />
@@ -232,7 +233,7 @@ const lycheeStore = useLycheeStateStore();
 lycheeStore.init();
 togglableStore.resetSearch();
 
-const { onScroll, setScroll } = useScrollable(togglableStore, albumid);
+const { onScroll, setScroll, scrollToTop } = useScrollable(togglableStore, albumid);
 const { is_full_screen, is_login_open, is_slideshow_active, is_upload_visible, list_upload_files } = storeToRefs(togglableStore);
 const { are_nsfw_visible, nsfw_consented, is_se_enabled } = storeToRefs(lycheeStore);
 
@@ -287,6 +288,10 @@ function toggleStatistics() {
 	}
 }
 
+function toggleDetails() {
+	scrollToTop();
+}
+
 const {
 	selectedPhotosIdx,
 	selectedAlbumsIdx,