Feature: As an end-user, I should be able to see the list of agents in the widget. (#461)

Co-authored-by: Pranav Raj S <pranavrajs@gmail.com>
2020-02-05 11:27:22 +05:30
parent 33e0bd434b
commit 83b0bb4062
20 changed files with 406 additions and 34 deletions
@@ -0,0 +1,47 @@
+<template>
+  <div class="avatars">
+    <span v-for="user in users" :key="user.id" class="avatar">
+      <Thumbnail
+        size="24px"
+        :username="user.name"
+        status="online"
+        :src="user.avatar"
+        has-border
+      />
+    </span>
+  </div>
+</template>
+
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+
+export default {
+  name: 'GroupedAvatars',
+  components: { Thumbnail },
+  props: {
+    users: {
+      type: Array,
+      default: () => [],
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '~widget/assets/scss/variables.scss';
+@import '~widget/assets/scss/mixins.scss';
+
+.avatars {
+  display: inline-block;
+  padding-left: $space-one;
+
+  .avatar {
+    margin-left: -$space-slab;
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+    width: $space-medium;
+    height: $space-medium;
+  }
+}
+</style>