Page MenuHomePhabricator
Files F3360424

D5381.id17630.diff
No OneTemporary
Actions

D5381.id17630.diff
View Options

diff --git a/native/chat/multimedia-message-tooltip-modal.react.js b/native/chat/multimedia-message-tooltip-modal.react.js
--- a/native/chat/multimedia-message-tooltip-modal.react.js
+++ b/native/chat/multimedia-message-tooltip-modal.react.js
@@ -4,7 +4,6 @@
import {
createTooltip,
- tooltipHeight,
type TooltipParams,
type BaseTooltipProps,
} from '../navigation/tooltip.react';
@@ -46,8 +45,4 @@
spec,
);
-const multimediaMessageTooltipHeight: number = tooltipHeight(
- spec.entries.length,
-);
-
-export { MultimediaMessageTooltipModal, multimediaMessageTooltipHeight };
+export default MultimediaMessageTooltipModal;
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
@@ -20,12 +20,12 @@
MultimediaMessageTooltipModalRouteName,
VideoPlaybackModalRouteName,
} from '../navigation/route-names';
+import { tooltipHeight } from '../navigation/tooltip.react';
import type { ChatMultimediaMessageInfoItem } from '../types/chat-types';
import { type VerticalBounds } from '../types/layout-types';
import type { LayoutCoordinates } from '../types/layout-types';
import ComposedMessage from './composed-message.react';
import { InnerMultimediaMessage } from './inner-multimedia-message.react';
-import { multimediaMessageTooltipHeight } from './multimedia-message-tooltip-modal.react';
import {
getMediaKey,
multimediaMessageSendFailed,
@@ -137,10 +137,10 @@
const boundsBottom = verticalBounds.y + verticalBounds.height;
const belowMargin = 20;
- const belowSpace = multimediaMessageTooltipHeight + belowMargin;
+ const belowSpace = tooltipHeight + belowMargin;
const { isViewer } = item.messageInfo.creator;
const aboveMargin = isViewer ? 30 : 50;
- const aboveSpace = multimediaMessageTooltipHeight + aboveMargin;
+ const aboveSpace = tooltipHeight + aboveMargin;
let location = 'below',
margin = belowMargin;
diff --git a/native/chat/robotext-message-tooltip-modal.react.js b/native/chat/robotext-message-tooltip-modal.react.js
--- a/native/chat/robotext-message-tooltip-modal.react.js
+++ b/native/chat/robotext-message-tooltip-modal.react.js
@@ -4,7 +4,6 @@
import {
createTooltip,
- tooltipHeight,
type TooltipParams,
type BaseTooltipProps,
} from '../navigation/tooltip.react';
@@ -38,6 +37,4 @@
spec,
);
-const robotextMessageTooltipHeight: number = tooltipHeight(spec.entries.length);
-
-export { RobotextMessageTooltipModal, robotextMessageTooltipHeight };
+export default RobotextMessageTooltipModal;
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
@@ -11,6 +11,7 @@
import { OverlayContext } from '../navigation/overlay-context';
import { RobotextMessageTooltipModalRouteName } from '../navigation/route-names';
import type { NavigationRoute } from '../navigation/route-names';
+import { tooltipHeight } from '../navigation/tooltip.react';
import { useStyles } from '../themes/colors';
import type { ChatRobotextMessageInfoItemWithHeight } from '../types/chat-types';
import type { VerticalBounds } from '../types/layout-types';
@@ -19,7 +20,6 @@
import type { ChatNavigationProp } from './chat.react';
import { InlineSidebar } from './inline-sidebar.react';
import { InnerRobotextMessage } from './inner-robotext-message.react';
-import { robotextMessageTooltipHeight } from './robotext-message-tooltip-modal.react';
import { Timestamp } from './timestamp.react';
import { getMessageTooltipKey, useContentAndHeaderOpacity } from './utils';
@@ -100,10 +100,10 @@
const boundsBottom = verticalBounds.y + verticalBounds.height;
const belowMargin = 20;
- const belowSpace = robotextMessageTooltipHeight + belowMargin;
+ const belowSpace = tooltipHeight + belowMargin;
const { isViewer } = item.messageInfo.creator;
const aboveMargin = isViewer ? 30 : 50;
- const aboveSpace = robotextMessageTooltipHeight + aboveMargin;
+ const aboveSpace = tooltipHeight + aboveMargin;
let location = 'below',
margin = 0;
diff --git a/native/chat/text-message-tooltip-modal.react.js b/native/chat/text-message-tooltip-modal.react.js
--- a/native/chat/text-message-tooltip-modal.react.js
+++ b/native/chat/text-message-tooltip-modal.react.js
@@ -11,7 +11,6 @@
import { displayActionResultModal } from '../navigation/action-result-modal';
import {
createTooltip,
- tooltipHeight,
type TooltipParams,
type TooltipRoute,
type BaseTooltipProps,
@@ -56,12 +55,12 @@
},
{
id: 'create_sidebar',
- text: 'Create thread',
+ text: 'Thread',
onPress: navigateToSidebar,
},
{
id: 'open_sidebar',
- text: 'Go to thread',
+ text: 'Thread',
onPress: navigateToSidebar,
},
],
@@ -71,6 +70,4 @@
BaseTooltipProps<'TextMessageTooltipModal'>,
> = createTooltip<'TextMessageTooltipModal'>(TextMessageTooltipButton, spec);
-const textMessageTooltipHeight: number = tooltipHeight(spec.entries.length);
-
-export { TextMessageTooltipModal, textMessageTooltipHeight };
+export default TextMessageTooltipModal;
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
@@ -18,13 +18,13 @@
} from '../navigation/overlay-context';
import type { NavigationRoute } from '../navigation/route-names';
import { TextMessageTooltipModalRouteName } from '../navigation/route-names';
+import { tooltipHeight } from '../navigation/tooltip.react';
import type { ChatTextMessageInfoItemWithHeight } from '../types/chat-types';
import type { VerticalBounds } from '../types/layout-types';
import type { ChatNavigationProp } from './chat.react';
import ComposedMessage from './composed-message.react';
import { InnerTextMessage } from './inner-text-message.react';
import textMessageSendFailed from './text-message-send-failed';
-import { textMessageTooltipHeight } from './text-message-tooltip-modal.react';
import { getMessageTooltipKey } from './utils';
type BaseProps = {
@@ -164,10 +164,10 @@
const boundsBottom = verticalBounds.y + verticalBounds.height;
const belowMargin = 20;
- const belowSpace = textMessageTooltipHeight + belowMargin;
+ const belowSpace = tooltipHeight + belowMargin;
const { isViewer } = item.messageInfo.creator;
const aboveMargin = isViewer ? 30 : 50;
- const aboveSpace = textMessageTooltipHeight + aboveMargin;
+ const aboveSpace = tooltipHeight + aboveMargin;
let location = 'below',
margin = belowMargin;
diff --git a/native/navigation/app-navigator.react.js b/native/navigation/app-navigator.react.js
--- a/native/navigation/app-navigator.react.js
+++ b/native/navigation/app-navigator.react.js
@@ -11,10 +11,10 @@
import AppsDirectory from '../apps/apps-directory.react';
import Calendar from '../calendar/calendar.react';
import Chat from '../chat/chat.react';
-import { MultimediaMessageTooltipModal } from '../chat/multimedia-message-tooltip-modal.react';
-import { RobotextMessageTooltipModal } from '../chat/robotext-message-tooltip-modal.react';
+import MultimediaMessageTooltipModal from '../chat/multimedia-message-tooltip-modal.react';
+import RobotextMessageTooltipModal from '../chat/robotext-message-tooltip-modal.react';
import ThreadSettingsMemberTooltipModal from '../chat/settings/thread-settings-member-tooltip-modal.react';
-import { TextMessageTooltipModal } from '../chat/text-message-tooltip-modal.react';
+import TextMessageTooltipModal from '../chat/text-message-tooltip-modal.react';
import SWMansionIcon from '../components/swmansion-icon.react';
import { type SQLiteContextType, SQLiteContext } from '../data/sqlite-context';
import KeyboardStateContainer from '../keyboard/keyboard-state-container.react';
diff --git a/native/navigation/tooltip.react.js b/native/navigation/tooltip.react.js
--- a/native/navigation/tooltip.react.js
+++ b/native/navigation/tooltip.react.js
@@ -8,7 +8,6 @@
View,
StyleSheet,
TouchableWithoutFeedback,
- Platform,
TouchableOpacity,
} from 'react-native';
import Animated from 'react-native-reanimated';
@@ -227,7 +226,7 @@
}
get tooltipHeight(): number {
- return tooltipHeight(this.entries.length);
+ return tooltipHeight;
}
get location(): 'above' | 'below' {
@@ -310,12 +309,11 @@
const extraLeftSpace = x;
const extraRightSpace = dimensions.width - width - x;
if (extraLeftSpace < extraRightSpace) {
- style.left = 0;
- style.minWidth = width + 2 * extraLeftSpace;
+ style.left = 8;
} else {
- style.right = 0;
- style.minWidth = width + 2 * extraRightSpace;
+ style.right = 8;
}
+ style.minWidth = dimensions.width - 16;
if (location === 'above') {
const fullScreenHeight = dimensions.height;
@@ -361,33 +359,6 @@
);
});
- let triangleStyle;
- const { route } = this.props;
- const { initialCoordinates } = route.params;
- const { x, width } = initialCoordinates;
- const extraLeftSpace = x;
- const extraRightSpace = dimensions.width - width - x;
- if (extraLeftSpace < extraRightSpace) {
- triangleStyle = {
- alignSelf: 'flex-start',
- left: extraLeftSpace + (width - 20) / 2,
- };
- } else {
- triangleStyle = {
- alignSelf: 'flex-end',
- right: extraRightSpace + (width - 20) / 2,
- };
- }
-
- let triangleDown = null;
- let triangleUp = null;
- const { location } = this;
- if (location === 'above') {
- triangleDown = <View style={[styles.triangleDown, triangleStyle]} />;
- } else {
- triangleUp = <View style={[styles.triangleUp, triangleStyle]} />;
- }
-
invariant(overlayContext, 'Tooltip should have OverlayContext');
const { position } = overlayContext;
const isOpeningSidebar = !!chatContext?.currentTransitionSidebarSourceID;
@@ -411,9 +382,7 @@
style={this.tooltipContainerStyle}
onLayout={this.onTooltipContainerLayout}
>
- {triangleUp}
<View style={styles.items}>{items}</View>
- {triangleDown}
</AnimatedView>
</View>
</TouchableWithoutFeedback>
@@ -527,17 +496,19 @@
itemContainer: {
alignItems: 'center',
flex: 1,
- flexDirection: 'row',
+ flexDirection: 'column',
justifyContent: 'center',
padding: 10,
},
itemMargin: {
- borderBottomColor: '#E1E1E1',
- borderBottomWidth: 1,
+ borderRightColor: '#E1E1E1',
+ borderRightWidth: 1,
},
items: {
backgroundColor: 'white',
borderRadius: 5,
+ flex: 1,
+ flexDirection: 'row',
overflow: 'hidden',
},
label: {
@@ -546,39 +517,8 @@
lineHeight: 17,
textAlign: 'center',
},
- triangleDown: {
- borderBottomColor: 'transparent',
- borderBottomWidth: 0,
- borderLeftColor: 'transparent',
- borderLeftWidth: 10,
- borderRightColor: 'transparent',
- borderRightWidth: 10,
- borderStyle: 'solid',
- borderTopColor: 'white',
- borderTopWidth: 10,
- height: 10,
- top: Platform.OS === 'android' ? -1 : 0,
- width: 10,
- },
- triangleUp: {
- borderBottomColor: 'white',
- borderBottomWidth: 10,
- borderLeftColor: 'transparent',
- borderLeftWidth: 10,
- borderRightColor: 'transparent',
- borderRightWidth: 10,
- borderStyle: 'solid',
- borderTopColor: 'transparent',
- borderTopWidth: 0,
- bottom: Platform.OS === 'android' ? -1 : 0,
- height: 10,
- width: 10,
- },
});
-function tooltipHeight(numEntries: number): number {
- // 10 (triangle) + 37 * numEntries (entries) + numEntries - 1 (padding)
- return 9 + 38 * numEntries;
-}
+const tooltipHeight: number = 53;
export { createTooltip, tooltipHeight };

File Metadata

Mime Type
text/plain
Expires
Mon, Nov 25, 12:44 PM (1 h, 5 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2579820
Default Alt Text
D5381.id17630.diff (11 KB)

Event Timeline