Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-01 20:52:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Style Next: Improve the styling of the "Recent Changes" list
This commit is contained in:
Elian Doran 2024-12-13 08:43:27 +02:00 committed by GitHub
commit 68fda768e7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 78 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/public/app/widgets/dialogs/recent_changes.js
View File

@ -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));
.append($noteLink.addClass("note-title")));
}
this.$content.append(dayEl);

14
src/public/stylesheets/style.css
View File

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

5
src/public/stylesheets/theme-next.css
View File

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

64
src/public/stylesheets/theme-next/shell.css
View File

@ -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 */
padding-top: var(--timeline-item-vertical-margin);
padding-bottom: var(--timeline-item-vertical-margin);
margin: 0;
border: unset;
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 {
/* Ensure spans are not transparent */
color: var(--active-item-text-color);
.recent-changes-content li > span:first-child::after {
/* Remove the dash between time and note title */
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));
left: 0;
top: calc(var(--timeline-item-top-padding) + var(--timeline-bullet-vertical-pos));
left: var(--timeline-left-gap);
width: var(--timeline-bullet-size);
height: var(--timeline-bullet-size);
border-radius: 50%;