diff options
author | Bryce Johnson <bryce@gitlab.com> | 2017-05-17 11:22:26 -0400 |
---|---|---|
committer | Bryce Johnson <bryce@gitlab.com> | 2017-05-18 16:38:10 -0400 |
commit | b73959a94bcace3d0af7819f7621b308980c49d9 (patch) | |
tree | f304a64be3f83548406eacae6947ac869733a130 /app | |
parent | 3c668fa04fd7e0a1d925e9666eb727ed3e83d145 (diff) | |
download | gitlab-ce-b73959a94bcace3d0af7819f7621b308980c49d9.tar.gz |
Fixes per feedback on user avatar components.
Diffstat (limited to 'app')
3 files changed, 14 insertions, 23 deletions
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue index 4891e7f927c..b8db6afda12 100644 --- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue +++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue @@ -16,12 +16,11 @@ */ import defaultAvatarUrl from 'images/no_avatar.png'; -import UserAvatarSizeMixin from './user_avatar_size_mixin'; import TooltipMixin from '../../mixins/tooltip'; export default { name: 'UserAvatarImage', - mixins: [UserAvatarSizeMixin, TooltipMixin], + mixins: [TooltipMixin], props: { imgSrc: { type: String, @@ -58,8 +57,8 @@ export default { tooltipContainer() { return this.tooltipText ? 'body' : null; }, - imgCssClasses() { - return `avatar ${this.avatarSizeClass} ${this.cssClasses}`; + avatarSizeClass() { + return `s${this.size}`; }, }, }; @@ -67,9 +66,11 @@ export default { <template> <img - :class="imgCssClasses" + class="avatar" + :class="[avatarSizeClass, cssClasses]" :src="imgSrc" - :style="avatarSizeStylesMap" + :width="size" + :height="size" :alt="imgAlt" :data-container="tooltipContainer" :data-placement="tooltipPlacement" diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_size_mixin.js b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_size_mixin.js deleted file mode 100644 index b6155ffd28e..00000000000 --- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_size_mixin.js +++ /dev/null @@ -1,13 +0,0 @@ -export default { - computed: { - avatarSizeStylesMap() { - return { - width: `${this.size}px`, - height: `${this.size}px`, - }; - }, - avatarSizeClass() { - return `s${this.size}`; - }, - }, -}; diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue index 39b4d37c91e..d2ff2ac006e 100644 --- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue +++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue @@ -14,10 +14,7 @@ */ -import UserAvatarSizeMixin from './user_avatar_size_mixin'; - export default { - mixins: [UserAvatarSizeMixin], props: { svg: { type: String, @@ -29,13 +26,19 @@ export default { default: 20, }, }, + computed: { + avatarSizeClass() { + return `s${this.size}`; + }, + }, }; </script> <template> <svg :class="avatarSizeClass" - :style="avatarSizeStylesMap" + :height="size" + :width="size" v-html="svg"> </svg> </template> |