feat(gallery): add empty gallery message and update translations

This commit is contained in:
lzinga 2025-12-30 07:55:03 -08:00
parent 0e492cd45f
commit 0f7a8e8dcd
5 changed files with 28 additions and 2 deletions

View File

@ -2282,6 +2282,7 @@
"drop_images_here": "Drop Images Here",
"back_to_parent": "Back To Parent",
"image_count": "{{count}} image",
"image_count_other": "{{count}} images"
"image_count_other": "{{count}} images",
"empty_gallery": "This gallery is empty. Upload images to make them appear."
}
}

View File

@ -223,3 +223,18 @@
font-size: 0.85em;
opacity: 0.7;
}
.gallery-empty-help {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 48px 24px;
margin: 24px;
border-radius: 8px;
background-color: var(--accented-background-color);
border: 2px dashed var(--main-border-color);
color: var(--muted-text-color);
font-size: 14px;
}

View File

@ -15,6 +15,7 @@ import server from "../../../services/server";
import toast from "../../../services/toast";
import tree from "../../../services/tree";
import ActionButton from "../../react/ActionButton";
import Alert from "../../react/Alert";
import { FormFileUploadActionButton } from "../../react/FormFileUpload";
import type { ViewModeProps } from "../interface";
import { useFilteredNoteIds } from "../legacy/utils";
@ -232,6 +233,8 @@ export default function GalleryView({ note, noteIds: unfilteredNoteIds }: ViewMo
}
};
const isEmpty = sortedNotes.length === 0;
return (
<div class="note-list gallery-view">
<GalleryToolbar
@ -247,6 +250,12 @@ export default function GalleryView({ note, noteIds: unfilteredNoteIds }: ViewMo
onDeleteSelected={handleDeleteSelected}
/>
{isEmpty && (
<Alert type="info" className="gallery-empty-help">
{t("gallery.empty_gallery")}
</Alert>
)}
<div class="note-list-wrapper">
<div class="gallery-container">
{displayedNotes.map(childNote => (

View File

@ -9,7 +9,7 @@ import { useNoteLabelWithDefault, useTriliumEvent } from "../react/hooks";
import RawHtml from "../react/RawHtml";
import { TypeWidgetProps } from "./type_widget";
const VIEW_TYPES: ViewTypeOptions[] = [ "list", "grid", "gallery", "presentation" ];
const VIEW_TYPES: ViewTypeOptions[] = [ "list", "grid", "presentation" ];
export default function Book({ note }: TypeWidgetProps) {
const [ viewType ] = useNoteLabelWithDefault(note, "viewType", "grid");

View File

@ -410,6 +410,7 @@
"list-view": "List View",
"grid-view": "Grid View",
"calendar": "Calendar",
"gallery": "Gallery",
"table": "Table",
"geo-map": "Geo Map",
"start-date": "Start Date",