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

chore(react/type_widget): add preview buttons

Browse Source
This commit is contained in:
Elian Doran 2025-09-20 13:15:13 +03:00
parent 6dd939df14
commit c49b90d33f
No known key found for this signature in database
4 changed files with 39 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/widgets/react/ActionButton.tsx
View File

@ -5,7 +5,7 @@ import keyboard_actions from "../../services/keyboard_actions";
export interface ActionButtonProps {
text: string;
titlePosition?: "bottom" | "left";
titlePosition?: "top" | "right" | "bottom" | "left";
icon: string;
className?: string;
onClick?: (e: MouseEvent) => void;

22
apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx
View File

@ -6,11 +6,14 @@ import { TypeWidgetProps } from "../type_widget";
import "./SplitEditor.css";
import Split from "split.js";
import { DEFAULT_GUTTER_SIZE } from "../../../services/resizer";
import { CodeEditor, EditableCode } from "../code/Code";
import { EditableCode } from "../code/Code";
import { ComponentChildren } from "preact";
import ActionButton, { ActionButtonProps } from "../../react/ActionButton";
interface SplitEditorProps extends TypeWidgetProps {
export interface SplitEditorProps extends TypeWidgetProps {
error?: string | null;
splitOptions?: Split.Options;
previewButtons?: ComponentChildren;
}
/**
@ -22,7 +25,7 @@ interface SplitEditorProps extends TypeWidgetProps {
* - Can display errors to the user via {@link setError}.
* - Horizontal or vertical orientation for the editor/preview split, adjustable via the switch split orientation button floating button.
*/
export default function SplitEditor({ note, error, splitOptions, ...editorProps }: SplitEditorProps) {
export default function SplitEditor({ note, error, splitOptions, previewButtons, ...editorProps }: SplitEditorProps) {
const splitEditorOrientation = useSplitOrientation();
const [ readOnly ] = useNoteLabelBoolean(note, "readOnly");
const containerRef = useRef<HTMLDivElement>(null);
@ -46,7 +49,9 @@ export default function SplitEditor({ note, error, splitOptions, ...editorProps
const preview = (
<div className={`note-detail-split-preview-col ${error ? "on-error" : ""}`}>
<div className="note-detail-split-preview">Preview goes here</div>
<div className="btn-group btn-group-sm map-type-switcher content-floating-buttons preview-buttons bottom-right" role="group">Buttons go here</div>
<div className="btn-group btn-group-sm map-type-switcher content-floating-buttons preview-buttons bottom-right" role="group">
{previewButtons}
</div>
</div>
);
@ -72,6 +77,15 @@ export default function SplitEditor({ note, error, splitOptions, ...editorProps
)
}
export function PreviewButton(props: Omit<ActionButtonProps, "titlePosition">) {
return <ActionButton
{...props}
className="tn-tool-button"
noIconActionClass
titlePosition="top"
/>
}
function useSplitOrientation() {
const [ splitEditorOrientation ] = useTriliumOption("splitEditorOrientation");
if (isMobile()) return "vertical";

23
apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx
View File

@ -1,10 +1,27 @@
import { TypeWidgetProps } from "../type_widget";
import SplitEditor from "./SplitEditor";
import { t } from "../../../services/i18n";
import SplitEditor, { PreviewButton, SplitEditorProps } from "./SplitEditor";
export default function SvgSplitEditor(props: TypeWidgetProps) {
export default function SvgSplitEditor(props: SplitEditorProps) {
return (
<SplitEditor
error="Hi there"
previewButtons={
<>
<PreviewButton
icon="bx bx-zoom-in"
text={t("relation_map_buttons.zoom_in_title")}
onClick={() => {}}
/>
<PreviewButton
icon="bx bx-zoom-out"
text={t("relation_map_buttons.zoom_out_title")}
/>
<PreviewButton
icon="bx bx-crop"
text={t("relation_map_buttons.reset_pan_zoom_title")}
/>
</>
}
{...props}
/>
)

8
apps/client/src/widgets/type_widgets_old/abstract_svg_split_type_widget.ts
View File

@ -186,19 +186,11 @@ export default abstract class AbstractSvgSplitTypeWidget extends AbstractSplitTy
buildPreviewButtons(): OnClickButtonWidget[] {
return [
new OnClickButtonWidget()
.icon("bx-zoom-in")
.title(t("relation_map_buttons.zoom_in_title"))
.titlePlacement("top")
.onClick(() => this.zoomInstance?.zoomIn())
, new OnClickButtonWidget()
.icon("bx-zoom-out")
.title(t("relation_map_buttons.zoom_out_title"))
.titlePlacement("top")
.onClick(() => this.zoomInstance?.zoomOut())
, new OnClickButtonWidget()
.icon("bx-crop")
.title(t("relation_map_buttons.reset_pan_zoom_title"))
.titlePlacement("top")
.onClick(() => this.zoomHandler())
];
}