Fix photo timeline when there are no borders (#2746)

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>

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>

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":

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);