Commit f27f9803 authored by Alfredo Sumaran's avatar Alfredo Sumaran

Merge branch '22790-mention-autocomplete-avatar' into 'master'

User avatar in mention autocomplete in comment box

## What does this MR do?
This MR shows avatar in `@<username>` autocomplete in comment box. Also shows first latter as avatar if there is no group avatar is available.

## Are there points in the code the reviewer needs to double check?

## Why was this MR needed?
This MR closes issue  #22790 
 
## Screenshots (if relevant)
**Before**
![Screen_Shot_2016-10-25_at_17.44.44](/uploads/c44de668c7a2d482594423ebcc917440/Screen_Shot_2016-10-25_at_17.44.44.png)
**After**
![mention-avatar](/uploads/7cd2fbefa42e4a5f14335e057cf6978a/mention-avatar.png)
## Does this MR meet the acceptance criteria?

- [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [x] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [x] API support added
- Tests
  - [x] All builds are passing
- [ ] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?


Closes #22790

See merge request !6865
parents 5ab81a49 eaef9453
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
}, },
// Team Members // Team Members
Members: { Members: {
template: '<li>${username} <small>${title}</small></li>' template: '<li>${avatarTag} ${username} <small>${title}</small></li>'
}, },
Labels: { Labels: {
template: '<li><span class="dropdown-label-box" style="background: ${color}"></span> ${title}</li>' template: '<li><span class="dropdown-label-box" style="background: ${color}"></span> ${title}</li>'
...@@ -118,7 +118,7 @@ ...@@ -118,7 +118,7 @@
beforeInsert: this.DefaultOptions.beforeInsert, beforeInsert: this.DefaultOptions.beforeInsert,
beforeSave: function(members) { beforeSave: function(members) {
return $.map(members, function(m) { return $.map(members, function(m) {
var title; let title = '';
if (m.username == null) { if (m.username == null) {
return m; return m;
} }
...@@ -126,8 +126,14 @@ ...@@ -126,8 +126,14 @@
if (m.count) { if (m.count) {
title += " (" + m.count + ")"; title += " (" + m.count + ")";
} }
const autoCompleteAvatar = m.avatar_url || m.username.charAt(0).toUpperCase();
const imgAvatar = `<img src="${m.avatar_url}" alt="${m.username}" class="avatar avatar-inline center s26"/>`;
const txtAvatar = `<div class="avatar center avatar-inline s26">${autoCompleteAvatar}</div>`;
return { return {
username: m.username, username: m.username,
avatarTag: autoCompleteAvatar.length === 1 ? txtAvatar : imgAvatar,
title: gl.utils.sanitize(title), title: gl.utils.sanitize(title),
search: gl.utils.sanitize(m.username + " " + m.name) search: gl.utils.sanitize(m.username + " " + m.name)
}; };
......
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
&.avatar-inline { &.avatar-inline {
float: none; float: none;
display: inline-block;
margin-left: 4px; margin-left: 4px;
margin-bottom: 2px; margin-bottom: 2px;
...@@ -41,6 +42,12 @@ ...@@ -41,6 +42,12 @@
&.s24 { margin-right: 4px; } &.s24 { margin-right: 4px; }
} }
&.center {
font-size: 14px;
line-height: 1.8em;
text-align: center;
}
&.avatar-tile { &.avatar-tile {
border-radius: 0; border-radius: 0;
border: none; border: none;
......
...@@ -148,7 +148,19 @@ ...@@ -148,7 +148,19 @@
} }
} }
.atwho-view small.description { .atwho-view {
small.description {
float: right; float: right;
padding: 3px 5px; padding: 3px 5px;
}
.avatar-inline {
margin-bottom: 0;
}
.cur {
.avatar {
border: 1px solid $white-light;
}
}
} }
\ No newline at end of file
...@@ -15,7 +15,8 @@ module Projects ...@@ -15,7 +15,8 @@ module Projects
[{ [{
name: noteable.author.name, name: noteable.author.name,
username: noteable.author.username username: noteable.author.username,
avatar_url: noteable.author.avatar_url
}] }]
end end
...@@ -28,14 +29,14 @@ module Projects ...@@ -28,14 +29,14 @@ module Projects
def sorted(users) def sorted(users)
users.uniq.to_a.compact.sort_by(&:username).map do |user| users.uniq.to_a.compact.sort_by(&:username).map do |user|
{ username: user.username, name: user.name } { username: user.username, name: user.name, avatar_url: user.avatar_url }
end end
end end
def groups def groups
current_user.authorized_groups.sort_by(&:path).map do |group| current_user.authorized_groups.sort_by(&:path).map do |group|
count = group.users.count count = group.users.count
{ username: group.path, name: group.name, count: count } { username: group.path, name: group.name, count: count, avatar_url: group.avatar.url }
end end
end end
......
---
title: Show avatars in mention dropdown
merge_request: 6865
author:
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment