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 4173f9d588
commit da75c7ff6d
2 changed files with 8 additions and 8 deletions

View File

@ -198,20 +198,20 @@
displayTpl: function (item) { displayTpl: function (item) {
return '<li>' return '<li>'
+ '<span class="avatar-name-wrapper">' + '<span class="avatar-name-wrapper">'
+ '<div class="avatar" ' + '<span class="avatar" '
+ ' data-username="' + escapeHTML(item.id) + '"' // for avatars + ' data-username="' + escapeHTML(item.id) + '"' // for avatars
+ ' data-user="' + escapeHTML(item.id) + '"' // for contactsmenu + ' 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>' + ' <strong>' + escapeHTML(item.label) + '</strong>'
+ '</span></li>'; + '</span></li>';
}, },
insertTpl: function (item) { insertTpl: function (item) {
return '' return ''
+ '<span class="avatar-name-wrapper">' + '<span class="avatar-name-wrapper">'
+ '<div class="avatar" ' + '<span class="avatar" '
+ ' data-username="' + escapeHTML(item.id) + '"' // for avatars + ' data-username="' + escapeHTML(item.id) + '"' // for avatars
+ ' data-user="' + escapeHTML(item.id) + '"' // for contactsmenu + ' 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>' + ' <strong>' + escapeHTML(item.label) + '</strong>'
+ '</span>'; + '</span>';
}, },
@ -224,7 +224,7 @@
// passing the whole comments form would re-apply and request // passing the whole comments form would re-apply and request
// avatars from the server // avatars from the server
$(je.target).find( $(je.target).find(
'div[data-username="' + $el.find('[data-username]').data('username') + '"]' 'span[data-username="' + $el.find('[data-username]').data('username') + '"]'
).parent(), ).parent(),
editionMode editionMode
); );
@ -486,11 +486,11 @@
}, },
_composeHTMLMention: function(uid, displayName) { _composeHTMLMention: function(uid, displayName) {
var avatar = '<div class="avatar" ' var avatar = '<span class="avatar" '
+ 'data-username="' + _.escape(uid) + '"' + 'data-username="' + _.escape(uid) + '"'
+ ' data-user="' + _.escape(uid) + '"' + ' data-user="' + _.escape(uid) + '"'
+ ' data-user-display-name="' + ' data-user-display-name="'
+ _.escape(displayName) + '"></div>'; + _.escape(displayName) + '"></span>';
var isCurrentUser = (uid === OC.getCurrentUser().uid); var isCurrentUser = (uid === OC.getCurrentUser().uid);

View File

@ -309,7 +309,7 @@ describe('OCA.Comments.CommentsTabView tests', function() {
expect(createStub.calledOnce).toEqual(false); expect(createStub.calledOnce).toEqual(false);
expect($newCommentForm.find('.message').html()).toContain('Mention to <span'); 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').html()).toContain('<strong>User Name</strong>');
expect($newCommentForm.find('.message').text()).not.toContain('@'); expect($newCommentForm.find('.message').text()).not.toContain('@');
// In this case the default behaviour is prevented by the // In this case the default behaviour is prevented by the