Page MenuHomePhorge
Files F33105130

D6289.1768476118.diff
No OneTemporary
Actions

Size
27 KB
Referenced Files
None
Subscribers
None

D6289.1768476118.diff
View Options

diff --git a/lib/hooks/inline-sidebar-text.react.js b/lib/hooks/inline-engagement-text.react.js
rename from lib/hooks/inline-sidebar-text.react.js
rename to lib/hooks/inline-engagement-text.react.js
--- a/lib/hooks/inline-sidebar-text.react.js
+++ b/lib/hooks/inline-engagement-text.react.js
@@ -2,7 +2,7 @@
import type { ThreadInfo } from '../types/thread-types';
-function useInlineSidebarText(threadInfo: ?ThreadInfo): string {
+function useInlineEngagementText(threadInfo: ?ThreadInfo): string {
if (!threadInfo) {
return '';
}
@@ -10,4 +10,4 @@
return `${repliesCount} ${repliesCount > 1 ? 'replies' : 'reply'}`;
}
-export default useInlineSidebarText;
+export default useInlineEngagementText;
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
@@ -5,20 +5,20 @@
marginRight: 7,
};
-export const inlineSidebarStyle = {
+export const inlineEngagementStyle = {
height: 38,
marginTop: 5,
marginBottom: 3,
};
-export const inlineSidebarLeftStyle = {
+export const inlineEngagementLeftStyle = {
topOffset: -10,
};
-export const inlineSidebarCenterStyle = {
+export const inlineEngagementCenterStyle = {
topOffset: -5,
};
-export const inlineSidebarRightStyle = {
+export const inlineEngagementRightStyle = {
marginRight: 22,
topOffset: -10,
};
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,14 +15,14 @@
import { type AnimatedStyleObj, AnimatedView } from '../types/styles';
import {
clusterEndHeight,
- inlineSidebarStyle,
- inlineSidebarLeftStyle,
- inlineSidebarRightStyle,
+ inlineEngagementStyle,
+ inlineEngagementLeftStyle,
+ inlineEngagementRightStyle,
composedMessageStyle,
} from './chat-constants';
import { useComposedMessageMaxWidth } from './composed-message-width';
import { FailedSend } from './failed-send.react';
-import { InlineSidebar } from './inline-sidebar.react';
+import { InlineEngagement } from './inline-engagement.react';
import { MessageHeader } from './message-header.react';
import { useNavigateToSidebar } from './sidebar-navigation';
import SwipeableMessage from './swipeable-message.react';
@@ -137,16 +137,16 @@
</View>
);
- let inlineSidebar = null;
+ let inlineEngagement = null;
if (item.threadCreatedFromMessage || item.reactions.size > 0) {
const positioning = isViewer ? 'right' : 'left';
- const inlineSidebarPositionStyle =
+ const inlineEngagementPositionStyle =
positioning === 'left'
- ? styles.leftInlineSidebar
- : styles.rightInlineSidebar;
- inlineSidebar = (
- <View style={[styles.inlineSidebar, inlineSidebarPositionStyle]}>
- <InlineSidebar
+ ? styles.leftInlineEngagement
+ : styles.rightInlineEngagement;
+ inlineEngagement = (
+ <View style={[styles.inlineEngagement, inlineEngagementPositionStyle]}>
+ <InlineEngagement
threadInfo={item.threadCreatedFromMessage}
reactions={item.reactions}
/>
@@ -165,7 +165,7 @@
{messageBox}
</View>
{failedSendInfo}
- {inlineSidebar}
+ {inlineEngagement}
</View>
</View>
);
@@ -196,17 +196,17 @@
marginLeft: 2,
width: 16,
},
- inlineSidebar: {
- marginBottom: inlineSidebarStyle.marginBottom,
- marginTop: inlineSidebarStyle.marginTop,
+ inlineEngagement: {
+ marginBottom: inlineEngagementStyle.marginBottom,
+ marginTop: inlineEngagementStyle.marginTop,
},
leftChatBubble: {
justifyContent: 'flex-end',
},
- leftInlineSidebar: {
+ leftInlineEngagement: {
justifyContent: 'flex-start',
position: 'relative',
- top: inlineSidebarLeftStyle.topOffset,
+ top: inlineEngagementLeftStyle.topOffset,
},
messageBox: {
marginRight: 5,
@@ -214,11 +214,11 @@
rightChatBubble: {
justifyContent: 'flex-start',
},
- rightInlineSidebar: {
+ rightInlineEngagement: {
alignSelf: 'flex-end',
position: 'relative',
- right: inlineSidebarRightStyle.marginRight,
- top: inlineSidebarRightStyle.topOffset,
+ right: inlineEngagementRightStyle.marginRight,
+ top: inlineEngagementRightStyle.topOffset,
},
});
diff --git a/native/chat/inline-sidebar.react.js b/native/chat/inline-engagement.react.js
rename from native/chat/inline-sidebar.react.js
rename to native/chat/inline-engagement.react.js
--- a/native/chat/inline-sidebar.react.js
+++ b/native/chat/inline-engagement.react.js
@@ -7,7 +7,7 @@
interpolateNode,
} from 'react-native-reanimated';
-import useInlineSidebarText from 'lib/hooks/inline-sidebar-text.react';
+import useInlineEngagementText from 'lib/hooks/inline-engagement-text.react';
import type { MessageReactionInfo } from 'lib/selectors/chat-selectors';
import { stringForReactionList } from 'lib/shared/reaction-utils';
import type { ThreadInfo } from 'lib/types/thread-types';
@@ -17,9 +17,9 @@
import { useStyles } from '../themes/colors';
import type { ChatMessageInfoItemWithHeight } from '../types/chat-types';
import {
- inlineSidebarStyle,
- inlineSidebarCenterStyle,
- inlineSidebarRightStyle,
+ inlineEngagementStyle,
+ inlineEngagementCenterStyle,
+ inlineEngagementRightStyle,
composedMessageStyle,
} from './chat-constants';
import { useNavigateToThread } from './message-list-types';
@@ -29,9 +29,9 @@
+reactions?: $ReadOnlyMap<string, MessageReactionInfo>,
+disabled?: boolean,
};
-function InlineSidebar(props: Props): React.Node {
+function InlineEngagement(props: Props): React.Node {
const { disabled = false, reactions, threadInfo } = props;
- const repliesText = useInlineSidebarText(threadInfo);
+ const repliesText = useInlineEngagementText(threadInfo);
const navigateToThread = useNavigateToThread();
const onPress = React.useCallback(() => {
@@ -88,7 +88,7 @@
const unboundStyles = {
container: {
flexDirection: 'row',
- height: inlineSidebarStyle.height,
+ height: inlineEngagementStyle.height,
display: 'flex',
borderRadius: 16,
},
@@ -101,17 +101,17 @@
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
- backgroundColor: 'inlineSidebarBackground',
+ backgroundColor: 'inlineEngagementBackground',
padding: 8,
borderRadius: 16,
- height: inlineSidebarStyle.height,
+ height: inlineEngagementStyle.height,
},
icon: {
- color: 'inlineSidebarLabel',
+ color: 'inlineEngagementLabel',
marginRight: 4,
},
repliesText: {
- color: 'inlineSidebarLabel',
+ color: 'inlineEngagementLabel',
fontSize: 14,
lineHeight: 22,
},
@@ -120,7 +120,7 @@
},
reaction: {
marginLeft: 4,
- color: 'inlineSidebarLabel',
+ color: 'inlineEngagementLabel',
},
reactionsContainer: {
display: 'flex',
@@ -129,7 +129,7 @@
},
};
-type TooltipInlineSidebarProps = {
+type TooltipInlineEngagementProps = {
+item: ChatMessageInfoItemWithHeight,
+isOpeningSidebar: boolean,
+progress: Animated.Node,
@@ -143,7 +143,9 @@
},
};
-function TooltipInlineSidebar(props: TooltipInlineSidebarProps): React.Node {
+function TooltipInlineEngagement(
+ props: TooltipInlineEngagementProps,
+): React.Node {
const {
item,
isOpeningSidebar,
@@ -152,29 +154,33 @@
initialCoordinates,
positioning,
} = props;
- const inlineSidebarStyles = React.useMemo(() => {
+ const inlineEngagementStyles = React.useMemo(() => {
if (positioning === 'left') {
return {
position: 'absolute',
- top: inlineSidebarStyle.marginTop + inlineSidebarRightStyle.topOffset,
+ top:
+ inlineEngagementStyle.marginTop +
+ inlineEngagementRightStyle.topOffset,
left: composedMessageStyle.marginLeft,
};
} else if (positioning === 'right') {
return {
position: 'absolute',
right:
- inlineSidebarRightStyle.marginRight +
+ inlineEngagementRightStyle.marginRight +
composedMessageStyle.marginRight,
- top: inlineSidebarStyle.marginTop + inlineSidebarRightStyle.topOffset,
+ top:
+ inlineEngagementStyle.marginTop +
+ inlineEngagementRightStyle.topOffset,
};
} else if (positioning === 'center') {
return {
alignSelf: 'center',
- top: inlineSidebarCenterStyle.topOffset,
+ top: inlineEngagementCenterStyle.topOffset,
};
}
}, [positioning]);
- const inlineSidebarContainer = React.useMemo(() => {
+ const inlineEngagementContainer = React.useMemo(() => {
const opacity = isOpeningSidebar
? 0
: interpolateNode(progress, {
@@ -197,12 +203,12 @@
windowWidth,
]);
return (
- <Animated.View style={inlineSidebarContainer}>
- <Animated.View style={inlineSidebarStyles}>
- <InlineSidebar threadInfo={item.threadCreatedFromMessage} disabled />
+ <Animated.View style={inlineEngagementContainer}>
+ <Animated.View style={inlineEngagementStyles}>
+ <InlineEngagement threadInfo={item.threadCreatedFromMessage} disabled />
</Animated.View>
</Animated.View>
);
}
-export { InlineSidebar, TooltipInlineSidebar };
+export { InlineEngagement, TooltipInlineEngagement };
diff --git a/native/chat/multimedia-message-tooltip-button.react.js b/native/chat/multimedia-message-tooltip-button.react.js
--- a/native/chat/multimedia-message-tooltip-button.react.js
+++ b/native/chat/multimedia-message-tooltip-button.react.js
@@ -6,7 +6,7 @@
import type { AppNavigationProp } from '../navigation/app-navigator.react';
import type { TooltipRoute } from '../navigation/tooltip.react';
import { useSelector } from '../redux/redux-utils';
-import { TooltipInlineSidebar } from './inline-sidebar.react';
+import { TooltipInlineEngagement } from './inline-engagement.react';
import { InnerMultimediaMessage } from './inner-multimedia-message.react';
import { MessageHeader } from './message-header.react';
import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react';
@@ -63,12 +63,12 @@
const { navigation, isOpeningSidebar } = props;
- const inlineSidebar = React.useMemo(() => {
+ const inlineEngagement = React.useMemo(() => {
if (!item.threadCreatedFromMessage) {
return null;
}
return (
- <TooltipInlineSidebar
+ <TooltipInlineEngagement
item={item}
positioning={item.messageInfo.creator.isViewer ? 'right' : 'left'}
isOpeningSidebar={isOpeningSidebar}
@@ -96,7 +96,7 @@
onPress={navigation.goBackOnce}
onLongPress={navigation.goBackOnce}
/>
- {inlineSidebar}
+ {inlineEngagement}
</Animated.View>
);
}
diff --git a/native/chat/multimedia-message-utils.js b/native/chat/multimedia-message-utils.js
--- a/native/chat/multimedia-message-utils.js
+++ b/native/chat/multimedia-message-utils.js
@@ -10,7 +10,7 @@
ChatMultimediaMessageInfoItem,
MultimediaContentSizes,
} from '../types/chat-types';
-import { inlineSidebarStyle, clusterEndHeight } from './chat-constants';
+import { inlineEngagementStyle, clusterEndHeight } from './chat-constants';
import { failedSendHeight } from './failed-send.react';
import { authorNameHeight } from './message-header.react';
@@ -119,9 +119,9 @@
}
if (item.threadCreatedFromMessage || item.reactions.size > 0) {
height +=
- inlineSidebarStyle.height +
- inlineSidebarStyle.marginTop +
- inlineSidebarStyle.marginBottom;
+ inlineEngagementStyle.height +
+ inlineEngagementStyle.marginTop +
+ inlineEngagementStyle.marginBottom;
}
return height;
}
diff --git a/native/chat/robotext-message-tooltip-button.react.js b/native/chat/robotext-message-tooltip-button.react.js
--- a/native/chat/robotext-message-tooltip-button.react.js
+++ b/native/chat/robotext-message-tooltip-button.react.js
@@ -6,7 +6,7 @@
import type { AppNavigationProp } from '../navigation/app-navigator.react';
import type { TooltipRoute } from '../navigation/tooltip.react';
import { useSelector } from '../redux/redux-utils';
-import { TooltipInlineSidebar } from './inline-sidebar.react';
+import { TooltipInlineEngagement } from './inline-engagement.react';
import { InnerRobotextMessage } from './inner-robotext-message.react';
import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react';
import { Timestamp } from './timestamp.react';
@@ -61,12 +61,12 @@
const { navigation, isOpeningSidebar } = props;
- const inlineSidebar = React.useMemo(() => {
+ const inlineEngagement = React.useMemo(() => {
if (!item.threadCreatedFromMessage) {
return null;
}
return (
- <TooltipInlineSidebar
+ <TooltipInlineEngagement
item={item}
positioning="center"
isOpeningSidebar={isOpeningSidebar}
@@ -87,7 +87,7 @@
<Timestamp time={item.messageInfo.time} display="modal" />
</Animated.View>
<InnerRobotextMessage item={item} onPress={navigation.goBackOnce} />
- {inlineSidebar}
+ {inlineEngagement}
</Animated.View>
);
}
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
@@ -18,9 +18,9 @@
import type { ChatRobotextMessageInfoItemWithHeight } from '../types/chat-types';
import type { VerticalBounds } from '../types/layout-types';
import { AnimatedView } from '../types/styles';
-import { inlineSidebarCenterStyle } from './chat-constants';
+import { inlineEngagementCenterStyle } from './chat-constants';
import type { ChatNavigationProp } from './chat.react';
-import { InlineSidebar } from './inline-sidebar.react';
+import { InlineEngagement } from './inline-engagement.react';
import { InnerRobotextMessage } from './inner-robotext-message.react';
import { Timestamp } from './timestamp.react';
import { getMessageTooltipKey, useContentAndHeaderOpacity } from './utils';
@@ -53,11 +53,11 @@
}
const styles = useStyles(unboundStyles);
- let inlineSidebar = null;
+ let inlineEngagement = null;
if (item.threadCreatedFromMessage || item.reactions.size > 0) {
- inlineSidebar = (
+ inlineEngagement = (
<View style={styles.sidebar}>
- <InlineSidebar
+ <InlineEngagement
threadInfo={item.threadCreatedFromMessage}
reactions={item.reactions}
/>
@@ -212,15 +212,15 @@
/>
</AnimatedView>
</View>
- {inlineSidebar}
+ {inlineEngagement}
</View>
);
}
const unboundStyles = {
sidebar: {
- marginTop: inlineSidebarCenterStyle.topOffset,
- marginBottom: -inlineSidebarCenterStyle.topOffset,
+ marginTop: inlineEngagementCenterStyle.topOffset,
+ marginBottom: -inlineEngagementCenterStyle.topOffset,
alignSelf: 'center',
},
};
diff --git a/native/chat/text-message-tooltip-button.react.js b/native/chat/text-message-tooltip-button.react.js
--- a/native/chat/text-message-tooltip-button.react.js
+++ b/native/chat/text-message-tooltip-button.react.js
@@ -6,7 +6,7 @@
import type { AppNavigationProp } from '../navigation/app-navigator.react';
import type { TooltipRoute } from '../navigation/tooltip.react';
import { useSelector } from '../redux/redux-utils';
-import { TooltipInlineSidebar } from './inline-sidebar.react';
+import { TooltipInlineEngagement } from './inline-engagement.react';
import { InnerTextMessage } from './inner-text-message.react';
import { MessageHeader } from './message-header.react';
import { MessageListContextProvider } from './message-list-types';
@@ -75,12 +75,12 @@
[navigation.goBackOnce],
);
- const inlineSidebar = React.useMemo(() => {
+ const inlineEngagement = React.useMemo(() => {
if (!item.threadCreatedFromMessage) {
return null;
}
return (
- <TooltipInlineSidebar
+ <TooltipInlineEngagement
item={item}
positioning={item.messageInfo.creator.isViewer ? 'right' : 'left'}
isOpeningSidebar={isOpeningSidebar}
@@ -110,7 +110,7 @@
isThreadColorDarkOverride={isThreadColorDarkOverride}
/>
</MessagePressResponderContext.Provider>
- {inlineSidebar}
+ {inlineEngagement}
</Animated.View>
</MessageListContextProvider>
);
diff --git a/native/chat/utils.js b/native/chat/utils.js
--- a/native/chat/utils.js
+++ b/native/chat/utils.js
@@ -26,7 +26,7 @@
} from '../types/chat-types';
import type { LayoutCoordinates, VerticalBounds } from '../types/layout-types';
import type { AnimatedViewStyle } from '../types/styles';
-import { clusterEndHeight, inlineSidebarStyle } from './chat-constants';
+import { clusterEndHeight, inlineEngagementStyle } from './chat-constants';
import { ChatContext, useHeightMeasurer } from './chat-context';
import { failedSendHeight } from './failed-send.react';
import { authorNameHeight } from './message-header.react';
@@ -66,9 +66,9 @@
}
if (item.threadCreatedFromMessage || item.reactions.size > 0) {
height +=
- inlineSidebarStyle.height +
- inlineSidebarStyle.marginTop +
- inlineSidebarStyle.marginBottom;
+ inlineEngagementStyle.height +
+ inlineEngagementStyle.marginTop +
+ inlineEngagementStyle.marginBottom;
}
return height;
}
@@ -77,7 +77,7 @@
item: ChatRobotextMessageInfoItemWithHeight,
): number {
if (item.threadCreatedFromMessage || item.reactions.size > 0) {
- return item.contentHeight + inlineSidebarStyle.height;
+ return item.contentHeight + inlineEngagementStyle.height;
}
return item.contentHeight;
}
diff --git a/native/themes/colors.js b/native/themes/colors.js
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -22,8 +22,8 @@
greenButton: '#6EC472',
greenText: 'green',
headerChevron: '#0A0A0A',
- inlineSidebarBackground: '#E0E0E0',
- inlineSidebarLabel: '#000000',
+ inlineEngagementBackground: '#E0E0E0',
+ inlineEngagementLabel: '#000000',
link: '#036AFF',
listBackground: 'white',
listBackgroundLabel: 'black',
@@ -112,8 +112,8 @@
greenButton: '#43A047',
greenText: '#44FF44',
headerChevron: '#FFFFFF',
- inlineSidebarBackground: '#666666',
- inlineSidebarLabel: '#FFFFFF',
+ inlineEngagementBackground: '#666666',
+ inlineEngagementLabel: '#FFFFFF',
link: '#129AFF',
listBackground: '#0A0A0A',
listBackgroundLabel: '#C7C7CC',
diff --git a/web/chat/chat-message-list.css b/web/chat/chat-message-list.css
--- a/web/chat/chat-message-list.css
+++ b/web/chat/chat-message-list.css
@@ -210,6 +210,6 @@
div.sidebarMarginBottom {
margin-bottom: 2px;
}
-svg.inlineSidebarIcon {
+svg.inlineEngagementIcon {
color: #666666;
}
diff --git a/web/chat/composed-message.react.js b/web/chat/composed-message.react.js
--- a/web/chat/composed-message.react.js
+++ b/web/chat/composed-message.react.js
@@ -17,7 +17,7 @@
import { tooltipPositions, useMessageTooltip } from '../utils/tooltip-utils';
import css from './chat-message-list.css';
import FailedSend from './failed-send.react';
-import InlineSidebar from './inline-sidebar.react';
+import InlineEngagement from './inline-engagement.react';
const availableTooltipPositionsForViewerMessage = [
tooltipPositions.LEFT,
@@ -55,7 +55,7 @@
+inputState: ?InputState,
+onMouseLeave: ?() => mixed,
+onMouseEnter: (event: SyntheticEvent<HTMLDivElement>) => mixed,
- +containsInlineSidebar: boolean,
+ +containsInlineEngagement: boolean,
};
class ComposedMessage extends React.PureComponent<Props> {
static defaultProps: { +borderRadius: number } = {
@@ -120,15 +120,15 @@
);
}
- let inlineSidebar = null;
+ let inlineEngagement = null;
if (
- (this.props.containsInlineSidebar && item.threadCreatedFromMessage) ||
+ (this.props.containsInlineEngagement && item.threadCreatedFromMessage) ||
item.reactions.size > 0
) {
const positioning = isViewer ? 'right' : 'left';
- inlineSidebar = (
+ inlineEngagement = (
<div className={css.sidebarMarginBottom}>
- <InlineSidebar
+ <InlineEngagement
threadInfo={item.threadCreatedFromMessage}
reactions={item.reactions}
positioning={positioning}
@@ -153,7 +153,7 @@
{deliveryIcon}
</div>
{failedSendInfo}
- {inlineSidebar}
+ {inlineEngagement}
</React.Fragment>
);
}
@@ -171,7 +171,7 @@
const availablePositions = isViewer
? availableTooltipPositionsForViewerMessage
: availableTooltipPositionsForNonViewerMessage;
- const containsInlineSidebar = !!item.threadCreatedFromMessage;
+ const containsInlineEngagement = !!item.threadCreatedFromMessage;
const { onMouseLeave, onMouseEnter } = useMessageTooltip({
item,
@@ -185,7 +185,7 @@
inputState={inputState}
onMouseLeave={onMouseLeave}
onMouseEnter={onMouseEnter}
- containsInlineSidebar={containsInlineSidebar}
+ containsInlineEngagement={containsInlineEngagement}
/>
);
},
diff --git a/web/chat/inline-sidebar.css b/web/chat/inline-engagement.css
rename from web/chat/inline-sidebar.css
rename to web/chat/inline-engagement.css
--- a/web/chat/inline-sidebar.css
+++ b/web/chat/inline-engagement.css
@@ -1,4 +1,4 @@
-div.inlineSidebarContainer {
+div.inlineEngagementContainer {
display: flex;
}
div.centerContainer {
@@ -18,9 +18,9 @@
right: 31px;
margin-left: 31px;
}
-.inlineSidebarContent {
- background: var(--inline-sidebar-bg);
- color: var(--inline-sidebar-color);
+.inlineEngagementContent {
+ background: var(--inline-engagement-bg);
+ color: var(--inline-engagement-color);
font-size: var(--s-font-14);
line-height: var(--line-height-text);
flex-direction: row;
@@ -33,8 +33,8 @@
transition: background 0.2s ease-in-out;
}
-.inlineSidebarContent:hover {
- background: var(--inline-sidebar-bg-hover);
+.inlineEngagementContent:hover {
+ background: var(--inline-engagement-bg-hover);
}
div.reactionsContainer {
@@ -52,6 +52,6 @@
font-weight: bold;
}
-svg.inlineSidebarIcon {
+svg.inlineEngagementIcon {
color: #666666;
}
diff --git a/web/chat/inline-sidebar.react.js b/web/chat/inline-engagement.react.js
rename from web/chat/inline-sidebar.react.js
rename to web/chat/inline-engagement.react.js
--- a/web/chat/inline-sidebar.react.js
+++ b/web/chat/inline-engagement.react.js
@@ -3,26 +3,26 @@
import classNames from 'classnames';
import * as React from 'react';
-import useInlineSidebarText from 'lib/hooks/inline-sidebar-text.react';
+import useInlineEngagementText from 'lib/hooks/inline-engagement-text.react';
import type { MessageReactionInfo } from 'lib/selectors/chat-selectors';
import { stringForReactionList } from 'lib/shared/reaction-utils';
import type { ThreadInfo } from 'lib/types/thread-types';
import CommIcon from '../CommIcon.react';
import { useOnClickThread } from '../selectors/thread-selectors';
-import css from './inline-sidebar.css';
+import css from './inline-engagement.css';
type Props = {
+threadInfo: ?ThreadInfo,
+reactions?: $ReadOnlyMap<string, MessageReactionInfo>,
+positioning: 'left' | 'center' | 'right',
};
-function InlineSidebar(props: Props): React.Node {
+function InlineEngagement(props: Props): React.Node {
const { threadInfo, positioning, reactions } = props;
- const repliesText = useInlineSidebarText(threadInfo);
+ const repliesText = useInlineEngagementText(threadInfo);
const containerClasses = classNames([
- css.inlineSidebarContainer,
+ css.inlineEngagementContainer,
{
[css.leftContainer]: positioning === 'left',
[css.centerContainer]: positioning === 'center',
@@ -60,7 +60,7 @@
return (
<div className={containerClasses}>
<a
- className={css.inlineSidebarContent}
+ className={css.inlineEngagementContent}
onClick={threadInfoExists ? onClick : null}
>
{sidebarItem}
@@ -70,4 +70,4 @@
);
}
-export default InlineSidebar;
+export default InlineEngagement;
diff --git a/web/chat/robotext-message.react.js b/web/chat/robotext-message.react.js
--- a/web/chat/robotext-message.react.js
+++ b/web/chat/robotext-message.react.js
@@ -14,7 +14,7 @@
import { updateNavInfoActionType } from '../redux/action-types';
import { useSelector } from '../redux/redux-utils';
import { tooltipPositions, useMessageTooltip } from '../utils/tooltip-utils';
-import InlineSidebar from './inline-sidebar.react';
+import InlineEngagement from './inline-engagement.react';
import css from './robotext-message.css';
const availableTooltipPositionsForRobotext = [
@@ -37,14 +37,14 @@
};
class RobotextMessage extends React.PureComponent<Props> {
render() {
- let inlineSidebar;
+ let inlineEngagement;
if (
this.props.item.threadCreatedFromMessage ||
this.props.item.reactions.size > 0
) {
- inlineSidebar = (
+ inlineEngagement = (
<div className={css.sidebarMarginTop}>
- <InlineSidebar
+ <InlineEngagement
threadInfo={this.props.item.threadCreatedFromMessage}
reactions={this.props.item.reactions}
positioning="center"
@@ -62,7 +62,7 @@
>
<span>{this.linkedRobotext()}</span>
</div>
- {inlineSidebar}
+ {inlineEngagement}
</div>
);
}
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -177,9 +177,9 @@
--chat-message-list-active-border: #5989d6;
--sidebars-modal-color: var(--shades-black-60);
--sidebars-modal-color-hover: var(--shades-white-100);
- --inline-sidebar-bg: var(--shades-black-70);
- --inline-sidebar-bg-hover: var(--shades-black-80);
- --inline-sidebar-color: var(--fg);
+ --inline-engagement-bg: var(--shades-black-70);
+ --inline-engagement-bg-hover: var(--shades-black-80);
+ --inline-engagement-color: var(--fg);
--compose-subchannel-header-fg: var(--shades-black-60);
--compose-subchannel-header-bg: var(--shades-black-80);
--compose-subchannel-label-color: var(--shades-black-60);
diff --git a/web/utils/tooltip-utils.js b/web/utils/tooltip-utils.js
--- a/web/utils/tooltip-utils.js
+++ b/web/utils/tooltip-utils.js
@@ -525,7 +525,7 @@
+tooltipMessagePosition: ?PositionInfo,
+tooltipSize: TooltipSize,
+availablePositions: $ReadOnlyArray<TooltipPosition>,
- +containsInlineSidebar: boolean,
+ +containsInlineEngagement: boolean,
+tooltipActions: $ReadOnlyArray<MessageTooltipAction>,
+messageTimestamp: string,
};
@@ -535,7 +535,7 @@
tooltipMessagePosition,
tooltipSize,
availablePositions,
- containsInlineSidebar,
+ containsInlineEngagement,
tooltipActions,
messageTimestamp,
} = params;
@@ -547,7 +547,7 @@
tooltipSize,
availablePositions,
defaultPosition: availablePositions[0],
- preventDisplayingBelowSource: containsInlineSidebar,
+ preventDisplayingBelowSource: containsInlineEngagement,
});
if (!tooltipPosition) {
return;
@@ -581,7 +581,7 @@
const { renderTooltip } = useTooltipContext();
const tooltipActions = useMessageTooltipActions(item, threadInfo);
- const containsInlineSidebar = !!item.threadCreatedFromMessage;
+ const containsInlineEngagement = !!item.threadCreatedFromMessage;
const messageTimestamp = React.useMemo(() => {
const time = item.messageInfo.time;
@@ -619,7 +619,7 @@
tooltipMessagePosition,
tooltipSize,
availablePositions,
- containsInlineSidebar,
+ containsInlineEngagement,
tooltipActions,
messageTimestamp,
});
@@ -640,7 +640,7 @@
},
[
availablePositions,
- containsInlineSidebar,
+ containsInlineEngagement,
messageTimestamp,
renderTooltip,
tooltipActions,
@@ -658,7 +658,7 @@
tooltipMessagePosition,
tooltipSize,
availablePositions,
- containsInlineSidebar,
+ containsInlineEngagement,
tooltipActions,
messageTimestamp,
});
@@ -669,7 +669,7 @@
updateTooltip.current?.(tooltipResult.tooltip);
}, [
availablePositions,
- containsInlineSidebar,
+ containsInlineEngagement,
messageTimestamp,
tooltipActions,
tooltipMessagePosition,

File Metadata

Mime Type
text/plain
Expires
Thu, Jan 15, 11:21 AM (14 h, 53 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5937515
Default Alt Text
D6289.1768476118.diff (27 KB)

Event Timeline