mirror of
https://github.com/zadam/trilium.git
synced 2025-12-16 05:09:54 +01:00
feat(layout/edited_notes): respect choice to auto-open
This commit is contained in:
@@ -19,7 +19,7 @@ import NoteTitleWidget from "../note_title";
|
||||
import SimpleBadge, { Badge, BadgeWithDropdown } from "../react/Badge";
|
||||
import Collapsible from "../react/Collapsible";
|
||||
import { FormDropdownDivider, FormListItem } from "../react/FormList";
|
||||
import { useNoteBlob, useNoteContext, useNoteLabel, useNoteProperty, useStaticTooltip, useTriliumEvent } from "../react/hooks";
|
||||
import { useNoteBlob, useNoteContext, useNoteLabel, useNoteProperty, useStaticTooltip, useTriliumEvent, useTriliumOptionBool } from "../react/hooks";
|
||||
import NoteLink from "../react/NoteLink";
|
||||
import { joinElements } from "../react/react_utils";
|
||||
import { useEditedNotes } from "../ribbon/EditedNotesTab";
|
||||
@@ -310,10 +310,14 @@ function useBuiltinTemplates() {
|
||||
function EditedNotes() {
|
||||
const { note } = useNoteContext();
|
||||
const [ dateNote ] = useNoteLabel(note, "dateNote");
|
||||
|
||||
const [ editedNotesOpenInRibbon ] = useTriliumOptionBool("editedNotesOpenInRibbon");
|
||||
|
||||
return (note && dateNote &&
|
||||
<Collapsible className="edited-notes" title={t("note_title.edited_notes")}>
|
||||
<Collapsible
|
||||
className="edited-notes"
|
||||
title={t("note_title.edited_notes")}
|
||||
initiallyExpanded={editedNotesOpenInRibbon}
|
||||
>
|
||||
<EditedNotesContent note={note} />
|
||||
</Collapsible>
|
||||
);
|
||||
|
||||
@@ -4,16 +4,20 @@ import clsx from "clsx";
|
||||
import { ComponentChildren, HTMLAttributes } from "preact";
|
||||
import { useRef, useState } from "preact/hooks";
|
||||
|
||||
import { useElementSize } from "./hooks";
|
||||
import Icon from "./Icon";
|
||||
|
||||
interface CollapsibleProps extends Pick<HTMLAttributes<HTMLDivElement>, "className"> {
|
||||
title: string;
|
||||
children: ComponentChildren;
|
||||
initiallyExpanded?: boolean;
|
||||
}
|
||||
|
||||
export default function Collapsible({ title, children, className }: CollapsibleProps) {
|
||||
export default function Collapsible({ title, children, className, initiallyExpanded }: CollapsibleProps) {
|
||||
const bodyRef = useRef<HTMLDivElement>(null);
|
||||
const [ expanded, setExpanded ] = useState(false);
|
||||
const innerRef = useRef<HTMLDivElement>(null);
|
||||
const [ expanded, setExpanded ] = useState(initiallyExpanded);
|
||||
const { height } = useElementSize(innerRef) ?? {};
|
||||
|
||||
return (
|
||||
<div className={clsx("collapsible", className, expanded && "expanded")}>
|
||||
@@ -28,11 +32,12 @@ export default function Collapsible({ title, children, className }: CollapsibleP
|
||||
<div
|
||||
ref={bodyRef}
|
||||
className="collapsible-body"
|
||||
style={{
|
||||
height: expanded ? bodyRef.current?.scrollHeight : "0",
|
||||
}}
|
||||
style={{ height: expanded ? height : "0" }}
|
||||
>
|
||||
<div className="collapsible-inner-body">
|
||||
<div
|
||||
ref={innerRef}
|
||||
className="collapsible-inner-body"
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user