Skip to content

Improve comment card for better readability and hierarchy #13325

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Nov 11, 2025
Merged

Improve comment card for better readability and hierarchy #13325

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
da4f397
Improve comment card for better readability and hierarchy
banobepascal Nov 4, 2025
a845b03
Adjust comment list top offest for proper indention in comment thread
banobepascal Nov 4, 2025
b49b16c
Cypress: Update comment menubar test to target menu selector
banobepascal Nov 5, 2025
e87ee55
comments: improve annotation scrollbar styling
banobepascal Nov 6, 2025
936d477
Add hover states for annotation icons
banobepascal Nov 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions browser/css/color-palette-dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
--color-text-lighter: #fff; /* secondard text, disabled */
--color-status-badge: #d6d6d6;
--color-slideshow: #d6d6d6;
--color-date-text: #d6d6d6;

--color-main-background: #121212;
--color-background-dark: #1E1E1E; /* select */
Expand Down Expand Up @@ -73,6 +74,8 @@
--color-smart-guides-helper-line: #f36d4f;

--color-quickfind-border: #444;
--scrollbar-color: #c0bfbc transparent;
--color-background-hover: #363636;
}

[data-bg-theme='dark'] {
Expand Down
3 changes: 3 additions & 0 deletions browser/css/color-palette.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
--color-text-calc-header: #e8e8e8;
--color-status-badge: #616161;
--color-slideshow: #A8A8A8;
--color-date-text: #555555;

--color-main-background: #F8F9FA;
--color-background-dark: #e8e8e8; /* select */
Expand Down Expand Up @@ -82,6 +83,8 @@
--color-treeview-highlight: #FFEE80;
--color-treeview-highlight-text: #222;
--color-quickfind-border: #e1dfdd;
--scrollbar-color: #c0bfbc #fafafa;
--color-background-hover: #F5F5F5;
}

[data-bg-theme='light'] {
Expand Down
100 changes: 75 additions & 25 deletions browser/css/cool.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
--tb-fs-s: 1vw;

--default-height: 24px;
--default-width: 24px;
--header-height: 34px;

/* Annotations */
Expand Down Expand Up @@ -599,7 +600,7 @@ body {
}

.cool-annotation-content-wrapper, .cool-annotation-redline-content-wrapper {
padding: 8px;
padding: 12px 8px;
font-family: var(--cool-font) !important;
font-size: var(--default-font-size);
text-align: left;
Expand All @@ -609,6 +610,22 @@ body {
border: none;
border-radius: var(--border-radius);
width: auto;
display: flex;
flex-direction: column;
row-gap: 8px;
}

.cool-annotation-author-header {
display: inline-flex;
align-items: center;
width: 100%;
}

.cool-annotation-footer {
display: inline-flex;
justify-content: space-between;
align-items: center;
width: 100%;
}

.cool-annotation:not(.annotation-active) .cool-annotation-content-wrapper:hover,
Expand All @@ -622,10 +639,11 @@ body {
}

.cool-annotation-content {
margin: 3px;
line-height: 1.4;
max-height: var(--annotation-input-size);
overflow: auto;
scrollbar-color: var(--scrollbar-color);
scrollbar-width: thin;
}

.cool-annotation-info-collapsed {
Expand Down Expand Up @@ -682,21 +700,25 @@ body {
hyphens: auto;
}

.cool-annotation-content-author {
margin: 0;
margin-top: 2px;
height: 18px;
}

.cool-annotation-content-resolved {
color: var(--color-success);
font-weight: 700;
font-size: 0.625rem;
}

.cool-annotation-edit {
margin: 3px;
line-height: 1.4;
}

.cool-annotation-edit .cool-font {
padding: 0 !important;
}

.cool-annotation-edit p {
margin-top: 0;
margin-bottom: 8px;
}

.cool-annotation-textarea {
font-family: var(--cool-font) !important;
font-size: var(--default-font-size);
Expand All @@ -707,6 +729,7 @@ body {
padding: 2px;
height: 54px;
width: 100%;
margin-bottom: 8px;
box-sizing: border-box;
}

Expand Down Expand Up @@ -740,9 +763,14 @@ body {
display: inline-block;
border: solid 2px;
border-radius: 50%;
height: 32px;
width: 32px;
height: var(--default-height);
width: var(--default-width);
padding: 0;
outline: 2px solid var(--color-background-lighter);
outline-offset: -3px;
}

.cool-annotation.collapsed-comment .cool-annotation-img {
opacity: 0.9;
}

Expand All @@ -759,9 +787,8 @@ body {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 32px; /* Width of new image */
height: 32px; /* Height of new image */
background: url('images/user.svg') center 3px no-repeat;
width: var(--default-width); /* Width of new image */
height: var(--default-height); /* Height of new image */
}

.leaflet-container .leaflet-pane.leaflet-calc-background-pane {
Expand Down Expand Up @@ -791,24 +818,35 @@ body {
}

.cool-annotation-author {
padding-left: 10px;
padding-right: 10px;
padding-left: 8px;
padding-right: 8px;
vertical-align: top;
display: table-cell;
width: 100%;
overflow: hidden;
max-width: 110px;
flex: 1;
}

.cool-annotation:not(.annotation-pop-up) .cool-annotation-author {
max-width: 150px;
}

.cool-annotation-menu, .cool-annotation-menu-redline, .cool-redline-accept-button, .cool-redline-reject-button {
.cool-annotation-content-author {
white-space: normal;
word-break: break-word;
}

.cool-annotation-menu, .cool-annotation-menu-redline, .cool-redline-accept-button, .cool-redline-reject-button, .cool-annotation-menu-edit {
margin: 0 !important;
padding: 0 !important;
min-width: initial !important;
width: var(--btn-size) !important;
height: var(--btn-size) !important;
width: var(--btn-img-size) !important;
height: var(--btn-img-size) !important;
vertical-align: top;
border: 1px solid transparent !important;
display: inline-block !important;
cursor: pointer;
box-sizing: border-box;
}

.cool-redline-accept-button {
Expand All @@ -827,12 +865,23 @@ body {
background: url('images/dark/lc_more.svg') no-repeat center/contain !important;
}

.cool-annotation-menu:hover, .cool-annotation-menu-redline:hover, .cool-redline-accept-button:hover, .cool-redline-reject-button:hover {
.cool-annotation-menu-edit {
background: url('images/lc_edit.svg') no-repeat center/contain !important;
}

[data-theme='dark'] .cool-annotation-menu-edit {
background: url('images/dark/lc_edit.svg') no-repeat center/contain !important;
}

.cool-annotation-menu:hover, .cool-annotation-menu-redline:hover, .cool-redline-accept-button:hover, .cool-redline-reject-button:hover, .cool-annotation-menu-edit:hover {
border: 1px solid var(--color-border-darker);
background-color: var(--color-background-hover) !important;
border-radius: 16px;
}

.cool-annotation-date {
font-size: var(--default-font-size);
font-size: 0.625rem;
color: var(--color-date-text);
}

.annotation-button-autosaved {
Expand All @@ -845,9 +894,10 @@ body {
}

.cool-annotation-menubar {
margin: 0;
padding: 0;
vertical-align: top;
display: flex;
justify-content: flex-end;
align-items: center;
column-gap: 4px;
}

.cool-annotation-child-line {
Expand Down
1 change: 1 addition & 0 deletions browser/images/dark/lc_edit.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions browser/images/lc_edit.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion browser/src/canvas/sections/CommentListSection.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ export class CommentSection extends CanvasSectionObject {
this.sectionProperties.arrow = null;
this.sectionProperties.show = null;
this.sectionProperties.showResolved = false;
this.sectionProperties.marginY = 10 * app.dpiScale;
this.sectionProperties.marginY = 20 * app.dpiScale;
this.sectionProperties.offset = 5 * app.dpiScale;
this.sectionProperties.width = Math.round(1 * app.dpiScale); // Configurable variable.
this.sectionProperties.scrollAnnotation = null; // For impress, when 1 or more comments exist.
Expand Down
31 changes: 22 additions & 9 deletions browser/src/canvas/sections/CommentSection.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,6 +235,13 @@ export class Comment extends CanvasSectionObject {

this.sectionProperties.contentNode = window.L.DomUtil.create('div', 'cool-annotation-content cool-dont-break', this.sectionProperties.wrapper);
this.sectionProperties.contentNode.id = 'annotation-content-area-' + this.sectionProperties.data.id;

const commentFooter = window.L.DomUtil.create('div', 'cool-annotation-footer', this.sectionProperties.wrapper);
this.sectionProperties.contentDate = window.L.DomUtil.create('div', 'cool-annotation-date', commentFooter);
const resolvedEl = window.L.DomUtil.create('div', 'cool-annotation-content-resolved', commentFooter);
this.sectionProperties.resolvedTextElement = resolvedEl;
this.updateResolvedField(this.sectionProperties.data.resolved);

this.sectionProperties.nodeModify = window.L.DomUtil.create('div', 'cool-annotation-edit' + ' modify-annotation', this.sectionProperties.wrapper);
this.sectionProperties.nodeModifyText = window.L.DomUtil.create('div', 'cool-annotation-textarea', this.sectionProperties.nodeModify);
this.createReplyHint(this.sectionProperties.nodeModify);
Expand Down Expand Up @@ -291,14 +298,8 @@ export class Comment extends CanvasSectionObject {
this.sectionProperties.author = window.L.DomUtil.create('table', 'cool-annotation-table', this.sectionProperties.wrapper);

var tbody = window.L.DomUtil.create('tbody', '', this.sectionProperties.author);
var rowResolved = window.L.DomUtil.create('tr', '', tbody);
var tdResolved = window.L.DomUtil.create('td', 'cool-annotation-resolved', rowResolved);
var pResolved = window.L.DomUtil.create('div', 'cool-annotation-content-resolved', tdResolved);
this.sectionProperties.resolvedTextElement = pResolved;

this.updateResolvedField(this.sectionProperties.data.resolved);

var tr = window.L.DomUtil.create('tr', '', tbody);
var tr = window.L.DomUtil.create('tr', 'cool-annotation-author-header', tbody);
this.sectionProperties.authorRow = tr;
tr.id = 'author table row ' + this.sectionProperties.data.id;
var tdImg = window.L.DomUtil.create('td', 'cool-annotation-img', tr);
Expand All @@ -318,11 +319,17 @@ export class Comment extends CanvasSectionObject {
this.sectionProperties.authorAvatarImg = imgAuthor;
this.sectionProperties.authorAvatartdImg = tdImg;
this.sectionProperties.contentAuthor = window.L.DomUtil.create('div', 'cool-annotation-content-author', tdAuthor);
this.sectionProperties.contentDate = window.L.DomUtil.create('div', 'cool-annotation-date', tdAuthor);
}

private createMenu (): void {
var tdMenu = window.L.DomUtil.create('td', 'cool-annotation-menubar', this.sectionProperties.authorRow);
const edit = window.L.DomUtil.create('div', 'cool-annotation-menu-edit', tdMenu);
edit.id = 'comment-annotation-menu-edit-' + this.sectionProperties.data.id;
edit.tabIndex = 0;
edit.onclick = this.onEditComment.bind(this);
edit.dataset.title = Comment.editCommentLabel;
edit.setAttribute('aria-label', Comment.editCommentLabel);

this.sectionProperties.menu = window.L.DomUtil.create('div', this.sectionProperties.data.trackchange ? 'cool-annotation-menu-redline' : 'cool-annotation-menu', tdMenu);
this.sectionProperties.menu.id = 'comment-annotation-menu-' + this.sectionProperties.data.id;
this.sectionProperties.menu.tabIndex = 0;
Expand Down Expand Up @@ -513,7 +520,7 @@ export class Comment extends CanvasSectionObject {
this.sectionProperties.authorAvatarImg.setAttribute('src', this.sectionProperties.data.avatar);
}
else {
$(this.sectionProperties.authorAvatarImg).css('padding-top', '4px');
$(this.sectionProperties.authorAvatarImg).css('padding', '1.8px');
}
var user = this.map.getViewId(this.sectionProperties.data.author);
if (user >= 0) {
Expand Down Expand Up @@ -985,6 +992,12 @@ export class Comment extends CanvasSectionObject {
window.L.DomEvent.stopPropagation(e);
}

private onEditComment (e: any): void {
this.sectionProperties.commentListSection.modify(this);
window.L.DomEvent.stopPropagation(e);
}


// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
private menuOnKeyPress (e: any): void {
if (e.code === 'Space' || e.code === 'Enter')
Expand Down
6 changes: 3 additions & 3 deletions cypress_test/integration_tests/desktop/writer/track_changes_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Track Changes', function (
cy.cGet('div.cool-annotation').should('have.length', 3);

cy.cGet('#comment-container-2').should('contain','some text1');
cy.cGet('#comment-container-2 .cool-annotation-menubar').click();
cy.cGet('#comment-container-2 .cool-annotation-menubar .cool-annotation-menu').click();
cy.cGet('body').contains('.context-menu-item', 'Remove').click();
cy.cGet('#comment-container-2').should('have.class','tracked-deleted-comment-show');
cy.cGet('#comment-container-2').should('contain','some text1');
Expand Down Expand Up @@ -107,7 +107,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Track Changes', function (
cy.cGet('div.cool-annotation').should('have.length', 3);

cy.cGet('#comment-container-2').should('contain','some text1');
cy.cGet('#comment-container-2 .cool-annotation-menubar').click();
cy.cGet('#comment-container-2 .cool-annotation-menubar .cool-annotation-menu').click();
cy.cGet('body').contains('.context-menu-item', 'Remove').click();
cy.cGet('#comment-container-2').should('have.class','tracked-deleted-comment-show');
cy.cGet('#comment-container-2').should('contain','some text1');
Expand Down Expand Up @@ -167,7 +167,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Track Changes', function (

// undo removed comment
cy.cGet('#comment-container-2').should('contain','some text1');
cy.cGet('#comment-container-2 .cool-annotation-menubar').click();
cy.cGet('#comment-container-2 .cool-annotation-menubar .cool-annotation-menu').click();
cy.cGet('body').contains('.context-menu-item', 'Remove').click();
cy.cGet('#comment-container-2').should('have.class','tracked-deleted-comment-show');
cy.cGet('div.cool-annotation').should('have.length', 3);
Expand Down