diff --git a/apps/client/src/widgets/layout/StatusBar.tsx b/apps/client/src/widgets/layout/StatusBar.tsx index 7cf4c956a..3f136a9a0 100644 --- a/apps/client/src/widgets/layout/StatusBar.tsx +++ b/apps/client/src/widgets/layout/StatusBar.tsx @@ -199,8 +199,7 @@ export function getLocaleName(locale: Locale | null | undefined) { //#region Note info export function NoteInfoBadge({ note }: { note: FNote | null | undefined }) { const { metadata, ...sizeProps } = useNoteMetadata(note); - const [ originalFileName ] = useNoteLabel(note?.type === "file" ? note : null, "originalFileName"); - + const [ originalFileName ] = useNoteLabel(note, "originalFileName"); return (note && { - if (!files) return; - const fileToUpload = files[0]; // copy to allow reset below - - const result = await server.upload(`images/${note.noteId}`, fileToUpload); - - if (result.uploaded) { - toast.showMessage(t("image_properties.upload_success")); - await clearBrowserCache(); - } else { - toast.showError(t("image_properties.upload_failed", { message: result.message })); - } - }} + onChange={buildUploadNewImageRevisionListener(note)} /> )} - ) + ); +} + +export function buildUploadNewImageRevisionListener(note: FNote) { + return async (files: FileList | null) => { + if (!files) return; + const fileToUpload = files[0]; // copy to allow reset below + + const result = await server.upload(`images/${note.noteId}`, fileToUpload); + + if (result.uploaded) { + toast.showMessage(t("image_properties.upload_success")); + await clearBrowserCache(); + } else { + toast.showError(t("image_properties.upload_failed", { message: result.message })); + } + }; } diff --git a/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx b/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx index 3b1123f7b..40a5b5892 100644 --- a/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx +++ b/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx @@ -5,6 +5,7 @@ import protected_session_holder from "../../services/protected_session_holder"; import ActionButton from "../react/ActionButton"; import { FormFileUploadActionButton } from "../react/FormFileUpload"; import { buildUploadNewFileRevisionListener } from "./FilePropertiesTab"; +import { buildUploadNewImageRevisionListener } from "./ImagePropertiesTab"; interface NoteActionsCustomProps { note: FNote; @@ -22,38 +23,74 @@ export default function NoteActionsCustom({ note }: NoteActionsCustomProps) { ); } +//#region Note type mappings function NoteActionsCustomInner(props: NoteActionsCustomProps) { switch (props.note.type) { case "file": return ; + case "image": + return ; } } function FileActions({ note }: NoteActionsCustomProps) { - const canAccessProtectedNote = !note?.isProtected || protected_session_holder.isProtectedSessionAvailable(); - return ( <> - - - openNoteExternally(note.noteId, note.mime)} - /> - - downloadFileNote(note.noteId)} - /> + + + ); } + +function ImageActions({ note }: NoteActionsCustomProps) { + return ( + <> + + + + + ); +} +//#endregion + +//#region Shared buttons +function UploadNewRevisionButton({ note, onChange }: NoteActionsCustomProps & { + onChange: (files: FileList | null) => void; +}) { + const canAccessProtectedNote = !note?.isProtected || protected_session_holder.isProtectedSessionAvailable(); + + return ( + + ); +} + +function OpenExternallyButton({ note }: NoteActionsCustomProps) { + return ( + openNoteExternally(note.noteId, note.mime)} + /> + ); +} + +function DownloadFileButton({ note }: NoteActionsCustomProps) { + const canAccessProtectedNote = !note?.isProtected || protected_session_holder.isProtectedSessionAvailable(); + + return ( + downloadFileNote(note.noteId)} + /> + ); +} +//#endregion diff --git a/apps/client/src/widgets/ribbon/RibbonDefinition.ts b/apps/client/src/widgets/ribbon/RibbonDefinition.ts index a525718fe..86f8edde0 100644 --- a/apps/client/src/widgets/ribbon/RibbonDefinition.ts +++ b/apps/client/src/widgets/ribbon/RibbonDefinition.ts @@ -82,7 +82,7 @@ export const RIBBON_TAB_DEFINITIONS: TabConfiguration[] = [ title: t("image_properties.title"), icon: "bx bx-image", content: ImagePropertiesTab, - show: ({ note }) => note?.type === "image", + show: ({ note }) => !isNewLayout && note?.type === "image", toggleCommand: "toggleRibbonTabImageProperties", activate: true, },