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:
Roeland Jago Douma 2018-09-05 20:49:11 +02:00 committed by GitHub
commit 0899f2cbc4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 55 additions and 32 deletions

View File

@ -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);
}
}

View File

@ -196,24 +196,26 @@
sorter: function (q, items) { return items; }
},
displayTpl: function (item) {
return '<li>'
+ '<span class="avatar-name-wrapper">'
+ '<div class="avatar" '
+ ' data-username="' + escapeHTML(item.id) + '"' // for avatars
+ ' data-user="' + escapeHTML(item.id) + '"' // for contactsmenu
+ ' data-user-display-name="' + escapeHTML(item.label) + '"></div>'
+ ' <strong>' + escapeHTML(item.label) + '</strong>'
+ '</span></li>';
return '<li>' +
'<span class="avatar-name-wrapper">' +
'<span class="avatar" ' +
'data-username="' + escapeHTML(item.id) + '" ' + // for avatars
'data-user="' + escapeHTML(item.id) + '" ' + // for contactsmenu
'data-user-display-name="' + escapeHTML(item.label) + '">' +
'</span>' +
'<strong>' + escapeHTML(item.label) + '</strong>' +
'</span></li>';
},
insertTpl: function (item) {
return ''
+ '<span class="avatar-name-wrapper">'
+ '<div class="avatar" '
+ ' data-username="' + escapeHTML(item.id) + '"' // for avatars
+ ' data-user="' + escapeHTML(item.id) + '"' // for contactsmenu
+ ' data-user-display-name="' + escapeHTML(item.label) + '"></div>'
+ ' <strong>' + escapeHTML(item.label) + '</strong>'
+ '</span>';
return '' +
'<span class="avatar-name-wrapper">' +
'<span class="avatar" ' +
'data-username="' + escapeHTML(item.id) + '" ' + // for avatars
'data-user="' + escapeHTML(item.id) + '" ' + // for contactsmenu
'data-user-display-name="' + escapeHTML(item.label) + '">' +
'</span>' +
'<strong>' + escapeHTML(item.label) + '</strong>' +
'</span>';
},
searchKey: "label"
});
@ -224,7 +226,7 @@
// passing the whole comments form would re-apply and request
// avatars from the server
$(je.target).find(
'div[data-username="' + $el.find('[data-username]').data('username') + '"]'
'span[data-username="' + $el.find('[data-username]').data('username') + '"]'
).parent(),
editionMode
);
@ -486,20 +488,22 @@
},
_composeHTMLMention: function(uid, displayName) {
var avatar = '<div class="avatar" '
+ 'data-username="' + _.escape(uid) + '"'
+ ' data-user="' + _.escape(uid) + '"'
+ ' data-user-display-name="'
+ _.escape(displayName) + '"></div>';
var avatar = '' +
'<span class="avatar" ' +
'data-username="' + _.escape(uid) + '" ' +
'data-user="' + _.escape(uid) + '" ' +
'data-user-display-name="' + _.escape(displayName) + '">' +
'</span>';
var isCurrentUser = (uid === OC.getCurrentUser().uid);
return ''
+ '<span class="atwho-inserted" contenteditable="false">'
+ '<span class="avatar-name-wrapper' + (isCurrentUser ? ' currentUser' : '') + '">'
+ avatar + ' <strong>'+ _.escape(displayName)+'</strong>'
+ '</span>'
+ '</span>';
return '' +
'<span class="atwho-inserted" contenteditable="false">' +
'<span class="avatar-name-wrapper' + (isCurrentUser ? ' currentUser' : '') + '">' +
avatar +
'<strong>' + _.escape(displayName) + '</strong>' +
'</span>' +
'</span>';
},
nextPage: function() {

View File

@ -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