Page MenuHomePhabricator
Differential D8266

[web] Add `Avatar` preview to `EmojiAvatarSelectionModal`
ClosedPublic
Actions

Authored by atul on Jun 20 2023, 1:32 PM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Mar 15, 4:36 PM
Unknown Object (File)
Wed, Mar 5, 11:17 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:02 PM
Unknown Object (File)
Wed, Mar 5, 4:02 PM
Unknown Object (File)
Wed, Mar 5, 4:01 PM
View All Files
Subscribers
tomek

Details

Reviewers
ashoat
ginsu
rohan
inka
michal
kamil
Commits
rCOMM20040048e85a: [web] Add `Avatar` preview to `EmojiAvatarSelectionModal`
Summary

Inspired loosely by CommunityCreationModal.

Depends on D8265

Test Plan

Looks as expected:

7e6cf2.png (604×1 px, 72 KB)

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

atul created this revision.Jun 20 2023, 1:32 PM
Herald added a subscriber: tomek. · View Herald TranscriptJun 20 2023, 1:32 PM
atul edited the test plan for this revision. (Show Details)Jun 20 2023, 1:33 PM
atul published this revision for review.Jun 20 2023, 1:42 PM
Harbormaster completed remote builds in B20367: Diff 27912.Jun 20 2023, 1:52 PM
atul updated this revision to Diff 27913.Jun 20 2023, 1:55 PM

refactor a touch

atul added a child revision: D8267: [web] Add `ColorSelector` to `EmojiAvatarSelectionModal`.Jun 20 2023, 2:08 PM
Harbormaster completed remote builds in B20368: Diff 27913.Jun 20 2023, 2:16 PM
atul added reviewers: rohan, inka, michal, kamil.Jun 21 2023, 9:46 AM
kamil accepted this revision.Jun 22 2023, 7:23 AM
This revision is now accepted and ready to land.Jun 22 2023, 7:23 AM
atul updated this revision to Diff 28023.Jun 22 2023, 2:06 PM

rebase before landing

Harbormaster failed remote builds in B20441: Diff 28023!Jun 22 2023, 2:33 PM
atul updated this revision to Diff 28072.Jun 23 2023, 1:33 PM

rebase before landing

Harbormaster completed remote builds in B20486: Diff 28072.Jun 23 2023, 1:52 PM
Closed by commit rCOMM20040048e85a: [web] Add `Avatar` preview 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: rCOMM20040048e85a: [web] Add `Avatar` preview to `EmojiAvatarSelectionModal`.

Revision Contents
Changeset List

Diff 28087

View Options

lib/shared/avatar-utils.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;
} }
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;
} }