Merge pull request #11064 from nextcloud/fix-markup-and-style-of-mentions-in-comments
Fix markup and style of mentions in comments
This commit is contained in:
commit
0899f2cbc4
3 changed files with 23 additions and 4 deletions
|
@ -130,7 +130,7 @@
|
|||
adding this brings them closer to the element**/
|
||||
margin-top: 5px;
|
||||
}
|
||||
#commentsTabView .comments li .message .avatar-name-wrapper,
|
||||
|
||||
.atwho-view-ul * .avatar-name-wrapper,
|
||||
#commentsTabView .comment .authorRow {
|
||||
position: relative;
|
||||
|
@ -141,24 +141,34 @@
|
|||
|
||||
#commentsTabView .comment:not(.newCommentRow) .message .avatar-name-wrapper:not(.currentUser),
|
||||
#commentsTabView .comment:not(.newCommentRow) .message .avatar-name-wrapper:not(.currentUser) .avatar,
|
||||
#commentsTabView .comment:not(.newCommentRow) .message .avatar-name-wrapper:not(.currentUser) .avatar img,
|
||||
#commentsTabView .comment .authorRow .avatar:not(.currentUser),
|
||||
#commentsTabView .comment .authorRow .author:not(.currentUser) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.atwho-view-ul .avatar-name-wrapper,
|
||||
.atwho-view-ul .avatar-name-wrapper .avatar {
|
||||
.atwho-view-ul .avatar-name-wrapper .avatar,
|
||||
.atwho-view-ul .avatar-name-wrapper .avatar img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#commentsTabView .comments li .message .atwho-inserted,
|
||||
#commentsTabView .newCommentForm .atwho-inserted {
|
||||
.avatar-name-wrapper {
|
||||
/* Make the wrapper the positioning context of its child contacts
|
||||
* menu. */
|
||||
position: relative;
|
||||
|
||||
display: inline;
|
||||
vertical-align: top;
|
||||
background-color: var(--color-background-dark);
|
||||
border-radius: 50vh;
|
||||
padding: 1px 7px 1px 1px;
|
||||
|
||||
/* Ensure that the avatar and the user name will be kept together. */
|
||||
white-space: nowrap;
|
||||
|
||||
.avatar {
|
||||
img {
|
||||
vertical-align: top;
|
||||
|
@ -171,6 +181,15 @@
|
|||
margin-left: 0;
|
||||
margin-right: 2px;
|
||||
}
|
||||
strong {
|
||||
/* Ensure that the user name is shown in bold, as different browsers
|
||||
* use different font weights for strong elements. */
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.avatar-name-wrapper.currentUser {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-primary-text);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -231,4 +250,4 @@
|
|||
|
||||
.app-files .action-comment {
|
||||
padding: 16px 14px;
|
||||
}
|
||||
}
|
||||
|
|
Binary file not shown.
|
@ -309,7 +309,7 @@ describe('OCA.Comments.CommentsTabView tests', function() {
|
|||
|
||||
expect(createStub.calledOnce).toEqual(false);
|
||||
expect($newCommentForm.find('.message').html()).toContain('Mention to <span');
|
||||
expect($newCommentForm.find('.message').html()).toContain('<div class="avatar"');
|
||||
expect($newCommentForm.find('.message').html()).toContain('<span class="avatar"');
|
||||
expect($newCommentForm.find('.message').html()).toContain('<strong>User Name</strong>');
|
||||
expect($newCommentForm.find('.message').text()).not.toContain('@');
|
||||
// In this case the default behaviour is prevented by the
|
||||
|
|
Loading…
Reference in a new issue