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 ( {icon} @@ -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 ( ); @@ -384,7 +405,7 @@ const { location } = this; if (location === 'above') { triangleDown = ; - } else { + } else if (location === 'below') { triangleUp = ; } @@ -398,6 +419,12 @@ isOpeningSidebar, }; + const itemsStyle = [styles.items]; + + if (this.location === 'fixed') { + itemsStyle.push(styles.itemsFixed); + } + return ( @@ -412,7 +439,7 @@ onLayout={this.onTooltipContainerLayout} > {triangleUp} - {items} + {items} {triangleDown} @@ -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 };