Skip to content

Fix cursor for avatar and user names in comments #7256

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
blizzz merged 4 commits into from
Nov 27, 2017
Merged

Fix cursor for avatar and user names in comments #7256

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
107952f
Fix cursor for author row and avatars in comments
danxuliu Nov 23, 2017
8eb19a2
Disable contacts menu for mentioned users in comments being composed
danxuliu Nov 26, 2017
ea4414f
Disable contacts menu for mentions to current user in comment messages
danxuliu Nov 26, 2017
d15ca9f
Replace with non-deprecated JS call
LukasReschke Nov 27, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions apps/comments/css/comments.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,17 @@
.atwho-view-ul * .avatar-name-wrapper,
#commentsTabView .comment .authorRow {
position: relative;
}

#commentsTabView .comment:not(.newCommentRow) .message .avatar-name-wrapper:not(.currentUser),
#commentsTabView .comment:not(.newCommentRow) .message .avatar-name-wrapper:not(.currentUser) .avatar,
#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 {
cursor: pointer;
}

Expand Down
34 changes: 23 additions & 11 deletions apps/comments/js/commentstabview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@
var EDIT_COMMENT_TEMPLATE =
'<div class="newCommentRow comment" data-id="{{id}}">' +
' <div class="authorRow">' +
' <div class="avatar" data-username="{{actorId}}"></div>' +
' <div class="author">{{actorDisplayName}}</div>' +
' <div class="avatar currentUser" data-username="{{actorId}}"></div>' +
' <div class="author currentUser">{{actorDisplayName}}</div>' +
'{{#if isEditMode}}' +
' <a href="#" class="action delete icon icon-delete has-tooltip" title="{{deleteTooltip}}"></a>' +
'{{/if}}' +
Expand All @@ -42,8 +42,8 @@
var COMMENT_TEMPLATE =
'<li class="comment{{#if isUnread}} unread{{/if}}{{#if isLong}} collapsed{{/if}}" data-id="{{id}}">' +
' <div class="authorRow">' +
' <div class="avatar" {{#if actorId}}data-username="{{actorId}}"{{/if}}> </div>' +
' <div class="author">{{actorDisplayName}}</div>' +
' <div class="avatar{{#if isUserAuthor}} currentUser{{/if}}" {{#if actorId}}data-username="{{actorId}}"{{/if}}> </div>' +
' <div class="author{{#if isUserAuthor}} currentUser{{/if}}">{{actorDisplayName}}</div>' +
'{{#if isUserAuthor}}' +
' <a href="#" class="action edit icon icon-rename has-tooltip" title="{{editTooltip}}"></a>' +
'{{/if}}' +
Expand Down Expand Up @@ -214,13 +214,15 @@
searchKey: "label"
});
$target.on('inserted.atwho', function (je, $el) {
var editionMode = true;
s._postRenderItem(
// we need to pass the parent of the inserted element
// 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') + '"]'
).parent()
).parent(),
editionMode
);
});
},
Expand Down Expand Up @@ -377,7 +379,7 @@
});
},

_postRenderItem: function($el) {
_postRenderItem: function($el, editionMode) {
$el.find('.has-tooltip').tooltip();
$el.find('.avatar').each(function() {
var $this = $(this);
Expand All @@ -395,16 +397,23 @@
// it is the case when writing a comment and mentioning a person
$message = $el;
}
this._postRenderMessage($message);
this._postRenderMessage($message, editionMode);
},

_postRenderMessage: function($el) {
_postRenderMessage: function($el, editionMode) {
if (editionMode) {
return;
}

$el.find('.avatar').each(function() {
var avatar = $(this);
var strong = $(this).next();
var appendTo = $(this).parent();

$.merge(avatar, strong).contactsMenu(avatar.data('user'), 0, appendTo);
var username = $(this).data('username');
if (username !== oc_current_user) {
Copy link
Member

@nickvergessen nickvergessen Nov 28, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:( @danxuliu please adjust here too

$.merge(avatar, strong).contactsMenu(avatar.data('user'), 0, appendTo);
}
});
},

Expand Down Expand Up @@ -445,9 +454,11 @@
+ ' data-user-display-name="'
+ _.escape(displayName) + '"></div>';

var isCurrentUser = (uid === OC.getCurrentUser().uid);

return ''
+ '<span class="atwho-inserted" contenteditable="false">'
+ '<span class="avatar-name-wrapper">'
+ '<span class="avatar-name-wrapper' + (isCurrentUser ? ' currentUser' : '') + '">'
+ avatar + ' <strong>'+ _.escape(displayName)+'</strong>'
+ '</span>'
+ '</span>';
Expand Down Expand Up @@ -486,7 +497,8 @@
.html(this._formatMessage(commentToEdit.get('message'), commentToEdit.get('mentions')))
.find('.avatar')
.each(function () { $(this).avatar(); });
this._postRenderItem($message);
var editionMode = true;
this._postRenderItem($message, editionMode);

// Enable autosize
autosize($formRow.find('.message'));
Expand Down