Page MenuHomePhabricator
Differential D8263

[web] Move `editAvatarBadge` div to `EditUserAvatarMenu`
ClosedPublic
Actions

Authored by atul on Jun 20 2023, 11:55 AM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Apr 19, 8:55 PM
Unknown Object (File)
Sat, Apr 19, 12:00 PM
Unknown Object (File)
Sat, Apr 19, 2:29 AM
Unknown Object (File)
Fri, Apr 18, 7:12 AM
Unknown Object (File)
Thu, Apr 3, 10:25 PM
Unknown Object (File)
Mar 15 2025, 4:36 PM
Unknown Object (File)
Mar 10 2025, 1:09 PM
Unknown Object (File)
Mar 8 2025, 12:42 PM
View All Files
Subscribers
tomek

Details

Reviewers
ashoat
ginsu
rohan
inka
michal
kamil
Commits
rCOMM349d0eec12f8: [web] Move `editAvatarBadge` div to `EditUserAvatarMenu`
Summary

Currently only the pencil icon is "clickable," we want the whole thing to be "clickable."

Known regression:

23d369.png (744×726 px, 77 KB)

The menu is appearing right below the icon rather than below the "badge." Will address this layout issue in subsequent diff.

Depends on D8261

Test Plan

"Whole button" is clickable.

Diff Detail

Repository
rCOMM Comm
Branch
master
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

atul created this revision.Jun 20 2023, 11:55 AM
Herald added a subscriber: tomek. · View Herald TranscriptJun 20 2023, 11:55 AM
atul edited the summary of this revision. (Show Details)Jun 20 2023, 11:55 AM
atul added a child revision: D8264: [web] Hide `EditUserAvatarMenu` when `userAvatarSaveInProgress`.Jun 20 2023, 12:02 PM
Harbormaster completed remote builds in B20364: Diff 27909.Jun 20 2023, 12:12 PM
atul requested review of this revision.Jun 20 2023, 12:12 PM
atul added reviewers: rohan, inka, michal, kamil.Jun 21 2023, 9:45 AM
kamil accepted this revision.Jun 22 2023, 4:54 AM

The menu is appearing right below the icon rather than below the "badge." Will address this layout issue in subsequent diff.

Can you link it?

This revision is now accepted and ready to land.Jun 22 2023, 4:54 AM
atul added a comment.Jun 22 2023, 10:50 AM
In D8263#244474, @kamil wrote:

The menu is appearing right below the icon rather than below the "badge." Will address this layout issue in subsequent diff.

Can you link it?

Haven't put it up yet, it requires modifying Menu component so deferring for the end of the stack

Closed by commit rCOMM349d0eec12f8: [web] Move `editAvatarBadge` div to `EditUserAvatarMenu` (authored by atul). · Explain WhyJun 22 2023, 10:56 AM
This revision was automatically updated to reflect the committed changes.
atul added a commit: rCOMM349d0eec12f8: [web] Move `editAvatarBadge` div to `EditUserAvatarMenu`.

Revision Contents
Changeset List

PathSize
web/
avatars/
edit-user-avatar-menu.css
edit-user-avatar.css
13 lines
7 lines
21 lines
4 lines

Diff 27909

View Options

web/avatars/edit-user-avatar-menu.css

Show First 20 Lines • Show All 125 Lines • ▼ Show 20 Lines >
<Avatar <Avatar
avatarInfo={pendingEmojiAvatar} avatarInfo={pendingEmojiAvatar}
size="profile" size="profile"
showSpinner={userAvatarSaveInProgress} showSpinner={userAvatarSaveInProgress}
/> />
</div> </div>
<Tabs.Container activeTab={currentTabType} setTab={setCurrentTabType}> <Tabs.Container activeTab={currentTabType} setTab={setCurrentTabType}>
<Tabs.Item id="emoji" header="Emoji"> <Tabs.Item id="emoji" header="Emoji">
<div className={css.tabBody}>
<div className={css.emojiPickerContainer}> <div className={css.emojiPickerContainer}>
<Picker data={data} theme="dark" onEmojiSelect={onEmojiSelect} /> <Picker
data={data}
theme="dark"
onEmojiSelect={onEmojiSelect}
perLine={12}
/>
</div>
</div> </div>
</Tabs.Item> </Tabs.Item>
<Tabs.Item id="color" header="Color"> <Tabs.Item id="color" header="Color">
<div className={css.colorSelectorContainer}> <div className={css.colorSelectorContainer}>
<ColorSelector <ColorSelector
currentColor={pendingAvatarColor} currentColor={pendingAvatarColor}
onColorSelection={onColorSelection} onColorSelection={onColorSelection}
/> />
Show All 23 Lines
View Options

web/avatars/edit-user-avatar-menu.react.js

Show First 20 Lines • Show All 125 Lines • ▼ Show 20 Lines >
<Avatar <Avatar
avatarInfo={pendingEmojiAvatar} avatarInfo={pendingEmojiAvatar}
size="profile" size="profile"
showSpinner={userAvatarSaveInProgress} showSpinner={userAvatarSaveInProgress}
/> />
</div> </div>
<Tabs.Container activeTab={currentTabType} setTab={setCurrentTabType}> <Tabs.Container activeTab={currentTabType} setTab={setCurrentTabType}>
<Tabs.Item id="emoji" header="Emoji"> <Tabs.Item id="emoji" header="Emoji">
<div className={css.tabBody}>
<div className={css.emojiPickerContainer}> <div className={css.emojiPickerContainer}>
<Picker data={data} theme="dark" onEmojiSelect={onEmojiSelect} /> <Picker
data={data}
theme="dark"
onEmojiSelect={onEmojiSelect}
perLine={12}
/>
</div>
</div> </div>
</Tabs.Item> </Tabs.Item>
<Tabs.Item id="color" header="Color"> <Tabs.Item id="color" header="Color">
<div className={css.colorSelectorContainer}> <div className={css.colorSelectorContainer}>
<ColorSelector <ColorSelector
currentColor={pendingAvatarColor} currentColor={pendingAvatarColor}
onColorSelection={onColorSelection} onColorSelection={onColorSelection}
/> />
Show All 23 Lines
View Options

web/avatars/edit-user-avatar.css

Show First 20 Lines • Show All 125 Lines • ▼ Show 20 Lines >
<Avatar <Avatar
avatarInfo={pendingEmojiAvatar} avatarInfo={pendingEmojiAvatar}
size="profile" size="profile"
showSpinner={userAvatarSaveInProgress} showSpinner={userAvatarSaveInProgress}
/> />
</div> </div>
<Tabs.Container activeTab={currentTabType} setTab={setCurrentTabType}> <Tabs.Container activeTab={currentTabType} setTab={setCurrentTabType}>
<Tabs.Item id="emoji" header="Emoji"> <Tabs.Item id="emoji" header="Emoji">
<div className={css.tabBody}>
<div className={css.emojiPickerContainer}> <div className={css.emojiPickerContainer}>
<Picker data={data} theme="dark" onEmojiSelect={onEmojiSelect} /> <Picker
data={data}
theme="dark"
onEmojiSelect={onEmojiSelect}
perLine={12}
/>
</div>
</div> </div>
</Tabs.Item> </Tabs.Item>
<Tabs.Item id="color" header="Color"> <Tabs.Item id="color" header="Color">
<div className={css.colorSelectorContainer}> <div className={css.colorSelectorContainer}>
<ColorSelector <ColorSelector
currentColor={pendingAvatarColor} currentColor={pendingAvatarColor}
onColorSelection={onColorSelection} onColorSelection={onColorSelection}
/> />
Show All 23 Lines
View Options

web/avatars/edit-user-avatar.react.js

Show First 20 Lines • Show All 125 Lines • ▼ Show 20 Lines >
<Avatar <Avatar
avatarInfo={pendingEmojiAvatar} avatarInfo={pendingEmojiAvatar}
size="profile" size="profile"
showSpinner={userAvatarSaveInProgress} showSpinner={userAvatarSaveInProgress}
/> />
</div> </div>
<Tabs.Container activeTab={currentTabType} setTab={setCurrentTabType}> <Tabs.Container activeTab={currentTabType} setTab={setCurrentTabType}>
<Tabs.Item id="emoji" header="Emoji"> <Tabs.Item id="emoji" header="Emoji">
<div className={css.tabBody}>
<div className={css.emojiPickerContainer}> <div className={css.emojiPickerContainer}>
<Picker data={data} theme="dark" onEmojiSelect={onEmojiSelect} /> <Picker
data={data}
theme="dark"
onEmojiSelect={onEmojiSelect}
perLine={12}
/>
</div>
</div> </div>
</Tabs.Item> </Tabs.Item>
<Tabs.Item id="color" header="Color"> <Tabs.Item id="color" header="Color">
<div className={css.colorSelectorContainer}> <div className={css.colorSelectorContainer}>
<ColorSelector <ColorSelector
currentColor={pendingAvatarColor} currentColor={pendingAvatarColor}
onColorSelection={onColorSelection} onColorSelection={onColorSelection}
/> />
Show All 23 Lines