Page MenuHomePhorge
Files F85826964

No OneTemporary
Actions

Authored By
Unknown
Size
1 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/avatar_list/avatar_list.js b/src/components/avatar_list/avatar_list.js
new file mode 100644
index 0000000000..0fb6169182
--- /dev/null
+++ b/src/components/avatar_list/avatar_list.js
@@ -0,0 +1,15 @@
+import UserAvatar from '../user_avatar/user_avatar.vue'
+
+const AvatarList = {
+ props: ['avatars'],
+ computed: {
+ slicedAvatars () {
+ return this.avatars ? this.avatars.slice(0, 9) : []
+ }
+ },
+ components: {
+ UserAvatar
+ }
+}
+
+export default AvatarList
diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
new file mode 100644
index 0000000000..204ccb9ad9
--- /dev/null
+++ b/src/components/avatar_list/avatar_list.vue
@@ -0,0 +1,54 @@
+<template>
+ <ul class="avatars" :class="{ 'transparent-avatar': slicedAvatars.length == 10 }">
+ <li class="avatars__item" v-for="(avatar, index) in slicedAvatars" :key="index">
+ <UserAvatar :src="avatar.src" class="avatars__img" />
+ </li>
+ </ul>
+</template>
+
+<script src="./avatar_list.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+.avatars {
+ display: inline-flex; /* Causes LI items to display in row. */
+ list-style-type: none;
+ margin: 0;
+ padding: 0px 16px 0px 0px;
+ flex-direction: row-reverse;
+
+ &__item {
+ height: 40px;
+ margin: 0;
+ padding: 0;
+ width: 25px;
+
+ .avatars__img {
+ border-radius: 50%;
+ height: 40px;
+ width: 40px;
+ line-height: 40px;
+ }
+ }
+}
+
+.transparent-avatar {
+ .avatars__item {
+ &:first-child {
+ position: relative;
+
+ .avatars__img {
+ &::after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(255, 255, 255, 0.7);
+ left: 0;
+ top: 0;
+ }
+ }
+ }
+ }
+}
+</style>

File Metadata

Mime Type
text/x-diff
Expires
Fri, Oct 30, 12:37 PM (14 h, 40 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1800127
Default Alt Text
(1 KB)

Event Timeline