Page MenuHomePhabricator
Files F3405120

D8287.diff
No OneTemporary
Actions

D8287.diff
View Options

diff --git a/web/avatars/emoji-avatar-selection-modal.css b/web/avatars/emoji-avatar-selection-modal.css
--- a/web/avatars/emoji-avatar-selection-modal.css
+++ b/web/avatars/emoji-avatar-selection-modal.css
@@ -1,7 +1,10 @@
-div.modalBody {
+div.modalContainer {
display: flex;
flex-direction: column;
overflow: hidden;
+}
+
+div.modalBody {
padding: 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
@@ -21,11 +21,14 @@
import Avatar from './avatar.react.js';
import css from './emoji-avatar-selection-modal.css';
import Button, { buttonThemes } from '../components/button.react.js';
+import Tabs from '../components/tabs.react.js';
import LoadingIndicator from '../loading-indicator.react.js';
import Modal from '../modals/modal.react.js';
import ColorSelector from '../modals/threads/color-selector.react.js';
import { useSelector } from '../redux/redux-utils.js';
+type TabType = 'emoji' | 'color';
+
function EmojiAvatarSelectionModal(): React.Node {
const { popModal } = useModalContext();
@@ -110,9 +113,11 @@
saveButtonContent = 'Save Avatar';
}
+ const [currentTabType, setCurrentTabType] = React.useState<TabType>('emoji');
+
return (
<Modal name="Emoji avatar selection" size="large" onClose={popModal}>
- <div className={css.modalBody}>
+ <div className={css.modalContainer}>
<div className={css.avatarContainer}>
<Avatar
avatarInfo={pendingEmojiAvatar}
@@ -120,26 +125,34 @@
showSpinner={userAvatarSaveInProgress}
/>
</div>
- <div className={css.emojiPickerContainer}>
- <Picker data={data} theme="dark" onEmojiSelect={onEmojiSelect} />
- </div>
- <div className={css.colorSelectorContainer}>
- <ColorSelector
- currentColor={pendingAvatarColor}
- onColorSelection={onColorSelection}
- />
- </div>
- <div className={css.saveButtonContainer}>
- <Button
- variant="filled"
- buttonColor={buttonColor}
- onClick={onSaveAvatar}
- disabled={userAvatarSaveInProgress}
- >
- <div className={css.saveAvatarButtonContent}>
- {saveButtonContent}
+ <Tabs.Container activeTab={currentTabType} setTab={setCurrentTabType}>
+ <Tabs.Item id="emoji" header="Emoji">
+ <div className={css.emojiPickerContainer}>
+ <Picker data={data} theme="dark" onEmojiSelect={onEmojiSelect} />
+ </div>
+ </Tabs.Item>
+ <Tabs.Item id="color" header="Color">
+ <div className={css.colorSelectorContainer}>
+ <ColorSelector
+ currentColor={pendingAvatarColor}
+ onColorSelection={onColorSelection}
+ />
</div>
- </Button>
+ </Tabs.Item>
+ </Tabs.Container>
+ <div className={css.modalBody}>
+ <div className={css.saveButtonContainer}>
+ <Button
+ variant="filled"
+ buttonColor={buttonColor}
+ onClick={onSaveAvatar}
+ disabled={userAvatarSaveInProgress}
+ >
+ <div className={css.saveAvatarButtonContent}>
+ {saveButtonContent}
+ </div>
+ </Button>
+ </div>
</div>
</div>
</Modal>

File Metadata

Mime Type
text/plain
Expires
Wed, Dec 4, 6:29 PM (11 h, 45 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2614587
Default Alt Text
D8287.diff (3 KB)

Event Timeline