Page MenuHomePhabricator
Differential D3479

[web] Use SWM Icons in `Menu` component
ClosedPublic
Actions

Authored by • jacek on Mar 21 2022, 12:12 PM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Apr 19, 1:19 PM
Unknown Object (File)
Sat, Apr 19, 8:09 AM
Unknown Object (File)
Sat, Apr 19, 1:39 AM
Unknown Object (File)
Sat, Apr 19, 12:36 AM
Unknown Object (File)
Fri, Apr 18, 9:34 PM
Unknown Object (File)
Thu, Apr 17, 10:00 PM
Unknown Object (File)
Tue, Apr 8, 6:05 PM
Unknown Object (File)
Tue, Apr 8, 6:03 PM
View All Files
Subscribers
• adrian
ashoat
atul
• benschac
• karol

Details

Reviewers
tomek
• benschac
atul
Commits
rCOMM32e90a2be054: [web] Use SWM Icons in `Menu` component
Summary

Replace FontAwesome icons with correct ones from SWM Icon Pack (following Figma design)

Screenshot_Google Chrome_2022-03-21_201325.png (231×188 px, 9 KB)

Test Plan

Run web app and check if icons are correct in thread actions menu and members actions menu in members modal.

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

• jacek created this revision.Mar 21 2022, 12:12 PM
Herald added subscribers: • benschac, • karol, atul and 2 others. · View Herald TranscriptMar 21 2022, 12:12 PM
• jacek edited the summary of this revision. (Show Details)Mar 21 2022, 12:13 PM
• jacek added reviewers: • benschac, atul.
Harbormaster completed remote builds in B7512: Diff 10576.Mar 21 2022, 12:17 PM
• jacek requested review of this revision.Mar 21 2022, 12:17 PM
tomek accepted this revision.Mar 22 2022, 4:14 AM
tomek added inline comments.
web/components/menu-item.react.js
25 ↗(On Diff #10576)

Where is promptIcon defined? I can't find it in ./menu.css

This revision is now accepted and ready to land.Mar 22 2022, 4:14 AM
• jacek updated this revision to Diff 10594.Mar 22 2022, 5:18 AM

removed redundant css class

Harbormaster completed remote builds in B7528: Diff 10594.Mar 22 2022, 5:25 AM
• jacek added inline comments.Mar 22 2022, 5:30 AM
web/components/menu-item.react.js
25 ↗(On Diff #10576)

It was accidentally added while creating thread menu. I removed it

• jacek added a parent revision: D3385: [web] Introduce `Members` action in thread menu.Mar 22 2022, 10:40 AM
• jacek updated this revision to Diff 10872.Mar 31 2022, 2:30 AM

rebase

Harbormaster completed remote builds in B7756: Diff 10872.Mar 31 2022, 4:23 AM
Closed by commit rCOMM32e90a2be054: [web] Use SWM Icons in `Menu` component (authored by • jacek). · Explain WhyApr 1 2022, 3:51 AM
This revision was automatically updated to reflect the committed changes.
• jacek added a commit: rCOMM32e90a2be054: [web] Use SWM Icons in `Menu` component.

Revision Contents
Changeset List

PathSize
web/
chat/
23 lines
components/
7 lines
8 lines
modals/
threads/
members/
11 lines

Diff 10872

View Options

web/chat/thread-menu.react.js

// @flow // @flow
import olm from '@commapp/olm'; import olm from '@commapp/olm';
import type { import type {
Account as OlmAccount, Account as OlmAccount,
Utility as OlmUtility, Utility as OlmUtility,
Session as OlmSession,
} from '@commapp/olm'; } from '@commapp/olm';
import uuid from 'uuid'; import uuid from 'uuid';
type PickledOlmAccount = { type PickledOlmAccount = {
+picklingKey: string, +picklingKey: string,
+pickledAccount: string, +pickledAccount: string,
}; };
Show All 22 Lines): Promise<OlmAccount> {
account.unpickle( account.unpickle(
pickledOlmAccount.picklingKey, pickledOlmAccount.picklingKey,
pickledOlmAccount.pickledAccount, pickledOlmAccount.pickledAccount,
); );
return account; return account;
} }
async function createPickledOlmSession(
account: OlmAccount,
accountPicklingKey: string,
initialEncryptedMessage: string,
): Promise<string> {
await olm.init();
const session = new olm.Session();
session.create_inbound(account, initialEncryptedMessage);
account.remove_one_time_keys(session);
session.decrypt(0, initialEncryptedMessage);
ashoatUnsubmitted
Not Done
Inline Actions

Let's avoid passing constants as number literals like this. Instead, please define something like eg. threadTypes, so that this code is more "readable" at the callsite (eg. we would see something like olmMessageTypes.TEXT or something)

ashoat: Let's avoid passing constants as number literals like this. Instead, please define something…
return session.pickle(accountPicklingKey);
}
async function unpickleOlmSession(
pickledSession: string,
picklingKey: string,
): Promise<OlmSession> {
await olm.init();
const session = new olm.Session();
session.unpickle(picklingKey, pickledSession);
return session;
}
let cachedOLMUtility: OlmUtility; let cachedOLMUtility: OlmUtility;
function getOlmUtility(): OlmUtility { function getOlmUtility(): OlmUtility {
if (cachedOLMUtility) { if (cachedOLMUtility) {
return cachedOLMUtility; return cachedOLMUtility;
} }
cachedOLMUtility = new olm.Utility(); cachedOLMUtility = new olm.Utility();
return cachedOLMUtility; return cachedOLMUtility;
} }
Show All 26 Lines if (
currentDate - lastPrekeyPublishDate >= maxOldPrekeyAge currentDate - lastPrekeyPublishDate >= maxOldPrekeyAge
) { ) {
account.forget_old_prekey(); account.forget_old_prekey();
} }
} }
export { export {
createPickledOlmAccount, createPickledOlmAccount,
createPickledOlmSession,
getOlmUtility, getOlmUtility,
unpickleOlmAccount, unpickleOlmAccount,
unpickleOlmSession,
validateAccountPrekey, validateAccountPrekey,
}; };
View Options

web/components/menu-item.react.js

// @flow // @flow
import olm from '@commapp/olm'; import olm from '@commapp/olm';
import type { import type {
Account as OlmAccount, Account as OlmAccount,
Utility as OlmUtility, Utility as OlmUtility,
Session as OlmSession,
} from '@commapp/olm'; } from '@commapp/olm';
import uuid from 'uuid'; import uuid from 'uuid';
type PickledOlmAccount = { type PickledOlmAccount = {
+picklingKey: string, +picklingKey: string,
+pickledAccount: string, +pickledAccount: string,
}; };
Show All 22 Lines): Promise<OlmAccount> {
account.unpickle( account.unpickle(
pickledOlmAccount.picklingKey, pickledOlmAccount.picklingKey,
pickledOlmAccount.pickledAccount, pickledOlmAccount.pickledAccount,
); );
return account; return account;
} }
async function createPickledOlmSession(
account: OlmAccount,
accountPicklingKey: string,
initialEncryptedMessage: string,
): Promise<string> {
await olm.init();
const session = new olm.Session();
session.create_inbound(account, initialEncryptedMessage);
account.remove_one_time_keys(session);
session.decrypt(0, initialEncryptedMessage);
ashoatUnsubmitted
Not Done
Inline Actions

Let's avoid passing constants as number literals like this. Instead, please define something like eg. threadTypes, so that this code is more "readable" at the callsite (eg. we would see something like olmMessageTypes.TEXT or something)

ashoat: Let's avoid passing constants as number literals like this. Instead, please define something…
return session.pickle(accountPicklingKey);
}
async function unpickleOlmSession(
pickledSession: string,
picklingKey: string,
): Promise<OlmSession> {
await olm.init();
const session = new olm.Session();
session.unpickle(picklingKey, pickledSession);
return session;
}
let cachedOLMUtility: OlmUtility; let cachedOLMUtility: OlmUtility;
function getOlmUtility(): OlmUtility { function getOlmUtility(): OlmUtility {
if (cachedOLMUtility) { if (cachedOLMUtility) {
return cachedOLMUtility; return cachedOLMUtility;
} }
cachedOLMUtility = new olm.Utility(); cachedOLMUtility = new olm.Utility();
return cachedOLMUtility; return cachedOLMUtility;
} }
Show All 26 Lines if (
currentDate - lastPrekeyPublishDate >= maxOldPrekeyAge currentDate - lastPrekeyPublishDate >= maxOldPrekeyAge
) { ) {
account.forget_old_prekey(); account.forget_old_prekey();
} }
} }
export { export {
createPickledOlmAccount, createPickledOlmAccount,
createPickledOlmSession,
getOlmUtility, getOlmUtility,
unpickleOlmAccount, unpickleOlmAccount,
unpickleOlmSession,
validateAccountPrekey, validateAccountPrekey,
}; };
View Options

web/components/menu.css

// @flow // @flow
import olm from '@commapp/olm'; import olm from '@commapp/olm';
import type { import type {
Account as OlmAccount, Account as OlmAccount,
Utility as OlmUtility, Utility as OlmUtility,
Session as OlmSession,
} from '@commapp/olm'; } from '@commapp/olm';
import uuid from 'uuid'; import uuid from 'uuid';
type PickledOlmAccount = { type PickledOlmAccount = {
+picklingKey: string, +picklingKey: string,
+pickledAccount: string, +pickledAccount: string,
}; };
Show All 22 Lines): Promise<OlmAccount> {
account.unpickle( account.unpickle(
pickledOlmAccount.picklingKey, pickledOlmAccount.picklingKey,
pickledOlmAccount.pickledAccount, pickledOlmAccount.pickledAccount,
); );
return account; return account;
} }
async function createPickledOlmSession(
account: OlmAccount,
accountPicklingKey: string,
initialEncryptedMessage: string,
): Promise<string> {
await olm.init();
const session = new olm.Session();
session.create_inbound(account, initialEncryptedMessage);
account.remove_one_time_keys(session);
session.decrypt(0, initialEncryptedMessage);
ashoatUnsubmitted
Not Done
Inline Actions

Let's avoid passing constants as number literals like this. Instead, please define something like eg. threadTypes, so that this code is more "readable" at the callsite (eg. we would see something like olmMessageTypes.TEXT or something)

ashoat: Let's avoid passing constants as number literals like this. Instead, please define something…
return session.pickle(accountPicklingKey);
}
async function unpickleOlmSession(
pickledSession: string,
picklingKey: string,
): Promise<OlmSession> {
await olm.init();
const session = new olm.Session();
session.unpickle(picklingKey, pickledSession);
return session;
}
let cachedOLMUtility: OlmUtility; let cachedOLMUtility: OlmUtility;
function getOlmUtility(): OlmUtility { function getOlmUtility(): OlmUtility {
if (cachedOLMUtility) { if (cachedOLMUtility) {
return cachedOLMUtility; return cachedOLMUtility;
} }
cachedOLMUtility = new olm.Utility(); cachedOLMUtility = new olm.Utility();
return cachedOLMUtility; return cachedOLMUtility;
} }
Show All 26 Lines if (
currentDate - lastPrekeyPublishDate >= maxOldPrekeyAge currentDate - lastPrekeyPublishDate >= maxOldPrekeyAge
) { ) {
account.forget_old_prekey(); account.forget_old_prekey();
} }
} }
export { export {
createPickledOlmAccount, createPickledOlmAccount,
createPickledOlmSession,
getOlmUtility, getOlmUtility,
unpickleOlmAccount, unpickleOlmAccount,
unpickleOlmSession,
validateAccountPrekey, validateAccountPrekey,
}; };
View Options

web/modals/threads/members/member.react.js

// @flow // @flow
import olm from '@commapp/olm'; import olm from '@commapp/olm';
import type { import type {
Account as OlmAccount, Account as OlmAccount,
Utility as OlmUtility, Utility as OlmUtility,
Session as OlmSession,
} from '@commapp/olm'; } from '@commapp/olm';
import uuid from 'uuid'; import uuid from 'uuid';
type PickledOlmAccount = { type PickledOlmAccount = {
+picklingKey: string, +picklingKey: string,
+pickledAccount: string, +pickledAccount: string,
}; };
Show All 22 Lines): Promise<OlmAccount> {
account.unpickle( account.unpickle(
pickledOlmAccount.picklingKey, pickledOlmAccount.picklingKey,
pickledOlmAccount.pickledAccount, pickledOlmAccount.pickledAccount,
); );
return account; return account;
} }
async function createPickledOlmSession(
account: OlmAccount,
accountPicklingKey: string,
initialEncryptedMessage: string,
): Promise<string> {
await olm.init();
const session = new olm.Session();
session.create_inbound(account, initialEncryptedMessage);
account.remove_one_time_keys(session);
session.decrypt(0, initialEncryptedMessage);
ashoatUnsubmitted
Not Done
Inline Actions

Let's avoid passing constants as number literals like this. Instead, please define something like eg. threadTypes, so that this code is more "readable" at the callsite (eg. we would see something like olmMessageTypes.TEXT or something)

ashoat: Let's avoid passing constants as number literals like this. Instead, please define something…
return session.pickle(accountPicklingKey);
}
async function unpickleOlmSession(
pickledSession: string,
picklingKey: string,
): Promise<OlmSession> {
await olm.init();
const session = new olm.Session();
session.unpickle(picklingKey, pickledSession);
return session;
}
let cachedOLMUtility: OlmUtility; let cachedOLMUtility: OlmUtility;
function getOlmUtility(): OlmUtility { function getOlmUtility(): OlmUtility {
if (cachedOLMUtility) { if (cachedOLMUtility) {
return cachedOLMUtility; return cachedOLMUtility;
} }
cachedOLMUtility = new olm.Utility(); cachedOLMUtility = new olm.Utility();
return cachedOLMUtility; return cachedOLMUtility;
} }
Show All 26 Lines if (
currentDate - lastPrekeyPublishDate >= maxOldPrekeyAge currentDate - lastPrekeyPublishDate >= maxOldPrekeyAge
) { ) {
account.forget_old_prekey(); account.forget_old_prekey();
} }
} }
export { export {
createPickledOlmAccount, createPickledOlmAccount,
createPickledOlmSession,
getOlmUtility, getOlmUtility,
unpickleOlmAccount, unpickleOlmAccount,
unpickleOlmSession,
validateAccountPrekey, validateAccountPrekey,
}; };