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): bring back split orientation

Browse Source
This commit is contained in:
Elian Doran 2025-09-20 12:30:01 +03:00
parent bed3c2dc67
commit 3d5b319eb2
No known key found for this signature in database
2 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,5 @@
import { isMobile } from "../../../services/utils";
import { useTriliumOption } from "../../react/hooks";
import { TypeWidgetProps } from "../type_widget";
import "./SplitEditor.css";
@ -11,16 +13,24 @@ import "./SplitEditor.css";
* - Horizontal or vertical orientation for the editor/preview split, adjustable via the switch split orientation button floating button.
*/
export default function SplitEditor({ }: TypeWidgetProps) {
const splitEditorOrientation = useSplitOrientation();
return (
<div className="note-detail-split note-detail-printable">
<div className={`note-detail-split note-detail-printable ${"split-" + splitEditorOrientation}`}>
<div className="note-detail-split-editor-col">
<div className="note-detail-split-editor"></div>
<div className="admonition caution note-detail-error-container hidden-ext"></div>
<div className="note-detail-split-editor">Detail goes here.</div>
<div className="admonition caution note-detail-error-container hidden-ext">Errors go here.</div>
</div>
<div className="note-detail-split-preview-col">
<div className="note-detail-split-preview"></div>
<div className="btn-group btn-group-sm map-type-switcher content-floating-buttons preview-buttons bottom-right" role="group"></div>
<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>
</div>
)
}
function useSplitOrientation() {
const [ splitEditorOrientation ] = useTriliumOption("splitEditorOrientation");
if (isMobile()) return "vertical";
if (!splitEditorOrientation) return "horizontal";
return splitEditorOrientation;
}

3
apps/client/src/widgets/type_widgets_old/abstract_split_type_widget.ts
View File

@ -92,11 +92,8 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
}
// Vertical vs horizontal layout
const layoutOrientation = (!utils.isMobile() ? options.get("splitEditorOrientation") ?? "horizontal" : "vertical");
if (this.layoutOrientation !== layoutOrientation || this.isReadOnly !== isReadOnly) {
this.$widget
.toggleClass("split-horizontal", !isReadOnly && layoutOrientation === "horizontal")
.toggleClass("split-vertical", !isReadOnly && layoutOrientation === "vertical")
.toggleClass("split-read-only", isReadOnly);
this.layoutOrientation = layoutOrientation as ("horizontal" | "vertical");
this.isReadOnly = isReadOnly;