Skip to content

Commit c386d9b

Browse files
timvandermeijtimvandermeij
authored
Merge pull request #20222 from calixteman/sidebar_scroll
[Editor] Make scrollable the area containing the comments in the sidebar
2 parents c8d49db + dd4b475 commit c386d9b

File tree

2 files changed

+97
-90
lines changed

2 files changed

+97
-90
lines changed

‎web/comment_manager.css‎

Lines changed: 94 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -480,115 +480,120 @@
480480
}
481481
}
482482

483-
#editorCommentsSidebarList {
484-
display: flex;
485-
width: auto;
486-
padding: 1px 16px 0;
487-
gap: 10px;
488-
flex: 1 0 0;
489-
align-self: stretch;
490-
align-items: flex-start;
491-
flex-direction: column;
492-
list-style-type: none;
483+
#editorCommentsSidebarListContainer {
484+
overflow: scroll;
493485

494-
.sidebarComment {
486+
#editorCommentsSidebarList {
495487
display: flex;
496488
width: auto;
497-
padding: 8px 16px 16px;
498-
flex-direction: column;
499-
align-items: flex-start;
489+
padding: 1px 16px 0;
490+
gap: 10px;
491+
flex: 1 0 0;
500492
align-self: stretch;
501-
gap: 4px;
502-
503-
border-radius: 8px;
504-
border: 0.5px solid var(--comment-border-color);
505-
background-color: var(--comment-bg-color);
493+
align-items: flex-start;
494+
flex-direction: column;
495+
list-style-type: none;
496+
overflow: scroll;
506497

507-
&:not(.noComments) {
508-
&:hover {
509-
background-color: var(--comment-hover-bg-color);
498+
.sidebarComment {
499+
display: flex;
500+
width: auto;
501+
padding: 8px 16px 16px;
502+
flex-direction: column;
503+
align-items: flex-start;
504+
align-self: stretch;
505+
gap: 4px;
510506

511-
time::after {
512-
display: inline-block;
513-
background-color: var(--comment-indicator-hover-fg-color);
514-
}
515-
}
507+
border-radius: 8px;
508+
border: 0.5px solid var(--comment-border-color);
509+
background-color: var(--comment-bg-color);
516510

517-
&:active {
518-
background-color: var(--comment-active-bg-color);
511+
&:not(.noComments) {
512+
&:hover {
513+
background-color: var(--comment-hover-bg-color);
519514

520-
time::after {
521-
display: inline-block;
522-
background-color: var(--comment-indicator-active-fg-color);
515+
time::after {
516+
display: inline-block;
517+
background-color: var(--comment-indicator-hover-fg-color);
518+
}
523519
}
524-
}
525-
526-
&:is(:focus, :focus-visible) time::after {
527-
display: inline-block;
528-
background-color: var(--comment-indicator-focus-fg-color);
529-
}
530520

531-
&:focus-visible {
532-
outline: 2px solid var(--comment-focus-outline-color);
533-
outline-offset: 2px;
534-
}
521+
&:active {
522+
background-color: var(--comment-active-bg-color);
535523

536-
&.selected {
537-
.sidebarCommentText {
538-
max-height: fit-content;
539-
-webkit-line-clamp: unset;
524+
time::after {
525+
display: inline-block;
526+
background-color: var(--comment-indicator-active-fg-color);
527+
}
540528
}
541529

542-
time::after {
530+
&:is(:focus, :focus-visible) time::after {
543531
display: inline-block;
544-
background-color: var(--comment-indicator-selected-fg-color);
532+
background-color: var(--comment-indicator-focus-fg-color);
545533
}
546-
}
547-
}
548534

549-
.sidebarCommentText {
550-
font: menu;
551-
font-style: normal;
552-
font-weight: 400;
553-
line-height: normal;
554-
font-size: 15px;
555-
width: 100%;
556-
height: fit-content;
557-
max-height: 80px;
558-
display: -webkit-box;
559-
-webkit-box-orient: vertical;
560-
-webkit-line-clamp: 2;
561-
overflow: hidden;
562-
overflow-wrap: break-word;
563-
}
535+
&:focus-visible {
536+
outline: 2px solid var(--comment-focus-outline-color);
537+
outline-offset: 2px;
538+
}
564539

565-
&.noComments .sidebarCommentText {
566-
max-height: fit-content;
567-
-webkit-line-clamp: unset;
568-
user-select: none;
569-
}
540+
&.selected {
541+
.sidebarCommentText {
542+
max-height: fit-content;
543+
-webkit-line-clamp: unset;
544+
}
570545

571-
time {
572-
width: 100%;
573-
display: inline-flex;
574-
align-items: center;
575-
justify-content: space-between;
546+
time::after {
547+
display: inline-block;
548+
background-color: var(--comment-indicator-selected-fg-color);
549+
}
550+
}
551+
}
576552

577-
font: menu;
578-
font-style: normal;
579-
font-weight: 400;
580-
line-height: normal;
581-
font-size: 13px;
553+
.sidebarCommentText {
554+
font: menu;
555+
font-style: normal;
556+
font-weight: 400;
557+
line-height: normal;
558+
font-size: 15px;
559+
width: 100%;
560+
height: fit-content;
561+
max-height: 80px;
562+
display: -webkit-box;
563+
-webkit-box-orient: vertical;
564+
-webkit-line-clamp: 2;
565+
overflow: hidden;
566+
overflow-wrap: break-word;
567+
}
582568

583-
&::after {
584-
content: "";
585-
display: none;
586-
width: 16px;
587-
height: 16px;
588-
mask-repeat: no-repeat;
589-
mask-position: center;
590-
mask-image: var(--comment-edit-button-icon);
591-
transform: scaleX(var(--dir-factor));
569+
&.noComments .sidebarCommentText {
570+
max-height: fit-content;
571+
-webkit-line-clamp: unset;
572+
user-select: none;
573+
}
574+
575+
time {
576+
width: 100%;
577+
display: inline-flex;
578+
align-items: center;
579+
justify-content: space-between;
580+
581+
font: menu;
582+
font-style: normal;
583+
font-weight: 400;
584+
line-height: normal;
585+
font-size: 13px;
586+
587+
&::after {
588+
content: "";
589+
display: none;
590+
width: 16px;
591+
height: 16px;
592+
mask-repeat: no-repeat;
593+
mask-position: center;
594+
mask-image: var(--comment-edit-button-icon);
595+
transform: scaleX(var(--dir-factor));
596+
}
592597
}
593598
}
594599
}

‎web/viewer.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -260,7 +260,9 @@
260260
<span data-l10n-id="pdfjs-editor-comments-sidebar-close-button-label"></span>
261261
</button>
262262
</div>
263-
<ul id="editorCommentsSidebarList"></ul>
263+
<div id="editorCommentsSidebarListContainer">
264+
<ul id="editorCommentsSidebarList"></ul>
265+
</div>
264266
</div>
265267
</div>
266268
</div>

0 commit comments

Comments
 (0)