gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-12 18:34:24 +01:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

feat(note_title_details): tooltips for values

Browse Source
This commit is contained in:
Elian Doran 2025-12-10 12:25:38 +02:00
parent 10cb7c8d6a
commit 4031332b98
No known key found for this signature in database
3 changed files with 45 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/client/src/translations/en/translation.json
View File

@ -1750,8 +1750,8 @@
}, },
"note_title": { "note_title": {
"placeholder": "type note's title here...", "placeholder": "type note's title here...",
"created_on": "Created on {{date}}", "created_on": "Created on <Value />",
"last_modified": "Last modified on {{date}}" "last_modified": "Last modified on <Value />"
}, },
"search_result": { "search_result": {
"no_notes_found": "No notes have been found for given search parameters.", "no_notes_found": "No notes have been found for given search parameters.",

46
apps/client/src/widgets/NoteTitleDetails.tsx
View File

@ -2,9 +2,11 @@ import { type ComponentChild } from "preact";
import { t } from "../services/i18n"; import { t } from "../services/i18n";
import { formatDateTime } from "../utils/formatters"; import { formatDateTime } from "../utils/formatters";
import { useNoteContext } from "./react/hooks"; import { useNoteContext, useStaticTooltip } from "./react/hooks";
import { joinElements } from "./react/react_utils"; import { joinElements } from "./react/react_utils";
import { useNoteMetadata } from "./ribbon/NoteInfoTab"; import { useNoteMetadata } from "./ribbon/NoteInfoTab";
import { Trans } from "react-i18next";
import { useRef } from "preact/hooks";
export default function NoteTitleDetails() { export default function NoteTitleDetails() {
const { note } = useNoteContext(); const { note } = useNoteContext();
@ -12,12 +14,18 @@ export default function NoteTitleDetails() {
const isHiddenNote = note?.noteId.startsWith("_"); const isHiddenNote = note?.noteId.startsWith("_");
const items: ComponentChild[] = [ const items: ComponentChild[] = [
(!isHiddenNote && metadata?.dateCreated && <li> (!isHiddenNote && metadata?.dateCreated &&
{t("note_title.created_on", { date: formatDateTime(metadata.dateCreated, "medium", "none")} )} <TextWithValue
</li>), i18nKey="note_title.created_on"
(!isHiddenNote && metadata?.dateModified && <li> value={formatDateTime(metadata.dateCreated, "medium", "none")}
{t("note_title.last_modified", { date: formatDateTime(metadata.dateModified, "medium", "none")} )} valueTooltip={formatDateTime(metadata.dateCreated, "full", "long")}
</li>) />),
(!isHiddenNote && metadata?.dateModified &&
<TextWithValue
i18nKey="note_title.last_modified"
value={formatDateTime(metadata.dateModified, "medium", "none")}
valueTooltip={formatDateTime(metadata.dateModified, "full", "long")}
/>)
].filter(item => !!item); ].filter(item => !!item);
return ( return (
@ -26,3 +34,27 @@ export default function NoteTitleDetails() {
</div> </div>
); );
} }
function TextWithValue({ i18nKey, value, valueTooltip }: {
i18nKey: string;
value: string;
valueTooltip: string;
}) {
const listItemRef = useRef<HTMLLIElement>(null);
useStaticTooltip(listItemRef, {
selector: "span.value",
title: valueTooltip,
popperConfig: { placement: "bottom" }
});
return (
<li ref={listItemRef}>
<Trans
i18nKey={i18nKey}
components={{
Value: <span className="value">{value}</span> as React.ReactElement
}}
/>
</li>
);
}

4
apps/client/src/widgets/note_title.css
View File

@ -51,6 +51,10 @@ body.experimental-feature-new-layout {
margin: 0; margin: 0;
list-style-type: none; list-style-type: none;
margin-bottom: 2em; margin-bottom: 2em;
span.value {
font-weight: 500;
}
} }
.scrolling-container:has(> :is(.note-detail.full-height, .note-list-widget.full-height)) { .scrolling-container:has(> :is(.note-detail.full-height, .note-list-widget.full-height)) {