Comments look update

[amilica]

Heyy! Let’s talk about how XWiki comments look like!

Current look of comments

Comparison to current look of annotations

Issues

• outdated look
• long mouse movement to reach quick actions related to a comment
• small tappable area on mobile for comment actions

New look

Improvement

#1 We add the “View thread” button that collapses or expands the sub-comments of a comment. On collapse, the chevron is pointing to the right, on expand, it is pointing downwards.

#1.1. Ideally, if not too hard to add, this “View thread” button also has the number of sub-comments of the initial comment.

#1.2. If there are 0 sub-comments, the “View thread” button isn’t viewable.

#2 Quotes get a new look, with big quotation marks at the beginning, followed by big italic link-colored text.

#3 Comment actions get added below the comment content. On big screens, these buttons have labels.

Note: Annotations should have their look updated to be cohesive with comments. See the proposal for their look update.

What do you think?

[tmortagne]

Looks great !

[watery]

@amilica

#2 Quotes get a new look, with big quotation marks at the beginning, followed by big italic link-colored text.

Is this an annotation-related comment? Or is it generally possible to enter quoted text in a comment?

[tkrieck]

Looks great, +1 on my side. Most of it seems to be a much needed update in CSS, which is great.

[TomTheWise]

Hi, sorry to ask this but if comments are to be getting an visual update and improvement would it be possible to also include a fix to this issue?
https://jira.xwiki.org/browse/XWIKI-21730

It’s still quite confusing for our users that they can post comments on pages they only have view rights (no edit rights) but can‘t delete them.

[CharpentierLucas]

@amilica

#1.1. Ideally, if not too hard to add, this “View thread” button also has the number of sub-comments of the initial comment.

I’m not sure how it’s handled today, but my guess is that every single comment is loaded.
If we keep loading every comment from the start, it should be pretty easy to have a count here

@amilica

#3 Comment actions get added below the comment content. On big screens, these buttons have labels.

+1

---

+1 overall

[vmassol]

@CharpentierLucas

I’m not sure how it’s handled today, but my guess is that every single comment is loaded.

Yes, right now we don’t scale well with xobjects and they’re all loaded when a doc is loaded. See Loading...

We’ll need to fix this one day soonish…

@amilica

#2 Quotes get a new look, with big quotation marks at the beginning, followed by big italic link-colored text.

What if the annotated content uses italics? How do you differentiate it?

I wouldn’t use italics but I’d use the same style as we use for quotations: https://www.xwiki.org/xwiki/bin/view/Documentation/UserGuide/Features/XWikiSyntax/?syntax=2.1&section=Quotations , if only for consistency. If we think that the quotation style should be improved then we should it consistenly IMO.

@amilica

#3 Comment actions get added below the comment content. On big screens, these buttons have labels.

I’m worried about consistency. In lots of places (everywhere?) we use actions on the right. So I think this would be a new style rule and we need to agree that we want to go in this direction and imagine other places where it should also apply.

<future>
At some point we’ll need to solve the comment scalability issue (imagine a page with 1000 comments). Either through some “more” button or through a LiveData table with a custom layout. If we were to implement it with a LD, would we put the action buttons on the right as we do everywhere else?
</future>

Thanks!

[vmassol]

Hello Tom. The discussion here is about the UI/visual

However if you check Loading... you’ll see it’s assigned and there’s even a PR for it at XWIKI-21730: Delete own comments should not require edit rights on page by Sereza7 · Pull Request #2836 · xwiki/xwiki-platform · GitHub (you can check the discussion there for more details).

Thanks

[amilica]

@watery

@amilica

#2 Quotes get a new look, with big quotation marks at the beginning, followed by big italic link-colored text.

Is this an annotation-related comment? Or is it generally possible to enter quoted text in a comment?

The idea is to update the look of quotes everywhere. I should add a separated proposal on this.

@vmassol

What if the annotated content uses italics? How do you differentiate it?

You are right, we can drop the italics.

This is how the comments would look like with this little update:

@vmassol

I’m worried about consistency. In lots of places (everywhere?) we use actions on the right. So I think this would be a new style rule and we need to agree that we want to go in this direction and imagine other places where it should also apply.

Comments are a pretty important and distinct piece of UI that justify having a non-standard layout for buttons.

Most forum websites have their actions under the comment, in the left side. This is because of the “F” scanning pattern for LTR languages.

Thanks a lot everyone!

[vmassol]

@amilica

This is how the comments would look like with this little update:

Please see my comment above about consistency for quotations. Thx

[vmassol]

@amilica

Most forum websites have their actions under the comment, in the left side. This is because of the “F” scanning pattern for LTR languages.

I find it way simpler to notice actions on the right than under. In your proposed screenshot, my brain is mixing the action with the text of the comment and I find it very hard to process.

I also find the actions under very distracting when all you want is to read the comments, which is the main use case (there are in general some order of magnitude of readers vs writers in a wiki).

In addition, this will use a new vertical line and vertical space is scarce, leading to displaying less comments overall on a single page.

Thx

[watery]

@vmassol

Please seem my comment above about consistency for quotations. Thx

+1
Moreover, but I have no typography skills, I’d like quotations to just add an extra element, and do not change the quote contents - e.g. the vertical bar XWiki currently has - or its formatting (no font change, weight, etc.

So one is free to quote something with the original formatting or manually get rid of it (i.e. with Ctrl+Shift+V), otherwise it’s always a pain to handle quotations with copy-paste (even of content outside the wiki)