Page MenuHomePhabricator
Files F3356142

D5867.diff
No OneTemporary
Actions

D5867.diff
View Options

diff --git a/native/navigation/community-drawer-content.react.js b/native/navigation/community-drawer-content.react.js
--- a/native/navigation/community-drawer-content.react.js
+++ b/native/navigation/community-drawer-content.react.js
@@ -13,6 +13,7 @@
import { useNavigateToThread } from '../chat/message-list-types';
import { useStyles } from '../themes/colors';
+import type { TextStyle } from '../types/styles';
import CommunityDrawerItemCommunity from './community-drawer-item-cummunity.react';
const maxDepth = 2;
@@ -41,6 +42,7 @@
const itemData = {
threadInfo: item.threadInfo,
itemChildren: item.itemChildren,
+ labelStyle: item.labelStyle,
};
return (
<CommunityDrawerItemCommunity
@@ -55,10 +57,24 @@
[navigateToThread, openCommunity, setOpenCommunnityOrClose],
);
+ const labelStylesObj = useStyles(labelUnboundStyles);
+ const labelStyles = React.useMemo(
+ () => [
+ labelStylesObj.level0Label,
+ labelStylesObj.level1Label,
+ labelStylesObj.level2Label,
+ ],
+ [labelStylesObj],
+ );
+
const drawerItemsData = React.useMemo(
() =>
- createRecursiveDrawerItemsData(childThreadInfosMap, communitiesSuffixed),
- [childThreadInfosMap, communitiesSuffixed],
+ createRecursiveDrawerItemsData(
+ childThreadInfosMap,
+ communitiesSuffixed,
+ labelStyles,
+ ),
+ [childThreadInfosMap, communitiesSuffixed, labelStyles],
);
return (
@@ -71,11 +87,13 @@
function createRecursiveDrawerItemsData(
childThreadInfosMap: { +[id: string]: $ReadOnlyArray<ThreadInfo> },
communities: $ReadOnlyArray<ThreadInfo>,
+ labelStyles: $ReadOnlyArray<TextStyle>,
) {
const result = communities.map(community => ({
key: community.id,
threadInfo: community,
itemChildren: [],
+ labelStyle: labelStyles[0],
}));
let queue = result.map(item => [item, 0]);
@@ -89,6 +107,7 @@
.map(childItem => ({
threadInfo: childItem,
itemChildren: [],
+ labelStyle: labelStyles[Math.min(lvl + 1, labelStyles.length - 1)],
}));
queue = queue.concat(
item.itemChildren.map(childItem => [childItem, lvl + 1]),
@@ -122,6 +141,26 @@
backgroundColor: 'drawerBackgroud',
},
};
+const labelUnboundStyles = {
+ level0Label: {
+ color: 'drawerItemLabelLevel0',
+ fontSize: 16,
+ lineHeight: 24,
+ fontWeight: '500',
+ },
+ level1Label: {
+ color: 'drawerItemLabelLevel1',
+ fontSize: 14,
+ lineHeight: 22,
+ fontWeight: '500',
+ },
+ level2Label: {
+ color: 'drawerItemLabelLevel2',
+ fontSize: 14,
+ lineHeight: 22,
+ fontWeight: '400',
+ },
+};
const MemoizedCommunityDrawerContent: React.ComponentType<{}> = React.memo(
CommunityDrawerContent,
diff --git a/native/navigation/community-drawer-item-cummunity.react.js b/native/navigation/community-drawer-item-cummunity.react.js
--- a/native/navigation/community-drawer-item-cummunity.react.js
+++ b/native/navigation/community-drawer-item-cummunity.react.js
@@ -27,7 +27,7 @@
const unboundStyles = {
communityBase: {
- paddingVertical: 8,
+ paddingVertical: 2,
paddingRight: 24,
paddingLeft: 8,
overflow: 'hidden',
diff --git a/native/navigation/community-drawer-item.react.js b/native/navigation/community-drawer-item.react.js
--- a/native/navigation/community-drawer-item.react.js
+++ b/native/navigation/community-drawer-item.react.js
@@ -8,11 +8,13 @@
import type { MessageListParams } from '../chat/message-list-types';
import { SingleLine } from '../components/single-line.react';
import { useStyles } from '../themes/colors';
+import type { TextStyle } from '../types/styles';
import { ExpandButton, ExpandButtonDisabled } from './expand-buttons.react';
export type CommunityDrawerItemData = {
+threadInfo: ThreadInfo,
+itemChildren?: $ReadOnlyArray<CommunityDrawerItemData>,
+ +labelStyle: TextStyle,
};
export type DrawerItemProps = {
@@ -24,7 +26,7 @@
function CommunityDrawerItem(props: DrawerItemProps): React.Node {
const {
- itemData: { threadInfo, itemChildren },
+ itemData: { threadInfo, itemChildren, labelStyle },
navigateToThread,
expanded,
toggleExpanded,
@@ -74,7 +76,7 @@
style={styles.textTouchableWrapper}
onLongPress={onExpandToggled}
>
- <SingleLine style={styles.title}>{threadInfo.uiName}</SingleLine>
+ <SingleLine style={labelStyle}>{threadInfo.uiName}</SingleLine>
</TouchableOpacity>
</View>
{children}
@@ -85,16 +87,10 @@
const unboundStyles = {
chatView: {
marginLeft: 16,
- marginVertical: 6,
},
threadEntry: {
flexDirection: 'row',
- },
- title: {
- color: 'drawerItemLabel',
- fontSize: 16,
- lineHeight: 24,
- fontWeight: '500',
+ marginVertical: 6,
},
textTouchableWrapper: {
flex: 1,
diff --git a/native/themes/colors.js b/native/themes/colors.js
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -89,7 +89,9 @@
siweButtonText: '#1F1F1F',
drawerExpandButton: '#808080',
drawerExpandButtonDisabled: '#CCCCCC',
- drawerItemLabel: '#0A0A0A',
+ drawerItemLabelLevel0: '#0A0A0A',
+ drawerItemLabelLevel1: '#0A0A0A',
+ drawerItemLabelLevel2: '#1F1F1F',
drawerOpenCommunityBackground: '#F5F5F5',
drawerBackgroud: '#FFFFFF',
});
@@ -174,7 +176,9 @@
siweButtonText: '#1F1F1F',
drawerExpandButton: '#808080',
drawerExpandButtonDisabled: '#404040',
- drawerItemLabel: '#CCCCCC',
+ drawerItemLabelLevel0: '#CCCCCC',
+ drawerItemLabelLevel1: '#CCCCCC',
+ drawerItemLabelLevel2: '#F5F5F5',
drawerOpenCommunityBackground: '#191919',
drawerBackgroud: '#1F1F1F',
});

File Metadata

Mime Type
text/plain
Expires
Sun, Nov 24, 5:05 PM (20 h, 59 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2576818
Default Alt Text
D5867.diff (5 KB)

Event Timeline