direct_conversation_avatar.vue (3142B)
1 <template>
2 <div
3 v-if="firstUser && secondUser"
4 class="direct-conversation-multi-user-avatar"
5 :style="{ 'width': width, 'height': height }"
6 >
7 <StillImage
8 v-if="fourthUser"
9 class="avatar avatar-fourth direct-conversation-avatar"
10 :alt="fourthUser.screen_name"
11 :title="fourthUser.screen_name"
12 :src="fourthUser.profile_image_url_original"
13 error-src="/images/avi.png"
14 :class="{ 'better-shadow': betterShadow }"
15 />
16 <StillImage
17 v-if="thirdUser"
18 class="avatar avatar-third direct-conversation-avatar"
19 :alt="thirdUser.screen_name"
20 :title="thirdUser.screen_name"
21 :src="thirdUser.profile_image_url_original"
22 error-src="/images/avi.png"
23 :class="{ 'better-shadow': betterShadow }"
24 />
25 <StillImage
26 class="avatar avatar-second direct-conversation-avatar"
27 :alt="secondUser.screen_name"
28 :title="secondUser.screen_name"
29 :src="secondUser.profile_image_url_original"
30 error-src="/images/avi.png"
31 :class="{ 'better-shadow': betterShadow }"
32 :style="{ 'height': fourthUser ? '50%' : '100%' }"
33 />
34 <StillImage
35 class="avatar avatar-first direct-conversation-avatar"
36 :alt="firstUser.screen_name"
37 :title="firstUser.screen_name"
38 :src="firstUser.profile_image_url_original"
39 error-src="/images/avi.png"
40 :class="{ 'better-shadow': betterShadow }"
41 :style="{ 'height': thirdUser ? '50%' : '100%' }"
42 />
43 </div>
44 <router-link
45 v-else
46 :to="getUserProfileLink(firstUser)"
47 >
48 <StillImage
49 :style="{ 'width': width, 'height': height }"
50 class="avatar direct-conversation-avatar single-user"
51 :alt="firstUser.screen_name"
52 :title="firstUser.screen_name"
53 :src="firstUser.profile_image_url_original"
54 error-src="/images/avi.png"
55 :class="{ 'better-shadow': betterShadow }"
56 />
57 </router-link>
58 </template>
59
60 <script src="./direct_conversation_avatar.js"></script>
61 <style lang="scss">
62 @import '../../_variables.scss';
63
64 .direct-conversation-multi-user-avatar {
65 position: relative;
66 cursor: pointer;
67 width: 48px;
68 height: 48px;
69 border-radius: 50%;
70 overflow: hidden;
71
72 .avatar.still-image {
73 width: 50%;
74 height: 50%;
75 border-radius: 0;
76 img, canvas {
77 object-fit: cover;
78 }
79
80 &.avatar-first {
81 float: right;
82 position: absolute;
83 bottom: 0;
84 }
85
86 &.avatar-second {
87 float: right;
88 }
89
90 &.avatar-third {
91 float: right;
92 position: absolute;
93 }
94
95 &.avatar-fourth {
96 float: right;
97 position: absolute;
98 bottom: 0;
99 right: 0;
100 }
101 }
102 }
103
104 .direct-conversation-avatar {
105 &.single-user {
106 border-radius: $fallback--avatarAltRadius;
107 border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
108 }
109
110 .avatar.still-image {
111 width: 48px;
112 height: 48px;
113
114 box-shadow: var(--avatarStatusShadow);
115 border-radius: 0;
116
117 &.better-shadow {
118 box-shadow: var(--avatarStatusShadowInset);
119 filter: var(--avatarStatusShadowFilter)
120 }
121
122 &.animated::before {
123 display: none;
124 }
125 }
126 }
127 </style>