Merge pull request #759 from TriliumNext/feat/client/format-note-paths

Format note paths

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) {
+        const resolvedPath = resolvedPathSegments.join("/");
-            resolvedNotePathSegments.pop(); // remove last element
+        const pathSegments = await treeService.getNotePathTitleComponents(resolvedPath);
 
-            const parentNotePath = resolvedNotePathSegments.join("/").trim();
+        if (pathSegments) {
-
+            if (pathSegments.length) {
-            if (parentNotePath) {
+                $container.append($("<small>").append(treeService.formatNotePath(pathSegments)));
-                $container.append($("<small>").text(` (${await treeService.getNotePathTitle(parentNotePath)})`));
             }
         }
     }

src/public/app/services/tree.js

@@ -272,8 +272,16 @@ async function getNoteTitleWithPathAsSuffix(notePath) {
     const $titleWithPath = $('<span class="note-title-with-path">')
         .append($('<span class="note-title">').text(title));
 
+
+    $titleWithPath.append(formatNotePath(path));
+    
+    return $titleWithPath;
+}
+
+function formatNotePath(path) {
+    const $notePath = $('<span class="note-path">');
+
     if (path.length > 0) {
-        const $notePath = $('<span class="note-path">');
         
         $notePath.append($(`<span class="path-bracket"> (</span>)`));
 
@@ -286,27 +294,29 @@ async function getNoteTitleWithPathAsSuffix(notePath) {
         }
 
         $notePath.append($(`<span class="path-bracket">)</span>)`));
-
-        $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
 };

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;

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;
 }