Page MenuHomePhabricator
Files F3300631

D10319.id37148.diff
No OneTemporary
Actions

D10319.id37148.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
@@ -2,20 +2,15 @@
display: flex;
flex-direction: column;
overflow: hidden;
- min-height: 594px;
}
/* https://github.com/missive/emoji-mart/discussions/663 */
em-emoji-picker {
- max-height: 300px;
-}
-
-div.modalBody {
- padding: 20px;
+ max-height: 324px;
}
div.tabBody {
- height: 300px;
+ height: 324px;
padding-top: 20px;
display: flex;
justify-content: center;
@@ -25,7 +20,6 @@
div.avatarContainer {
display: flex;
justify-content: center;
- padding-top: 20px;
}
div.emojiPickerContainer {
@@ -34,11 +28,6 @@
align-items: center;
}
-div.saveButtonContainer {
- display: flex;
- flex-direction: column;
-}
-
div.saveAvatarButtonContent {
display: flex;
justify-content: center;
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
@@ -114,15 +114,38 @@
const [currentTabType, setCurrentTabType] = React.useState<TabType>('emoji');
- const tabs = React.useMemo(
+ const subheader = React.useMemo(
() => (
- <Tabs
- tabItems={tabsData}
- activeTab={currentTabType}
- setTab={setCurrentTabType}
- />
+ <>
+ <div className={css.avatarContainer}>
+ <Avatar
+ avatarInfo={pendingEmojiAvatar}
+ size="XL"
+ showSpinner={avatarSaveInProgress}
+ />
+ </div>
+ <Tabs
+ tabItems={tabsData}
+ activeTab={currentTabType}
+ setTab={setCurrentTabType}
+ />
+ </>
+ ),
+ [avatarSaveInProgress, currentTabType, pendingEmojiAvatar],
+ );
+
+ const saveButton = React.useMemo(
+ () => (
+ <Button
+ variant="filled"
+ buttonColor={buttonColor}
+ onClick={onSaveAvatar}
+ disabled={avatarSaveInProgress}
+ >
+ <div className={css.saveAvatarButtonContent}>{saveButtonContent}</div>
+ </Button>
),
- [currentTabType],
+ [avatarSaveInProgress, buttonColor, onSaveAvatar, saveButtonContent],
);
const tabContent = React.useMemo(() => {
@@ -149,35 +172,17 @@
/>
</div>
);
- }, [currentTabType, onEmojiSelect, onColorSelection, pendingAvatarColor]);
+ }, [currentTabType, onColorSelection, onEmojiSelect, pendingAvatarColor]);
return (
- <Modal name="Emoji avatar selection" size="large" onClose={popModal}>
- <div className={css.modalContainer}>
- <div className={css.avatarContainer}>
- <Avatar
- avatarInfo={pendingEmojiAvatar}
- size="XL"
- showSpinner={avatarSaveInProgress}
- />
- </div>
- {tabs}
- {tabContent}
- <div className={css.modalBody}>
- <div className={css.saveButtonContainer}>
- <Button
- variant="filled"
- buttonColor={buttonColor}
- onClick={onSaveAvatar}
- disabled={avatarSaveInProgress}
- >
- <div className={css.saveAvatarButtonContent}>
- {saveButtonContent}
- </div>
- </Button>
- </div>
- </div>
- </div>
+ <Modal
+ name="Emoji avatar selection"
+ size="large"
+ onClose={popModal}
+ subheader={subheader}
+ primaryButton={saveButton}
+ >
+ <div className={css.modalContainer}>{tabContent}</div>
</Modal>
);
}

File Metadata

Mime Type
text/plain
Expires
Mon, Nov 18, 8:28 PM (20 h, 54 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2535818
Default Alt Text
D10319.id37148.diff (3 KB)

Event Timeline