Beanz/pdf.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #20222 from calixteman/sidebar_scroll

Browse Source 
[Editor] Make scrollable the area containing the comments in the sidebar
This commit is contained in:
Tim van der Meij 2025-09-01 20:28:35 +02:00 committed by GitHub
commit c386d9b87d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 104 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

197
web/comment_manager.css
View File

@ -480,116 +480,121 @@
}
}
#editorCommentsSidebarList {
display: flex;
width: auto;
padding: 1px 16px 0;
gap: 10px;
flex: 1 0 0;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
list-style-type: none;
#editorCommentsSidebarListContainer {
overflow: scroll;
.sidebarComment {
#editorCommentsSidebarList {
display: flex;
width: auto;
padding: 8px 16px 16px;
flex-direction: column;
align-items: flex-start;
padding: 1px 16px 0;
gap: 10px;
flex: 1 0 0;
align-self: stretch;
gap: 4px;
align-items: flex-start;
flex-direction: column;
list-style-type: none;
overflow: scroll;
border-radius: 8px;
border: 0.5px solid var(--comment-border-color);
background-color: var(--comment-bg-color);
.sidebarComment {
display: flex;
width: auto;
padding: 8px 16px 16px;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
gap: 4px;
&:not(.noComments) {
&:hover {
background-color: var(--comment-hover-bg-color);
border-radius: 8px;
border: 0.5px solid var(--comment-border-color);
background-color: var(--comment-bg-color);
time::after {
&:not(.noComments) {
&:hover {
background-color: var(--comment-hover-bg-color);
time::after {
display: inline-block;
background-color: var(--comment-indicator-hover-fg-color);
}
}
&:active {
background-color: var(--comment-active-bg-color);
time::after {
display: inline-block;
background-color: var(--comment-indicator-active-fg-color);
}
}
&:is(:focus, :focus-visible) time::after {
display: inline-block;
background-color: var(--comment-indicator-hover-fg-color);
background-color: var(--comment-indicator-focus-fg-color);
}
&:focus-visible {
outline: 2px solid var(--comment-focus-outline-color);
outline-offset: 2px;
}
&.selected {
.sidebarCommentText {
max-height: fit-content;
-webkit-line-clamp: unset;
}
time::after {
display: inline-block;
background-color: var(--comment-indicator-selected-fg-color);
}
}
}
&:active {
background-color: var(--comment-active-bg-color);
.sidebarCommentText {
font: menu;
font-style: normal;
font-weight: 400;
line-height: normal;
font-size: 15px;
width: 100%;
height: fit-content;
max-height: 80px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
overflow-wrap: break-word;
}
time::after {
display: inline-block;
background-color: var(--comment-indicator-active-fg-color);
&.noComments .sidebarCommentText {
max-height: fit-content;
-webkit-line-clamp: unset;
user-select: none;
}
time {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: space-between;
font: menu;
font-style: normal;
font-weight: 400;
line-height: normal;
font-size: 13px;
&::after {
content: "";
display: none;
width: 16px;
height: 16px;
mask-repeat: no-repeat;
mask-position: center;
mask-image: var(--comment-edit-button-icon);
transform: scaleX(var(--dir-factor));
}
}
&:is(:focus, :focus-visible) time::after {
display: inline-block;
background-color: var(--comment-indicator-focus-fg-color);
}
&:focus-visible {
outline: 2px solid var(--comment-focus-outline-color);
outline-offset: 2px;
}
&.selected {
.sidebarCommentText {
max-height: fit-content;
-webkit-line-clamp: unset;
}
time::after {
display: inline-block;
background-color: var(--comment-indicator-selected-fg-color);
}
}
}
.sidebarCommentText {
font: menu;
font-style: normal;
font-weight: 400;
line-height: normal;
font-size: 15px;
width: 100%;
height: fit-content;
max-height: 80px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
overflow-wrap: break-word;
}
&.noComments .sidebarCommentText {
max-height: fit-content;
-webkit-line-clamp: unset;
user-select: none;
}
time {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: space-between;
font: menu;
font-style: normal;
font-weight: 400;
line-height: normal;
font-size: 13px;
&::after {
content: "";
display: none;
width: 16px;
height: 16px;
mask-repeat: no-repeat;
mask-position: center;
mask-image: var(--comment-edit-button-icon);
transform: scaleX(var(--dir-factor));
}
}
}
}

4
web/viewer.html
View File

@ -260,7 +260,9 @@ See https://github.com/adobe-type-tools/cmap-resources
<span data-l10n-id="pdfjs-editor-comments-sidebar-close-button-label"></span>
</button>
</div>
<ul id="editorCommentsSidebarList"></ul>
<div id="editorCommentsSidebarListContainer">
<ul id="editorCommentsSidebarList"></ul>
</div>
</div>
</div>
</div>