Page MenuHomePhabricator
Files F3520223

D4824.id15600.diff
No OneTemporary
Actions

D4824.id15600.diff
View Options

diff --git a/native/chat/chat-constants.js b/native/chat/chat-constants.js
--- a/native/chat/chat-constants.js
+++ b/native/chat/chat-constants.js
@@ -1,7 +1,14 @@
// @flow
-export const inlineSidebarHeight = 20;
+export const composedMessageMarginLeft = 12;
+export const composedMessageMarginRight = 7;
+
+export const inlineSidebarHeight = 38;
export const inlineSidebarMarginTop = 5;
export const inlineSidebarMarginBottom = 3;
+export const inlineSidebarLeftTopOffset = -10;
+export const inlineSidebarRightRightMargin = 22;
+export const inlineSidebarRightTopOffset = -10;
+export const inlineSidebarCenterTopOffset = -5;
export const clusterEndHeight = 7;
diff --git a/native/chat/composed-message.react.js b/native/chat/composed-message.react.js
--- a/native/chat/composed-message.react.js
+++ b/native/chat/composed-message.react.js
@@ -15,8 +15,13 @@
import { type AnimatedStyleObj, AnimatedView } from '../types/styles';
import {
clusterEndHeight,
+ inlineSidebarLeftTopOffset,
inlineSidebarMarginBottom,
inlineSidebarMarginTop,
+ inlineSidebarRightTopOffset,
+ inlineSidebarRightRightMargin,
+ composedMessageMarginLeft,
+ composedMessageMarginRight,
} from './chat-constants';
import { useComposedMessageMaxWidth } from './composed-message-width';
import { FailedSend } from './failed-send.react';
@@ -138,12 +143,13 @@
let inlineSidebar = null;
if (item.threadCreatedFromMessage) {
const positioning = isViewer ? 'right' : 'left';
+ const inlineSidebarPositionStyle =
+ positioning === 'left'
+ ? styles.leftInlineSidebar
+ : styles.rightInlineSidebar;
inlineSidebar = (
- <View style={styles.inlineSidebar}>
- <InlineSidebar
- threadInfo={item.threadCreatedFromMessage}
- positioning={positioning}
- />
+ <View style={[styles.inlineSidebar, inlineSidebarPositionStyle]}>
+ <InlineSidebar threadInfo={item.threadCreatedFromMessage} />
</View>
);
}
@@ -175,8 +181,8 @@
const styles = StyleSheet.create({
alignment: {
- marginLeft: 12,
- marginRight: 7,
+ marginLeft: composedMessageMarginLeft,
+ marginRight: composedMessageMarginRight,
},
content: {
alignItems: 'center',
@@ -197,12 +203,23 @@
leftChatBubble: {
justifyContent: 'flex-end',
},
+ leftInlineSidebar: {
+ justifyContent: 'flex-start',
+ position: 'relative',
+ top: inlineSidebarLeftTopOffset,
+ },
messageBox: {
marginRight: 5,
},
rightChatBubble: {
justifyContent: 'flex-start',
},
+ rightInlineSidebar: {
+ alignSelf: 'flex-end',
+ position: 'relative',
+ right: inlineSidebarRightRightMargin,
+ top: inlineSidebarRightTopOffset,
+ },
});
const ConnectedComposedMessage: React.ComponentType<BaseProps> = React.memo<BaseProps>(
diff --git a/native/chat/inline-sidebar.react.js b/native/chat/inline-sidebar.react.js
--- a/native/chat/inline-sidebar.react.js
+++ b/native/chat/inline-sidebar.react.js
@@ -2,69 +2,91 @@
import * as React from 'react';
import { Text, View } from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
import useInlineSidebarText from 'lib/hooks/inline-sidebar-text.react';
import type { ThreadInfo } from 'lib/types/thread-types';
-import Button from '../components/button.react';
+import GestureTouchableOpacity from '../components/gesture-touchable-opacity.react';
+import SWMansionIcon from '../components/swmansion-icon.react';
import { useStyles } from '../themes/colors';
import { inlineSidebarHeight } from './chat-constants';
import { useNavigateToThread } from './message-list-types';
type Props = {
- +threadInfo: ThreadInfo,
- +positioning: 'left' | 'center' | 'right',
+ +threadInfo: ?ThreadInfo,
+ +reactions?: $ReadOnlyArray<string>,
+ +disabled?: boolean,
};
function InlineSidebar(props: Props): React.Node {
- const { threadInfo } = props;
- const { sendersText, repliesText } = useInlineSidebarText(threadInfo);
+ const { disabled = false, reactions, threadInfo } = props;
+ const { repliesText } = useInlineSidebarText(threadInfo);
const navigateToThread = useNavigateToThread();
const onPress = React.useCallback(() => {
- navigateToThread({ threadInfo });
- }, [navigateToThread, threadInfo]);
+ if (threadInfo && !disabled) {
+ navigateToThread({ threadInfo });
+ }
+ }, [disabled, navigateToThread, threadInfo]);
const styles = useStyles(unboundStyles);
- let viewerIcon, nonViewerIcon, alignStyle;
- if (props.positioning === 'right') {
- viewerIcon = <Icon name="corner-down-left" size={18} style={styles.icon} />;
- alignStyle = styles.rightAlign;
- } else if (props.positioning === 'left') {
- nonViewerIcon = (
- <Icon name="corner-down-right" size={18} style={styles.icon} />
- );
- alignStyle = styles.leftAlign;
- } else {
- nonViewerIcon = (
- <Icon name="corner-down-right" size={18} style={styles.icon} />
- );
- alignStyle = styles.centerAlign;
- }
- const unreadStyle = threadInfo.currentUser.unread ? styles.unread : null;
+ const reactionList = React.useMemo(() => {
+ if (!reactions || reactions.length === 0) {
+ return null;
+ }
+ const reactionItems = reactions.map((reaction, i) => {
+ return (
+ <Text key={i} style={styles.reaction}>
+ {reaction}
+ </Text>
+ );
+ });
+ return <View style={styles.reactionsContainer}>{reactionItems}</View>;
+ }, [reactions, styles.reaction, styles.reactionsContainer]);
- return (
- <View style={[styles.content, alignStyle]}>
- <Button style={styles.sidebar} onPress={onPress}>
- {nonViewerIcon}
- <Text style={[styles.name, unreadStyle]}>
- {sendersText}
+ const unreadStyle = threadInfo?.currentUser.unread ? styles.unread : null;
+ const marginRight = reactionList ? styles.repliesMarginRight : null;
+ const sidebarInfo = React.useMemo(() => {
+ if (!threadInfo) {
+ return null;
+ }
+ return (
+ <>
+ <SWMansionIcon style={styles.icon} size={14} name="sidebar-filled" />
+ <Text style={[styles.repliesText, unreadStyle, marginRight]}>
{repliesText}
</Text>
- {viewerIcon}
- </Button>
+ </>
+ );
+ }, [
+ marginRight,
+ repliesText,
+ styles.icon,
+ styles.repliesText,
+ threadInfo,
+ unreadStyle,
+ ]);
+ return (
+ <View style={styles.container}>
+ <GestureTouchableOpacity
+ onPress={onPress}
+ activeOpacity={0.7}
+ style={styles.sidebar}
+ >
+ {sidebarInfo}
+ {reactionList}
+ </GestureTouchableOpacity>
</View>
);
}
const unboundStyles = {
- content: {
+ container: {
flexDirection: 'row',
- marginRight: 30,
- marginLeft: 10,
- flex: 1,
height: inlineSidebarHeight,
+ display: 'flex',
+ backgroundColor: 'listBackground',
+ borderRadius: 16,
},
unread: {
color: 'listForegroundLabel',
@@ -74,25 +96,32 @@
flexDirection: 'row',
display: 'flex',
alignItems: 'center',
+ justifyContent: 'center',
+ backgroundColor: 'inlineSidebarBackground',
+ padding: 8,
+ borderRadius: 16,
+ height: inlineSidebarHeight,
},
icon: {
- color: 'listForegroundTertiaryLabel',
+ color: 'inlineSidebarLabel',
+ marginRight: 4,
},
- name: {
- paddingTop: 1,
- color: 'listForegroundTertiaryLabel',
- fontSize: 16,
- paddingLeft: 4,
- paddingRight: 2,
+ repliesText: {
+ color: 'inlineSidebarLabel',
+ fontSize: 14,
+ lineHeight: 22,
},
- leftAlign: {
- justifyContent: 'flex-start',
+ repliesMarginRight: {
+ marginRight: 12,
},
- rightAlign: {
- justifyContent: 'flex-end',
+ reaction: {
+ marginLeft: 4,
+ color: 'inlineSidebarLabel',
},
- centerAlign: {
- justifyContent: 'center',
+ reactionsContainer: {
+ display: 'flex',
+ flexDirection: 'row',
+ marginLeft: -4,
},
};
diff --git a/native/chat/robotext-message.react.js b/native/chat/robotext-message.react.js
--- a/native/chat/robotext-message.react.js
+++ b/native/chat/robotext-message.react.js
@@ -15,6 +15,7 @@
import type { ChatRobotextMessageInfoItemWithHeight } from '../types/chat-types';
import type { VerticalBounds } from '../types/layout-types';
import { AnimatedView } from '../types/styles';
+import { inlineSidebarCenterTopOffset } from './chat-constants';
import type { ChatNavigationProp } from './chat.react';
import InlineSidebar from './inline-sidebar.react';
import { InnerRobotextMessage } from './inner-robotext-message.react';
@@ -54,10 +55,7 @@
if (item.threadCreatedFromMessage) {
inlineSidebar = (
<View style={styles.sidebar}>
- <InlineSidebar
- threadInfo={item.threadCreatedFromMessage}
- positioning="center"
- />
+ <InlineSidebar threadInfo={item.threadCreatedFromMessage} />
</View>
);
}
@@ -191,8 +189,9 @@
const unboundStyles = {
sidebar: {
- marginTop: -5,
- marginBottom: 5,
+ marginTop: inlineSidebarCenterTopOffset,
+ marginBottom: -inlineSidebarCenterTopOffset,
+ alignSelf: 'center',
},
};
diff --git a/native/themes/colors.js b/native/themes/colors.js
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -21,6 +21,8 @@
greenButton: '#6EC472',
greenText: 'green',
headerChevron: '#0A0A0A',
+ inlineSidebarBackground: '#E0E0E0',
+ inlineSidebarLabel: '#000000',
link: '#036AFF',
listBackground: 'white',
listBackgroundLabel: 'black',
@@ -90,6 +92,8 @@
greenButton: '#43A047',
greenText: '#44FF44',
headerChevron: '#FFFFFF',
+ inlineSidebarBackground: '#666666',
+ inlineSidebarLabel: '#FFFFFF',
link: '#129AFF',
listBackground: '#0A0A0A',
listBackgroundLabel: '#C7C7CC',

File Metadata

Mime Type
text/plain
Expires
Mon, Dec 23, 11:38 PM (19 h, 57 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2697381
Default Alt Text
D4824.id15600.diff (9 KB)

Event Timeline