diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-06-18 11:18:50 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-06-18 11:18:50 +0000 |
commit | 8c7f4e9d5f36cff46365a7f8c4b9c21578c1e781 (patch) | |
tree | a77e7fe7a93de11213032ed4ab1f33a3db51b738 /app/assets/javascripts/vue_shared/components/gl_mentions.vue | |
parent | 00b35af3db1abfe813a778f643dad221aad51fca (diff) | |
download | gitlab-ce-8c7f4e9d5f36cff46365a7f8c4b9c21578c1e781.tar.gz |
Add latest changes from gitlab-org/gitlab@13-1-stable-ee
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/gl_mentions.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/gl_mentions.vue | 84 |
1 files changed, 40 insertions, 44 deletions
diff --git a/app/assets/javascripts/vue_shared/components/gl_mentions.vue b/app/assets/javascripts/vue_shared/components/gl_mentions.vue index 508f43afe61..a7fba5e760b 100644 --- a/app/assets/javascripts/vue_shared/components/gl_mentions.vue +++ b/app/assets/javascripts/vue_shared/components/gl_mentions.vue @@ -1,6 +1,5 @@ <script> -import escape from 'lodash/escape'; -import sanitize from 'sanitize-html'; +import { escape } from 'lodash'; import Tribute from 'tributejs'; import axios from '~/lib/utils/axios_utils'; import { spriteIcon } from '~/lib/utils/common_utils'; @@ -11,11 +10,11 @@ import { spriteIcon } from '~/lib/utils/common_utils'; * @param original An object from the array returned from the `autocomplete_sources/members` API * @returns {string} An HTML template */ -function createMenuItemTemplate({ original }) { +function menuItemTemplate({ original }) { const rectAvatarClass = original.type === 'Group' ? 'rect-avatar' : ''; const avatarClasses = `avatar avatar-inline center s26 ${rectAvatarClass} - align-items-center d-inline-flex justify-content-center`; + gl-display-inline-flex gl-align-items-center gl-justify-content-center`; const avatarTag = original.avatar_url ? `<img @@ -24,42 +23,20 @@ function createMenuItemTemplate({ original }) { class="${avatarClasses}"/>` : `<div class="${avatarClasses}">${original.username.charAt(0).toUpperCase()}</div>`; - const name = escape(sanitize(original.name)); + const name = escape(original.name); const count = original.count && !original.mentionsDisabled ? ` (${original.count})` : ''; const icon = original.mentionsDisabled - ? spriteIcon('notifications-off', 's16 vertical-align-middle prepend-left-5') + ? spriteIcon('notifications-off', 's16 gl-vertical-align-middle gl-ml-3') : ''; return `${avatarTag} ${original.username} - <small class="small font-weight-normal gl-reset-color">${name}${count}</small> + <small class="gl-text-small gl-font-weight-normal gl-reset-color">${name}${count}</small> ${icon}`; } -/** - * Creates the list of users to show in the mentions dropdown. - * - * @param inputText The text entered by the user in the mentions input field - * @param processValues Callback function to set the list of users to show in the mentions dropdown - */ -function getMembers(inputText, processValues) { - if (this.members) { - processValues(this.members); - } else if (this.dataSources.members) { - axios - .get(this.dataSources.members) - .then(response => { - this.members = response.data; - processValues(response.data); - }) - .catch(() => {}); - } else { - processValues([]); - } -} - export default { name: 'GlMentions', props: { @@ -72,30 +49,49 @@ export default { data() { return { members: undefined, - options: { - trigger: '@', - fillAttr: 'username', - lookup(value) { - return value.name + value.username; - }, - menuItemTemplate: createMenuItemTemplate.bind(this), - values: getMembers.bind(this), - }, }; }, mounted() { + this.tribute = new Tribute({ + trigger: '@', + fillAttr: 'username', + lookup: value => value.name + value.username, + menuItemTemplate, + values: this.getMembers, + }); + const input = this.$slots.default[0].elm; - this.tribute = new Tribute(this.options); this.tribute.attach(input); }, beforeDestroy() { const input = this.$slots.default[0].elm; - if (this.tribute) { - this.tribute.detach(input); - } + this.tribute.detach(input); + }, + methods: { + /** + * Creates the list of users to show in the mentions dropdown. + * + * @param inputText - The text entered by the user in the mentions input field + * @param processValues - Callback function to set the list of users to show in the mentions dropdown + */ + getMembers(inputText, processValues) { + if (this.members) { + processValues(this.members); + } else if (this.dataSources.members) { + axios + .get(this.dataSources.members) + .then(response => { + this.members = response.data; + processValues(response.data); + }) + .catch(() => {}); + } else { + processValues([]); + } + }, }, - render(h) { - return h('div', this.$slots.default); + render(createElement) { + return createElement('div', this.$slots.default); }, }; </script> |