Page MenuHomePhabricator
Differential D3703

[web] Use `flex-wrap` to lay out `ColorSelectorButton`s in `ColorSelector`
ClosedPublic
Actions

Authored by atul on Apr 11 2022, 1:35 PM.
Tags
None
Referenced Files
F6238855: D3703.diff
Thu, Apr 24, 6:59 PM
Unknown Object (File)
Mon, Apr 21, 3:12 PM
Unknown Object (File)
Mon, Apr 21, 2:47 PM
Unknown Object (File)
Mon, Apr 21, 9:46 AM
Unknown Object (File)
Sun, Apr 20, 11:03 PM
Unknown Object (File)
Sat, Apr 19, 10:24 PM
Unknown Object (File)
Sat, Apr 19, 7:36 AM
Unknown Object (File)
Tue, Apr 8, 7:08 PM
View All Files
Subscribers
• abosh
• adrian
ashoat
• benschac
• jacek
• karol
tomek

Details

Reviewers
• jacek
tomek
Commits
rCOMM871da6be31fa: [web] Use `flex-wrap` to lay out `ColorSelectorButton`s in `ColorSelector`
Summary

Addresses feedback from @palys-swm and @def-au1t in D3662. It turned out to be way easier than I expected (if I did it right...)

Depends on D3702

Test Plan

Layout looks correct at different zoom levels:

13bb.png (1×692 px, 89 KB)

(the background colors are just to help visualize)

Diff Detail

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

Event Timeline

atul created this revision.Apr 11 2022, 1:35 PM
Herald added subscribers: • abosh, • benschac, • karol and 2 others. · View Herald TranscriptApr 11 2022, 1:35 PM
atul edited the test plan for this revision. (Show Details)Apr 11 2022, 1:36 PM
Harbormaster returned this revision to the author for changes because remote builds failed.Apr 11 2022, 1:43 PM
Harbormaster failed remote builds in B8095: Diff 11322!
Harbormaster completed remote builds in B8095: Diff 11322.Apr 11 2022, 2:00 PM
atul requested review of this revision.Apr 11 2022, 2:00 PM
atul edited the summary of this revision. (Show Details)Apr 11 2022, 2:59 PM
atul added a parent revision: D3702: [web] Pull colors in `ColorSelector` from `selectedThreadColors`.
atul added a child revision: D3704: [web] Create `ColorSelectorButton`s in `ColorSelector` iteratively to reduce repetition.
tomek accepted this revision.Apr 12 2022, 3:33 AM

Looks great

This revision is now accepted and ready to land.Apr 12 2022, 3:33 AM
atul updated this revision to Diff 11367.Apr 12 2022, 11:52 AM

rebase before landing

Harbormaster completed remote builds in B8133: Diff 11367.Apr 12 2022, 11:57 AM
Closed by commit rCOMM871da6be31fa: [web] Use `flex-wrap` to lay out `ColorSelectorButton`s in `ColorSelector` (authored by atul). · Explain WhyApr 12 2022, 12:00 PM
This revision was automatically updated to reflect the committed changes.
atul added a commit: rCOMM871da6be31fa: [web] Use `flex-wrap` to lay out `ColorSelectorButton`s in `ColorSelector`.

Revision Contents
Changeset List

PathSize
web/
modals/
threads/
11 lines
104 lines

Diff 11322

View Options

web/modals/threads/color-selector.css

Show First 20 Lines • Show All 44 Lines • ▼ Show 20 Lines rowsToSave.push({
intent: 'none', intent: 'none',
permissions: null, permissions: null,
permissionsForChildren: null, permissionsForChildren: null,
role: '-1', role: '-1',
oldRole: '-1', oldRole: '-1',
}); });
} }
await saveMemberships(rowsToSave); await saveMemberships(rowsToSave, false);
} }
async function createKnowOfRelationships() { async function createKnowOfRelationships() {
const [result] = await dbQuery(SQL` const [result] = await dbQuery(SQL`
SELECT thread, user FROM memberships SELECT thread, user FROM memberships
UNION SELECT thread, user FROM messages UNION SELECT thread, user FROM messages
ORDER BY user ASC ORDER BY user ASC
`); `);
await createUndirectedRelationships(result, undirectedStatus.KNOW_OF); await createUndirectedRelationships(result, undirectedStatus.KNOW_OF);
} }
main(); main();
View Options

web/modals/threads/color-selector.react.js

Show First 20 Lines • Show All 44 Lines • ▼ Show 20 Lines rowsToSave.push({
intent: 'none', intent: 'none',
permissions: null, permissions: null,
permissionsForChildren: null, permissionsForChildren: null,
role: '-1', role: '-1',
oldRole: '-1', oldRole: '-1',
}); });
} }
await saveMemberships(rowsToSave); await saveMemberships(rowsToSave, false);
} }
async function createKnowOfRelationships() { async function createKnowOfRelationships() {
const [result] = await dbQuery(SQL` const [result] = await dbQuery(SQL`
SELECT thread, user FROM memberships SELECT thread, user FROM memberships
UNION SELECT thread, user FROM messages UNION SELECT thread, user FROM messages
ORDER BY user ASC ORDER BY user ASC
`); `);
await createUndirectedRelationships(result, undirectedStatus.KNOW_OF); await createUndirectedRelationships(result, undirectedStatus.KNOW_OF);
} }
main(); main();