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"); const isNewLayout = isExperimentalFeatureEnabled("new-layout");
export default function NoteActions() { export default function NoteActions() {
const { note, noteContext } = useNoteContext(); const { note, ntxId, noteContext } = useNoteContext();
return ( return (
<div className="ribbon-button-container" style={{ contain: "none" }}> <div className="ribbon-button-container" style={{ contain: "none" }}>
{note && <NoteActionsCustom note={note} />} {note && <NoteActionsCustom note={note} ntxId={ntxId} />}
<MovePaneButton direction="left" /> <MovePaneButton direction="left" />
<MovePaneButton direction="right" /> <MovePaneButton direction="right" />
<ClosePaneButton /> <ClosePaneButton />

View File

@ -1,24 +1,28 @@
import { useContext } from "preact/hooks";
import FNote from "../../entities/fnote"; import FNote from "../../entities/fnote";
import { t } from "../../services/i18n"; import { t } from "../../services/i18n";
import { downloadFileNote, openNoteExternally } from "../../services/open"; import { downloadFileNote, openNoteExternally } from "../../services/open";
import protected_session_holder from "../../services/protected_session_holder"; import protected_session_holder from "../../services/protected_session_holder";
import ActionButton from "../react/ActionButton"; import ActionButton from "../react/ActionButton";
import { FormFileUploadActionButton } from "../react/FormFileUpload"; import { FormFileUploadActionButton } from "../react/FormFileUpload";
import { ParentComponent } from "../react/react_utils";
import { buildUploadNewFileRevisionListener } from "./FilePropertiesTab"; import { buildUploadNewFileRevisionListener } from "./FilePropertiesTab";
import { buildUploadNewImageRevisionListener } from "./ImagePropertiesTab"; import { buildUploadNewImageRevisionListener } from "./ImagePropertiesTab";
interface NoteActionsCustomProps { interface NoteActionsCustomProps {
note: FNote; note: FNote;
ntxId: string;
} }
/** /**
* Part of {@link NoteActions} on the new layout, but are rendered with a slight spacing * 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. * 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 ( return (
<div className="note-actions-custom"> <div className="note-actions-custom">
<NoteActionsCustomInner note={note} /> <NoteActionsCustomInner {...props} />
</div> </div>
); );
} }
@ -33,22 +37,23 @@ function NoteActionsCustomInner(props: NoteActionsCustomProps) {
} }
} }
function FileActions({ note }: NoteActionsCustomProps) { function FileActions(props: NoteActionsCustomProps) {
return ( return (
<> <>
<UploadNewRevisionButton note={note} onChange={buildUploadNewFileRevisionListener(note)} /> <UploadNewRevisionButton {...props} onChange={buildUploadNewFileRevisionListener(props.note)} />
<OpenExternallyButton note={note} /> <OpenExternallyButton {...props} />
<DownloadFileButton note={note} /> <DownloadFileButton {...props} />
</> </>
); );
} }
function ImageActions({ note }: NoteActionsCustomProps) { function ImageActions(props: NoteActionsCustomProps) {
return ( return (
<> <>
<UploadNewRevisionButton note={note} onChange={buildUploadNewImageRevisionListener(note)} /> <CopyReferenceToClipboardButton {...props} />
<OpenExternallyButton note={note} /> <UploadNewRevisionButton {...props} onChange={buildUploadNewImageRevisionListener(props.note)} />
<DownloadFileButton note={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 //#endregion