Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-05-06 22:35:59 +02:00
Code Issues Packages Projects Releases Activity

feat(revisions): relocate the description

Browse Source
This commit is contained in:
Elian Doran
2026-04-18 17:17:02 +03:00
parent bd30e9efc1
commit fb5520a3c5
2 changed files with 49 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/client/src/widgets/dialogs/revisions.css
View File

@@ -177,6 +177,11 @@ body.desktop .revisions-dialog {
}
.revision-description-icon {
opacity: 0.5;
flex-shrink: 0;
}
.revision-description-editor {
display: flex;
gap: 5px;

82
apps/client/src/widgets/dialogs/revisions.tsx
View File

@@ -116,20 +116,21 @@ export default function RevisionsDialog() {
setRefreshCounter(c => c + 1);
setCurrentRevision(undefined);
}}
onDescriptionUpdated={(revisionId, description) => {
setRevisions(prev => prev?.map(r =>
r.revisionId === revisionId ? { ...r, description } : r
));
if (currentRevision?.revisionId === revisionId) {
setCurrentRevision({ ...currentRevision, description });
}
}}
/>
<div className="revision-content-wrapper">
<RevisionPreview
noteContent={noteContent}
revisionItem={currentRevision}
showDiff={showDiff}
onDescriptionUpdated={(revisionId, description) => {
setRevisions(prev => prev?.map(r =>
r.revisionId === revisionId ? { ...r, description } : r
));
if (currentRevision?.revisionId === revisionId) {
setCurrentRevision({ ...currentRevision, description });
}
}} />
/>
</div>
</Modal>
);
@@ -301,15 +302,22 @@ function RevisionsList({ revisions, onSelect, currentRevision }: { revisions: Re
</FormList>);
}
function RevisionToolbar({ revisionItem, showDiff, setShowDiff, setShown, onRevisionDeleted }: {
function RevisionToolbar({ revisionItem, showDiff, setShowDiff, setShown, onRevisionDeleted, onDescriptionUpdated }: {
revisionItem?: RevisionItem,
showDiff: boolean,
setShowDiff: Dispatch<StateUpdater<boolean>>,
setShown: Dispatch<StateUpdater<boolean>>,
onRevisionDeleted?: () => void,
onDescriptionUpdated?: (revisionId: string, description: string) => void,
}) {
const canShowDiff = ["text", "code", "mermaid"].includes(revisionItem?.type ?? "");
const canInteract = revisionItem && (!revisionItem.isProtected || protected_session_holder.isProtectedSessionAvailable());
const [ editingDescription, setEditingDescription ] = useState(false);
const [ descriptionDraft, setDescriptionDraft ] = useState("");
useEffect(() => {
setEditingDescription(false);
}, [revisionItem]);
return (
<div className="revision-toolbar">
@@ -359,35 +367,6 @@ function RevisionToolbar({ revisionItem, showDiff, setShowDiff, setShown, onRevi
)}
</div>
)}
</div>
);
}
function RevisionPreview({noteContent, revisionItem, showDiff, onDescriptionUpdated }: {
noteContent?: string,
revisionItem?: RevisionItem,
showDiff: boolean,
onDescriptionUpdated?: (revisionId: string, description: string) => void
}) {
const [ fullRevision, setFullRevision ] = useState<RevisionPojo>();
const [ editingDescription, setEditingDescription ] = useState(false);
const [ descriptionDraft, setDescriptionDraft ] = useState("");
useEffect(() => {
if (revisionItem) {
server.get<RevisionPojo>(`revisions/${revisionItem.revisionId}`).then(setFullRevision);
} else {
setFullRevision(undefined);
}
setEditingDescription(false);
}, [revisionItem]);
return (
<div
className={clsx("revision-content use-tn-links selectable-text", `type-${revisionItem?.type}`)}
style={{ wordBreak: "break-word" }}
>
<h3 className="revision-title">{revisionItem?.title ?? t("revisions.no_revisions")}</h3>
{revisionItem && (
<RevisionDescription
revisionItem={revisionItem}
@@ -407,6 +386,31 @@ function RevisionPreview({noteContent, revisionItem, showDiff, onDescriptionUpda
onCancel={() => setEditingDescription(false)}
/>
)}
</div>
);
}
function RevisionPreview({noteContent, revisionItem, showDiff }: {
noteContent?: string,
revisionItem?: RevisionItem,
showDiff: boolean,
}) {
const [ fullRevision, setFullRevision ] = useState<RevisionPojo>();
useEffect(() => {
if (revisionItem) {
server.get<RevisionPojo>(`revisions/${revisionItem.revisionId}`).then(setFullRevision);
} else {
setFullRevision(undefined);
}
}, [revisionItem]);
return (
<div
className={clsx("revision-content use-tn-links selectable-text", `type-${revisionItem?.type}`)}
style={{ wordBreak: "break-word" }}
>
<h3 className="revision-title">{revisionItem?.title ?? t("revisions.no_revisions")}</h3>
<RevisionContent noteContent={noteContent} revisionItem={revisionItem} fullRevision={fullRevision} showDiff={showDiff}/>
</div>
);
@@ -424,6 +428,7 @@ function RevisionDescription({ revisionItem, editing, draft, onEdit, onDraftChan
if (editing) {
return (
<div className="revision-description-editor">
<span className="bx bx-purchase-tag revision-description-icon" />
<input
type="text"
className="form-control form-control-sm"
@@ -445,6 +450,7 @@ function RevisionDescription({ revisionItem, editing, draft, onEdit, onDraftChan
return (
<div className="revision-description-display">
<span className="bx bx-purchase-tag revision-description-icon" />
<span className={clsx("revision-description-text", { empty: !revisionItem.description })}>
{revisionItem.description || t("revisions.description_placeholder")}
</span>