From 23a900a23577dc2bd3e8e6be02f49856b491c099 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Beno=C3=AEt=20Viguier?= <ildyria@users.noreply.github.com>
Date: Wed, 27 Nov 2024 16:11:43 +0100
Subject: [PATCH] Fix photo timeline when there are no borders (#2746)

---
 .../js/components/gallery/PhotoThumbPanel.vue  | 18 ++++++++++++++++++
 .../components/gallery/PhotoThumbPanelList.vue | 13 +++++++++++--
 resources/js/layouts/PhotoLayout.ts            |  9 +++++++--
 resources/js/layouts/useJustify.ts             |  9 ++++++---
 4 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/gallery/PhotoThumbPanel.vue b/resources/js/components/gallery/PhotoThumbPanel.vue
index 9739d22fa7b..5b14eeb1ef6 100644
--- a/resources/js/components/gallery/PhotoThumbPanel.vue
+++ b/resources/js/components/gallery/PhotoThumbPanel.vue
@@ -34,6 +34,24 @@
 					</div>
 				</template>
 			</Timeline>
+			<div v-else>
+				<template v-for="photoTimeline in photosTimeLine">
+					<div class="flex flex-wrap flex-row flex-shrink w-full justify-start gap-1 sm:gap-2 md:gap-4 pb-8">
+						<div class="w-full text-left font-semibold text-muted-color-emphasis text-lg">{{ photoTimeline.header }}</div>
+						<PhotoThumbPanelList
+							:photos="photoTimeline.data"
+							:layout="layout"
+							:album="props.album"
+							:galleryConfig="props.galleryConfig"
+							:selectedPhotos="props.selectedPhotos"
+							:iter="photoTimeline.iter"
+							:isTimeline="isTimeline"
+							@clicked="propagateClicked"
+							@contexted="propagateMenuOpen"
+						/>
+					</div>
+				</template>
+			</div>
 		</template>
 	</Panel>
 </template>
diff --git a/resources/js/components/gallery/PhotoThumbPanelList.vue b/resources/js/components/gallery/PhotoThumbPanelList.vue
index 00321c4f383..1204913637c 100644
--- a/resources/js/components/gallery/PhotoThumbPanelList.vue
+++ b/resources/js/components/gallery/PhotoThumbPanelList.vue
@@ -13,9 +13,11 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { useLayouts } from "@/layouts/PhotoLayout";
+import { useLayouts, type TimelineData } from "@/layouts/PhotoLayout";
 import { onMounted, onUpdated, Ref } from "vue";
 import PhotoThumb from "./thumbs/PhotoThumb.vue";
+import { useLycheeStateStore } from "@/stores/LycheeState";
+import { storeToRefs } from "pinia";
 
 const props = defineProps<{
 	photos: { [key: number]: App.Http.Resources.Models.PhotoResource };
@@ -29,8 +31,15 @@ const props = defineProps<{
 	iter: number;
 }>();
 
+const lycheeStore = useLycheeStateStore();
 const layout = defineModel("layout") as Ref<App.Enum.PhotoLayoutType>;
 const isTimeline = defineModel("isTimeline") as Ref<boolean>;
+const { is_timeline_left_border_visible } = storeToRefs(lycheeStore);
+
+const timelineData: TimelineData = {
+	isTimeline: isTimeline,
+	isLeftBorderVisible: is_timeline_left_border_visible,
+};
 
 const emits = defineEmits<{
 	clicked: [idx: number, event: MouseEvent];
@@ -40,7 +49,7 @@ const maySelect = (idx: number, e: MouseEvent) => emits("clicked", idx, e);
 const menuOpen = (idx: number, e: MouseEvent) => emits("contexted", idx, e);
 
 // Layouts stuff
-const { activateLayout } = useLayouts(props.galleryConfig, layout, isTimeline, "photoListing" + props.iter);
+const { activateLayout } = useLayouts(props.galleryConfig, layout, timelineData, "photoListing" + props.iter);
 onMounted(() => activateLayout());
 onUpdated(() => activateLayout());
 </script>
diff --git a/resources/js/layouts/PhotoLayout.ts b/resources/js/layouts/PhotoLayout.ts
index 756103a6ccd..2e4e9603c18 100644
--- a/resources/js/layouts/PhotoLayout.ts
+++ b/resources/js/layouts/PhotoLayout.ts
@@ -5,10 +5,15 @@ import { useMasonry } from "./useMasonry";
 import { useGrid } from "./useGrid";
 import AlbumService from "@/services/album-service";
 
+export type TimelineData = {
+	isTimeline: Ref<boolean>;
+	isLeftBorderVisible: Ref<boolean>;
+};
+
 export function useLayouts(
 	config: App.Http.Resources.GalleryConfigs.PhotoLayoutConfig,
 	layout: Ref<App.Enum.PhotoLayoutType>,
-	isTimeline: Ref<boolean>,
+	timelineData: TimelineData,
 	elemId: string = "photoListing",
 ) {
 	const configRef = ref(config);
@@ -25,7 +30,7 @@ export function useLayouts(
 				return useSquare(photoListing, configRef.value.photo_layout_square_column_width, configRef.value.photo_layout_gap);
 			case "justified":
 			case "unjustified":
-				return useJustify(photoListing, configRef.value.photo_layout_justified_row_height, isTimeline.value);
+				return useJustify(photoListing, configRef.value.photo_layout_justified_row_height, timelineData);
 			case "masonry":
 				return useMasonry(photoListing, configRef.value.photo_layout_masonry_column_width, configRef.value.photo_layout_gap);
 			case "grid":
diff --git a/resources/js/layouts/useJustify.ts b/resources/js/layouts/useJustify.ts
index e59e6a13374..8f1ebb006c1 100644
--- a/resources/js/layouts/useJustify.ts
+++ b/resources/js/layouts/useJustify.ts
@@ -1,13 +1,16 @@
+import { TimelineData } from "./PhotoLayout";
 import { ChildNodeWithDataStyle } from "./types";
 import createJustifiedLayout from "justified-layout";
 
-export function useJustify(el: HTMLElement, photoDefaultHeight: number = 320, isTimeline: boolean) {
+export function useJustify(el: HTMLElement, photoDefaultHeight: number = 320, timelineData: TimelineData) {
 	const baseElem = document.getElementById("lychee_view_content");
 	if (!baseElem) {
 		return;
 	}
-	const containerDefaultWidth = parseInt(getComputedStyle(baseElem).width) - 86;
-	const containerWidth = isTimeline ? Math.min(parseInt(getComputedStyle(el).width), containerDefaultWidth) : parseInt(getComputedStyle(el).width);
+	const containerDefaultWidth = parseInt(getComputedStyle(baseElem).width) - 36 - (timelineData.isLeftBorderVisible ? 50 : 0);
+	const containerWidth = timelineData.isTimeline
+		? Math.min(parseInt(getComputedStyle(el).width), containerDefaultWidth)
+		: parseInt(getComputedStyle(el).width);
 
 	// @ts-expect-error
 	const justifiedItems: ChildNodeWithDataStyle[] = [...el.childNodes].filter((gridItem) => gridItem.nodeType === 1);