diff --git a/apps/client/src/widgets/layout/InlineTitle.css b/apps/client/src/widgets/layout/InlineTitle.css index 15820cc62..e97dd3b45 100644 --- a/apps/client/src/widgets/layout/InlineTitle.css +++ b/apps/client/src/widgets/layout/InlineTitle.css @@ -1,12 +1,15 @@ -.component.inline-title-row { +.component.inline-title { contain: none; } -.inline-title-row { +.inline-title { padding-bottom: 2em; padding-inline-start: 24px; - display: flex; - align-items: center; + + & > .inline-title-row { + display: flex; + align-items: center; + } &.hidden { display: none !important; diff --git a/apps/client/src/widgets/layout/InlineTitle.tsx b/apps/client/src/widgets/layout/InlineTitle.tsx index e22ef07ee..b32e5e386 100644 --- a/apps/client/src/widgets/layout/InlineTitle.tsx +++ b/apps/client/src/widgets/layout/InlineTitle.tsx @@ -6,7 +6,12 @@ import { useEffect, useRef, useState } from "preact/hooks"; import FNote from "../../entities/fnote"; import NoteIcon from "../note_icon"; import NoteTitleWidget from "../note_title"; -import { useNoteContext } from "../react/hooks"; +import { useNoteContext, useStaticTooltip } from "../react/hooks"; +import { ComponentChild } from "preact"; +import { joinElements } from "../react/react_utils"; +import { useNoteMetadata } from "../ribbon/NoteInfoTab"; +import { formatDateTime } from "../../utils/formatters"; +import { Trans } from "react-i18next"; export default function InlineTitle() { const { note, parentComponent } = useNoteContext(); @@ -41,10 +46,14 @@ export default function InlineTitle() { return (
- - +
+ + +
+ +
); } @@ -53,3 +62,55 @@ function shouldShow(note: FNote | null | undefined) { if (!note) return false; return note.type === "text"; } + +export function NoteTitleDetails() { + const { note, noteContext } = useNoteContext(); + const { metadata } = useNoteMetadata(note); + const isHiddenNote = note?.noteId.startsWith("_"); + const isDefaultView = noteContext?.viewScope?.viewMode === "default"; + + const items: ComponentChild[] = [ + (isDefaultView && !isHiddenNote && metadata?.dateCreated && + ), + (isDefaultView && !isHiddenNote && metadata?.dateModified && + ) + ].filter(item => !!item); + + return items.length && ( +
+ {joinElements(items, " • ")} +
+ ); +} + +function TextWithValue({ i18nKey, value, valueTooltip }: { + i18nKey: string; + value: string; + valueTooltip: string; +}) { + const listItemRef = useRef(null); + useStaticTooltip(listItemRef, { + selector: "span.value", + title: valueTooltip, + popperConfig: { placement: "bottom" } + }); + + return ( +
  • + {value} as React.ReactElement + }} + /> +
  • + ); +}