gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-25 07:04:25 +01:00
Code Issues Actions 16 Packages Projects Releases Wiki Activity

feat(mobile/note_actions): proper styling of note paths

Browse Source
This commit is contained in:
Elian Doran 2026-02-02 21:05:25 +02:00
parent 171d948a00
commit c7381d058a
No known key found for this signature in database
4 changed files with 76 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
apps/client/src/widgets/layout/StatusBar.css
View File

@ -91,68 +91,6 @@
.note-paths-widget { .note-paths-widget {
padding: 0.5em; padding: 0.5em;
} }
.note-path-intro {
color: var(--muted-text-color);
}
.note-path-list {
margin: 12px 0;
padding: 0;
list-style: none;
/* Note path card */
li {
--border-radius: 6px;
position: relative;
background: var(--card-background-color);
padding: 8px 20px 8px 25px;
&:first-child {
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
&:last-child {
border-radius: 0 0 var(--border-radius) var(--border-radius);
}
& + li {
margin-top: 2px;
}
/* Current path arrow */
&.path-current::before {
position: absolute;
display: flex;
justify-content: flex-end;
align-items: center;
content: "\ee8f";
top: 0;
left: 0;
width: 20px;
bottom: 0;
font-family: "boxicons";
font-size: .75em;
color: var(--menu-item-icon-color);
}
}
/* Note path segment */
a {
margin-inline: 2px;
padding-inline: 2px;
color: currentColor;
font-weight: normal;
text-decoration: none;
/* The last segment of the note path */
&.basename {
color: var(--muted-text-color);
}
}
}
} }
.backlinks-widget > .dropdown-menu { .backlinks-widget > .dropdown-menu {

14
apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx
View File

@ -120,14 +120,12 @@ function NotePathsModal({ note, modalShown, notePath, sortedNotePaths, setModalS
show={modalShown} show={modalShown}
onHidden={() => setModalShown(false)} onHidden={() => setModalShown(false)}
> >
<ul className="note-paths-items"> {note && (
{note && ( <NotePathsWidget
<NotePathsWidget sortedNotePaths={sortedNotePaths}
sortedNotePaths={sortedNotePaths} currentNotePath={notePath}
currentNotePath={notePath} />
/> )}
)}
</ul>
</Modal> </Modal>
); );
} }

63
apps/client/src/widgets/ribbon/NotePathsTab.css Normal file
View File

@ -0,0 +1,63 @@
body.experimental-feature-new-layout .note-paths-widget {
.note-path-intro {
color: var(--muted-text-color);
}
.note-path-list {
margin: 12px 0;
padding: 0;
list-style: none;
/* Note path card */
li {
--border-radius: 6px;
position: relative;
background: var(--card-background-color);
padding: 8px 20px 8px 25px;
&:first-child {
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
&:last-child {
border-radius: 0 0 var(--border-radius) var(--border-radius);
}
& + li {
margin-top: 2px;
}
/* Current path arrow */
&.path-current::before {
position: absolute;
display: flex;
justify-content: flex-end;
align-items: center;
content: "\ee8f";
top: 0;
left: 0;
width: 20px;
bottom: 0;
font-family: "boxicons";
font-size: .75em;
color: var(--menu-item-icon-color);
}
}
/* Note path segment */
a {
margin-inline: 2px;
padding-inline: 2px;
color: currentColor;
font-weight: normal;
text-decoration: none;
/* The last segment of the note path */
&.basename {
color: var(--muted-text-color);
}
}
}
}

13
apps/client/src/widgets/ribbon/NotePathsTab.tsx
View File

@ -1,15 +1,16 @@
import "./NotePathsTab.css";
import clsx from "clsx";
import { useEffect, useMemo, useState } from "preact/hooks"; import { useEffect, useMemo, useState } from "preact/hooks";
import FNote, { NotePathRecord } from "../../entities/fnote"; import FNote, { NotePathRecord } from "../../entities/fnote";
import { t } from "../../services/i18n"; import { t } from "../../services/i18n";
import { NOTE_PATH_TITLE_SEPARATOR } from "../../services/tree"; import { NOTE_PATH_TITLE_SEPARATOR } from "../../services/tree";
import { useTriliumEvent } from "../react/hooks"; import { useTriliumEvent } from "../react/hooks";
import LinkButton from "../react/LinkButton";
import NoteLink from "../react/NoteLink"; import NoteLink from "../react/NoteLink";
import { joinElements } from "../react/react_utils"; import { joinElements } from "../react/react_utils";
import { TabContext } from "./ribbon-interface"; import { TabContext } from "./ribbon-interface";
import LinkButton from "../react/LinkButton";
import clsx from "clsx";
export default function NotePathsTab({ note, hoistedNoteId, notePath }: TabContext) { export default function NotePathsTab({ note, hoistedNoteId, notePath }: TabContext) {
const sortedNotePaths = useSortedNotePaths(note, hoistedNoteId); const sortedNotePaths = useSortedNotePaths(note, hoistedNoteId);
@ -112,9 +113,9 @@ function NotePath({ currentNotePath, notePathRecord }: { currentNotePath?: strin
<li class={classes}> <li class={classes}>
{joinElements(fullNotePaths.map((notePath, index, arr) => ( {joinElements(fullNotePaths.map((notePath, index, arr) => (
<NoteLink key={notePath} <NoteLink key={notePath}
className={clsx({"basename": (index === arr.length - 1)})} className={clsx({"basename": (index === arr.length - 1)})}
notePath={notePath} notePath={notePath}
noPreview /> noPreview />
)), NOTE_PATH_TITLE_SEPARATOR)} )), NOTE_PATH_TITLE_SEPARATOR)}
{icons.map(({ icon, title }) => ( {icons.map(({ icon, title }) => (