Page MenuHomePhabricator
Files F3358806

D7742.diff
No OneTemporary
Actions

D7742.diff
View Options

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
@@ -23,6 +23,7 @@
import SwipeableMessage from './swipeable-message.react.js';
import { useContentAndHeaderOpacity, useDeliveryIconOpacity } from './utils.js';
import UserAvatar from '../avatars/user-avatar.react.js';
+import CommIcon from '../components/comm-icon.react.js';
import { type InputState, InputStateContext } from '../input/input-state.js';
import { type Colors, useColors } from '../themes/colors.js';
import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js';
@@ -40,6 +41,7 @@
+sendFailed: boolean,
+focused: boolean,
+swipeOptions: SwipeOptions,
+ +shouldDisplayPinIndicator: boolean,
+children: React.Node,
};
type Props = {
@@ -62,6 +64,7 @@
sendFailed,
focused,
swipeOptions,
+ shouldDisplayPinIndicator,
children,
composedMessageMaxWidth,
colors,
@@ -73,7 +76,7 @@
...viewProps
} = this.props;
const { id, creator } = item.messageInfo;
- const { hasBeenEdited } = item;
+ const { hasBeenEdited, isPinned } = item;
const { isViewer } = creator;
const alignStyle = isViewer
@@ -147,23 +150,46 @@
avatar = <View style={styles.avatarOffset} />;
}
+ const pinIconPositioning = isViewer ? 'left' : 'right';
+ const pinIconName = pinIconPositioning === 'left' ? 'pin-mirror' : 'pin';
+ const messageBoxTopLevelContainerStyle =
+ pinIconPositioning === 'left'
+ ? styles.rightMessageBoxTopLevelContainerStyle
+ : styles.leftMessageBoxTopLevelContainerStyle;
+
+ let pinIcon;
+ if (isPinned && shouldDisplayPinIndicator) {
+ pinIcon = (
+ <View style={styles.pinIconContainer}>
+ <CommIcon
+ name={pinIconName}
+ size={12}
+ style={{ color: `#${item.threadInfo.color}` }}
+ />
+ </View>
+ );
+ }
+
const messageBoxStyle = {
opacity: contentAndHeaderOpacity,
maxWidth: composedMessageMaxWidth,
};
const messageBox = (
- <View style={messageBoxContainerStyle}>
- <SwipeableMessage
- triggerReply={triggerReply}
- triggerSidebar={triggerSidebar}
- isViewer={isViewer}
- contentStyle={styles.swipeableContainer}
- threadColor={item.threadInfo.color}
- >
- {avatar}
- <AnimatedView style={messageBoxStyle}>{children}</AnimatedView>
- </SwipeableMessage>
+ <View style={messageBoxTopLevelContainerStyle}>
+ {pinIcon}
+ <View style={messageBoxContainerStyle}>
+ <SwipeableMessage
+ triggerReply={triggerReply}
+ triggerSidebar={triggerSidebar}
+ isViewer={isViewer}
+ contentStyle={styles.swipeableContainer}
+ threadColor={item.threadInfo.color}
+ >
+ {avatar}
+ <AnimatedView style={messageBoxStyle}>{children}</AnimatedView>
+ </SwipeableMessage>
+ </View>
</View>
);
@@ -245,16 +271,25 @@
leftChatContainer: {
alignItems: 'flex-start',
},
+ leftMessageBoxTopLevelContainerStyle: {
+ flexDirection: 'row-reverse',
+ },
messageBoxContainer: {
- flex: 1,
marginRight: 5,
},
+ pinIconContainer: {
+ marginRight: 4,
+ marginTop: 4,
+ },
rightChatBubble: {
justifyContent: 'flex-start',
},
rightChatContainer: {
alignItems: 'flex-end',
},
+ rightMessageBoxTopLevelContainerStyle: {
+ flexDirection: 'row',
+ },
swipeableContainer: {
alignItems: 'flex-end',
flexDirection: 'row',
diff --git a/native/chat/message-list.react.js b/native/chat/message-list.react.js
--- a/native/chat/message-list.react.js
+++ b/native/chat/message-list.react.js
@@ -194,6 +194,7 @@
route={route}
toggleFocus={this.toggleMessageFocus}
verticalBounds={messageListVerticalBounds}
+ shouldDisplayPinIndicator={true}
/>
);
};
diff --git a/native/chat/message-result.react.js b/native/chat/message-result.react.js
--- a/native/chat/message-result.react.js
+++ b/native/chat/message-result.react.js
@@ -44,6 +44,7 @@
route={props.route}
toggleFocus={onToggleFocus}
verticalBounds={props.messageVerticalBounds}
+ shouldDisplayPinIndicator={false}
/>
<Text style={styles.messageDate}>
{longAbsoluteDate(props.item.messageInfo.time)}
diff --git a/native/chat/message.react.js b/native/chat/message.react.js
--- a/native/chat/message.react.js
+++ b/native/chat/message.react.js
@@ -39,6 +39,7 @@
| NavigationRoute<'MessageResultsScreen'>,
+toggleFocus: (messageKey: string) => void,
+verticalBounds: ?VerticalBounds,
+ shouldDisplayPinIndicator: boolean,
};
type Props = {
...BaseProps,
@@ -71,6 +72,7 @@
focused={this.props.focused}
toggleFocus={this.props.toggleFocus}
verticalBounds={this.props.verticalBounds}
+ shouldDisplayPinIndicator={this.props.shouldDisplayPinIndicator}
/>
);
} else if (this.props.item.messageShapeType === 'multimedia') {
@@ -80,6 +82,7 @@
focused={this.props.focused}
toggleFocus={this.props.toggleFocus}
verticalBounds={this.props.verticalBounds}
+ shouldDisplayPinIndicator={this.props.shouldDisplayPinIndicator}
/>
);
} else {
diff --git a/native/chat/multimedia-message.react.js b/native/chat/multimedia-message.react.js
--- a/native/chat/multimedia-message.react.js
+++ b/native/chat/multimedia-message.react.js
@@ -45,6 +45,7 @@
+focused: boolean,
+toggleFocus: (messageKey: string) => void,
+verticalBounds: ?VerticalBounds,
+ +shouldDisplayPinIndicator: boolean,
};
type Props = {
...BaseProps,
@@ -198,6 +199,7 @@
focused,
toggleFocus,
verticalBounds,
+ shouldDisplayPinIndicator,
navigation,
route,
overlayContext,
@@ -212,6 +214,7 @@
sendFailed={multimediaMessageSendFailed(item)}
focused={focused}
swipeOptions={this.canNavigateToSidebar() ? 'sidebar' : 'none'}
+ shouldDisplayPinIndicator={shouldDisplayPinIndicator}
{...viewProps}
>
<View style={styles.expand} onLayout={this.onLayout} ref={this.viewRef}>
diff --git a/native/chat/text-message.react.js b/native/chat/text-message.react.js
--- a/native/chat/text-message.react.js
+++ b/native/chat/text-message.react.js
@@ -49,6 +49,7 @@
+focused: boolean,
+toggleFocus: (messageKey: string) => void,
+verticalBounds: ?VerticalBounds,
+ +shouldDisplayPinIndicator: boolean,
};
type Props = {
...BaseProps,
@@ -83,6 +84,7 @@
focused,
toggleFocus,
verticalBounds,
+ shouldDisplayPinIndicator,
overlayContext,
chatContext,
isLinkModalActive,
@@ -115,6 +117,7 @@
sendFailed={textMessageSendFailed(item)}
focused={focused}
swipeOptions={swipeOptions}
+ shouldDisplayPinIndicator={shouldDisplayPinIndicator}
{...viewProps}
>
<InnerTextMessage

File Metadata

Mime Type
text/plain
Expires
Mon, Nov 25, 6:12 AM (20 h, 23 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2578672
Default Alt Text
D7742.diff (7 KB)

Event Timeline