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
Unknown Object (File)
Tue, Apr 1, 9:43 AM
Unknown Object (File)
Sat, Mar 29, 3:48 PM
Unknown Object (File)
Sat, Mar 29, 3:08 AM
Unknown Object (File)
Wed, Mar 26, 1:27 AM
Unknown Object (File)
Sat, Mar 22, 3:06 AM
Unknown Object (File)
Fri, Mar 14, 2:35 AM
Unknown Object (File)
Fri, Mar 14, 2:35 AM
Unknown Object (File)
Fri, Mar 14, 2:35 AM
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 342 Lines • ▼ Show 20 Lines query.append(SQL`
ORDER BY tw.threadID, tw.time DESC, tw.id DESC ORDER BY tw.threadID, tw.time DESC, tw.id DESC
`); `);
const [result] = await dbQuery(query); const [result] = await dbQuery(query);
const derivedMessages = await fetchDerivedMessages(result, viewer); const derivedMessages = await fetchDerivedMessages(result, viewer);
const messages = await parseMessageSQLResult(result, derivedMessages, viewer); const messages = await parseMessageSQLResult(result, derivedMessages, viewer);
const rawMessageInfos = []; const rawMessageInfos = [];
const threadToMessageCount = new Map(); const threadToMessageCount = new Map<string, number>();
for (const message of messages) { for (const message of messages) {
const { rawMessageInfo } = message; const { rawMessageInfo } = message;
rawMessageInfos.push(rawMessageInfo); rawMessageInfos.push(rawMessageInfo);
const { threadID } = rawMessageInfo; const { threadID } = rawMessageInfo;
const currentCountValue = threadToMessageCount.get(threadID); const currentCountValue = threadToMessageCount.get(threadID);
const currentCount = currentCountValue ? currentCountValue : 0; const currentCount = currentCountValue ? currentCountValue : 0;
threadToMessageCount.set(threadID, currentCount + 1); threadToMessageCount.set(threadID, currentCount + 1);
} }
▲ Show 20 Lines • Show All 479 Lines • ▼ Show 20 Lines SELECT m.id, (
ORDER BY time DESC, id DESC ORDER BY time DESC, id DESC
LIMIT 1 LIMIT 1
) content ) content
FROM messages m FROM messages m
WHERE m.id IN(${messageIDs}) WHERE m.id IN(${messageIDs})
`; `;
const [result] = await dbQuery(latestEditedMessageQuery); const [result] = await dbQuery(latestEditedMessageQuery);
const latestContentByID = new Map(); const latestContentByID = new Map<string, EditMessageContent>();
for (const row of result) { for (const row of result) {
if (!row.content) { if (!row.content) {
continue; continue;
} }
const content = JSON.parse(row.content); const content = JSON.parse(row.content);
latestContentByID.set(row.id.toString(), content); latestContentByID.set(row.id.toString(), content);
} }
▲ Show 20 Lines • Show All 181 Lines • Show Last 20 Lines
View Options

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

Show First 20 Lines • Show All 342 Lines • ▼ Show 20 Lines query.append(SQL`
ORDER BY tw.threadID, tw.time DESC, tw.id DESC ORDER BY tw.threadID, tw.time DESC, tw.id DESC
`); `);
const [result] = await dbQuery(query); const [result] = await dbQuery(query);
const derivedMessages = await fetchDerivedMessages(result, viewer); const derivedMessages = await fetchDerivedMessages(result, viewer);
const messages = await parseMessageSQLResult(result, derivedMessages, viewer); const messages = await parseMessageSQLResult(result, derivedMessages, viewer);
const rawMessageInfos = []; const rawMessageInfos = [];
const threadToMessageCount = new Map(); const threadToMessageCount = new Map<string, number>();
for (const message of messages) { for (const message of messages) {
const { rawMessageInfo } = message; const { rawMessageInfo } = message;
rawMessageInfos.push(rawMessageInfo); rawMessageInfos.push(rawMessageInfo);
const { threadID } = rawMessageInfo; const { threadID } = rawMessageInfo;
const currentCountValue = threadToMessageCount.get(threadID); const currentCountValue = threadToMessageCount.get(threadID);
const currentCount = currentCountValue ? currentCountValue : 0; const currentCount = currentCountValue ? currentCountValue : 0;
threadToMessageCount.set(threadID, currentCount + 1); threadToMessageCount.set(threadID, currentCount + 1);
} }
▲ Show 20 Lines • Show All 479 Lines • ▼ Show 20 Lines SELECT m.id, (
ORDER BY time DESC, id DESC ORDER BY time DESC, id DESC
LIMIT 1 LIMIT 1
) content ) content
FROM messages m FROM messages m
WHERE m.id IN(${messageIDs}) WHERE m.id IN(${messageIDs})
`; `;
const [result] = await dbQuery(latestEditedMessageQuery); const [result] = await dbQuery(latestEditedMessageQuery);
const latestContentByID = new Map(); const latestContentByID = new Map<string, EditMessageContent>();
for (const row of result) { for (const row of result) {
if (!row.content) { if (!row.content) {
continue; continue;
} }
const content = JSON.parse(row.content); const content = JSON.parse(row.content);
latestContentByID.set(row.id.toString(), content); latestContentByID.set(row.id.toString(), content);
} }
▲ Show 20 Lines • Show All 181 Lines • Show Last 20 Lines