Show avatar using "span" instead of "div"

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>
This commit is contained in:
Daniel Calviño Sánchez 2018-09-05 08:36:35 +02:00
parent bcaf9a48bb
commit c9ce96ff05
2 changed files with 8 additions and 8 deletions

View File

@ -198,20 +198,20 @@
displayTpl: function (item) {
return '<li>'
+ '<span class="avatar-name-wrapper">'
+ '<div class="avatar" '
+ '<span class="avatar" '
+ ' data-username="' + escapeHTML(item.id) + '"' // for avatars
+ ' data-user="' + escapeHTML(item.id) + '"' // for contactsmenu
+ ' data-user-display-name="' + escapeHTML(item.label) + '"></div>'
+ ' 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" '
+ '<span class="avatar" '
+ ' data-username="' + escapeHTML(item.id) + '"' // for avatars
+ ' data-user="' + escapeHTML(item.id) + '"' // for contactsmenu
+ ' data-user-display-name="' + escapeHTML(item.label) + '"></div>'
+ ' data-user-display-name="' + escapeHTML(item.label) + '"></span>'
+ ' <strong>' + escapeHTML(item.label) + '</strong>'
+ '</span>';
},
@ -224,7 +224,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,11 +486,11 @@
},
_composeHTMLMention: function(uid, displayName) {
var avatar = '<div class="avatar" '
var avatar = '<span class="avatar" '
+ 'data-username="' + _.escape(uid) + '"'
+ ' data-user="' + _.escape(uid) + '"'
+ ' data-user-display-name="'
+ _.escape(displayName) + '"></div>';
+ _.escape(displayName) + '"></span>';
var isCurrentUser = (uid === OC.getCurrentUser().uid);

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