Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-31 02:16:05 +01:00
Code Issues Packages Projects Releases Activity

fix(react/dialogs): revision list not full height

Browse Source
This commit is contained in:
Elian Doran
2025-08-10 20:24:20 +03:00
parent 2d3b99c959
commit abf1f6c041
2 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/widgets/dialogs/revisions.tsx
View File

@@ -107,7 +107,7 @@ function RevisionsDialogComponent() {
function RevisionsList({ revisions, onSelect, currentRevision }: { revisions: RevisionItem[], onSelect: (val: string) => void, currentRevision?: RevisionItem }) { function RevisionsList({ revisions, onSelect, currentRevision }: { revisions: RevisionItem[], onSelect: (val: string) => void, currentRevision?: RevisionItem }) {
return ( return (
<FormList style={{ height: "100%", flexShrink: 0 }} onSelect={onSelect}> <FormList onSelect={onSelect} fullHeight>
{revisions.map((item) => {revisions.map((item) =>
<FormListItem <FormListItem
title={t("revisions.revision_last_edited", { date: item.dateLastEdited })} title={t("revisions.revision_last_edited", { date: item.dateLastEdited })}

18
apps/client/src/widgets/react/FormList.tsx
View File

@@ -1,15 +1,16 @@
import { Dropdown as BootstrapDropdown } from "bootstrap"; import { Dropdown as BootstrapDropdown } from "bootstrap";
import { ComponentChildren } from "preact"; import { ComponentChildren } from "preact";
import Icon from "./Icon"; import Icon from "./Icon";
import { useEffect, useRef, type CSSProperties } from "preact/compat"; import { useEffect, useMemo, useRef, type CSSProperties } from "preact/compat";
interface FormListOpts { interface FormListOpts {
children: ComponentChildren; children: ComponentChildren;
onSelect?: (value: string) => void; onSelect?: (value: string) => void;
style?: CSSProperties; style?: CSSProperties;
fullHeight?: boolean;
} }
export default function FormList({ children, onSelect, style }: FormListOpts) { export default function FormList({ children, onSelect, style, fullHeight }: FormListOpts) {
const wrapperRef = useRef<HTMLDivElement | null>(null); const wrapperRef = useRef<HTMLDivElement | null>(null);
const triggerRef = useRef<HTMLButtonElement | null>(null); const triggerRef = useRef<HTMLButtonElement | null>(null);
@@ -28,9 +29,17 @@ export default function FormList({ children, onSelect, style }: FormListOpts) {
} }
}, [ triggerRef, wrapperRef ]); }, [ triggerRef, wrapperRef ]);
const builtinStyles = useMemo(() => {
const style: CSSProperties = {};
if (fullHeight) {
style.height = "100%";
}
return style;
}, [ fullHeight ]);
return ( return (
<div className="dropdownWrapper" ref={wrapperRef}> <div className="dropdownWrapper" ref={wrapperRef} style={builtinStyles}>
<div className="dropdown"> <div className="dropdown" style={builtinStyles}>
<button <button
ref={triggerRef} ref={triggerRef}
type="button" style="display: none;" type="button" style="display: none;"
@@ -39,6 +48,7 @@ export default function FormList({ children, onSelect, style }: FormListOpts) {
<div class="dropdown-menu static show" style={{ <div class="dropdown-menu static show" style={{
...style ?? {}, ...style ?? {},
...builtinStyles,
position: "relative", position: "relative",
}} onClick={(e) => { }} onClick={(e) => {
const value = (e.target as HTMLElement)?.dataset?.value; const value = (e.target as HTMLElement)?.dataset?.value;