From c7381d058a9502d7b4cb441f9ca410ca94dceb71 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Mon, 2 Feb 2026 21:05:25 +0200 Subject: [PATCH] feat(mobile/note_actions): proper styling of note paths --- apps/client/src/widgets/layout/StatusBar.css | 62 ------------------ .../mobile_widgets/mobile_detail_menu.tsx | 14 ++--- .../src/widgets/ribbon/NotePathsTab.css | 63 +++++++++++++++++++ .../src/widgets/ribbon/NotePathsTab.tsx | 13 ++-- 4 files changed, 76 insertions(+), 76 deletions(-) create mode 100644 apps/client/src/widgets/ribbon/NotePathsTab.css diff --git a/apps/client/src/widgets/layout/StatusBar.css b/apps/client/src/widgets/layout/StatusBar.css index b3fe412d95..6418630dba 100644 --- a/apps/client/src/widgets/layout/StatusBar.css +++ b/apps/client/src/widgets/layout/StatusBar.css @@ -91,68 +91,6 @@ .note-paths-widget { 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 { diff --git a/apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx b/apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx index 8116eceb6e..d1a1977404 100644 --- a/apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx +++ b/apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx @@ -120,14 +120,12 @@ function NotePathsModal({ note, modalShown, notePath, sortedNotePaths, setModalS show={modalShown} onHidden={() => setModalShown(false)} > - + {note && ( + + )} ); } diff --git a/apps/client/src/widgets/ribbon/NotePathsTab.css b/apps/client/src/widgets/ribbon/NotePathsTab.css new file mode 100644 index 0000000000..64c7374480 --- /dev/null +++ b/apps/client/src/widgets/ribbon/NotePathsTab.css @@ -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); + } + } + + } +} diff --git a/apps/client/src/widgets/ribbon/NotePathsTab.tsx b/apps/client/src/widgets/ribbon/NotePathsTab.tsx index 19b361a5de..0b81ebe036 100644 --- a/apps/client/src/widgets/ribbon/NotePathsTab.tsx +++ b/apps/client/src/widgets/ribbon/NotePathsTab.tsx @@ -1,15 +1,16 @@ +import "./NotePathsTab.css"; + +import clsx from "clsx"; import { useEffect, useMemo, useState } from "preact/hooks"; import FNote, { NotePathRecord } from "../../entities/fnote"; import { t } from "../../services/i18n"; import { NOTE_PATH_TITLE_SEPARATOR } from "../../services/tree"; import { useTriliumEvent } from "../react/hooks"; +import LinkButton from "../react/LinkButton"; import NoteLink from "../react/NoteLink"; import { joinElements } from "../react/react_utils"; import { TabContext } from "./ribbon-interface"; -import LinkButton from "../react/LinkButton"; -import clsx from "clsx"; - export default function NotePathsTab({ note, hoistedNoteId, notePath }: TabContext) { const sortedNotePaths = useSortedNotePaths(note, hoistedNoteId); @@ -112,9 +113,9 @@ function NotePath({ currentNotePath, notePathRecord }: { currentNotePath?: strin
  • {joinElements(fullNotePaths.map((notePath, index, arr) => ( + className={clsx({"basename": (index === arr.length - 1)})} + notePath={notePath} + noPreview /> )), NOTE_PATH_TITLE_SEPARATOR)} {icons.map(({ icon, title }) => (