Paths

Table of Contentst

-
native/
-
navigation/
-
community-drawer-item.react.js
-
themes/
-
colors.js

[native] update drawerOpenCommunityBackground color with panelBackgroundAccent
AbandonedPublic
Actions

Authored by ginsu on Nov 8 2023, 3:15 PM.

Details

Reviewers

atul
inka
rohan
ashoat

Summary

This diff updates the drawerOpenCommunityBackground to be a more generic panelBackgroundAccent. This color is used in the keyserver selection bottom sheet so we should have a less feature specific name for this color

Depends on D9790

Test Plan

flow and confirmed that the open community drawer has the same color as before

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

ginsu created this revision.Nov 8 2023, 3:15 PM

Herald added subscribers: will, tomek, ashoat. · View Herald TranscriptNov 8 2023, 3:15 PM

ginsu edited the summary of this revision. (Show Details)Nov 8 2023, 3:17 PM

ginsu added reviewers: atul, inka, rohan.

ginsu added a parent revision: D9790: [web] introduce new --shades-black-90.

ginsu published this revision for review.Nov 8 2023, 3:28 PM

Harbormaster failed remote builds in B23939: Diff 32982!Nov 8 2023, 5:57 PM

Please justify this change more

native/navigation/community-drawer-item.react.js
108	Why are we switching the community drawer to use the panel family? Does it otherwise use the panel family throughout? If not, it seems like you're mixing families again... not sure what the resolution on that was, but I don't understand why this is a change we want to make

ashoat requested changes to this revision.Nov 9 2023, 3:45 AM

This revision now requires changes to proceed.Nov 9 2023, 3:45 AM

After thinking about this some more, I updated D9754 with a better solution and left a comment justifying the changes I made with the colors.

This diff can now be abandoned.

Revision Contents
Changeset List

Path

Size

native/

navigation/

community-drawer-item.react.js

6 lines

themes/

colors.js

4 lines

Diff 32982

View Options

native/navigation/community-drawer-item.react.js

// @flow		// @flow

import { useNavigation, useRoute } from '@react-navigation/native';		import { useNavigation, useRoute } from '@react-navigation/native';
		import invariant from 'invariant';
import * as React from 'react';		import * as React from 'react';
import { View, useWindowDimensions } from 'react-native';		import { View, useWindowDimensions } from 'react-native';
import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';		import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
import { FlatList } from 'react-native-gesture-handler';		import { FlatList } from 'react-native-gesture-handler';

import { useFetchThreadMedia } from 'lib/actions/thread-actions.js';		import { useFetchThreadMedia } from 'lib/actions/thread-actions.js';
import type { MediaInfo, Media } from 'lib/types/media-types';		import type { MediaInfo, Media } from 'lib/types/media-types';

import {		import {
ThreadSettingsCategoryActionHeader,		ThreadSettingsCategoryActionHeader,
ThreadSettingsCategoryFooter,		ThreadSettingsCategoryFooter,
} from './thread-settings-category.react.js';		} from './thread-settings-category.react.js';
import GestureTouchableOpacity from '../../components/gesture-touchable-opacity.react.js';		import GestureTouchableOpacity from '../../components/gesture-touchable-opacity.react.js';
		import type { ImageModalParams } from '../../media/image-modal.react.js';
import Multimedia from '../../media/multimedia.react.js';		import Multimedia from '../../media/multimedia.react.js';
		import type { VideoPlaybackModalParams } from '../../media/video-playback-modal.react.js';
import {		import {
ImageModalRouteName,		ImageModalRouteName,
VideoPlaybackModalRouteName,		VideoPlaybackModalRouteName,
} from '../../navigation/route-names.js';		} from '../../navigation/route-names.js';
import { useStyles } from '../../themes/colors.js';		import { useStyles } from '../../themes/colors.js';
import type {		import type {
LayoutCoordinates,		LayoutCoordinates,
VerticalBounds,		VerticalBounds,
▲ Show 20 Lines • Show All 196 Lines • ▼ Show 20 Lines	const navigateToMedia = React.useCallback(() => {
ref.current?.measure((x, y, width, height, pageX, pageY) => {		ref.current?.measure((x, y, width, height, pageX, pageY) => {
const initialCoordinates: LayoutCoordinates = {		const initialCoordinates: LayoutCoordinates = {
x: pageX,		x: pageX,
y: pageY,		y: pageY,
width,		width,
height,		height,
};		};

		invariant(
		verticalBounds,
		'verticalBounds should be set in navigateToMedia',
		);
		const params: ImageModalParams \| VideoPlaybackModalParams = {
		presentedFrom: route.key,
		mediaInfo,
		initialCoordinates,
		verticalBounds,
		};
navigation.navigate<'VideoPlaybackModal' \| 'ImageModal'>({		navigation.navigate<'VideoPlaybackModal' \| 'ImageModal'>({
name:		name:
mediaInfo.type === 'video' \|\| mediaInfo.type === 'encrypted_video'		mediaInfo.type === 'video' \|\| mediaInfo.type === 'encrypted_video'
? VideoPlaybackModalRouteName		? VideoPlaybackModalRouteName
: ImageModalRouteName,		: ImageModalRouteName,
key: `multimedia\|${threadID}\|${mediaInfo.id}`,		key: `multimedia\|${threadID}\|${mediaInfo.id}`,
params: {		params,
presentedFrom: route.key,
mediaInfo,
item,
initialCoordinates,
verticalBounds,
},
});		});
});		});
}, [navigation, route, threadID, mediaInfo, item, verticalBounds]);		}, [navigation, route, threadID, mediaInfo, verticalBounds]);

const containerStyle =		const containerStyle =
index % numColumns === 0		index % numColumns === 0
? memoizedStyles.mediaContainer		? memoizedStyles.mediaContainer
: memoizedStyles.mediaContainerWithMargin;		: memoizedStyles.mediaContainerWithMargin;

return (		return (
<View key={item.id} style={containerStyle} onLayout={onLayout} ref={ref}>		<View key={item.id} style={containerStyle} onLayout={onLayout} ref={ref}>
Show All 25 Lines