Page MenuHomePhabricator
Differential D8287

[web] Split `EmojiAvatarSelectionModal` into "Emoji" and "Color" tab
ClosedPublic
Actions

Authored by atul on Jun 21 2023, 4:04 PM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Mar 15, 4:35 PM
Unknown Object (File)
Wed, Mar 5, 4:02 PM
Unknown Object (File)
Wed, Mar 5, 4:02 PM
Unknown Object (File)
Wed, Mar 5, 4:02 PM
Unknown Object (File)
Wed, Mar 5, 4:01 PM
Unknown Object (File)
Wed, Mar 5, 3:57 PM
Unknown Object (File)
Feb 19 2025, 11:25 AM
Unknown Object (File)
Feb 13 2025, 10:18 AM
View All Files
Subscribers
ashoat
• ted
tomek

Details

Reviewers
ashoat
ginsu
rohan
Commits
rCOMMdebbfe636078: [web] Split `EmojiAvatarSelectionModal` into "Emoji" and "Color" tab
Summary

Separate Emoji and Color into separate tabs.

NOTE: Layout/Styling will be handled separately.
WARNING: Took some liberties here with styling to unblock myself since emoji selection part of this modal wasn't part of designs (https://blob.sh/84e83d.png). Kept things as simple as possible, happy to iterate on this further. (cc @ashoat, @ted)

Depends on D8286

Test Plan

Looks (and continues to work) as expected:

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Revision Contents
Changeset List

Diff 28097

View Options

web/avatars/emoji-avatar-selection-modal.css

Show All 35 Lines
import type { CommunityCreationMembersScreenParams } from '../community-creation/community-creation-members.react.js'; import type { CommunityCreationMembersScreenParams } from '../community-creation/community-creation-members.react.js';
import type { ManagePublicLinkScreenParams } from '../invite-links/manage-public-link-screen.react.js'; import type { ManagePublicLinkScreenParams } from '../invite-links/manage-public-link-screen.react.js';
import type { ViewInviteLinksScreenParams } from '../invite-links/view-invite-links-screen.react.js'; import type { ViewInviteLinksScreenParams } from '../invite-links/view-invite-links-screen.react.js';
import type { ChatCameraModalParams } from '../media/chat-camera-modal.react.js'; import type { ChatCameraModalParams } from '../media/chat-camera-modal.react.js';
import type { ImageModalParams } from '../media/image-modal.react.js'; import type { ImageModalParams } from '../media/image-modal.react.js';
import type { ThreadAvatarCameraModalParams } from '../media/thread-avatar-camera-modal.react.js'; import type { ThreadAvatarCameraModalParams } from '../media/thread-avatar-camera-modal.react.js';
import type { VideoPlaybackModalParams } from '../media/video-playback-modal.react.js'; import type { VideoPlaybackModalParams } from '../media/video-playback-modal.react.js';
import type { CustomServerModalParams } from '../profile/custom-server-modal.react.js'; import type { CustomServerModalParams } from '../profile/custom-server-modal.react.js';
import type { KeyserverSelectionBottomSheetParams } from '../profile/keyserver-selection-bottom-sheet.react.js';
import type { UserRelationshipTooltipModalParams } from '../profile/user-relationship-tooltip-modal.react.js'; import type { UserRelationshipTooltipModalParams } from '../profile/user-relationship-tooltip-modal.react.js';
import type { ChangeRolesScreenParams } from '../roles/change-roles-screen.react.js'; import type { ChangeRolesScreenParams } from '../roles/change-roles-screen.react.js';
import type { CommunityRolesScreenParams } from '../roles/community-roles-screen.react.js'; import type { CommunityRolesScreenParams } from '../roles/community-roles-screen.react.js';
import type { CreateRolesScreenParams } from '../roles/create-roles-screen.react.js'; import type { CreateRolesScreenParams } from '../roles/create-roles-screen.react.js';
import type { MessageSearchParams } from '../search/message-search.react.js'; import type { MessageSearchParams } from '../search/message-search.react.js';
import type { UserProfileAvatarModalParams } from '../user-profile/user-profile-avatar-modal.react.js'; import type { UserProfileAvatarModalParams } from '../user-profile/user-profile-avatar-modal.react.js';
import type { UserProfileBottomSheetParams } from '../user-profile/user-profile-bottom-sheet.react.js'; import type { UserProfileBottomSheetParams } from '../user-profile/user-profile-bottom-sheet.react.js';
▲ Show 20 Lines • Show All 85 Lines • ▼ Show 20 Lines
export const QRCodeSignInNavigatorRouteName = 'QRCodeSignInNavigator'; export const QRCodeSignInNavigatorRouteName = 'QRCodeSignInNavigator';
export const QRCodeScreenRouteName = 'QRCodeScreen'; export const QRCodeScreenRouteName = 'QRCodeScreen';
export const UserProfileBottomSheetNavigatorRouteName = export const UserProfileBottomSheetNavigatorRouteName =
'UserProfileBottomSheetNavigator'; 'UserProfileBottomSheetNavigator';
export const UserProfileBottomSheetRouteName = 'UserProfileBottomSheet'; export const UserProfileBottomSheetRouteName = 'UserProfileBottomSheet';
export const UserProfileAvatarModalRouteName = 'UserProfileAvatarModal'; export const UserProfileAvatarModalRouteName = 'UserProfileAvatarModal';
export const KeyserverSelectionListRouteName = 'KeyserverSelectionList'; export const KeyserverSelectionListRouteName = 'KeyserverSelectionList';
export const AddKeyserverRouteName = 'AddKeyserver'; export const AddKeyserverRouteName = 'AddKeyserver';
export const KeyserverSelectionBottomSheetRouteName =
'KeyserverSelectionBottomSheet';
export type RootParamList = { export type RootParamList = {
+LoggedOutModal: void, +LoggedOutModal: void,
+App: void, +App: void,
+ThreadPickerModal: ThreadPickerModalParams, +ThreadPickerModal: ThreadPickerModalParams,
+AddUsersModal: AddUsersModalParams, +AddUsersModal: AddUsersModalParams,
+CustomServerModal: CustomServerModalParams, +CustomServerModal: CustomServerModalParams,
+ColorSelectorModal: ColorSelectorModalParams, +ColorSelectorModal: ColorSelectorModalParams,
+ComposeSubchannelModal: ComposeSubchannelModalParams, +ComposeSubchannelModal: ComposeSubchannelModalParams,
+SidebarListModal: SidebarListModalParams, +SidebarListModal: SidebarListModalParams,
+ImagePasteModal: ImagePasteModalParams, +ImagePasteModal: ImagePasteModalParams,
+TermsAndPrivacyModal: TermsAndPrivacyModalParams, +TermsAndPrivacyModal: TermsAndPrivacyModalParams,
+SubchannelsListModal: SubchannelListModalParams, +SubchannelsListModal: SubchannelListModalParams,
+MessageReactionsModal: MessageReactionsModalParams, +MessageReactionsModal: MessageReactionsModalParams,
+Registration: void, +Registration: void,
+CommunityCreation: void, +CommunityCreation: void,
+InviteLinkModal: InviteLinkModalParams, +InviteLinkModal: InviteLinkModalParams,
+InviteLinkNavigator: void, +InviteLinkNavigator: void,
+RolesNavigator: void, +RolesNavigator: void,
+QRCodeSignInNavigator: void, +QRCodeSignInNavigator: void,
+UserProfileBottomSheetNavigator: void, +UserProfileBottomSheetNavigator: void,
+TunnelbrokerMenu: void, +TunnelbrokerMenu: void,
+KeyserverSelectionBottomSheet: KeyserverSelectionBottomSheetParams,
}; };
export type MessageTooltipRouteNames = export type MessageTooltipRouteNames =
| typeof RobotextMessageTooltipModalRouteName | typeof RobotextMessageTooltipModalRouteName
| typeof MultimediaMessageTooltipModalRouteName | typeof MultimediaMessageTooltipModalRouteName
| typeof TextMessageTooltipModalRouteName; | typeof TextMessageTooltipModalRouteName;
export const PinnableMessageTooltipRouteNames = [ export const PinnableMessageTooltipRouteNames = [
▲ Show 20 Lines • Show All 161 Lines • Show Last 20 Lines
View Options

web/avatars/emoji-avatar-selection-modal.react.js

Show All 35 Lines
import type { CommunityCreationMembersScreenParams } from '../community-creation/community-creation-members.react.js'; import type { CommunityCreationMembersScreenParams } from '../community-creation/community-creation-members.react.js';
import type { ManagePublicLinkScreenParams } from '../invite-links/manage-public-link-screen.react.js'; import type { ManagePublicLinkScreenParams } from '../invite-links/manage-public-link-screen.react.js';
import type { ViewInviteLinksScreenParams } from '../invite-links/view-invite-links-screen.react.js'; import type { ViewInviteLinksScreenParams } from '../invite-links/view-invite-links-screen.react.js';
import type { ChatCameraModalParams } from '../media/chat-camera-modal.react.js'; import type { ChatCameraModalParams } from '../media/chat-camera-modal.react.js';
import type { ImageModalParams } from '../media/image-modal.react.js'; import type { ImageModalParams } from '../media/image-modal.react.js';
import type { ThreadAvatarCameraModalParams } from '../media/thread-avatar-camera-modal.react.js'; import type { ThreadAvatarCameraModalParams } from '../media/thread-avatar-camera-modal.react.js';
import type { VideoPlaybackModalParams } from '../media/video-playback-modal.react.js'; import type { VideoPlaybackModalParams } from '../media/video-playback-modal.react.js';
import type { CustomServerModalParams } from '../profile/custom-server-modal.react.js'; import type { CustomServerModalParams } from '../profile/custom-server-modal.react.js';
import type { KeyserverSelectionBottomSheetParams } from '../profile/keyserver-selection-bottom-sheet.react.js';
import type { UserRelationshipTooltipModalParams } from '../profile/user-relationship-tooltip-modal.react.js'; import type { UserRelationshipTooltipModalParams } from '../profile/user-relationship-tooltip-modal.react.js';
import type { ChangeRolesScreenParams } from '../roles/change-roles-screen.react.js'; import type { ChangeRolesScreenParams } from '../roles/change-roles-screen.react.js';
import type { CommunityRolesScreenParams } from '../roles/community-roles-screen.react.js'; import type { CommunityRolesScreenParams } from '../roles/community-roles-screen.react.js';
import type { CreateRolesScreenParams } from '../roles/create-roles-screen.react.js'; import type { CreateRolesScreenParams } from '../roles/create-roles-screen.react.js';
import type { MessageSearchParams } from '../search/message-search.react.js'; import type { MessageSearchParams } from '../search/message-search.react.js';
import type { UserProfileAvatarModalParams } from '../user-profile/user-profile-avatar-modal.react.js'; import type { UserProfileAvatarModalParams } from '../user-profile/user-profile-avatar-modal.react.js';
import type { UserProfileBottomSheetParams } from '../user-profile/user-profile-bottom-sheet.react.js'; import type { UserProfileBottomSheetParams } from '../user-profile/user-profile-bottom-sheet.react.js';
▲ Show 20 Lines • Show All 85 Lines • ▼ Show 20 Lines
export const QRCodeSignInNavigatorRouteName = 'QRCodeSignInNavigator'; export const QRCodeSignInNavigatorRouteName = 'QRCodeSignInNavigator';
export const QRCodeScreenRouteName = 'QRCodeScreen'; export const QRCodeScreenRouteName = 'QRCodeScreen';
export const UserProfileBottomSheetNavigatorRouteName = export const UserProfileBottomSheetNavigatorRouteName =
'UserProfileBottomSheetNavigator'; 'UserProfileBottomSheetNavigator';
export const UserProfileBottomSheetRouteName = 'UserProfileBottomSheet'; export const UserProfileBottomSheetRouteName = 'UserProfileBottomSheet';
export const UserProfileAvatarModalRouteName = 'UserProfileAvatarModal'; export const UserProfileAvatarModalRouteName = 'UserProfileAvatarModal';
export const KeyserverSelectionListRouteName = 'KeyserverSelectionList'; export const KeyserverSelectionListRouteName = 'KeyserverSelectionList';
export const AddKeyserverRouteName = 'AddKeyserver'; export const AddKeyserverRouteName = 'AddKeyserver';
export const KeyserverSelectionBottomSheetRouteName =
'KeyserverSelectionBottomSheet';
export type RootParamList = { export type RootParamList = {
+LoggedOutModal: void, +LoggedOutModal: void,
+App: void, +App: void,
+ThreadPickerModal: ThreadPickerModalParams, +ThreadPickerModal: ThreadPickerModalParams,
+AddUsersModal: AddUsersModalParams, +AddUsersModal: AddUsersModalParams,
+CustomServerModal: CustomServerModalParams, +CustomServerModal: CustomServerModalParams,
+ColorSelectorModal: ColorSelectorModalParams, +ColorSelectorModal: ColorSelectorModalParams,
+ComposeSubchannelModal: ComposeSubchannelModalParams, +ComposeSubchannelModal: ComposeSubchannelModalParams,
+SidebarListModal: SidebarListModalParams, +SidebarListModal: SidebarListModalParams,
+ImagePasteModal: ImagePasteModalParams, +ImagePasteModal: ImagePasteModalParams,
+TermsAndPrivacyModal: TermsAndPrivacyModalParams, +TermsAndPrivacyModal: TermsAndPrivacyModalParams,
+SubchannelsListModal: SubchannelListModalParams, +SubchannelsListModal: SubchannelListModalParams,
+MessageReactionsModal: MessageReactionsModalParams, +MessageReactionsModal: MessageReactionsModalParams,
+Registration: void, +Registration: void,
+CommunityCreation: void, +CommunityCreation: void,
+InviteLinkModal: InviteLinkModalParams, +InviteLinkModal: InviteLinkModalParams,
+InviteLinkNavigator: void, +InviteLinkNavigator: void,
+RolesNavigator: void, +RolesNavigator: void,
+QRCodeSignInNavigator: void, +QRCodeSignInNavigator: void,
+UserProfileBottomSheetNavigator: void, +UserProfileBottomSheetNavigator: void,
+TunnelbrokerMenu: void, +TunnelbrokerMenu: void,
+KeyserverSelectionBottomSheet: KeyserverSelectionBottomSheetParams,
}; };
export type MessageTooltipRouteNames = export type MessageTooltipRouteNames =
| typeof RobotextMessageTooltipModalRouteName | typeof RobotextMessageTooltipModalRouteName
| typeof MultimediaMessageTooltipModalRouteName | typeof MultimediaMessageTooltipModalRouteName
| typeof TextMessageTooltipModalRouteName; | typeof TextMessageTooltipModalRouteName;
export const PinnableMessageTooltipRouteNames = [ export const PinnableMessageTooltipRouteNames = [
▲ Show 20 Lines • Show All 161 Lines • Show Last 20 Lines