forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Some design tweaks to web emoji picker (#8076)
* Tighten up and reverse action items on web
* Tweak web styles for emoji bar
* Might as well make disabled more obvious
* Format
authored by
Eric Bailey
and committed by
GitHub
a84ba121
152bc3c1
+96
-48
+2
-3
src/components/dms/ActionsWrapper.web.tsx
+2
-3
src/components/dms/ActionsWrapper.web.tsx
···
85
85
a.justify_center,
86
86
a.flex_row,
87
87
a.align_center,
88
-
a.gap_xs,
89
88
isFromSelf
90
-
? [a.mr_md, {marginLeft: 'auto'}]
91
-
: [a.ml_md, {marginRight: 'auto'}],
89
+
? [a.mr_xs, {marginLeft: 'auto'}, a.flex_row_reverse]
90
+
: [a.ml_xs, {marginRight: 'auto'}],
92
91
]}>
93
92
<EmojiReactionPicker message={message} onEmojiSelect={onEmojiSelect}>
94
93
{({props, state, isNative, control}) => {
+59
-45
src/components/dms/EmojiReactionPicker.web.tsx
+59
-45
src/components/dms/EmojiReactionPicker.web.tsx
···
1
1
import {useState} from 'react'
2
-
import {View} from 'react-native'
2
+
import {Pressable, View} from 'react-native'
3
3
import {type ChatBskyConvoDefs} from '@atproto/api'
4
4
import EmojiPicker from '@emoji-mart/react'
5
5
import {msg} from '@lingui/macro'
6
6
import {useLingui} from '@lingui/react'
7
+
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
7
8
8
9
import {useSession} from '#/state/session'
9
10
import {type Emoji} from '#/view/com/composer/text-input/web/EmojiPicker.web'
10
-
import {PressableWithHover} from '#/view/com/util/PressableWithHover'
11
-
import {atoms as a} from '#/alf'
12
-
import {useTheme} from '#/alf'
11
+
import {atoms as a, flatten, useTheme} from '#/alf'
13
12
import {DotGrid_Stroke2_Corner0_Rounded as DotGridIcon} from '#/components/icons/DotGrid'
14
13
import * as Menu from '#/components/Menu'
15
14
import {type TriggerProps} from '#/components/Menu/types'
···
67
66
return expanded ? (
68
67
<EmojiPicker onEmojiSelect={handleEmojiPickerResponse} autoFocus={true} />
69
68
) : (
70
-
<View style={[a.flex_row, a.gap_xs]}>
71
-
{['👍', '😆', '❤️', '👀', '😢'].map(emoji => {
72
-
const alreadyReacted = hasAlreadyReacted(
73
-
message,
74
-
currentAccount?.did,
75
-
emoji,
76
-
)
77
-
return (
78
-
<PressableWithHover
79
-
key={emoji}
80
-
onPress={() => handleEmojiSelect(emoji)}
81
-
hoverStyle={{
82
-
backgroundColor: alreadyReacted
83
-
? t.palette.negative_200
84
-
: !limitReacted
85
-
? t.palette.primary_300
86
-
: undefined,
87
-
}}
88
-
style={[
89
-
a.rounded_xs,
90
-
{height: 40, width: 40},
69
+
<Menu.Outer style={[a.rounded_full]}>
70
+
<View style={[a.flex_row, a.gap_xs]}>
71
+
{['👍', '😆', '❤️', '👀', '😢'].map(emoji => {
72
+
const alreadyReacted = hasAlreadyReacted(
73
+
message,
74
+
currentAccount?.did,
75
+
emoji,
76
+
)
77
+
return (
78
+
<DropdownMenu.Item
79
+
key={emoji}
80
+
className={[
81
+
'EmojiReactionPicker__Pressable',
82
+
alreadyReacted && '__selected',
83
+
limitReacted && '__disabled',
84
+
]
85
+
.filter(Boolean)
86
+
.join(' ')}
87
+
onSelect={() => handleEmojiSelect(emoji)}
88
+
style={flatten([
89
+
a.flex,
90
+
a.flex_col,
91
+
a.rounded_full,
92
+
a.justify_center,
93
+
a.align_center,
94
+
a.transition_transform,
95
+
{
96
+
width: 34,
97
+
height: 34,
98
+
},
99
+
alreadyReacted && {
100
+
backgroundColor: t.atoms.bg_contrast_100.backgroundColor,
101
+
},
102
+
])}>
103
+
<Text style={[a.text_center, {fontSize: 28}]} emoji>
104
+
{emoji}
105
+
</Text>
106
+
</DropdownMenu.Item>
107
+
)
108
+
})}
109
+
<DropdownMenu.Item
110
+
asChild
111
+
className="EmojiReactionPicker__PickerButton">
112
+
<Pressable
113
+
accessibilityRole="button"
114
+
role="button"
115
+
onPress={() => setExpanded(true)}
116
+
style={flatten([
117
+
a.rounded_full,
118
+
{height: 34, width: 34},
91
119
a.justify_center,
92
120
a.align_center,
93
-
alreadyReacted && {backgroundColor: t.palette.primary_100},
94
-
]}>
95
-
<Text style={[a.text_center, {fontSize: 30}]} emoji>
96
-
{emoji}
97
-
</Text>
98
-
</PressableWithHover>
99
-
)
100
-
})}
101
-
<PressableWithHover
102
-
onPress={() => setExpanded(true)}
103
-
hoverStyle={{backgroundColor: t.palette.primary_100}}
104
-
style={[
105
-
a.rounded_xs,
106
-
{height: 40, width: 40},
107
-
a.justify_center,
108
-
a.align_center,
109
-
]}>
110
-
<DotGridIcon size="lg" style={t.atoms.text_contrast_medium} />
111
-
</PressableWithHover>
112
-
</View>
121
+
])}>
122
+
<DotGridIcon size="lg" style={t.atoms.text_contrast_medium} />
123
+
</Pressable>
124
+
</DropdownMenu.Item>
125
+
</View>
126
+
</Menu.Outer>
113
127
)
114
128
}
+35
src/style.css
+35
src/style.css
···
290
290
width: 16px;
291
291
margin-left: -6px;
292
292
}
293
+
294
+
/*
295
+
* EmojiReactionPicker dropdown elements, within Radix components
296
+
*/
297
+
.EmojiReactionPicker__Pressable {
298
+
cursor: pointer;
299
+
border: 1px solid transparent;
300
+
}
301
+
.EmojiReactionPicker__Pressable:focus {
302
+
outline: none;
303
+
border-color: var(--text);
304
+
}
305
+
.EmojiReactionPicker__Pressable:hover {
306
+
outline: none;
307
+
transform: scale(1.1);
308
+
border-color: transparent;
309
+
}
310
+
.EmojiReactionPicker__Pressable:not(.__selected).__disabled {
311
+
transform: scale(1) !important;
312
+
border-color: transparent !important;
313
+
opacity: 0.7;
314
+
}
315
+
.EmojiReactionPicker__Pressable ~ button {
316
+
cursor: pointer;
317
+
border: 1px solid transparent;
318
+
}
319
+
.EmojiReactionPicker__Pressable ~ button:focus {
320
+
outline: none;
321
+
border-color: var(--text);
322
+
}
323
+
.EmojiReactionPicker__Pressable ~ button:hover {
324
+
outline: none;
325
+
background-color: var(--backgroundLight);
326
+
border-color: transparent;
327
+
}