Merge pull request #769 from TriliumNext/style/next/recent-changes-section

Style Next: Improve the styling of the "Recent Changes" list

src/public/app/widgets/dialogs/recent_changes.js

@@ -81,7 +81,12 @@ export default class RecentChangesDialog extends BasicWidget {
                 let $noteLink;
 
                 if (change.current_isDeleted) {
-                    $noteLink = $("<span>").text(change.current_title);
+                    $noteLink = $("<span>");
+
+                    $noteLink.append($("<span>")
+                        .addClass("note-title")
+                        .text(change.current_title)
+                    );
 
                     if (change.canBeUndeleted) {
                         const $undeleteLink = $(`<a href="javascript:">`)
@@ -120,13 +125,22 @@ export default class RecentChangesDialog extends BasicWidget {
                 }
 
                 $changesList.append($('<li>')
+                    .on("click", (e) => {
+                        // Skip clicks on the link or deleted notes
+                        if (e.target?.nodeName !== "A" && !change.current_isDeleted) {
+                            // Open the current note
+                            appContext.tabManager.getActiveContext().setNote(change.noteId);
+                        }
+                    })
+                    .addClass(() => {
+                        if (change.current_isDeleted) return "deleted-note";
+                    })
                     .append(
                         $("<span>")
                             .text(formattedTime)
                             .attr("title", change.date)
                     )
-                    .append(' - ')
+                    .append($noteLink.addClass("note-title")));
-                    .append($noteLink));
             }
 
             this.$content.append(dayEl);

src/public/stylesheets/style.css

@@ -1305,3 +1305,17 @@ body.electron.platform-darwin:not(.native-titlebar) .tab-row-container {
     margin: 8px 10px;    
     font-size: 18px;
 }
+
+.recent-changes-content li > span:first-child::after {
+    content: " - ";
+}
+
+.recent-changes-content li {
+    border: 1px solid transparent;
+}
+
+.recent-changes-content li:not(.deleted-note):hover {
+    border-color: var(--hover-item-border-color);
+    background: var(--hover-item-background-color);
+    color: var(--hover-item-text-color);
+}

src/public/stylesheets/theme-next.css

@@ -68,7 +68,8 @@
 
     --timeline-left-gap: 20px;
     --timeline-right-gap: 20px;
-    --timeline-item-vertical-margin: 4px;
+    --timeline-item-top-padding: 4px;
+    --timeline-item-bottom-padding: 8px;
     --timeline-bullet-size: 10px;
     --timeline-bullet-vertical-pos: .75em;
     --timeline-connector-size: 4px;
@@ -216,6 +217,7 @@
    --timeline-bullet-hover-color: black;
    --timeline-connector-color: #f1f1f1;
    --timeline-connector-active-color: #ddd;
+   --timeline-connector-hover-blend-mode: multiply;
 
    --tooltip-background-color: rgba(255, 255, 255, 0.85);
    --tooltip-foreground-color: #000000ba;
@@ -360,6 +362,7 @@
         --timeline-bullet-hover-color: white;
         --timeline-connector-color: #464646;
         --timeline-connector-active-color: #545454;
+        --timeline-connector-hover-blend-mode: exclusion;
 
         --tooltip-background-color: rgba(67, 67, 67, 0.86);
         --tooltip-foreground-color: #ffffffeb;

src/public/stylesheets/theme-next/shell.css

@@ -1054,17 +1054,13 @@ body .calendar-dropdown-widget .calendar-body a:hover {
     margin: var(--bs-modal-padding);
 }
 
-.recent-changes-content > div {
-    padding-left: var(--timeline-left-gap);
-}
-
 /* Date headings */
 .recent-changes-content > div > b {
     position: sticky;
     display: block;
     top: 0;
     background: var(--modal-background-color);
-    padding: 10px 0;
+    padding: 10px 0 10px calc(var(--timeline-left-gap) + var(--timeline-right-gap));
     font-size: 1.25em;
     font-weight: 300;
     z-index: 10;
@@ -1077,22 +1073,28 @@ body .calendar-dropdown-widget .calendar-body a:hover {
 }
 
 /* Timeline items */
-.recent-changes-content ul li,
-.recent-changes-content > div > b {
-    margin: 0;
-    padding-left: var(--timeline-right-gap);
-}
-
 .recent-changes-content ul li {
+    display: flex;
     position: relative;
-    color: transparent; /* Hide the "-" character */
+    margin: 0;
-    padding-top: var(--timeline-item-vertical-margin);
+    border: unset;
-    padding-bottom: var(--timeline-item-vertical-margin);
+    padding-top: var(--timeline-item-top-padding);
+    padding-bottom: var(--timeline-item-bottom-padding);
+    padding-left: calc(var(--timeline-left-gap) + var(--timeline-right-gap));
+    padding-right: var(--timeline-left-gap);
+    color: var(--active-item-text-color);
 }
 
-.recent-changes-content ul li span {
+.recent-changes-content li > span:first-child::after {
-    /* Ensure spans are not transparent */
+    /* Remove the dash between time and note title */
-    color: var(--active-item-text-color);
+    content: "" !important;
+}
+
+
+.recent-changes-content ul li:not(.deleted-note):hover {
+    border-radius: 8px;
+    background: var(--hover-item-background-color);
+    color: var(--hover-item-text-color);
 }
 
 .recent-changes-content ul li .note-path {
@@ -1105,7 +1107,7 @@ body .calendar-dropdown-widget .calendar-body a:hover {
     display: inline-block;
     min-width: 80px;
     vertical-align: top;
-    color: var(--active-item-text-color);
+    color: var(--muted-text-color);
 }
 
 /* Item title & path container */
@@ -1113,6 +1115,22 @@ body .calendar-dropdown-widget .calendar-body a:hover {
     display: inline-block;
 }
 
+/* Item title link */
+
+.recent-changes-content ul li .note-title a {
+    color: currentColor;
+}
+
+.recent-changes-content ul li .note-title a:hover {
+    text-decoration: underline;
+}
+
+/* Item title for deleted notes */
+.recent-changes-content ul li.deleted-note .note-title {
+    text-decoration: line-through;
+}
+
+
 /* Item path */
 .recent-changes-content ul li > span:nth-child(2) small {
     display: block;
@@ -1126,7 +1144,7 @@ body .calendar-dropdown-widget .calendar-body a:hover {
     position: absolute;
     content: "";
     top: var(--connector-top, 0);
-    left: calc((var(--timeline-bullet-size) - var(--timeline-connector-size)) / 2);
+    left: calc(var(--timeline-left-gap) + ((var(--timeline-bullet-size) - var(--timeline-connector-size)) / 2));
     bottom: var(--connector-bottom, 0);
     width: var(--timeline-connector-size);
     border-radius: var(--connector-radius, 0) var(--connector-radius, 0) 0 0;
@@ -1134,6 +1152,10 @@ body .calendar-dropdown-widget .calendar-body a:hover {
     transition: background-color 400ms ease-in-out;
 }
 
+.recent-changes-content ul li:hover:before {
+    mix-blend-mode: var(--timeline-connector-hover-blend-mode);
+}
+
 .recent-changes-content > div:hover {
     --timeline-connector-color: var(--timeline-connector-active-color);
 }
@@ -1153,8 +1175,8 @@ body .calendar-dropdown-widget .calendar-body a:hover {
 .recent-changes-content ul li::after {
     position: absolute;
     content: "";
-    top: calc(var(--timeline-item-vertical-margin) + var(--timeline-bullet-vertical-pos));
+    top: calc(var(--timeline-item-top-padding) + var(--timeline-bullet-vertical-pos));
-    left: 0;
+    left: var(--timeline-left-gap);
     width: var(--timeline-bullet-size);
     height: var(--timeline-bullet-size);
     border-radius: 50%;