gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-01 04:54:25 +01:00
Code Issues Actions 13 Packages Projects Releases Wiki Activity

feat(revisions): improve layout on mobile

Browse Source
This commit is contained in:
Elian Doran 2025-11-30 21:13:07 +02:00
parent 7779acc7bc
commit 5ff77c16ab
No known key found for this signature in database
3 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
apps/client/src/widgets/dialogs/revisions.css
View File

@ -3,14 +3,30 @@ body.mobile .revisions-dialog {
height: 95vh; height: 95vh;
} }
.modal-header {
display: flex;
flex-wrap: wrap;
gap: 0.25em;
font-size: 0.9em;
}
.modal-title {
flex-grow: 1;
width: 100%;
}
.modal-body { .modal-body {
height: 100% !important; height: 100% !important;
flex-direction: column; flex-direction: column;
padding: 0; padding: 0;
} }
.modal-footer {
font-size: 0.9em;
}
.revision-list { .revision-list {
height: unset; height: fit-content !important;
max-height: 20vh; max-height: 20vh;
border-bottom: 1px solid var(--main-border-color) !important; border-bottom: 1px solid var(--main-border-color) !important;
padding: 0 1em; padding: 0 1em;
@ -18,6 +34,7 @@ body.mobile .revisions-dialog {
.modal-body > .revision-content-wrapper { .modal-body > .revision-content-wrapper {
flex-grow: 1; flex-grow: 1;
max-width: unset !important;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
margin: 0; margin: 0;
@ -33,6 +50,9 @@ body.mobile .revisions-dialog {
.revision-title-buttons { .revision-title-buttons {
text-align: center; text-align: center;
display: flex;
gap: 0.25em;
flex-wrap: wrap;
} }
.revision-content { .revision-content {

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

@ -138,7 +138,7 @@ export default function RevisionsDialog() {
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 onSelect={onSelect} fullHeight> <FormList onSelect={onSelect} fullHeight wrapperClassName="revision-list">
{revisions.map((item) => {revisions.map((item) =>
<FormListItem <FormListItem
value={item.revisionId} value={item.revisionId}

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

@ -6,15 +6,17 @@ import "./FormList.css";
import { CommandNames } from "../../components/app_context"; import { CommandNames } from "../../components/app_context";
import { useStaticTooltip } from "./hooks"; import { useStaticTooltip } from "./hooks";
import { handleRightToLeftPlacement, isMobile } from "../../services/utils"; import { handleRightToLeftPlacement, isMobile } from "../../services/utils";
import clsx from "clsx";
interface FormListOpts { interface FormListOpts {
children: ComponentChildren; children: ComponentChildren;
onSelect?: (value: string) => void; onSelect?: (value: string) => void;
style?: CSSProperties; style?: CSSProperties;
wrapperClassName?: string;
fullHeight?: boolean; fullHeight?: boolean;
} }
export default function FormList({ children, onSelect, style, fullHeight }: FormListOpts) { export default function FormList({ children, onSelect, style, fullHeight, wrapperClassName }: 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);
@ -43,7 +45,7 @@ export default function FormList({ children, onSelect, style, fullHeight }: Form
}, [ fullHeight ]); }, [ fullHeight ]);
return ( return (
<div className="dropdownWrapper" ref={wrapperRef} style={builtinStyles}> <div className={clsx("dropdownWrapper", wrapperClassName)} ref={wrapperRef} style={builtinStyles}>
<div className="dropdown" style={builtinStyles}> <div className="dropdown" style={builtinStyles}>
<button <button
ref={triggerRef} ref={triggerRef}