Paths

Table of Contentst

-
web/chat/
-
chat/
-
chat-thread-list-item-menu.react.js
-
chat-thread-list.css

[web] [refactor] chat thread list item menu html cleanup
ClosedPublic
Actions

Authored by • benschac on Feb 11 2022, 10:35 AM.

Details

Reviewers

atul
ashoat

Commits

rCOMM6e04330f42aa: [web] [refactor] chat thread list item menu html cleanup

Summary

fix up html + css while changing the unread theme

before:

Image 2022-02-24 at 2.34.33 PM.jpg (620×920 px, 65 KB)

after:

Image 2022-02-24 at 2.33.59 PM.jpg (634×896 px, 62 KB)

Test Plan

click unread, no new functionality or changes should happen.

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

• benschac created this revision.Feb 11 2022, 10:35 AM

Herald added subscribers: • karol, • adrian, tomek, ashoat. · View Herald TranscriptFeb 11 2022, 10:35 AM

Harbormaster completed remote builds in B6754: Diff 9575.Feb 11 2022, 10:39 AM

• benschac requested review of this revision.Feb 11 2022, 10:39 AM

ashoat mentioned this in D3181: [web] [darkmode] unread button.Feb 13 2022, 8:57 PM

chat thread list item menu markup

This title is kind of hard for me to make sense of.

web/chat/chat-thread-list.css
196–198 ↗	(On Diff #9575)	Aren't we losing this menu item styling logic? Would it hurt anything to keep things contained in an unordered list/list item?

This revision now requires changes to proceed.Feb 14 2022, 11:16 AM

• benschac retitled this revision from [web] [refactor] chat thread list item menu markup to [web] [refactor] chat thread list item menu html cleanup.Feb 15 2022, 7:17 AM

• benschac added inline comments.

web/chat/chat-thread-list.css
196–198 ↗	(On Diff #9575)	No, there was only ever one item. There wasn't ever any _real_ design for this button.

• benschac mentioned this in D3204: Revert "[web] [darkmode] unread button".Feb 15 2022, 7:23 AM

• benschac mentioned this in rCOMM3ca1a0bf4b55: Revert "[web] [darkmode] unread button".Feb 15 2022, 8:01 PM

replied to your comment.

atul accepted this revision.Feb 24 2022, 7:42 AM

atul added inline comments.

web/chat/chat-thread-list.css
201 ↗	(On Diff #9575)	should we avoid using a hard-coded hex value here?

This revision is now accepted and ready to land.Feb 24 2022, 7:42 AM

Herald added a reviewer: ashoat. · View Herald TranscriptFeb 24 2022, 7:42 AM

This revision now requires review to proceed.Feb 24 2022, 7:42 AM

Can you provide a before/after screenshot here? It's hard for me to review this without knowing what's being changed, and in the past we've had design regressions introduced in unrelated diffs so I'm a bit wary.

This revision now requires changes to proceed.Feb 24 2022, 10:35 AM

• benschac edited the summary of this revision. (Show Details)Feb 24 2022, 11:35 AM

• benschac added inline comments.

web/chat/chat-thread-list.css
201 ↗	(On Diff #9575)	Yeah, I didn't want to just randomly change the color value. I can continue to grab color values in another diff.

added screen shots

ashoat accepted this revision.Feb 24 2022, 1:04 PM

This revision is now accepted and ready to land.Feb 24 2022, 1:04 PM

Image 2022-02-24 at 4.47.57 PM.jpg (694×2 px, 139 KB)

Looking at this one last time before landing I noticed the background color has changed in my diff.

I'm going to fix it before I land it.

I take it back:

Image 2022-02-24 at 4.57.42 PM.jpg (1×2 px, 222 KB)

just double-checked master and feature branch and they're the same. The background color was changed in a different commit un-related to this one.

This revision is now accepted and ready to land.Feb 24 2022, 1:58 PM

Closed by commit rCOMM6e04330f42aa: [web] [refactor] chat thread list item menu html cleanup (authored by • benschac). · Explain WhyFeb 24 2022, 2:11 PM

This revision was automatically updated to reflect the committed changes.

• benschac added a commit: rCOMM6e04330f42aa: [web] [refactor] chat thread list item menu html cleanup.

Revision Contents
Changeset List

Path

Size

web/

chat/

chat-thread-list-item-menu.react.js

19 lines

chat-thread-list.css

11 lines

Diff 9917

View Options

web/chat/chat-thread-list-item-menu.react.js

	// @flow			// @flow

	import invariant from 'invariant';			import invariant from 'invariant';
	import * as React from 'react';			import * as React from 'react';
	import { Text } from 'react-native';			import { Text, View, Image, Linking } from 'react-native';

	import RegistrationButtonContainer from './registration-button-container.react.js';			import RegistrationButtonContainer from './registration-button-container.react.js';
	import RegistrationButton from './registration-button.react.js';			import RegistrationButton from './registration-button.react.js';
	import RegistrationContainer from './registration-container.react.js';			import RegistrationContainer from './registration-container.react.js';
	import RegistrationContentContainer from './registration-content-container.react.js';			import RegistrationContentContainer from './registration-content-container.react.js';
	import { RegistrationContext } from './registration-context.js';			import { RegistrationContext } from './registration-context.js';
	import type { RegistrationNavigationProp } from './registration-navigator.react.js';			import type { RegistrationNavigationProp } from './registration-navigator.react.js';
	import type {			import type {
	CoolOrNerdMode,			CoolOrNerdMode,
	AccountSelection,			AccountSelection,
	AvatarData,			AvatarData,
	} from './registration-types.js';			} from './registration-types.js';
				import commSwooshSource from '../../img/comm-swoosh.png';
	import type { NavigationRoute } from '../../navigation/route-names.js';			import type { NavigationRoute } from '../../navigation/route-names.js';
	import { useStyles } from '../../themes/colors.js';			import { useStyles } from '../../themes/colors.js';

	export type RegistrationTermsParams = {			export type RegistrationTermsParams = {
	+userSelections: {			+userSelections: {
	+coolOrNerdMode: CoolOrNerdMode,			+coolOrNerdMode: CoolOrNerdMode,
	+keyserverUsername: string,			+keyserverUsername: string,
	+accountSelection: AccountSelection,			+accountSelection: AccountSelection,
	+avatarData: ?AvatarData,			+avatarData: ?AvatarData,
	},			},
	};			};

				const onTermsOfUsePressed = () => {
				Linking.openURL('https://comm.app/terms');
				};

				const onPrivacyPolicyPressed = () => {
				Linking.openURL('https://comm.app/privacy');
				};

	type Props = {			type Props = {
	+navigation: RegistrationNavigationProp<'RegistrationTerms'>,			+navigation: RegistrationNavigationProp<'RegistrationTerms'>,
	+route: NavigationRoute<'RegistrationTerms'>,			+route: NavigationRoute<'RegistrationTerms'>,
	};			};
	function RegistrationTerms(props: Props): React.Node {			function RegistrationTerms(props: Props): React.Node {
	const registrationContext = React.useContext(RegistrationContext);			const registrationContext = React.useContext(RegistrationContext);
	invariant(registrationContext, 'registrationContext should be set');			invariant(registrationContext, 'registrationContext should be set');
	const { register } = registrationContext;			const { register } = registrationContext;

	const [registrationInProgress, setRegistrationInProgress] =			const [registrationInProgress, setRegistrationInProgress] =
	React.useState(false);			React.useState(false);

	const { userSelections } = props.route.params;			const { userSelections } = props.route.params;
	const onProceed = React.useCallback(async () => {			const onProceed = React.useCallback(async () => {
	setRegistrationInProgress(true);			setRegistrationInProgress(true);
	try {			try {
	await register(userSelections);			await register(userSelections);
	} finally {			} finally {
	setRegistrationInProgress(false);			setRegistrationInProgress(false);
	}			}
	}, [register, userSelections]);			}, [register, userSelections]);

	const styles = useStyles(unboundStyles);			const styles = useStyles(unboundStyles);

				/* eslint-disable react-native/no-raw-text */
				const termsNotice = (
				<Text style={styles.body}>
				By registering, you are agreeing to our{' '}
				<Text style={styles.hyperlinkText} onPress={onTermsOfUsePressed}>
				Terms of Use
				</Text>
				{' and '}
				<Text style={styles.hyperlinkText} onPress={onPrivacyPolicyPressed}>
				Privacy Policy
				</Text>
				.
				</Text>
				);
				/* eslint-enable react-native/no-raw-text */

	return (			return (
	<RegistrationContainer>			<RegistrationContainer>
	<RegistrationContentContainer>			<RegistrationContentContainer style={styles.scrollViewContentContainer}>
	<Text style={styles.header}>Finish registration</Text>			<Text style={styles.header}>Finish registration</Text>
				{termsNotice}
				<View style={styles.commSwooshContainer}>
				<Image source={commSwooshSource} style={styles.commSwoosh} />
				</View>
	</RegistrationContentContainer>			</RegistrationContentContainer>
	<RegistrationButtonContainer>			<RegistrationButtonContainer>
	<RegistrationButton			<RegistrationButton
	onPress={onProceed}			onPress={onProceed}
	label="Register"			label="Register"
	variant={registrationInProgress ? 'loading' : 'enabled'}			variant={registrationInProgress ? 'loading' : 'enabled'}
	/>			/>
	</RegistrationButtonContainer>			</RegistrationButtonContainer>
	</RegistrationContainer>			</RegistrationContainer>
	);			);
	}			}

	const unboundStyles = {			const unboundStyles = {
				scrollViewContentContainer: {
				flexGrow: 1,
				},
	header: {			header: {
	fontSize: 24,			fontSize: 24,
	color: 'panelForegroundLabel',			color: 'panelForegroundLabel',
	paddingBottom: 16,			paddingBottom: 16,
	},			},
				body: {
				fontFamily: 'Arial',
				fontSize: 15,
				lineHeight: 20,
				color: 'panelForegroundSecondaryLabel',
				paddingBottom: 16,
				},
				commSwooshContainer: {
				flexGrow: 1,
				flexShrink: 1,
				alignItems: 'center',
				justifyContent: 'center',
				},
				commSwoosh: {
				resizeMode: 'center',
				width: '100%',
				height: '100%',
				},
				hyperlinkText: {
				color: 'purpleLink',
				},
	};			};

	export default RegistrationTerms;			export default RegistrationTerms;