Page MenuHomePhabricator
Differential D3323

[web] Add password section
ClosedPublic
Actions

Authored by tomek on Mar 2 2022, 9:06 AM.
Tags
None
Referenced Files
Unknown Object (File)
Tue, Apr 1, 7:23 AM
Unknown Object (File)
Tue, Apr 1, 6:29 AM
Unknown Object (File)
Mon, Mar 31, 6:44 PM
Unknown Object (File)
Mon, Mar 31, 3:20 AM
Unknown Object (File)
Sun, Mar 30, 9:07 AM
Unknown Object (File)
Sun, Mar 30, 8:25 AM
Unknown Object (File)
Sun, Mar 30, 8:25 AM
Unknown Object (File)
Sat, Mar 29, 7:31 PM
View All Files
Subscribers
• adrian
ashoat
• karol

Details

Reviewers
• benschac
atul
• jacek
Commits
rCOMM4bd4198b88f4: [web] Add password section
Summary

Display a password section with a button that allows editing it. The editing will be implemented in one of the future diffs.
https://www.figma.com/file/a1nkbWgbgjRlrOY9LVurTz/Comm-%2F-Desktop-app?node-id=1272%3A88750

account-settings-9.png (878×1 px, 49 KB)

Depends on D3322

Test Plan

Display a page 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.Mar 2 2022, 9:06 AM
Herald added subscribers: • karol, • adrian, ashoat. · View Herald TranscriptMar 2 2022, 9:06 AM
tomek edited the summary of this revision. (Show Details)Mar 2 2022, 9:07 AM
Harbormaster completed remote builds in B7119: Diff 10029.Mar 2 2022, 9:11 AM
tomek requested review of this revision.Mar 2 2022, 9:11 AM
tomek added a child revision: D3324: [web] Add friend and block lists sections.Mar 2 2022, 9:22 AM
• benschac added inline comments.Mar 3 2022, 4:32 AM
web/settings/account-settings.react.js
44 ↗(On Diff #10029)

could we use the button component here?

atul accepted this revision.Mar 3 2022, 12:36 PM

Looks good!

This revision is now accepted and ready to land.Mar 3 2022, 12:36 PM
atul added a comment.EditedMar 3 2022, 12:40 PM

My personal preference would be for text to be left-aligned with the header... but what you did matches the Figma designs

0137-1.png (1×984 px, 207 KB)

tomek added a comment.Mar 9 2022, 4:14 AM
In D3323#89766, @atul wrote:

My personal preference would be for text to be left-aligned with the header... but what you did matches the Figma designs

0137-1.png (1×984 px, 207 KB)

I think the reason for this design was that we would like to have horizontal lines between the items. It would be strange if the text started at the same point as the line. It would be also strange if the lines started earlier than the heading. So my guess is that it would be hard to find a design where we have the separators and the text is aligned with the header.

web/settings/account-settings.react.js
44 ↗(On Diff #10029)

None of the existing variants work ok here, but after checking our codebase it looks like we should instead use a - we're using it in a couple of similar contexts.

tomek updated this revision to Diff 10190.Mar 9 2022, 4:19 AM

Use a instead of button

Harbormaster completed remote builds in B7236: Diff 10190.Mar 9 2022, 4:24 AM
Closed by commit rCOMM4bd4198b88f4: [web] Add password section (authored by tomek). · Explain WhyMar 9 2022, 4:37 AM
This revision was automatically updated to reflect the committed changes.
tomek added a commit: rCOMM4bd4198b88f4: [web] Add password section.

Revision Contents
Changeset List

PathSize
web/
settings/
14 lines
10 lines

Diff 10198

View Options

web/settings/account-settings.css

// @flow // @flow
import { useRoute } from '@react-navigation/native';
import * as React from 'react'; import * as React from 'react';
import { View } from 'react-native'; import { View } from 'react-native';
import { useStringForUser } from 'lib/hooks/ens-cache.js'; import { useStringForUser } from 'lib/hooks/ens-cache.js';
import { clusterEndHeight, avatarOffset } from './chat-constants.js'; import { clusterEndHeight, avatarOffset } from './chat-constants.js';
import type { DisplayType } from './timestamp.react.js'; import type { DisplayType } from './timestamp.react.js';
import { Timestamp, timestampHeight } from './timestamp.react.js'; import { Timestamp, timestampHeight } from './timestamp.react.js';
import { SingleLine } from '../components/single-line.react.js'; import { SingleLine } from '../components/single-line.react.js';
import { MessageListRouteName } from '../navigation/route-names.js';
import { useStyles } from '../themes/colors.js'; import { useStyles } from '../themes/colors.js';
import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js'; import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js';
import { useShouldRenderAvatars } from '../utils/avatar-utils.js'; import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
type Props = { type Props = {
+item: ChatMessageInfoItemWithHeight, +item: ChatMessageInfoItemWithHeight,
+focused: boolean, +focused: boolean,
+display: DisplayType, +display: DisplayType,
}; };
function MessageHeader(props: Props): React.Node { function MessageHeader(props: Props): React.Node {
const styles = useStyles(unboundStyles); const styles = useStyles(unboundStyles);
const { item, focused, display } = props; const { item, focused, display } = props;
const { creator, time } = item.messageInfo; const { creator, time } = item.messageInfo;
const { isViewer } = creator; const { isViewer } = creator;
const route = useRoute();
const modalDisplay = display === 'modal'; const modalDisplay = display === 'modal';
const shouldShowUsername = !isViewer && (modalDisplay || item.startsCluster); const shouldShowUsername = !isViewer && (modalDisplay || item.startsCluster);
const stringForUser = useStringForUser(shouldShowUsername ? creator : null); const stringForUser = useStringForUser(shouldShowUsername ? creator : null);
const shouldRenderAvatars = useShouldRenderAvatars(); const shouldRenderAvatars = useShouldRenderAvatars();
let authorName = null; let authorName = null;
if (stringForUser) { if (stringForUser) {
const style = [styles.authorName]; const style = [styles.authorName];
if (modalDisplay) { if (modalDisplay) {
style.push(styles.modal); style.push(styles.modal);
} }
if (shouldRenderAvatars) { if (shouldRenderAvatars) {
style.push({ marginLeft: 12 + avatarOffset }); style.push({ marginLeft: 12 + avatarOffset });
} else { } else {
style.push({ marginLeft: 12 }); style.push({ marginLeft: 12 });
} }
authorName = <SingleLine style={style}>{stringForUser}</SingleLine>; authorName = <SingleLine style={style}>{stringForUser}</SingleLine>;
} }
// We only want to render the top-placed timestamp for a message if it's
// rendered in the message list, and not any separate screens (i.e.
// the MessageResultsScreen).
const presentedFromMessageList =
typeof route.params?.presentedFrom === 'string' &&
route.params.presentedFrom.startsWith(MessageListRouteName);
const messageInMessageList =
route.name === MessageListRouteName || presentedFromMessageList;
const timestamp = const timestamp =
modalDisplay || item.startsConversation ? ( messageInMessageList && (modalDisplay || item.startsConversation) ? (
<Timestamp time={time} display={display} /> <Timestamp time={time} display={display} />
) : null; ) : null;
let style = null; let style = null;
if (focused && !modalDisplay) { if (focused && !modalDisplay) {
let topMargin = 0; let topMargin = 0;
if (!item.startsCluster && !item.messageInfo.creator.isViewer) { if (!item.startsCluster && !item.messageInfo.creator.isViewer) {
topMargin += authorNameHeight + clusterEndHeight; topMargin += authorNameHeight + clusterEndHeight;
Show All 34 Lines
View Options

web/settings/account-settings.react.js

// @flow // @flow
import { useRoute } from '@react-navigation/native';
import * as React from 'react'; import * as React from 'react';
import { View } from 'react-native'; import { View } from 'react-native';
import { useStringForUser } from 'lib/hooks/ens-cache.js'; import { useStringForUser } from 'lib/hooks/ens-cache.js';
import { clusterEndHeight, avatarOffset } from './chat-constants.js'; import { clusterEndHeight, avatarOffset } from './chat-constants.js';
import type { DisplayType } from './timestamp.react.js'; import type { DisplayType } from './timestamp.react.js';
import { Timestamp, timestampHeight } from './timestamp.react.js'; import { Timestamp, timestampHeight } from './timestamp.react.js';
import { SingleLine } from '../components/single-line.react.js'; import { SingleLine } from '../components/single-line.react.js';
import { MessageListRouteName } from '../navigation/route-names.js';
import { useStyles } from '../themes/colors.js'; import { useStyles } from '../themes/colors.js';
import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js'; import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js';
import { useShouldRenderAvatars } from '../utils/avatar-utils.js'; import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
type Props = { type Props = {
+item: ChatMessageInfoItemWithHeight, +item: ChatMessageInfoItemWithHeight,
+focused: boolean, +focused: boolean,
+display: DisplayType, +display: DisplayType,
}; };
function MessageHeader(props: Props): React.Node { function MessageHeader(props: Props): React.Node {
const styles = useStyles(unboundStyles); const styles = useStyles(unboundStyles);
const { item, focused, display } = props; const { item, focused, display } = props;
const { creator, time } = item.messageInfo; const { creator, time } = item.messageInfo;
const { isViewer } = creator; const { isViewer } = creator;
const route = useRoute();
const modalDisplay = display === 'modal'; const modalDisplay = display === 'modal';
const shouldShowUsername = !isViewer && (modalDisplay || item.startsCluster); const shouldShowUsername = !isViewer && (modalDisplay || item.startsCluster);
const stringForUser = useStringForUser(shouldShowUsername ? creator : null); const stringForUser = useStringForUser(shouldShowUsername ? creator : null);
const shouldRenderAvatars = useShouldRenderAvatars(); const shouldRenderAvatars = useShouldRenderAvatars();
let authorName = null; let authorName = null;
if (stringForUser) { if (stringForUser) {
const style = [styles.authorName]; const style = [styles.authorName];
if (modalDisplay) { if (modalDisplay) {
style.push(styles.modal); style.push(styles.modal);
} }
if (shouldRenderAvatars) { if (shouldRenderAvatars) {
style.push({ marginLeft: 12 + avatarOffset }); style.push({ marginLeft: 12 + avatarOffset });
} else { } else {
style.push({ marginLeft: 12 }); style.push({ marginLeft: 12 });
} }
authorName = <SingleLine style={style}>{stringForUser}</SingleLine>; authorName = <SingleLine style={style}>{stringForUser}</SingleLine>;
} }
// We only want to render the top-placed timestamp for a message if it's
// rendered in the message list, and not any separate screens (i.e.
// the MessageResultsScreen).
const presentedFromMessageList =
typeof route.params?.presentedFrom === 'string' &&
route.params.presentedFrom.startsWith(MessageListRouteName);
const messageInMessageList =
route.name === MessageListRouteName || presentedFromMessageList;
const timestamp = const timestamp =
modalDisplay || item.startsConversation ? ( messageInMessageList && (modalDisplay || item.startsConversation) ? (
<Timestamp time={time} display={display} /> <Timestamp time={time} display={display} />
) : null; ) : null;
let style = null; let style = null;
if (focused && !modalDisplay) { if (focused && !modalDisplay) {
let topMargin = 0; let topMargin = 0;
if (!item.startsCluster && !item.messageInfo.creator.isViewer) { if (!item.startsCluster && !item.messageInfo.creator.isViewer) {
topMargin += authorNameHeight + clusterEndHeight; topMargin += authorNameHeight + clusterEndHeight;
Show All 34 Lines