diff --git a/src/public/app/services/link.js b/src/public/app/services/link.js index 30d30594d..b7e236be5 100644 --- a/src/public/app/services/link.js +++ b/src/public/app/services/link.js @@ -102,15 +102,15 @@ async function createLink(notePath, options = {}) { $container.append($noteLink); if (showNotePath) { - const resolvedNotePathSegments = await treeService.resolveNotePathToSegments(notePath); + const resolvedPathSegments = await treeService.resolveNotePathToSegments(notePath); + resolvedPathSegments.pop(); // Remove last element - if (resolvedNotePathSegments) { - resolvedNotePathSegments.pop(); // remove last element + const resolvedPath = resolvedPathSegments.join("/"); + const pathSegments = await treeService.getNotePathTitleComponents(resolvedPath); - const parentNotePath = resolvedNotePathSegments.join("/").trim(); - - if (parentNotePath) { - $container.append($("").text(` (${await treeService.getNotePathTitle(parentNotePath)})`)); + if (pathSegments) { + if (pathSegments.length) { + $container.append($("").append(treeService.formatNotePath(pathSegments))); } } } diff --git a/src/public/app/services/tree.js b/src/public/app/services/tree.js index 2726036b9..1178106e0 100644 --- a/src/public/app/services/tree.js +++ b/src/public/app/services/tree.js @@ -272,8 +272,16 @@ async function getNoteTitleWithPathAsSuffix(notePath) { const $titleWithPath = $('') .append($('').text(title)); + + $titleWithPath.append(formatNotePath(path)); + + return $titleWithPath; +} + +function formatNotePath(path) { + const $notePath = $(''); + if (path.length > 0) { - const $notePath = $(''); $notePath.append($(` ()`)); @@ -286,27 +294,29 @@ async function getNoteTitleWithPathAsSuffix(notePath) { } $notePath.append($(`))`)); - - $titleWithPath.append($notePath); } - - return $titleWithPath; + + return $notePath; } function isNotePathInHiddenSubtree(notePath) { return notePath?.includes("root/_hidden"); } + + export default { resolveNotePath, resolveNotePathToSegments, getParentProtectedStatus, getNotePath, + getNotePathTitleComponents, getNoteIdFromUrl, getNoteIdAndParentIdFromUrl, getBranchIdFromUrl, getNoteTitle, getNotePathTitle, getNoteTitleWithPathAsSuffix, - isNotePathInHiddenSubtree + isNotePathInHiddenSubtree, + formatNotePath }; diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css index 2c0b089c7..fe410689a 100644 --- a/src/public/stylesheets/theme-next.css +++ b/src/public/stylesheets/theme-next.css @@ -62,6 +62,7 @@ --timeline-left-gap: 20px; --timeline-right-gap: 20px; + --timeline-item-vertical-margin: 4px; --timeline-bullet-size: 10px; --timeline-bullet-vertical-pos: .75em; --timeline-connector-size: 4px; diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css index 7bd975dd3..b172fb341 100644 --- a/src/public/stylesheets/theme-next/shell.css +++ b/src/public/stylesheets/theme-next/shell.css @@ -947,27 +947,6 @@ body .calendar-dropdown-widget .calendar-body a:hover { } -.note-tooltip-content .note-title-with-path .path-bracket { - /* Hide the leading and trailing bracket from the path */ - display: none; -} - -.note-tooltip-content .note-title-with-path .path-delimiter { - /* Hide the path delimiters (slashes) */ - display: none; -} - -.note-tooltip-content .note-title-with-path .path-delimiter + span::before { - /* Replace the path delimiters with arrows */ - display: inline-block; - content: "\ebe6"; - padding: 0 4px; - line-height: 1; - vertical-align: bottom; - font-family: boxicons; - opacity: .75; -} - .note-tooltip-content .note-path { display: block; color: var(--muted-text-color); @@ -995,10 +974,6 @@ body .calendar-dropdown-widget .calendar-body a:hover { margin: var(--bs-modal-padding); } -.recent-changes-content small { - color: var(--muted-text-color); -} - .recent-changes-content > div { padding-left: var(--timeline-left-gap); } @@ -1030,6 +1005,39 @@ body .calendar-dropdown-widget .calendar-body a:hover { .recent-changes-content ul li { position: relative; + color: transparent; /* Hide the "-" character */ + padding-top: var(--timeline-item-vertical-margin); + padding-bottom: var(--timeline-item-vertical-margin); +} + +.recent-changes-content ul li span { + /* Ensure spans are not transparent */ + color: var(--active-item-text-color); +} + +.recent-changes-content ul li .note-path { + color: var(--muted-text-color); + font-size: .75em; +} + +/* Item time */ +.recent-changes-content ul li > span:first-child { + display: inline-block; + min-width: 80px; + vertical-align: top; + color: var(--active-item-text-color); +} + +/* Item title & path container */ +.recent-changes-content ul li > span:nth-child(2) { + display: inline-block; +} + +/* Item path */ +.recent-changes-content ul li > span:nth-child(2) small { + display: block; + line-height: 1; + opacity: .75; } /* Timeline connector */ @@ -1065,7 +1073,7 @@ body .calendar-dropdown-widget .calendar-body a:hover { .recent-changes-content ul li::after { position: absolute; content: ""; - top: var(--timeline-bullet-vertical-pos); + top: calc(var(--timeline-item-vertical-margin) + var(--timeline-bullet-vertical-pos)); left: 0; width: var(--timeline-bullet-size); height: var(--timeline-bullet-size); @@ -1200,4 +1208,37 @@ body .calendar-dropdown-widget .calendar-body a:hover { .note-list.grid-view .ck-content figure.image { width: 25%; +} + +/* Note paths */ + +.note-path .path-bracket { + /* Hide the leading and trailing bracket from the path */ + display: none; +} + +.note-path .path-delimiter { + /* Hide the path delimiters (slashes) */ + display: none; +} + +.note-path .path-delimiter + span::before { + /* Replace the path delimiters with arrows */ + display: inline-block; + content: "\ed3b"; + padding: 0 .25em; + font-family: boxicons; + opacity: .75; + transform: translateY(4%); +} + +/* Search */ + +.search-result-widget-content .note-path .path-bracket { + display: inline; +} + +.search-result-widget-content .note-path { + opacity: .75; + font-weight: normal; } \ No newline at end of file