Skip to content

Commit 45eda82

Browse files
arnautov-antonarnautov-anton
committed
Post-review adjustments vol.2
1 parent 5235a2f commit 45eda82

File tree

4 files changed

+126
-101
lines changed

4 files changed

+126
-101
lines changed

‎src/components/Reactions/MessageReactionsDetail.tsx‎

Lines changed: 66 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -166,72 +166,74 @@ export const MessageReactionsDetail: MessageReactionsDetailInterface = ({
166166
)}
167167
</ul>
168168
</div>
169-
<div
170-
className='str-chat__message-reactions-detail__user-list'
171-
data-testid='all-reacting-users'
172-
>
173-
{areReactionsLoading && <LoadingIndicator />}
174-
{!areReactionsLoading && (
175-
<>
176-
{reactionDetails.map(({ type, user }) => {
177-
const belongsToCurrentUser = client.user?.id === user?.id;
178-
const EmojiComponent = Array.isArray(reactionOptions)
179-
? undefined
180-
: (reactionOptions.quick[type]?.Component ??
181-
reactionOptions.extended?.[type]?.Component);
182-
183-
return (
184-
<div
185-
className='str-chat__message-reactions-detail__user-list-item'
186-
key={`${user?.id}-${type}`}
187-
>
188-
<Avatar
189-
className='str-chat__avatar--with-border'
190-
data-testid='avatar'
191-
imageUrl={user?.image as string | undefined}
192-
size='md'
193-
userName={user?.name || user?.id}
194-
/>
195-
<div className='str-chat__message-reactions-detail__user-list-item-info'>
196-
<span
197-
className='str-chat__message-reactions-detail__user-list-item-username'
198-
data-testid='reaction-user-username'
199-
>
200-
{belongsToCurrentUser ? t('You') : user?.name || user?.id}
201-
</span>
202-
{belongsToCurrentUser && (
203-
<button
204-
className='str-chat__message-reactions-detail__user-list-item-button'
205-
data-testid='remove-reaction-button'
206-
onClick={async (e) => {
207-
const reactionCountBeforeRemoval =
208-
reactionGroups?.[type]?.count ?? 0;
209-
210-
await contextHandleReaction(type, e);
211-
212-
// was 1, should be 0 after removal, display all reactions
213-
if (
214-
selectedReactionType !== null &&
215-
reactionCountBeforeRemoval <= 1
216-
) {
217-
onSelectedReactionTypeChange?.(null);
218-
} else {
219-
refetch();
220-
}
221-
}}
169+
<div className='str-chat__message-reactions-detail__user-list-container'>
170+
<div
171+
className='str-chat__message-reactions-detail__user-list'
172+
data-testid='all-reacting-users'
173+
>
174+
{areReactionsLoading && <LoadingIndicator />}
175+
{!areReactionsLoading && (
176+
<>
177+
{reactionDetails.map(({ type, user }) => {
178+
const belongsToCurrentUser = client.user?.id === user?.id;
179+
const EmojiComponent = Array.isArray(reactionOptions)
180+
? undefined
181+
: (reactionOptions.quick[type]?.Component ??
182+
reactionOptions.extended?.[type]?.Component);
183+
184+
return (
185+
<div
186+
className='str-chat__message-reactions-detail__user-list-item'
187+
key={`${user?.id}-${type}`}
188+
>
189+
<Avatar
190+
className='str-chat__avatar--with-border'
191+
data-testid='avatar'
192+
imageUrl={user?.image as string | undefined}
193+
size='md'
194+
userName={user?.name || user?.id}
195+
/>
196+
<div className='str-chat__message-reactions-detail__user-list-item-info'>
197+
<span
198+
className='str-chat__message-reactions-detail__user-list-item-username'
199+
data-testid='reaction-user-username'
222200
>
223-
{t('Tap to remove')}
224-
</button>
225-
)}
201+
{belongsToCurrentUser ? t('You') : user?.name || user?.id}
202+
</span>
203+
{belongsToCurrentUser && (
204+
<button
205+
className='str-chat__message-reactions-detail__user-list-item-button'
206+
data-testid='remove-reaction-button'
207+
onClick={async (e) => {
208+
const reactionCountBeforeRemoval =
209+
reactionGroups?.[type]?.count ?? 0;
210+
211+
await contextHandleReaction(type, e);
212+
213+
// was 1, should be 0 after removal, display all reactions
214+
if (
215+
selectedReactionType !== null &&
216+
reactionCountBeforeRemoval <= 1
217+
) {
218+
onSelectedReactionTypeChange?.(null);
219+
} else {
220+
refetch();
221+
}
222+
}}
223+
>
224+
{t('Tap to remove')}
225+
</button>
226+
)}
227+
</div>
228+
<span className='str-chat__message-reactions-detail__user-list-item-icon'>
229+
{!selectedReactionType && EmojiComponent && <EmojiComponent />}
230+
</span>
226231
</div>
227-
<span className='str-chat__message-reactions-detail__user-list-item-icon'>
228-
{!selectedReactionType && EmojiComponent && <EmojiComponent />}
229-
</span>
230-
</div>
231-
);
232-
})}
233-
</>
234-
)}
232+
);
233+
})}
234+
</>
235+
)}
236+
</div>
235237
</div>
236238
</div>
237239
);

‎src/components/Reactions/styling/MessageReactionsDetail.scss‎

Lines changed: 19 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -11,40 +11,24 @@
1111
.str-chat__message-reactions-detail {
1212
border-radius: var(--radius-lg);
1313
background: var(--background-core-elevation-2);
14-
max-width: 278px;
15-
min-width: min(90vw, 278px);
14+
max-width: 256px;
15+
min-width: min(90vw, 256px);
1616

1717
&:has(.str-chat__reaction-selector-extended-list) {
18+
@include common.clipping-fade;
19+
@include utils.scrollable-y;
20+
1821
padding: 0;
1922
display: block;
20-
@include utils.scrollable-y;
2123
scrollbar-width: none;
22-
border-radius: var(--radius-lg);
23-
max-height: 250px;
24-
}
25-
26-
&::after {
27-
content: '';
28-
position: absolute;
29-
width: 100%;
30-
bottom: 0;
31-
inset-inline-start: 0;
32-
height: var(--size-16);
33-
border-end-end-radius: inherit;
34-
border-end-start-radius: inherit;
35-
background: linear-gradient(
36-
to bottom,
37-
transparent 5%,
38-
var(--background-core-elevation-0) 95%
39-
);
24+
max-height: 320px;
25+
max-width: unset;
26+
min-width: unset;
4027
}
4128

4229
font-family: var(--typography-font-family-sans);
4330

44-
box-shadow:
45-
0 0 0 1px rgba(0, 0, 0, 0.05),
46-
0 4px 8px 0 rgba(0, 0, 0, 0.14),
47-
0 12px 24px 0 rgba(0, 0, 0, 0.1);
31+
box-shadow: var(--light-elevation-3);
4832

4933
padding-block-start: var(--spacing-xxs);
5034

@@ -109,19 +93,21 @@
10993
}
11094
}
11195

96+
.str-chat__message-reactions-detail__user-list-container {
97+
position: relative;
98+
border-radius: inherit;
99+
@include common.clipping-fade;
100+
&::before {
101+
display: none;
102+
}
103+
}
104+
112105
.str-chat__message-reactions-detail__user-list {
113106
@include utils.scrollable-y;
114107
scrollbar-width: none;
115108
position: relative;
116109
padding-block-end: var(--spacing-xxs);
117-
max-height: 100px;
118-
119-
&:has(
120-
.str-chat__message-reactions-detail__user-list-item
121-
.str-chat__message-reactions-detail__user-list-item-button:nth-child(-n + 3)
122-
) {
123-
max-height: 106px;
124-
}
110+
max-height: 180px;
125111

126112
.str-chat__message-reactions-detail__skeleton-item {
127113
padding-block: var(--spacing-xxs);

‎src/components/Reactions/styling/ReactionSelector.scss‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
@use '../../../styling/utils';
1+
@use '../../../styling/utils' as utils;
2+
@use './common' as common;
23

34
.str-chat__reaction-selector {
45
display: flex;
@@ -9,18 +10,19 @@
910
gap: var(--spacing-xs);
1011

1112
border-radius: var(--radius-4xl, 32px);
12-
border: 1px solid var(--border-core-surface-subtle, #e2e6ea);
1313
background: var(--background-core-elevation-2, #fff);
1414

15-
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16);
15+
box-shadow: var(--light-elevation-3);
1616

1717
&:has(.str-chat__reaction-selector-extended-list) {
1818
padding: 0;
1919
display: block;
2020
@include utils.scrollable-y;
2121
scrollbar-width: none;
2222
border-radius: var(--radius-lg);
23-
max-height: 250px;
23+
max-height: 320px;
24+
25+
@include common.clipping-fade;
2426
}
2527

2628
.str-chat__reaction-selector__add-button {

‎src/components/Reactions/styling/common.scss‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,38 @@
4646
}
4747
}
4848
}
49+
50+
@mixin clipping-fade() {
51+
&::before,
52+
&::after {
53+
content: '';
54+
position: absolute;
55+
width: 100%;
56+
inset-inline-start: 0;
57+
height: var(--size-16);
58+
}
59+
60+
&::after {
61+
bottom: 0;
62+
border-end-end-radius: inherit;
63+
border-end-start-radius: inherit;
64+
background: linear-gradient(
65+
to bottom,
66+
transparent 5%,
67+
var(--background-core-elevation-0) 95%
68+
);
69+
}
70+
71+
&::before {
72+
// TODO: figure out a better way (z-index isn't optimal)
73+
z-index: 1;
74+
top: 0;
75+
border-start-end-radius: inherit;
76+
border-start-start-radius: inherit;
77+
background: linear-gradient(
78+
to top,
79+
transparent 5%,
80+
var(--background-core-elevation-0) 95%
81+
);
82+
}
83+
}

0 commit comments

Comments
 (0)