Group Identicon for groups without avatars

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>