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

style(toc): Adjust the CSS of the TOC

Browse Source
This commit is contained in:
SiriusXT 2025-05-17 17:33:29 +08:00
parent c80d7a3ec3
commit 6c2c84d941
2 changed files with 39 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/client/src/stylesheets/theme-next/shell.css
View File

@ -1637,7 +1637,9 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
#right-pane .toc li, #right-pane .toc li,
#right-pane .highlights-list li { #right-pane .highlights-list li {
padding: 2px 8px; padding-top: 2px;
padding-right: 8px;
padding-bottom: 2px;
border-radius: 4px; border-radius: 4px;
text-align: unset; text-align: unset;
transition: transition:

52
apps/client/src/widgets/toc.ts
View File

@ -35,12 +35,8 @@ const TPL = /*html*/`<div class="toc-widget">
.toc ol { .toc ol {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
padding-left: 20px;
transition: max-height 0.3s ease;
}
.toc > ol {
padding-left: 0px; padding-left: 0px;
transition: max-height 0.3s ease;
} }
.toc li.collapsed + ol { .toc li.collapsed + ol {
@ -51,8 +47,8 @@ const TPL = /*html*/`<div class="toc-widget">
content: ""; content: "";
position: absolute; position: absolute;
height: 100%; height: 100%;
left: 17px;
border-left: 1px solid var(--main-border-color); border-left: 1px solid var(--main-border-color);
z-index: 10;
} }
.toc li { .toc li {
@ -67,11 +63,35 @@ const TPL = /*html*/`<div class="toc-widget">
hyphens: auto; hyphens: auto;
} }
.toc > ol {
--toc-depth-level: 1;
}
.toc > ol > ol {
--toc-depth-level: 2;
}
.toc > ol > ol > ol {
--toc-depth-level: 3;
}
.toc > ol > ol > ol > ol {
--toc-depth-level: 4;
}
.toc > ol > ol > ol > ol > ol {
--toc-depth-level: 5;
}
.toc > ol ol::before {
left: calc((var(--toc-depth-level) - 2) * 20px + 14px);
}
.toc li {
padding-left: calc((var(--toc-depth-level) - 1) * 20px + 4px);
}
.toc li .collapse-button { .toc li .collapse-button {
display: flex; display: flex;
position: relative; position: relative;
width: 20px; width: 21px;
height: 20px; height: 21px;
flex-shrink: 0; flex-shrink: 0;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -83,12 +103,12 @@ const TPL = /*html*/`<div class="toc-widget">
} }
.toc li .item-content { .toc li .item-content {
margin-left: 28px; margin-left: 24px;
flex: 1; flex: 1;
} }
.toc li .collapse-button + .item-content { .toc li .collapse-button + .item-content {
margin-left: 8px; margin-left: 4px;
} }
.toc li:hover { .toc li:hover {
@ -301,7 +321,7 @@ export default class TocWidget extends RightPanelWidget {
if ($previousLi) { if ($previousLi) {
const headingKey = `h${newLevel}_${headingIndex}_${$previousLi?.text().trim()}`; const headingKey = `h${newLevel}_${headingIndex}_${$previousLi?.text().trim()}`;
this.setupCollapsibleHeading($ol, $previousLi, headingKey, tocCollapsedHeadings, validHeadingKeys); this.setupCollapsibleHeading($ol, $previousLi, headingKey, tocCollapsedHeadings, validHeadingKeys);
} }
} }
} else if (levelDelta < 0) { } else if (levelDelta < 0) {
// Close as many lists as curLevel - newLevel // Close as many lists as curLevel - newLevel
@ -317,10 +337,9 @@ export default class TocWidget extends RightPanelWidget {
// //
const headingText = await this.replaceMathTextWithKatax(m[2]); const headingText = await this.replaceMathTextWithKatax(m[2]);
const $itemContent = $('<div class="item-content">').html(headingText).on("click", () => { const $itemContent = $('<div class="item-content">').html(headingText);
this.jumpToHeading(headingIndex); const $li = $("<li>").append($itemContent)
}); .on("click", () => this.jumpToHeading(headingIndex));
const $li = $("<li>").append($itemContent);
$ols[$ols.length - 1].append($li); $ols[$ols.length - 1].append($li);
headingCount = headingIndex; headingCount = headingIndex;
$previousLi = $li; $previousLi = $li;
@ -401,7 +420,8 @@ export default class TocWidget extends RightPanelWidget {
$previousLi.removeClass("collapsed"); $previousLi.removeClass("collapsed");
} }
$collapseButton.on("click", () => { $collapseButton.on("click", (event) => {
event.stopPropagation();
if ($previousLi.hasClass("animating")) return; if ($previousLi.hasClass("animating")) return;
const willCollapse = !$previousLi.hasClass("collapsed"); const willCollapse = !$previousLi.hasClass("collapsed");
$previousLi.addClass("animating"); $previousLi.addClass("animating");