Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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
··· 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
··· 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 + }