feat(layout): integrate copy reference to clipboard button

This commit is contained in:
Elian Doran 2025-12-14 22:50:26 +02:00
parent 09c7affc16
commit 19709f749a
No known key found for this signature in database
2 changed files with 29 additions and 12 deletions

View File

@ -29,10 +29,10 @@ import NoteActionsCustom from "./NoteActionsCustom";
const isNewLayout = isExperimentalFeatureEnabled("new-layout");
export default function NoteActions() {
const { note, noteContext } = useNoteContext();
const { note, ntxId, noteContext } = useNoteContext();
return (
<div className="ribbon-button-container" style={{ contain: "none" }}>
{note && <NoteActionsCustom note={note} />}
{note && <NoteActionsCustom note={note} ntxId={ntxId} />}
<MovePaneButton direction="left" />
<MovePaneButton direction="right" />
<ClosePaneButton />

View File

@ -1,24 +1,28 @@
import { useContext } from "preact/hooks";
import FNote from "../../entities/fnote";
import { t } from "../../services/i18n";
import { downloadFileNote, openNoteExternally } from "../../services/open";
import protected_session_holder from "../../services/protected_session_holder";
import ActionButton from "../react/ActionButton";
import { FormFileUploadActionButton } from "../react/FormFileUpload";
import { ParentComponent } from "../react/react_utils";
import { buildUploadNewFileRevisionListener } from "./FilePropertiesTab";
import { buildUploadNewImageRevisionListener } from "./ImagePropertiesTab";
interface NoteActionsCustomProps {
note: FNote;
ntxId: string;
}
/**
* Part of {@link NoteActions} on the new layout, but are rendered with a slight spacing
* from the rest of the note items and the buttons differ based on the note type.
*/
export default function NoteActionsCustom({ note }: NoteActionsCustomProps) {
export default function NoteActionsCustom(props: NoteActionsCustomProps) {
return (
<div className="note-actions-custom">
<NoteActionsCustomInner note={note} />
<NoteActionsCustomInner {...props} />
</div>
);
}
@ -33,22 +37,23 @@ function NoteActionsCustomInner(props: NoteActionsCustomProps) {
}
}
function FileActions({ note }: NoteActionsCustomProps) {
function FileActions(props: NoteActionsCustomProps) {
return (
<>
<UploadNewRevisionButton note={note} onChange={buildUploadNewFileRevisionListener(note)} />
<OpenExternallyButton note={note} />
<DownloadFileButton note={note} />
<UploadNewRevisionButton {...props} onChange={buildUploadNewFileRevisionListener(props.note)} />
<OpenExternallyButton {...props} />
<DownloadFileButton {...props} />
</>
);
}
function ImageActions({ note }: NoteActionsCustomProps) {
function ImageActions(props: NoteActionsCustomProps) {
return (
<>
<UploadNewRevisionButton note={note} onChange={buildUploadNewImageRevisionListener(note)} />
<OpenExternallyButton note={note} />
<DownloadFileButton note={note} />
<CopyReferenceToClipboardButton {...props} />
<UploadNewRevisionButton {...props} onChange={buildUploadNewImageRevisionListener(props.note)} />
<OpenExternallyButton {...props} />
<DownloadFileButton {...props} />
</>
);
}
@ -93,4 +98,16 @@ function DownloadFileButton({ note }: NoteActionsCustomProps) {
/>
);
}
function CopyReferenceToClipboardButton({ ntxId }: NoteActionsCustomProps) {
const parentComponent = useContext(ParentComponent);
return (
<ActionButton
text={t("image_properties.copy_reference_to_clipboard")}
icon="bx bx-copy"
onClick={() => parentComponent?.triggerEvent("copyImageReferenceToClipboard", { ntxId })}
/>
);
}
//#endregion