Improve comment card for better readability and hierarchy #13325

banobepascal · 2025-10-30T15:59:38Z

Change-Id: Iaefc7d1528b8273e53b669ff903075604358f8b8

Resolves: Improve Comment Card #13217
Target version: master

Summary

Added edit icon for a quick action to edit a comment
Date and resolved state moved to card bottom for cleaner header and more natural information flow
Improved and balanced cool-annotation alignments

PREVIEW

...

Checklist

I have run make prettier-write and formatted the code.
All commits have Change-Id
I have run tests with make check
I have issued make run and manually verified that everything looks okay
Documentation (manuals or wiki) has been updated or is not required

pedropintosilva

Thanks Banobe, great to see the move from a table to a flex box, maybe there will be the need to update some cypress bits (I'm not sure). Anyhow good job!

The pencil button looks too big, I see the svg has the correct dimensions but the shape inside seems bigger in this PR. Could you try to export the icon I did from penpot and see if it helps?

Also it seems the white inner border of the avatar (that helps to separate the avatar image and the color of the user) is too small in this PR

Also, could you please update the font-sizes? I have done that to see how it would look like (as per the PenPot designs):

but since we don't have full control of which font will be used from var(--cool-font) it can look too small, but we can test/check that after this PR is merged. For this PR it's important that we follow the PenPot designs, particularly that the date is not bigger nor the same size as the comment itself.

The Resolve seems not aligned with the comment and the icons, it should :

banobepascal · 2025-10-31T15:26:07Z

Also it seems the white inner border of the avatar (that helps to separate the avatar image and the color of the user) is too small in this PR

I see its set to 1.8px, i have made the adjustment

The Resolve seems not aligned with the comment and the icons, it should :

pedropintosilva · 2025-10-31T15:35:59Z

looks much better!

But now it seems the buttons are at 30px?

the blue border looks super small but maybe it's due to how we are creating/hacking the white outline

Also the pencil button lacks the same hover style as the more button

pedropintosilva · 2025-11-03T11:38:56Z

browser/css/cool.css

 .cool-annotation-img {
 	box-sizing: content-box !important;
 	max-width: 32px;
 	display: inline-block;
-	border: solid 2px;
+	border: solid 1px;
 	border-radius: 50%;
-	height: 32px;
-	width: 32px;
+	height: var(--default-height);
+	width: var(--default-width);
 	padding: 0;
 	opacity: 0.9;
 }


There is a problem with the opacity, it never gets to fully opaque (1), can you please check that? Historically, I think it was set to that opacity only if the card is not active (?) can you recheck git blames etc?

Yes, you are right. The opacity: 0.9 was recently added to create a hover effect where hovering over a collapsed comment sets the opacity to 1. However, I think opacity: 1 should be applied to active cards

https://github.com/CollaboraOnline/online/pull/10901/files#diff-b8cf5f31a83eeceb6681df5230b1f6cf1ba65d8b852638b3f93dac173a8a3de3R706

https://github.com/CollaboraOnline/online/pull/10901/files#diff-b8cf5f31a83eeceb6681df5230b1f6cf1ba65d8b852638b3f93dac173a8a3de3R711

pedropintosilva · 2025-11-03T11:41:07Z

browser/css/cool.css

 	max-width: 32px;
 	display: inline-block;
-	border: solid 2px;
+	border: solid 1px;


The colorful border cannot be glue to the image otherwise images will blend too much with the outer border and both the border color and the edges of the avatar will be confusing/indistinguishable. Please add also a white outline of 1px that it's offset by -2px.

pedropintosilva

^

pedropintosilva · 2025-11-04T09:26:08Z

.cool-annotation-img {
	box-sizing: content-box !important;
	max-width: 32px;
	display: inline-block;
	border: solid 2px;
	border-radius: 50%;
	height: var(--default-height);
	width: var(--default-width);
	padding: 0;
	outline: 2px solid #fff;
	outline-offset: -3px;
}

pedropintosilva · 2025-11-04T09:32:22Z

the offset that we use to place cards (via top property) in a thread ^ also needs to be adjusted

pedropintosilva · 2025-11-04T09:41:43Z

Also we have discussed and that more button looks a bit off, too "light" in comparison to the edit button. Best to try to use the lc_more.svg

banobepascal · 2025-11-04T16:10:46Z

the offset that we use to place cards (via top property) in a thread ^ also needs to be adjusted

Made update: dc59c9d

pedropintosilva

Can you please add missing box-size tot he "buttons" (divs) otherwise they become bigger than 24px

pedropintosilva · 2025-11-05T14:47:05Z

and if you can please style the scrollbar , right now it's really huge:

It can be smaller:

example:

scrollbar-color: gray #fafafa;
scrollbar-width: thin;

But better to use css vars, I think we already have some for scroll bar purposes if not we can create new ones and the respective value for darkmode

banobepascal · 2025-11-06T00:54:43Z

#13325 (comment)

pedropintosilva · 2025-11-06T15:03:34Z

#13325 (comment)

Please invert also the outline color, otherwise the border looks very thick on dark mode (due to outline being white)

pedropintosilva

thanks now the dark mode looks better. But we are still missing hover state on dark mode. After that we can merge.

As a an action item we should think a better way to align scrollbars within comment layout , scrollbar-gutter could help but probably not enough ... anyhow out side of this PR. But feel free to play with it and post your findings if you can.

banobepascal · 2025-11-07T00:42:04Z

thanks now the dark mode looks better. But we are still missing hover state on dark mode. After that we can merge.

Made the change to support also unbranded f440636

-Added edit icon for a quick action to edit a comment -Date and resolved state moved to card bottom for cleaner header and more natural information flow -Improved and balanced cool-annotation alignments -Remove img opacity from active comment cards Signed-off-by: Banobe Pascal <[email protected]> Change-Id: I990ff8e706640955690a2502ffa64d35babc67eb

Signed-off-by: Banobe Pascal <[email protected]> Change-Id: I16a01161df2019a877e916e15548937ddbc15d26

-Updated test selector to click `.cool-annotation-menu` instead of '.cool-annotation-menubar' since the menubar now contains multiple menu items ('.cool-annotation-menu' and '.cool-annotation-menu-edit'). Signed-off-by: Banobe Pascal <[email protected]> Change-Id: Id9b7bf4bd067308bab1d21adbc6611d8302594fd

-The scrollbar in annotation content was oversized, taking up unnecessary space. -Introduced --scrollbar-color variable with light/dark theme values and set scrollbar-width to thin for improved visual consistency. -Added color-text-date to use annotation date for light/dark theme -Added box-sizing to annotation menu buttons -Added --color-background-lighter to annotation-img outline Signed-off-by: Banobe Pascal <[email protected]> Change-Id: I1fba2aaa00bf5f878ef308fc5c7a0267ab61fa67

-Remove duplicate background image from annotation avatar Signed-off-by: Banobe Pascal <[email protected]> Change-Id: Ib4ceabb66d43a543eeb03e6e58502c2a3933ce73

pedropintosilva · 2025-11-11T09:16:23Z

@gokaysatir can you please check the small JS changes? thanks!

gokaysatir

Mostly design related and @pedropintosilva already checked it intensely as i see. Looks good to me. Thanks.

github-project-automation bot added this to Collabora Online Oct 30, 2025

github-project-automation bot moved this to To Review in Collabora Online Oct 30, 2025

banobepascal requested review from eszkadev and pedropintosilva October 30, 2025 15:59

banobepascal force-pushed the private/banobepascal/comment-card branch 2 times, most recently from cec4957 to 6c93663 Compare October 31, 2025 09:23

pedropintosilva requested changes Oct 31, 2025

View reviewed changes

github-project-automation bot moved this from To Review to In Progress in Collabora Online Oct 31, 2025

banobepascal force-pushed the private/banobepascal/comment-card branch from 6c93663 to 88cc2dc Compare October 31, 2025 15:24

banobepascal force-pushed the private/banobepascal/comment-card branch from 88cc2dc to e9df2fb Compare October 31, 2025 16:11

pedropintosilva reviewed Nov 3, 2025

View reviewed changes

pedropintosilva requested changes Nov 3, 2025

View reviewed changes

banobepascal force-pushed the private/banobepascal/comment-card branch from e9df2fb to bf6f879 Compare November 3, 2025 15:52

banobepascal force-pushed the private/banobepascal/comment-card branch from bf6f879 to e688d8a Compare November 4, 2025 15:53

banobepascal force-pushed the private/banobepascal/comment-card branch 2 times, most recently from c769fe8 to e9cdc17 Compare November 5, 2025 11:39

pedropintosilva requested changes Nov 5, 2025

View reviewed changes

banobepascal force-pushed the private/banobepascal/comment-card branch from e9cdc17 to 5ba2a8a Compare November 6, 2025 00:51

banobepascal force-pushed the private/banobepascal/comment-card branch from 5ba2a8a to 5d117dc Compare November 6, 2025 10:52

banobepascal force-pushed the private/banobepascal/comment-card branch from 5d117dc to fdb7206 Compare November 6, 2025 15:18

pedropintosilva self-requested a review November 6, 2025 15:24

pedropintosilva requested changes Nov 6, 2025

View reviewed changes

banobepascal force-pushed the private/banobepascal/comment-card branch 2 times, most recently from 8c71046 to f440636 Compare November 7, 2025 08:47

banobepascal added 5 commits November 7, 2025 14:56

Adjust comment list top offest for proper indention in comment thread

a845b03

Signed-off-by: Banobe Pascal <[email protected]> Change-Id: I16a01161df2019a877e916e15548937ddbc15d26

Add hover states for annotation icons

936d477

-Remove duplicate background image from annotation avatar Signed-off-by: Banobe Pascal <[email protected]> Change-Id: Ib4ceabb66d43a543eeb03e6e58502c2a3933ce73

banobepascal force-pushed the private/banobepascal/comment-card branch from f440636 to 936d477 Compare November 7, 2025 11:56

pedropintosilva self-requested a review November 10, 2025 15:56

pedropintosilva approved these changes Nov 10, 2025

View reviewed changes

github-project-automation bot moved this from In Progress to To Test in Collabora Online Nov 10, 2025

pedropintosilva requested a review from gokaysatir November 11, 2025 09:16

gokaysatir approved these changes Nov 11, 2025

View reviewed changes

pedropintosilva merged commit 58a43db into master Nov 11, 2025
14 checks passed

pedropintosilva deleted the private/banobepascal/comment-card branch November 11, 2025 11:36

github-project-automation bot moved this from To Test to Done in Collabora Online Nov 11, 2025

banobepascal mentioned this pull request Nov 11, 2025

Calc : Author name disappears and avatar adjusts when comment is modified #12457

Closed

Improve comment card for better readability and hierarchy #13325

Improve comment card for better readability and hierarchy #13325

Uh oh!

Conversation

banobepascal commented Oct 30, 2025

Summary

PREVIEW

Checklist

Uh oh!

pedropintosilva left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

banobepascal commented Oct 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pedropintosilva commented Oct 31, 2025

Uh oh!

pedropintosilva Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

banobepascal Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

pedropintosilva Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

pedropintosilva left a comment

Choose a reason for hiding this comment

Uh oh!

pedropintosilva commented Nov 4, 2025

Uh oh!

pedropintosilva commented Nov 4, 2025

Uh oh!

pedropintosilva commented Nov 4, 2025

Uh oh!

banobepascal commented Nov 4, 2025

Uh oh!

pedropintosilva left a comment

Choose a reason for hiding this comment

Uh oh!

pedropintosilva commented Nov 5, 2025

Uh oh!

banobepascal commented Nov 6, 2025

Uh oh!

pedropintosilva commented Nov 6, 2025

Uh oh!

pedropintosilva left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

banobepascal commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pedropintosilva commented Nov 11, 2025

Uh oh!

gokaysatir left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

pedropintosilva left a comment •

edited

Loading

banobepascal commented Oct 31, 2025 •

edited

Loading

pedropintosilva left a comment •

edited

Loading

banobepascal commented Nov 7, 2025 •

edited

Loading