The submit button is placed in the text area using absolute positioning,
so it is not taken into account when calculating the text layout. Due to
this it is necessary to add an explicit padding to the right of the text
area to prevent the text from overlapping the submit button.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Otherwise a line break could be added between the avatar and the user
name when the wrapper is close to the right border of the message.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Most of the properties of the rule are not needed for mentions, so the
rule is no longer applied to them; the only needed property was moved to
the main rule for mentions.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
When the cursor is on an avatar wrapper the cursor is shown as a pointer
to inform the user that it can be clicked (which will either show the
contacts menu or insert a mention, depending on the case); the cursor
must be explicitly defined for the "img" element that shows the avatar
too, or otherwise the default cursor would be shown.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Like done in Talk, mentions to the current user are now shown with the
primary colors to make them more prominent.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Different browsers use different font weights for strong elements
(Chromium uses "bold", but Firefox uses "bolder", which is relative to
the font weight of the parent), so now the user name in mentions is
explicitly shown with a bold weight.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The avatar should be shown immediately after the avatar to be able to
accurately define the space between them using only CSS rules.
Note that in the case of the "atwho" menu it is not really needed, as a
whitespace removal seems to be done automatically by the plugin, but it
was modified for its displayed elements too for consistency.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Visually it makes no difference, but as the ".avatar" element is inside
a "span" element it can not be a block element to be compliant with the
HTML specification.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
1. Increased the size of the delete, edit, close and submit buttons to take up 44x44px.
2. Now showing the delete button at all times when editing to avoid usability issues with touch screens.
3. Edit icon is also shown at all times, rather than only on hover.
4. Reduced the gap between comments a wee bit.
5. Fixed issues with focus event now working properly for edit and delete.
6. Removed absolute positioning of elements for alignment.
7. Fixed issue with tooltips becoming too high due to padding around actions. Occurred due to my changes.
8. Changed the position of the submit and close icons.
9. Fixed issue with jumping of the delete icon in Firefox. Occurred due to my changes.
10. Fixed issue with wrapping of content due to long author names. Occurred due to my changes.
11. Fixed issue with longer comments not appearing properly. This might have occurred due to my changes.
Signed-off-by: Abijeet <abijeetpatro@gmail.com>
Now irrespective of the whether the comment has been modified we are going to go back to the view mode.
Signed-off-by: Abijeet <abijeetpatro@gmail.com>
When the autocomplete popover is shown the At.js plugin listens on the
message input field for key down events, and when Enter is pressed it
adds the selected item to the message. However, as "_onTypeComment" also
handles key down events for the message input field, when Enter was
pressed the comment was submitted and At.js had no chance to add the
item before that happened. Now when Enter is pressed and the
autocomplete popover is shown the comment is not submitted, and thus
At.js adds the selected item to the message as expected.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
When finding ".message" elements on "view.$el" the message area for the
new comment form and all the comments were matched. Now the selector was
restricted to match only the message area for the new comment form.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Although #7256 was merged cleanly some of the changes really conflicted
with those introduced by the last commit of #7251, and this broke the
appearance of the author row of comments. This commit fixes those silent
conflicts and restores the appearance of the author row.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The contacts menu is not shown for avatars and user names in the author
row if they represent the current user. For consistency, and because the
contacts menu provides no value when shown for the current user, this
commit also disables the contacts menu for mentions to the current user.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The contacts menu does not provide too much value for users mentioned in
a message being composed, so it is now disabled in this case.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
When it was on an author row the cursor was shown as a pointer, even if
clicking on the author row itself does nothing. On the other hand,
avatars used the default cursor, even if clicking on them either shows
the contacts menu (in the case of the author row, only when the avatar
is for a different user than the current one) or inserts a mention (for
avatars shown in the list of suggested mentions), depending on the case.
Now, the author row uses the default cursor, and avatars (and their
associated user name) use a pointer cursor if clicking on them will
trigger an action (either showing the contacts menu or inserting a
mention).
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
When a comment was being deleted the submit working icon was shown. Now
the submit working icon is kept hidden in that case and a specific
delete working icon, which is shown at the same position as the delete
icon, is used instead.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The submit confirm icon is shown as the background image of an
absolutely positioned input element, so the CSS rules for the submit
working icon were modified to match those of the submit confirm icon.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
When a comment is being deleted the "disabled" class is added to the
comment div, which causes it to look disabled. However, the input
elements and the content editable div were not truly disabled, and thus
it was still possible to interact with them. This commit ensures that
they are properly disabled while the comment is being deleted.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Since the change of the text area to a content editable div the input
field was no longer disabled while a new comment was being sent. It was
caused by still trying to disable the div using the "disabled" property,
which works only on real input fields; when using a content editable div
the way to disable it is by setting "contenteditable" to "false".
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The contacts menu was being shown as "inline-block", which caused the
top of the menu to be aligned to the top of the author row.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
