Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-17 13:49:58 +01:00
Code Issues Packages Projects Releases Activity

refactor(layout/inline-title): separate old title details into title actions

Browse Source
This commit is contained in:
Elian Doran
2025-12-13 11:46:42 +02:00
parent e9dfec88c9
commit f040a0b6d1
4 changed files with 33 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/client/src/layouts/desktop_layout.tsx
View File

@@ -50,7 +50,7 @@ import NoteActions from "../widgets/ribbon/NoteActions.jsx";
import FormattingToolbar from "../widgets/ribbon/FormattingToolbar.jsx"; import FormattingToolbar from "../widgets/ribbon/FormattingToolbar.jsx";
import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx"; import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
import NoteBadges from "../widgets/layout/NoteBadges.jsx"; import NoteBadges from "../widgets/layout/NoteBadges.jsx";
import NoteTitleDetails from "../widgets/NoteTitleDetails.jsx"; import NoteTitleActions from "../widgets/layout/NoteTitleActions.jsx";
import StatusBar from "../widgets/layout/StatusBar.jsx"; import StatusBar from "../widgets/layout/StatusBar.jsx";
import InlineTitle from "../widgets/layout/InlineTitle.jsx"; import InlineTitle from "../widgets/layout/InlineTitle.jsx";
@@ -155,7 +155,7 @@ export default class DesktopLayout {
new ScrollingContainer() new ScrollingContainer()
.filling() .filling()
.optChild(isNewLayout, <InlineTitle />) .optChild(isNewLayout, <InlineTitle />)
.optChild(isNewLayout, <NoteTitleDetails />) .optChild(isNewLayout, <NoteTitleActions />)
.optChild(!isNewLayout, new ContentHeader() .optChild(!isNewLayout, new ContentHeader()
.child(<ReadOnlyNoteInfoBar />) .child(<ReadOnlyNoteInfoBar />)
.child(<SharedInfo />) .child(<SharedInfo />)

26
apps/client/src/widgets/layout/NoteTitleActions.css Normal file
View File

@@ -0,0 +1,26 @@
body.experimental-feature-new-layout {
.component.title-actions {
contain: none;
}
.title-actions {
max-width: var(--max-content-width);
padding: 0;
padding-inline-start: 24px;
padding-inline-end: 16px;
display: flex;
gap: 0.25em;
align-items: center;
.dropdown-menu {
input.form-control {
padding: 2px 8px;
margin-left: 1em;
}
}
.spacer {
flex-grow: 1;
}
}
}

9
apps/client/src/widgets/NoteTitleDetails.tsx → apps/client/src/widgets/layout/NoteTitleActions.tsx
View File

@@ -1,13 +1,14 @@
import CollectionProperties from "./note_bars/CollectionProperties"; import CollectionProperties from "../note_bars/CollectionProperties";
import { useNoteContext, useNoteProperty } from "./react/hooks"; import { useNoteContext, useNoteProperty } from "../react/hooks";
import "./NoteTitleActions.css";
export default function NoteTitleDetails() { export default function NoteTitleActions() {
const { note } = useNoteContext(); const { note } = useNoteContext();
const isHiddenNote = note && note.noteId !== "_search" && note.noteId.startsWith("_"); const isHiddenNote = note && note.noteId !== "_search" && note.noteId.startsWith("_");
const noteType = useNoteProperty(note, "type"); const noteType = useNoteProperty(note, "type");
return ( return (
<div className="title-details"> <div className="title-actions">
{note && !isHiddenNote && noteType === "book" && <CollectionProperties note={note} />} {note && !isHiddenNote && noteType === "book" && <CollectionProperties note={note} />}
</div> </div>
); );

22
apps/client/src/widgets/note_title.css
View File

@@ -60,34 +60,12 @@ body.experimental-feature-new-layout {
} }
} }
.title-details {
max-width: var(--max-content-width);
padding: 0;
padding-inline-start: 24px;
}
.title-details {
padding-inline-end: 16px;
.dropdown-menu {
input.form-control {
padding: 2px 8px;
margin-left: 1em;
}
}
.spacer {
flex-grow: 1;
}
}
.note-split.type-code:not(.mime-text-x-sqlite) .title-details { .note-split.type-code:not(.mime-text-x-sqlite) .title-details {
background-color: var(--main-background-color); background-color: var(--main-background-color);
} }
.title-details { .title-details {
margin-top: 0; margin-top: 0;
contain: none;
display: flex; display: flex;
gap: 0.25em; gap: 0.25em;
margin: 0; margin: 0;