Some issues with cancel button and delete icon when comments are edited

[danxuliu]

The Cancel button shown when a comment is edited overflows in the next comment, as can be seen in the screenshot below:

It is more evident when the next comment is also in edition mode, as in that case the Cancel button of the previous comment and the Delete icon of the next comment overlap:

Regarding the Delete icon, it is shown only when the cursor is on the comment element. As the Cancel button is a child of the comment element but is visually outside it that causes the Delete icon to appear when hovering on the Cancel button and disappear when moving the cursor to the sides of that button, which is a bit strange.

Besides that, the Delete icon is aligned to the top and right border of the comment element, and it has no padding nor margin. When the cursor enters the comment element on the top right the Delete icon appears immediately under the cursor, which also feels strange; it would be better if it had some margin so the icon appeared slightly before the cursor was on top of it.

Also, I have not tested it, but I guess that showing the Delete icon only when the cursor is on the comment could be problematic on touch screens. Similarly, the area to interact with the icon should be increased on touch screens, as 16x16 is not very usable in that case.

@nextcloud/designers

[jancborchardt]

When editing, can add a bit more vertical whitespace so the button has space?

[MorrisJobke]

@nextcloud/designers Another polishing issue for the fixing phase of the 13 release.

[Abijeet]

Hey @skjnldsv - Mind if I take a crack at this? Summarizing the issue, there are three things that need to be done here,

1. Cancel button overflowing.
2. Add some margin and padding to the Delete button
3. Show the delete button at all times to avoid usability issues with touch screens.

[skjnldsv]

@Abijeet of course, go ahead! 😊

[Abijeet]

Just checkted this issue out on the File > Details section and I'm unable to reproduce 1 and 2 (from above),

@danxuliu - Am I checking in the correct location? I checked on Firefox and Chrome.

I'm able to reproduce 3.

In addition, I also found that if I click on edit and without editing the comment I press the arrow icon, the edit section turns gray but doesn't show any message. After thinking for a while I understood that this is happening because I did not make a change to the comment text. Find screenshot below,

Seems a little awkward. I suggest that we simply go back to displaying it as is, rather than the gray color.

[danxuliu]

@Abijeet

Am I checking in the correct location?

Yes, you are :-) You can not reproduce 1 because it was fixed (unexpectedly, I must admit :-P ) by #7316.

Regarding 2 (the padding and margin), however, from what I can see it is still too small (26x26px, while it should be at least 44x44px).

The additional issue you found seems to be a regression introduced in #7266; it should indeed go back to an editable state (or maybe it would be even better if it just exited the edit mode like done if the text is modified).

[Abijeet]

@danxuliu - I spent some more time on this and I notice that there are a few more issues here -

1. Edit icon and the submit icon are also not of the required size. As you mentioned all of these need to be made 44x44px.
2. While editing a div is being put inside the ul which is not a valid HTML structure at all.
3. While editing the cancel button is floated to the right, and hence the height of the comment div does not stretch to fit the element. We've kludge fixed this by adding margin-bottom: 30px;. Check image below.
4. The Edit icon is also visible only when we hover on top of the comment div, causing a similar issue as the delete icon with touch devices.

Would you mind if I spend a bit of time redesigning the comment system to be something like this?

• Instead of Reply and Share we would have Edit and Delete.
• Notice that the avatar is bigger. We would do the same. Current avatar's are maybe a little too small.
• Clicking on the edit would bring about the edit window the same way as it does, but the edit and cancel buttons would be below the contenteditable div.

OR I could simply fix the delete button issue and the regression. :)

[jancborchardt]

@Abijeet I would prefer a simple fix rather than a rebuild. :) The UI you show is just another way to do it, and not necessarily how we design it in Nextcloud.
For example, the Delete action would be much too present - it's fine to have it only in edit mode. And the avatar is also fine imo?

Maybe it makes more sense to put the cancel button above, in the same line as the avatar / delete button for uniformity.