Page MenuHomePhabricator
Differential D3676

[web] Introduce friend list modal row
ClosedPublic
Actions

Authored by tomek on Apr 8 2022, 7:25 AM.
Tags
None
Referenced Files
Unknown Object (File)
Fri, Apr 4, 6:15 PM
Unknown Object (File)
Wed, Apr 2, 8:23 AM
Unknown Object (File)
Tue, Apr 1, 2:47 PM
Unknown Object (File)
Tue, Apr 1, 9:21 AM
Unknown Object (File)
Tue, Apr 1, 7:16 AM
Unknown Object (File)
Tue, Apr 1, 5:39 AM
Unknown Object (File)
Mon, Mar 31, 6:38 AM
Unknown Object (File)
Sun, Mar 30, 8:52 PM
View All Files
Subscribers
• abosh
• adrian
ashoat
• karol

Details

Reviewers
• benschac
atul
• jacek
Commits
rCOMM1d3f7f3d5015: [web] Introduce friend list modal row
Summary

This component will be used on friend list to display a row containing username and buttons. https://www.figma.com/file/a1nkbWgbgjRlrOY9LVurTz/Comm-%2F-Desktop-app?node-id=1274%3A89558 The buttons will be added in next diffs. The avatars may be added later.

Depends on D3675

Test Plan

Display the component in a modal and check if it is rendered correctly.

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

tomek created this revision.Apr 8 2022, 7:25 AM
Herald added subscribers: • abosh, • karol, • adrian, ashoat. · View Herald TranscriptApr 8 2022, 7:25 AM
tomek added a child revision: D3677: [web] Display friend list buttons in the modal.Apr 8 2022, 7:29 AM
Harbormaster completed remote builds in B8030: Diff 11243.Apr 8 2022, 7:32 AM
tomek requested review of this revision.Apr 8 2022, 7:32 AM
• benschac accepted this revision.Apr 8 2022, 8:14 AM
This revision is now accepted and ready to land.Apr 8 2022, 8:14 AM
atul accepted this revision.Apr 10 2022, 4:27 PM

Looks good!

(might be helpful to include a screenshot for next time)

tomek added a comment.Apr 12 2022, 10:14 AM
In D3676#101050, @atul wrote:

Looks good!

(might be helpful to include a screenshot for next time)

Sorry for not including it here - it was added at the top of the stack but including it earlier would make the review process easier

Closed by commit rCOMM1d3f7f3d5015: [web] Introduce friend list modal row (authored by tomek). · Explain WhyApr 15 2022, 2:16 AM
This revision was automatically updated to reflect the committed changes.
tomek added a commit: rCOMM1d3f7f3d5015: [web] Introduce friend list modal row.

Revision Contents
Changeset List

PathSize
web/
settings/
relationship/
8 lines
14 lines
1 line

Diff 11502

View Options

web/settings/relationship/friend-list-row.css

div.headerContainer { div.loginContainer {
flex: 1 1 auto;
padding: 0 10px;
}
div.headerContents {
display: flex; display: flex;
justify-content: space-between; justify-content: center;
align-items: center;
padding-top: 5px;
padding-bottom: 7px;
}
div.actionLinks > * {
padding-right: 15px;
color: white;
font-weight: 300;
}
div.actionLinks > *:last-child {
padding-right: 0;
}
header.header h1 {
color: white; color: white;
font-size: 38px;
}
header.header {
padding: 10px 20px;
border-radius: 20px;
border: 1px solid white;
} }
View Options

web/settings/relationship/friend-list-row.react.js

div.headerContainer { div.loginContainer {
flex: 1 1 auto;
padding: 0 10px;
}
div.headerContents {
display: flex; display: flex;
justify-content: space-between; justify-content: center;
align-items: center;
padding-top: 5px;
padding-bottom: 7px;
}
div.actionLinks > * {
padding-right: 15px;
color: white;
font-weight: 300;
}
div.actionLinks > *:last-child {
padding-right: 0;
}
header.header h1 {
color: white; color: white;
font-size: 38px;
}
header.header {
padding: 10px 20px;
border-radius: 20px;
border: 1px solid white;
} }
View Options

web/theme.css

div.headerContainer { div.loginContainer {
flex: 1 1 auto;
padding: 0 10px;
}
div.headerContents {
display: flex; display: flex;
justify-content: space-between; justify-content: center;
align-items: center;
padding-top: 5px;
padding-bottom: 7px;
}
div.actionLinks > * {
padding-right: 15px;
color: white;
font-weight: 300;
}
div.actionLinks > *:last-child {
padding-right: 0;
}
header.header h1 {
color: white; color: white;
font-size: 38px;
}
header.header {
padding: 10px 20px;
border-radius: 20px;
border: 1px solid white;
} }