Page MenuHomePhabricator
Differential D8268

[web] Add emoji `Picker` to `EmojiAvatarSelectionModal`
ClosedPublic
Actions

Authored by atul on Jun 20 2023, 3:16 PM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Mar 15, 4:36 PM
Unknown Object (File)
Wed, Mar 12, 1:50 AM
Unknown Object (File)
Thu, Mar 6, 11:14 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
View All Files
Subscribers
tomek

Details

Reviewers
ashoat
ginsu
rohan
kamil
inka
michal
Commits
rCOMMee73b60ecc0b: [web] Add emoji `Picker` to `EmojiAvatarSelectionModal`
Summary

Add emojimart Picker to EmojiAvatarSelectionModal and hook up to pendingAvatarEmoji.

NOTE: Styling here isn't final. There weren't detailed designs for this screen so I'm going to improvise a bit. That said, going to focus on functionality first so disregard how it looks for now.

Depends on D8267

Test Plan

Works as expected:

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

atul created this revision.Jun 20 2023, 3:16 PM
Herald added a subscriber: tomek. · View Herald TranscriptJun 20 2023, 3:16 PM
atul published this revision for review.Jun 20 2023, 3:16 PM
atul edited the test plan for this revision. (Show Details)
Harbormaster completed remote builds in B20370: Diff 27915.Jun 20 2023, 3:34 PM
atul added a child revision: D8269: [web] Wrap modals with `WebEditUserAvatarProvider`.Jun 20 2023, 6:02 PM
atul added reviewers: rohan, kamil, inka, michal.Jun 21 2023, 9:46 AM
atul added 1 blocking reviewer(s): ginsu.Jun 22 2023, 11:15 AM

Adding @ginsu as blocking since he's worked w/ Picker component

ginsu accepted this revision.Jun 22 2023, 3:36 PM
This revision is now accepted and ready to land.Jun 22 2023, 3:36 PM
atul updated this revision to Diff 28074.Jun 23 2023, 1:35 PM

rebase before landing

Harbormaster completed remote builds in B20488: Diff 28074.Jun 23 2023, 1:57 PM
Closed by commit rCOMMee73b60ecc0b: [web] Add emoji `Picker` to `EmojiAvatarSelectionModal` (authored by atul). · Explain WhyJun 23 2023, 2:07 PM
This revision was automatically updated to reflect the committed changes.
atul added a commit: rCOMMee73b60ecc0b: [web] Add emoji `Picker` to `EmojiAvatarSelectionModal`.

Revision Contents
Changeset List

Diff 28088

View Options

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

Show All 31 Lines.questionText {
color: var(--white-100); color: var(--white-100);
} }
.icon { .icon {
margin-left: 24px; margin-left: 24px;
} }
.answerContainer { .answerContainer {
max-height: 0; display: grid;
overflow: hidden; grid-template-rows: 0fr;
transition: grid-template-rows 500ms;
} }
.activeAnswerContainer { .activeAnswerContainer {
max-height: fit-content; grid-template-rows: 1fr;
} }
.answerText { .answerText {
color: var(--white-100); color: var(--white-100);
margin-top: 16px; margin-top: 16px;
overflow: hidden;
} }
.link { .link {
color: inherit; color: inherit;
text-decoration: underline; text-decoration: underline;
transition: color 150ms; transition: color 150ms;
} }
.link:hover { .link:hover {
color: var(--violet-dark-100); color: var(--violet-dark-100);
transition: color 150ms; transition: color 150ms;
} }
View Options

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

Show All 31 Lines.questionText {
color: var(--white-100); color: var(--white-100);
} }
.icon { .icon {
margin-left: 24px; margin-left: 24px;
} }
.answerContainer { .answerContainer {
max-height: 0; display: grid;
overflow: hidden; grid-template-rows: 0fr;
transition: grid-template-rows 500ms;
} }
.activeAnswerContainer { .activeAnswerContainer {
max-height: fit-content; grid-template-rows: 1fr;
} }
.answerText { .answerText {
color: var(--white-100); color: var(--white-100);
margin-top: 16px; margin-top: 16px;
overflow: hidden;
} }
.link { .link {
color: inherit; color: inherit;
text-decoration: underline; text-decoration: underline;
transition: color 150ms; transition: color 150ms;
} }
.link:hover { .link:hover {
color: var(--violet-dark-100); color: var(--violet-dark-100);
transition: color 150ms; transition: color 150ms;
} }