diff options
| author | Paul Slaughter <pslaughter@gitlab.com> | 2018-08-01 19:43:50 +0000 |
|---|---|---|
| committer | Clement Ho <clemmakesapps@gmail.com> | 2018-08-01 19:43:50 +0000 |
| commit | fbfe04401deb7a08da03502282531364aa25d511 (patch) | |
| tree | 1b8b25c8ca0f7e048aed07de9cdf24a44fc58c36 /app/assets/javascripts/vue_shared | |
| parent | c1fc33d590b3f853ec820fa33ebc114b86af692d (diff) | |
| download | gitlab-ce-fbfe04401deb7a08da03502282531364aa25d511.tar.gz | |
Add vanilla JS avatar_helper and update existing avatar helpers
Diffstat (limited to 'app/assets/javascripts/vue_shared')
| -rw-r--r-- | app/assets/javascripts/vue_shared/components/identicon.vue | 26 |
1 files changed, 6 insertions, 20 deletions
diff --git a/app/assets/javascripts/vue_shared/components/identicon.vue b/app/assets/javascripts/vue_shared/components/identicon.vue index 4ffc811e714..0862f2c0cff 100644 --- a/app/assets/javascripts/vue_shared/components/identicon.vue +++ b/app/assets/javascripts/vue_shared/components/identicon.vue @@ -1,4 +1,6 @@ <script> +import { getIdenticonBackgroundClass, getIdenticonTitle } from '~/helpers/avatar_helper'; + export default { props: { entityId: { @@ -16,26 +18,11 @@ export default { }, }, computed: { - /** - * This method is based on app/helpers/avatars_helper.rb#project_identicon - */ - identiconStyles() { - const allowedColors = [ - '#FFEBEE', - '#F3E5F5', - '#E8EAF6', - '#E3F2FD', - '#E0F2F1', - '#FBE9E7', - '#EEEEEE', - ]; - - const backgroundColor = allowedColors[this.entityId % 7]; - - return `background-color: ${backgroundColor}; color: #555;`; + identiconBackgroundClass() { + return getIdenticonBackgroundClass(this.entityId); }, identiconTitle() { - return this.entityName.charAt(0).toUpperCase(); + return getIdenticonTitle(this.entityName); }, }, }; @@ -43,8 +30,7 @@ export default { <template> <div - :class="sizeClass" - :style="identiconStyles" + :class="[sizeClass, identiconBackgroundClass]" class="avatar identicon"> {{ identiconTitle }} </div> |