Page MenuHomePhabricator
Files F3342319

D7065.diff
No OneTemporary
Actions

D7065.diff
View Options

diff --git a/native/chat/inline-engagement.react.js b/native/chat/inline-engagement.react.js
--- a/native/chat/inline-engagement.react.js
+++ b/native/chat/inline-engagement.react.js
@@ -33,6 +33,7 @@
+reactions?: ReactionInfo,
+disabled?: boolean,
+positioning?: 'left' | 'right',
+ +label?: ?string,
+shouldRenderAvatars?: boolean,
};
function InlineEngagement(props: Props): React.Node {
@@ -42,6 +43,7 @@
threadInfo,
positioning,
shouldRenderAvatars,
+ label,
} = props;
const repliesText = useInlineEngagementText(threadInfo);
@@ -122,7 +124,24 @@
styles.reactionsContainer,
]);
+ const isLeft = positioning === 'left';
+
+ const editedLabel = React.useMemo(() => {
+ if (!label) {
+ return null;
+ }
+
+ const labelLeftRight = isLeft
+ ? styles.messageLabelLeft
+ : styles.messageLabelRight;
+
+ return <Text style={[styles.messageLabel, labelLeftRight]}>{label}</Text>;
+ }, [isLeft, label, styles]);
+
const container = React.useMemo(() => {
+ if (!sidebarItem && !reactionList) {
+ return null;
+ }
return (
<View style={styles.container}>
{sidebarItem}
@@ -131,8 +150,8 @@
);
}, [reactionList, sidebarItem, styles.container]);
- const inlineEngagementPositionStyle = [];
- if (positioning === 'left') {
+ const inlineEngagementPositionStyle = [styles.inlineEngagement];
+ if (isLeft) {
inlineEngagementPositionStyle.push(styles.leftInlineEngagement);
} else {
inlineEngagementPositionStyle.push(styles.rightInlineEngagement);
@@ -141,11 +160,24 @@
inlineEngagementPositionStyle.push({ marginLeft: avatarOffset });
}
- return (
- <View style={[styles.inlineEngagement, inlineEngagementPositionStyle]}>
- {container}
- </View>
- );
+ let body;
+ if (isLeft) {
+ body = (
+ <>
+ {editedLabel}
+ {container}
+ </>
+ );
+ } else {
+ body = (
+ <>
+ {container}
+ {editedLabel}
+ </>
+ );
+ }
+
+ return <View style={inlineEngagementPositionStyle}>{body}</View>;
}
const unboundStyles = {
@@ -205,6 +237,20 @@
flexDirection: 'row',
alignItems: 'center',
},
+ messageLabel: {
+ color: 'messageLabel',
+ paddingHorizontal: 3,
+ fontSize: 13,
+ top: 10,
+ },
+ messageLabelLeft: {
+ marginLeft: 9,
+ marginRight: 4,
+ },
+ messageLabelRight: {
+ marginRight: 10,
+ marginLeft: 4,
+ },
avatarOffset: {
width: avatarOffset,
},
diff --git a/native/themes/colors.js b/native/themes/colors.js
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -91,6 +91,7 @@
subthreadsModalClose: '#808080',
subthreadsModalBackground: '#EBEBEB',
subthreadsModalSearch: '#00000008',
+ messageLabel: '#0A0A0A',
});
export type Colors = $Exact<typeof light>;
@@ -178,6 +179,7 @@
typeaheadTooltipBackground: '#1F1F1f',
typeaheadTooltipBorder: '#404040',
typeaheadTooltipText: 'white',
+ messageLabel: '#CCCCCC',
});
const colors = { light, dark };

File Metadata

Mime Type
text/plain
Expires
Sat, Nov 23, 1:14 AM (3 h, 29 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2566991
Default Alt Text
D7065.diff (2 KB)

Event Timeline