Page MenuHomePhabricator
Files F3283813

D5381.id17905.diff
No OneTemporary
Actions

D5381.id17905.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 { fixedToolTipHeight } 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 = fixedToolTipHeight + belowMargin;
const { isViewer } = item.messageInfo.creator;
const aboveMargin = isViewer ? 30 : 50;
- const aboveSpace = multimediaMessageTooltipHeight + aboveMargin;
+ const aboveSpace = fixedToolTipHeight + aboveMargin;
let margin = belowMargin;
if (
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 { fixedToolTipHeight } 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 = fixedToolTipHeight + belowMargin;
const { isViewer } = item.messageInfo.creator;
const aboveMargin = isViewer ? 30 : 50;
- const aboveSpace = robotextMessageTooltipHeight + aboveMargin;
+ const aboveSpace = fixedToolTipHeight + aboveMargin;
let margin = 0;
if (
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 { fixedToolTipHeight } 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 = fixedToolTipHeight + belowMargin;
const { isViewer } = item.messageInfo.creator;
const aboveMargin = isViewer ? 30 : 50;
- const aboveSpace = textMessageTooltipHeight + aboveMargin;
+ const aboveSpace = fixedToolTipHeight + aboveMargin;
let margin = belowMargin;
if (
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
@@ -14,10 +14,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
@@ -145,7 +145,7 @@
return (
<TouchableOpacity
onPress={this.onPress}
- style={[styles.itemContainer, this.props.containerStyle]}
+ style={this.props.containerStyle}
>
{icon}
<SingleLine style={[styles.label, this.props.labelStyle]}>
@@ -227,7 +227,11 @@
}
get tooltipHeight(): number {
- return tooltipHeight(this.entries.length);
+ if (this.props.route.params.location === 'fixed') {
+ return fixedToolTipHeight;
+ } else {
+ return tooltipHeight(this.entries.length);
+ }
}
get location(): 'above' | 'below' | 'fixed' {
@@ -317,6 +321,12 @@
style.minWidth = width + 2 * extraRightSpace;
}
+ if (location === 'fixed') {
+ style.minWidth = dimensions.width - 16;
+ style.left = 8;
+ style.right = 8;
+ }
+
if (location === 'above') {
const fullScreenHeight = dimensions.height;
style.bottom =
@@ -347,15 +357,26 @@
...navAndRouteForFlow
} = this.props;
+ const tooltipContainerStyle = [styles.itemContainer];
+
+ if (this.location === 'fixed') {
+ tooltipContainerStyle.push(styles.itemContainerFixed);
+ }
+
const { entries } = this;
const items = entries.map((entry, index) => {
- const style = index !== entries.length - 1 ? styles.itemMargin : null;
+ let style;
+ if (this.location === 'fixed') {
+ style = index !== entries.length - 1 ? styles.itemMarginFixed : null;
+ } else {
+ style = index !== entries.length - 1 ? styles.itemMargin : null;
+ }
return (
<TooltipItem
key={index}
spec={entry}
onPress={this.onPressEntry}
- containerStyle={style}
+ containerStyle={[...tooltipContainerStyle, style]}
labelStyle={tooltipSpec.labelStyle}
/>
);
@@ -384,7 +405,7 @@
const { location } = this;
if (location === 'above') {
triangleDown = <View style={[styles.triangleDown, triangleStyle]} />;
- } else {
+ } else if (location === 'below') {
triangleUp = <View style={[styles.triangleUp, triangleStyle]} />;
}
@@ -398,6 +419,12 @@
isOpeningSidebar,
};
+ const itemsStyle = [styles.items];
+
+ if (this.location === 'fixed') {
+ itemsStyle.push(styles.itemsFixed);
+ }
+
return (
<TouchableWithoutFeedback onPress={this.onPressBackdrop}>
<View style={styles.container}>
@@ -412,7 +439,7 @@
onLayout={this.onTooltipContainerLayout}
>
{triangleUp}
- <View style={styles.items}>{items}</View>
+ <View style={itemsStyle}>{items}</View>
{triangleDown}
</AnimatedView>
</View>
@@ -531,15 +558,26 @@
justifyContent: 'center',
padding: 10,
},
+ itemContainerFixed: {
+ flexDirection: 'column',
+ },
itemMargin: {
borderBottomColor: '#E1E1E1',
borderBottomWidth: 1,
},
+ itemMarginFixed: {
+ borderRightColor: '#E1E1E1',
+ borderRightWidth: 1,
+ },
items: {
backgroundColor: 'white',
borderRadius: 5,
overflow: 'hidden',
},
+ itemsFixed: {
+ flex: 1,
+ flexDirection: 'row',
+ },
label: {
color: '#444',
fontSize: 14,
@@ -577,8 +615,9 @@
});
function tooltipHeight(numEntries: number): number {
- // 10 (triangle) + 37 * numEntries (entries) + numEntries - 1 (padding)
return 9 + 38 * numEntries;
}
-export { createTooltip, tooltipHeight };
+const fixedToolTipHeight: number = 53;
+
+export { createTooltip, tooltipHeight, fixedToolTipHeight };

File Metadata

Mime Type
text/plain
Expires
Sun, Nov 17, 11:50 AM (22 h, 19 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2523682
Default Alt Text
D5381.id17905.diff (11 KB)

Event Timeline