Page MenuHomePhabricator
Files F3529916

D8266.diff
No OneTemporary
Actions

D8266.diff
View Options

diff --git a/lib/shared/avatar-utils.js b/lib/shared/avatar-utils.js
--- a/lib/shared/avatar-utils.js
+++ b/lib/shared/avatar-utils.js
@@ -345,6 +345,7 @@
}
export {
+ defaultAnonymousUserEmojiAvatar,
defaultEmojiAvatars,
getRandomDefaultEmojiAvatar,
getDefaultAvatar,
diff --git a/web/avatars/emoji-avatar-selection-modal.css b/web/avatars/emoji-avatar-selection-modal.css
new file mode 100644
--- /dev/null
+++ b/web/avatars/emoji-avatar-selection-modal.css
@@ -0,0 +1,11 @@
+div.modalBody {
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+}
+
+div.avatarContainer {
+ display: flex;
+ justify-content: center;
+ padding-top: 20px;
+}
diff --git a/web/avatars/emoji-avatar-selection-modal.react.js b/web/avatars/emoji-avatar-selection-modal.react.js
--- a/web/avatars/emoji-avatar-selection-modal.react.js
+++ b/web/avatars/emoji-avatar-selection-modal.react.js
@@ -3,17 +3,61 @@
import * as React from 'react';
import { useModalContext } from 'lib/components/modal-provider.react.js';
+import {
+ defaultAnonymousUserEmojiAvatar,
+ getAvatarForUser,
+ getDefaultAvatar,
+} from 'lib/shared/avatar-utils.js';
+import type {
+ ClientAvatar,
+ ClientEmojiAvatar,
+} from 'lib/types/avatar-types.js';
+import Avatar from './avatar.react.js';
+import css from './emoji-avatar-selection-modal.css';
import Modal from '../modals/modal.react.js';
+import { useSelector } from '../redux/redux-utils.js';
function EmojiAvatarSelectionModal(): React.Node {
const { popModal } = useModalContext();
+
+ const currentUserInfo = useSelector(state => state.currentUserInfo);
+ const currentUserAvatar: ClientAvatar = getAvatarForUser(currentUserInfo);
+ const defaultUserAvatar: ClientEmojiAvatar = currentUserInfo?.username
+ ? getDefaultAvatar(currentUserInfo.username)
+ : defaultAnonymousUserEmojiAvatar;
+
+ // eslint-disable-next-line no-unused-vars
+ const [pendingAvatarEmoji, setPendingAvatarEmoji] = React.useState(
+ currentUserAvatar.type === 'emoji'
+ ? currentUserAvatar.emoji
+ : defaultUserAvatar.emoji,
+ );
+
+ // eslint-disable-next-line no-unused-vars
+ const [pendingAvatarColor, setPendingAvatarColor] = React.useState(
+ currentUserAvatar.type === 'emoji'
+ ? currentUserAvatar.color
+ : defaultUserAvatar.color,
+ );
+
+ const pendingEmojiAvatar: ClientEmojiAvatar = React.useMemo(
+ () => ({
+ type: 'emoji',
+ emoji: pendingAvatarEmoji,
+ color: pendingAvatarColor,
+ }),
+ [pendingAvatarColor, pendingAvatarEmoji],
+ );
+
return (
- <Modal
- name="Emoji avatar selection"
- size="large"
- onClose={popModal}
- ></Modal>
+ <Modal name="Emoji avatar selection" size="large" onClose={popModal}>
+ <div className={css.modalBody}>
+ <div className={css.avatarContainer}>
+ <Avatar avatarInfo={pendingEmojiAvatar} size="profile" />
+ </div>
+ </div>
+ </Modal>
);
}

File Metadata

Mime Type
text/plain
Expires
Wed, Dec 25, 10:03 PM (11 h, 49 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2703289
Default Alt Text
D8266.diff (2 KB)

Event Timeline