Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-10-31 21:11:30 +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 .highlights-list li {
padding: 2px 8px;
padding-top: 2px;
padding-right: 8px;
padding-bottom: 2px;
border-radius: 4px;
text-align: unset;
transition:

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

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