diff options
author | kushalpandya <kushal@gitlab.com> | 2017-07-31 13:33:39 +0300 |
---|---|---|
committer | kushalpandya <kushal@gitlab.com> | 2017-07-31 13:33:39 +0300 |
commit | b535be35ae8bbb003f550e51d22a8e3b4c46b07c (patch) | |
tree | e4de512d9e834575efaf5e5e909d05e294720496 /app/assets/javascripts/groups | |
parent | 9a3b283402b8cc1c86802c526f19a459ce09c2e3 (diff) |
Group Identicon for groups without avatars
Diffstat (limited to 'app/assets/javascripts/groups')
-rw-r--r-- | app/assets/javascripts/groups/components/group_identicon.vue | 44 |
1 files changed, 44 insertions, 0 deletions
diff --git a/app/assets/javascripts/groups/components/group_identicon.vue b/app/assets/javascripts/groups/components/group_identicon.vue new file mode 100644 index 00000000000..4e0898b6c44 --- /dev/null +++ b/app/assets/javascripts/groups/components/group_identicon.vue @@ -0,0 +1,44 @@ +<script> +export default { + props: { + id: { + required: true, + }, + name: { + type: String, + required: true, + }, + }, + computed: { + /** + * This method is based on app/helpers/application_helper.rb#project_identicon + */ + identiconStyles() { + const allowedColors = [ + '#FFEBEE', + '#F3E5F5', + '#E8EAF6', + '#E3F2FD', + '#E0F2F1', + '#FBE9E7', + '#EEEEEE', + ]; + + const backgroundColor = allowedColors[this.id % 7]; + + return `background-color: ${backgroundColor}; color: #555;`; + }, + identiconTitle() { + return this.name.charAt(0).toUpperCase(); + } + } +}; +</script> + +<template> + <div + class="avatar s40 identicon" + :style="identiconStyles"> + {{identiconTitle}} + </div> +</template> |