Skip to content

Commit 823d0d0

Browse files
ildyriaildyria
committed
more UI/UX fixes
1 parent 0f05b74 commit 823d0d0

File tree

3 files changed

+63
-12
lines changed

3 files changed

+63
-12
lines changed

‎resources/js/components/gallery/albumModule/AlbumPanel.vue‎

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -234,29 +234,52 @@ const albumPanelConfig = computed<AlbumThumbConfig>(() => ({
234234
const photoCallbacks = {
235235
star: () => {
236236
PhotoService.star(selectedPhotosIds.value, true);
237+
// Update the photos in the store immediately to reflect the change
238+
selectedPhotosIds.value.forEach((photoId) => {
239+
const photo = photosStore.photos.find((p) => p.id === photoId);
240+
if (photo) {
241+
photo.is_starred = true;
242+
}
243+
});
237244
AlbumService.clearCache(albumStore.album?.id);
238-
emits("refresh");
239245
},
240246
unstar: () => {
241247
PhotoService.star(selectedPhotosIds.value, false);
248+
// Update the photos in the store immediately to reflect the change
249+
selectedPhotosIds.value.forEach((photoId) => {
250+
const photo = photosStore.photos.find((p) => p.id === photoId);
251+
if (photo) {
252+
photo.is_starred = false;
253+
}
254+
});
242255
AlbumService.clearCache(albumStore.album?.id);
243-
emits("refresh");
244256
},
245257
setAsCover: () => {
246258
if (albumStore.album === undefined) return;
247259
PhotoService.setAsCover(selectedPhoto.value!.id, albumStore.album.id);
248-
// Update the album's cover_id immediately to reflect the change
260+
// Update the album's cover_id immediately to reflect the change (toggle behavior)
249261
if (albumStore.modelAlbum !== undefined) {
250-
albumStore.modelAlbum.cover_id = selectedPhoto.value!.id;
262+
albumStore.modelAlbum.cover_id = albumStore.modelAlbum.cover_id === selectedPhoto.value!.id ? null : selectedPhoto.value!.id;
251263
}
252264
AlbumService.clearCache(albumStore.album.id);
253265
},
254266
setAsHeader: () => {
255267
if (albumStore.album === undefined) return;
256268
PhotoService.setAsHeader(selectedPhoto.value!.id, albumStore.album.id, false);
257-
// Update the album's header_id immediately to reflect the change
269+
// Update the album's header_id immediately to reflect the change (toggle behavior)
270+
const isToggleOff = albumStore.modelAlbum?.header_id === selectedPhoto.value!.id;
258271
if (albumStore.modelAlbum !== undefined) {
259-
albumStore.modelAlbum.header_id = selectedPhoto.value!.id;
272+
albumStore.modelAlbum.header_id = isToggleOff ? null : selectedPhoto.value!.id;
273+
}
274+
// Update the header image URL in the album's preFormattedData
275+
if (albumStore.album.preFormattedData) {
276+
if (isToggleOff) {
277+
albumStore.album.preFormattedData.url = null;
278+
} else {
279+
// Use medium or small variant for the header image
280+
const headerUrl = selectedPhoto.value!.size_variants.medium?.url ?? selectedPhoto.value!.size_variants.small?.url ?? null;
281+
albumStore.album.preFormattedData.url = headerUrl;
282+
}
260283
}
261284
AlbumService.clearCache(albumStore.album.id);
262285
},
@@ -289,6 +312,11 @@ const albumCallbacks = {
289312
if (albumStore.album === undefined) return;
290313
if (selectedAlbum.value?.thumb?.id === undefined) return;
291314
PhotoService.setAsCover(selectedAlbum.value!.thumb?.id, albumStore.album.id);
315+
// Update the album's cover_id immediately to reflect the change (toggle behavior)
316+
if (albumStore.modelAlbum !== undefined) {
317+
albumStore.modelAlbum.cover_id =
318+
albumStore.modelAlbum.cover_id === selectedAlbum.value!.thumb?.id ? null : selectedAlbum.value!.thumb?.id;
319+
}
292320
AlbumService.clearCache(albumStore.album.id);
293321
emits("refresh");
294322
},

‎resources/js/composables/album/photoActions.ts‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,21 @@ export function usePhotoActions(photoStore: PhotoStore, albumId: Ref<string | un
6666
}
6767

6868
PhotoService.setAsHeader(photoStore.photo.id, albumId.value, false).then(() => {
69-
// Update the album's header_id to reflect the change
69+
// Update the album's header_id to reflect the change (toggle behavior)
70+
const isToggleOff = albumStore.modelAlbum?.header_id === photoStore.photo!.id;
7071
if (albumStore.modelAlbum !== undefined) {
71-
albumStore.modelAlbum.header_id = photoStore.photo!.id;
72+
albumStore.modelAlbum.header_id = isToggleOff ? null : photoStore.photo!.id;
73+
}
74+
75+
// Update the header image URL in the album's preFormattedData
76+
if (albumStore.album?.preFormattedData) {
77+
if (isToggleOff) {
78+
albumStore.album.preFormattedData.url = null;
79+
} else {
80+
// Use medium or small variant for the header image
81+
const headerUrl = photoStore.photo!.size_variants.medium?.url ?? photoStore.photo!.size_variants.small?.url ?? null;
82+
albumStore.album.preFormattedData.url = headerUrl;
83+
}
7284
}
7385

7486
toast.add({ severity: "success", summary: trans("toasts.success"), detail: trans("gallery.photo.actions.header_set"), life: 2000 });

‎resources/js/views/gallery-panels/Search.vue‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -278,9 +278,9 @@ const photoCallbacks = {
278278
return;
279279
}
280280
PhotoService.setAsCover(selectedPhoto.value!.id, albumId.value);
281-
// Update the album's cover_id immediately to reflect the change
281+
// Update the album's cover_id immediately to reflect the change (toggle behavior)
282282
if (albumStore.modelAlbum !== undefined) {
283-
albumStore.modelAlbum.cover_id = selectedPhoto.value!.id;
283+
albumStore.modelAlbum.cover_id = albumStore.modelAlbum.cover_id === selectedPhoto.value!.id ? null : selectedPhoto.value!.id;
284284
}
285285
AlbumService.clearCache(albumId.value);
286286
// refresh();
@@ -290,9 +290,20 @@ const photoCallbacks = {
290290
return;
291291
}
292292
PhotoService.setAsHeader(selectedPhoto.value!.id, albumId.value, false);
293-
// Update the album's header_id immediately to reflect the change
293+
// Update the album's header_id immediately to reflect the change (toggle behavior)
294+
const isToggleOff = albumStore.modelAlbum?.header_id === selectedPhoto.value!.id;
294295
if (albumStore.modelAlbum !== undefined) {
295-
albumStore.modelAlbum.header_id = selectedPhoto.value!.id;
296+
albumStore.modelAlbum.header_id = isToggleOff ? null : selectedPhoto.value!.id;
297+
}
298+
// Update the header image URL in the album's preFormattedData
299+
if (albumStore.album?.preFormattedData) {
300+
if (isToggleOff) {
301+
albumStore.album.preFormattedData.url = null;
302+
} else {
303+
// Use medium or small variant for the header image
304+
const headerUrl = selectedPhoto.value!.size_variants.medium?.url ?? selectedPhoto.value!.size_variants.small?.url ?? null;
305+
albumStore.album.preFormattedData.url = headerUrl;
306+
}
296307
}
297308
AlbumService.clearCache(albumId.value);
298309
// refresh();

0 commit comments

Comments
 (0)