gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-11 08:58:58 +01:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

feat(react/type_widget): add copy image reference floating button to image

Browse Source
This commit is contained in:
Elian Doran 2025-09-19 22:42:06 +03:00
parent 0a0d9775b2
commit 3a68395ca7
No known key found for this signature in database
1 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
apps/client/src/widgets/FloatingButtonsDefinitions.tsx
View File

@ -23,7 +23,7 @@ import { ViewTypeOptions } from "./collections/interface";
export interface FloatingButtonContext { export interface FloatingButtonContext {
parentComponent: Component; parentComponent: Component;
note: FNote; note: FNote;
noteContext: NoteContext; noteContext: NoteContext;
isDefaultViewMode: boolean; isDefaultViewMode: boolean;
isReadOnly: boolean; isReadOnly: boolean;
@ -65,7 +65,7 @@ export const MOBILE_FLOATING_BUTTONS: FloatingButtonsList = [
EditButton, EditButton,
RelationMapButtons, RelationMapButtons,
ExportImageButtons, ExportImageButtons,
Backlinks Backlinks
] ]
function RefreshBackendLogButton({ note, parentComponent, noteContext, isDefaultViewMode }: FloatingButtonContext) { function RefreshBackendLogButton({ note, parentComponent, noteContext, isDefaultViewMode }: FloatingButtonContext) {
@ -84,13 +84,13 @@ function SwitchSplitOrientationButton({ note, isReadOnly, isDefaultViewMode }: F
return isEnabled && <FloatingButton return isEnabled && <FloatingButton
text={upcomingOrientation === "vertical" ? t("switch_layout_button.title_vertical") : t("switch_layout_button.title_horizontal")} text={upcomingOrientation === "vertical" ? t("switch_layout_button.title_vertical") : t("switch_layout_button.title_horizontal")}
icon={upcomingOrientation === "vertical" ? "bx bxs-dock-bottom" : "bx bxs-dock-left"} icon={upcomingOrientation === "vertical" ? "bx bxs-dock-bottom" : "bx bxs-dock-left"}
onClick={() => setSplitEditorOrientation(upcomingOrientation)} onClick={() => setSplitEditorOrientation(upcomingOrientation)}
/> />
} }
function ToggleReadOnlyButton({ note, viewType, isDefaultViewMode }: FloatingButtonContext) { function ToggleReadOnlyButton({ note, viewType, isDefaultViewMode }: FloatingButtonContext) {
const [ isReadOnly, setReadOnly ] = useNoteLabelBoolean(note, "readOnly"); const [ isReadOnly, setReadOnly ] = useNoteLabelBoolean(note, "readOnly");
const isEnabled = (note.type === "mermaid" || viewType === "geoMap") const isEnabled = (note.type === "mermaid" || viewType === "geoMap")
&& note.isContentAvailable() && isDefaultViewMode; && note.isContentAvailable() && isDefaultViewMode;
@ -264,7 +264,7 @@ function GeoMapButtons({ triggerEvent, viewType, isReadOnly }: FloatingButtonCon
function CopyImageReferenceButton({ note, isDefaultViewMode }: FloatingButtonContext) { function CopyImageReferenceButton({ note, isDefaultViewMode }: FloatingButtonContext) {
const hiddenImageCopyRef = useRef<HTMLDivElement>(null); const hiddenImageCopyRef = useRef<HTMLDivElement>(null);
const isEnabled = ["mermaid", "canvas", "mindMap"].includes(note?.type ?? "") const isEnabled = ["mermaid", "canvas", "mindMap", "image"].includes(note?.type ?? "")
&& note?.isContentAvailable() && isDefaultViewMode; && note?.isContentAvailable() && isDefaultViewMode;
return isEnabled && ( return isEnabled && (
@ -325,7 +325,7 @@ function Backlinks({ note, isDefaultViewMode }: FloatingButtonContext) {
let [ backlinkCount, setBacklinkCount ] = useState(0); let [ backlinkCount, setBacklinkCount ] = useState(0);
let [ popupOpen, setPopupOpen ] = useState(false); let [ popupOpen, setPopupOpen ] = useState(false);
const backlinksContainerRef = useRef<HTMLDivElement>(null); const backlinksContainerRef = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
if (!isDefaultViewMode) return; if (!isDefaultViewMode) return;
@ -338,7 +338,7 @@ function Backlinks({ note, isDefaultViewMode }: FloatingButtonContext) {
const { windowHeight } = useWindowSize(); const { windowHeight } = useWindowSize();
useLayoutEffect(() => { useLayoutEffect(() => {
const el = backlinksContainerRef.current; const el = backlinksContainerRef.current;
if (popupOpen && el) { if (popupOpen && el) {
const box = el.getBoundingClientRect(); const box = el.getBoundingClientRect();
const maxHeight = windowHeight - box.top - 10; const maxHeight = windowHeight - box.top - 10;
el.style.maxHeight = `${maxHeight}px`; el.style.maxHeight = `${maxHeight}px`;
@ -374,7 +374,7 @@ function BacklinksList({ noteId }: { noteId: string }) {
.filter(bl => "noteId" in bl) .filter(bl => "noteId" in bl)
.map((bl) => bl.noteId); .map((bl) => bl.noteId);
await froca.getNotes(noteIds); await froca.getNotes(noteIds);
setBacklinks(backlinks); setBacklinks(backlinks);
}); });
}, [ noteId ]); }, [ noteId ]);
@ -395,4 +395,4 @@ function BacklinksList({ noteId }: { noteId: string }) {
)} )}
</div> </div>
)); ));
} }