diff --git a/web/app.react.js b/web/app.react.js --- a/web/app.react.js +++ b/web/app.react.js @@ -40,7 +40,6 @@ import Calendar from './calendar/calendar.react.js'; import Chat from './chat/chat.react.js'; import { EditModalProvider } from './chat/edit-message-provider.js'; -import { TooltipProvider } from './chat/tooltip-provider.js'; import NavigationArrows from './components/navigation-arrows.react.js'; import { initOpaque } from './crypto/opaque-utils.js'; import electron from './electron.js'; @@ -72,6 +71,7 @@ import Splash from './splash/splash.react.js'; import './typography.css'; import css from './style.css'; +import { TooltipProvider } from './tooltips/tooltip-provider.js'; import { type NavInfo } from './types/nav-types.js'; import { canonicalURLFromReduxState, navInfoFromURL } from './url-utils.js'; diff --git a/web/chat/chat-constants.js b/web/chat/chat-constants.js --- a/web/chat/chat-constants.js +++ b/web/chat/chat-constants.js @@ -5,39 +5,6 @@ import type { ComposedMessageID } from './composed-message.react.js'; -export const tooltipStyle = { - paddingLeft: 5, - paddingRight: 5, - rowGap: 3, -}; - -export const tooltipLabelStyle = { - padding: 6, - height: 20, -}; -export const tooltipButtonStyle = { - paddingLeft: 6, - paddingRight: 6, - width: 30, - height: 38, -}; - -export const reactionTooltipStyle = { - paddingTop: 8, - paddingBottom: 8, - paddingLeft: 12, - paddingRight: 12, - rowGap: 4, - maxWidth: 136, - maxHeight: 162, -}; - -export const reactionSeeMoreLabel = 'See more'; - -export const reactionSeeMoreLabelStyle = { - height: 18, -}; - export const typeaheadStyle = { tooltipWidth: 296, tooltipMaxHeight: 268, diff --git a/web/chat/chat-message-list.react.js b/web/chat/chat-message-list.react.js --- a/web/chat/chat-message-list.react.js +++ b/web/chat/chat-message-list.react.js @@ -40,11 +40,11 @@ import { MessageListContext } from './message-list-types.js'; import Message from './message.react.js'; import RelationshipPrompt from './relationship-prompt/relationship-prompt.js'; -import { useTooltipContext } from './tooltip-provider.js'; import { type InputState, InputStateContext } from '../input/input-state.js'; import LoadingIndicator from '../loading-indicator.react.js'; import { useTextMessageRulesFunc } from '../markdown/rules.react.js'; import { useSelector } from '../redux/redux-utils.js'; +import { useTooltipContext } from '../tooltips/tooltip-provider.js'; const browser = detectBrowser(); const supportsReverseFlex = 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 @@ -22,8 +22,8 @@ import CommIcon from '../CommIcon.react.js'; import { type InputState, InputStateContext } from '../input/input-state.js'; import { usePushUserProfileModal } from '../modals/user-profile/user-profile-utils.js'; -import { useMessageTooltip } from '../utils/tooltip-action-utils.js'; -import { tooltipPositions } from '../utils/tooltip-utils.js'; +import { useMessageTooltip } from '../tooltips/tooltip-action-utils.js'; +import { tooltipPositions } from '../tooltips/tooltip-utils.js'; export type ComposedMessageID = string; diff --git a/web/chat/reaction-message-utils.js b/web/chat/reaction-message-utils.js --- a/web/chat/reaction-message-utils.js +++ b/web/chat/reaction-message-utils.js @@ -20,7 +20,7 @@ import { type TooltipSize, type TooltipPositionStyle, -} from '../utils/tooltip-utils.js'; +} from '../tooltips/tooltip-utils.js'; import { getAppContainerPositionInfo } from '../utils/window-utils.js'; function useSendReaction( diff --git a/web/chat/reaction-pill.react.js b/web/chat/reaction-pill.react.js --- a/web/chat/reaction-pill.react.js +++ b/web/chat/reaction-pill.react.js @@ -8,8 +8,8 @@ import { useSendReaction } from './reaction-message-utils.js'; import css from './reaction-pill.css'; -import { useReactionTooltip } from '../utils/tooltip-action-utils.js'; -import { tooltipPositions } from '../utils/tooltip-utils.js'; +import { useReactionTooltip } from '../tooltips/tooltip-action-utils.js'; +import { tooltipPositions } from '../tooltips/tooltip-utils.js'; const availableReactionTooltipPositions = [ tooltipPositions.TOP, 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 @@ -20,8 +20,8 @@ import { usePushUserProfileModal } from '../modals/user-profile/user-profile-utils.js'; import { updateNavInfoActionType } from '../redux/action-types.js'; import { useSelector } from '../redux/redux-utils.js'; -import { useMessageTooltip } from '../utils/tooltip-action-utils.js'; -import { tooltipPositions } from '../utils/tooltip-utils.js'; +import { useMessageTooltip } from '../tooltips/tooltip-action-utils.js'; +import { tooltipPositions } from '../tooltips/tooltip-utils.js'; const availableTooltipPositionsForRobotext = [ tooltipPositions.LEFT, diff --git a/web/modals/search/message-search-modal.react.js b/web/modals/search/message-search-modal.react.js --- a/web/modals/search/message-search-modal.react.js +++ b/web/modals/search/message-search-modal.react.js @@ -9,12 +9,12 @@ import css from './message-search-modal.css'; import { useParseSearchResults } from './message-search-utils.react.js'; -import { useTooltipContext } from '../../chat/tooltip-provider.js'; import Button from '../../components/button.react.js'; import MessageResult from '../../components/message-result.react.js'; import Search from '../../components/search.react.js'; import LoadingIndicator from '../../loading-indicator.react.js'; import { useMessageSearchContext } from '../../search/message-search-state-provider.react.js'; +import { useTooltipContext } from '../../tooltips/tooltip-provider.js'; import Modal from '../modal.react.js'; type ContentProps = { diff --git a/web/navigation-sidebar/account-settings-button.react.js b/web/navigation-sidebar/account-settings-button.react.js --- a/web/navigation-sidebar/account-settings-button.react.js +++ b/web/navigation-sidebar/account-settings-button.react.js @@ -8,8 +8,8 @@ import css from './account-settings-button.css'; import { navigationSidebarLabelTooltipMargin } from './navigation-sidebar-constants.js'; import { updateNavInfoActionType } from '../redux/action-types.js'; -import { useLabelTooltip } from '../utils/tooltip-action-utils.js'; -import { tooltipPositions } from '../utils/tooltip-utils.js'; +import { useLabelTooltip } from '../tooltips/tooltip-action-utils.js'; +import { tooltipPositions } from '../tooltips/tooltip-utils.js'; function AccountSettingsButton(): React.Node { const dispatch = useDispatch(); diff --git a/web/navigation-sidebar/community-creation-button.react.js b/web/navigation-sidebar/community-creation-button.react.js --- a/web/navigation-sidebar/community-creation-button.react.js +++ b/web/navigation-sidebar/community-creation-button.react.js @@ -8,8 +8,8 @@ import css from './community-creation-button.css'; import { navigationSidebarLabelTooltipMargin } from './navigation-sidebar-constants.js'; import CommunityCreationModal from '../sidebar/community-creation/community-creation-modal.react.js'; -import { useLabelTooltip } from '../utils/tooltip-action-utils.js'; -import { tooltipPositions } from '../utils/tooltip-utils.js'; +import { useLabelTooltip } from '../tooltips/tooltip-action-utils.js'; +import { tooltipPositions } from '../tooltips/tooltip-utils.js'; function CommunityCreationButton(): React.Node { const { pushModal } = useModalContext(); diff --git a/web/navigation-sidebar/community-list-item.react.js b/web/navigation-sidebar/community-list-item.react.js --- a/web/navigation-sidebar/community-list-item.react.js +++ b/web/navigation-sidebar/community-list-item.react.js @@ -10,8 +10,8 @@ import ThreadAvatar from '../avatars/thread-avatar.react.js'; import UnreadBadge from '../components/unread-badge.react.js'; import { useSelector } from '../redux/redux-utils.js'; -import { useLabelTooltip } from '../utils/tooltip-action-utils.js'; -import { tooltipPositions } from '../utils/tooltip-utils.js'; +import { useLabelTooltip } from '../tooltips/tooltip-action-utils.js'; +import { tooltipPositions } from '../tooltips/tooltip-utils.js'; type Props = { +threadInfo: ResolvedThreadInfo, diff --git a/web/navigation-sidebar/navigation-sidebar-constants.js b/web/navigation-sidebar/navigation-sidebar-constants.js --- a/web/navigation-sidebar/navigation-sidebar-constants.js +++ b/web/navigation-sidebar/navigation-sidebar-constants.js @@ -1,11 +1,3 @@ // @flow export const navigationSidebarLabelTooltipMargin = 24; - -export const labelTooltipStyle = { - paddingTop: 8, - paddingBottom: 8, - paddingLeft: 8, - paddingRight: 8, - height: 17, -}; diff --git a/web/navigation-sidebar/navigation-sidebar-home-button.react.js b/web/navigation-sidebar/navigation-sidebar-home-button.react.js --- a/web/navigation-sidebar/navigation-sidebar-home-button.react.js +++ b/web/navigation-sidebar/navigation-sidebar-home-button.react.js @@ -9,8 +9,8 @@ import css from './navigation-sidebar-home-button.css'; import UnreadBadge from '../components/unread-badge.react.js'; import { useSelector } from '../redux/redux-utils.js'; -import { useLabelTooltip } from '../utils/tooltip-action-utils.js'; -import { tooltipPositions } from '../utils/tooltip-utils.js'; +import { useLabelTooltip } from '../tooltips/tooltip-action-utils.js'; +import { tooltipPositions } from '../tooltips/tooltip-utils.js'; function NavigationSidebarHomeButton(): React.Node { const unreadCountValue = useSelector(unreadCount); diff --git a/web/navigation-sidebar/label-toolitp.react.js b/web/tooltips/label-toolitp.react.js rename from web/navigation-sidebar/label-toolitp.react.js rename to web/tooltips/label-toolitp.react.js --- a/web/navigation-sidebar/label-toolitp.react.js +++ b/web/tooltips/label-toolitp.react.js @@ -4,11 +4,8 @@ import * as React from 'react'; import css from './label-tooltip.css'; -import { labelTooltipStyle } from './navigation-sidebar-constants.js'; -import { - tooltipPositions, - type TooltipPosition, -} from '../utils/tooltip-utils.js'; +import { labelTooltipStyle } from './tooltip-constants.js'; +import { tooltipPositions, type TooltipPosition } from './tooltip-utils.js'; type Props = { +tooltipLabel: string, diff --git a/web/navigation-sidebar/label-tooltip.css b/web/tooltips/label-tooltip.css rename from web/navigation-sidebar/label-tooltip.css rename to web/tooltips/label-tooltip.css diff --git a/web/chat/message-tooltip.css b/web/tooltips/message-tooltip.css rename from web/chat/message-tooltip.css rename to web/tooltips/message-tooltip.css diff --git a/web/chat/message-tooltip.react.js b/web/tooltips/message-tooltip.react.js rename from web/chat/message-tooltip.react.js rename to web/tooltips/message-tooltip.react.js --- a/web/chat/message-tooltip.react.js +++ b/web/tooltips/message-tooltip.react.js @@ -9,22 +9,22 @@ import { useNextLocalID } from 'lib/shared/message-utils.js'; import type { ThreadInfo } from 'lib/types/thread-types.js'; +import css from './message-tooltip.css'; import { tooltipButtonStyle, tooltipLabelStyle, tooltipStyle, -} from './chat-constants.js'; -import css from './message-tooltip.css'; -import { - useSendReaction, - getEmojiKeyboardPosition, -} from './reaction-message-utils.js'; +} from './tooltip-constants.js'; import { useTooltipContext } from './tooltip-provider.js'; import type { MessageTooltipAction, TooltipSize, TooltipPositionStyle, -} from '../utils/tooltip-utils.js'; +} from './tooltip-utils.js'; +import { + useSendReaction, + getEmojiKeyboardPosition, +} from '../chat/reaction-message-utils.js'; type MessageTooltipProps = { +actions: $ReadOnlyArray, diff --git a/web/chat/reaction-tooltip.css b/web/tooltips/reaction-tooltip.css rename from web/chat/reaction-tooltip.css rename to web/tooltips/reaction-tooltip.css diff --git a/web/chat/reaction-tooltip.react.js b/web/tooltips/reaction-tooltip.react.js rename from web/chat/reaction-tooltip.react.js rename to web/tooltips/reaction-tooltip.react.js --- a/web/chat/reaction-tooltip.react.js +++ b/web/tooltips/reaction-tooltip.react.js @@ -5,13 +5,13 @@ import { useModalContext } from 'lib/components/modal-provider.react.js'; import type { ReactionInfo } from 'lib/selectors/chat-selectors'; +import css from './reaction-tooltip.css'; import { tooltipLabelStyle, reactionTooltipStyle, reactionSeeMoreLabel, reactionSeeMoreLabelStyle, -} from './chat-constants.js'; -import css from './reaction-tooltip.css'; +} from './tooltip-constants.js'; import MessageReactionsModal from '../modals/chat/message-reactions-modal.react.js'; type Props = { diff --git a/web/utils/tooltip-action-utils.js b/web/tooltips/tooltip-action-utils.js rename from web/utils/tooltip-action-utils.js rename to web/tooltips/tooltip-action-utils.js --- a/web/utils/tooltip-action-utils.js +++ b/web/tooltips/tooltip-action-utils.js @@ -22,6 +22,10 @@ import { longAbsoluteDate } from 'lib/utils/date-utils.js'; import { canToggleMessagePin } from 'lib/utils/toggle-pin-utils.js'; +import LabelTooltip from './label-toolitp.react.js'; +import MessageTooltip from './message-tooltip.react.js'; +import ReactionTooltip from './reaction-tooltip.react.js'; +import { useTooltipContext } from './tooltip-provider.js'; import { type MessageTooltipAction, getTooltipPositionStyle, @@ -34,14 +38,10 @@ } from './tooltip-utils.js'; import { getComposedMessageID } from '../chat/chat-constants.js'; import { useEditModalContext } from '../chat/edit-message-provider.js'; -import MessageTooltip from '../chat/message-tooltip.react.js'; import type { PositionInfo } from '../chat/position-types.js'; -import ReactionTooltip from '../chat/reaction-tooltip.react.js'; -import { useTooltipContext } from '../chat/tooltip-provider.js'; import CommIcon from '../CommIcon.react.js'; import { InputStateContext } from '../input/input-state.js'; import TogglePinModal from '../modals/chat/toggle-pin-modal.react.js'; -import LabelTooltip from '../navigation-sidebar/label-toolitp.react.js'; import { useOnClickPendingSidebar, useOnClickThread, diff --git a/web/tooltips/tooltip-constants.js b/web/tooltips/tooltip-constants.js new file mode 100644 --- /dev/null +++ b/web/tooltips/tooltip-constants.js @@ -0,0 +1,43 @@ +// @flow + +export const tooltipStyle = { + paddingLeft: 5, + paddingRight: 5, + rowGap: 3, +}; + +export const tooltipLabelStyle = { + padding: 6, + height: 20, +}; + +export const tooltipButtonStyle = { + paddingLeft: 6, + paddingRight: 6, + width: 30, + height: 38, +}; + +export const reactionTooltipStyle = { + paddingTop: 8, + paddingBottom: 8, + paddingLeft: 12, + paddingRight: 12, + rowGap: 4, + maxWidth: 136, + maxHeight: 162, +}; + +export const reactionSeeMoreLabel = 'See more'; + +export const reactionSeeMoreLabelStyle = { + height: 18, +}; + +export const labelTooltipStyle = { + paddingTop: 8, + paddingBottom: 8, + paddingLeft: 8, + paddingRight: 8, + height: 17, +}; diff --git a/web/chat/tooltip-provider.js b/web/tooltips/tooltip-provider.js rename from web/chat/tooltip-provider.js rename to web/tooltips/tooltip-provider.js --- a/web/chat/tooltip-provider.js +++ b/web/tooltips/tooltip-provider.js @@ -6,8 +6,8 @@ import type { SetState } from 'lib/types/hook-types.js'; +import type { TooltipPositionStyle } from './tooltip-utils.js'; import css from './tooltip.css'; -import type { TooltipPositionStyle } from '../utils/tooltip-utils.js'; const onMouseLeaveSourceDisappearTimeoutMs = 200; const onMouseLeaveTooltipDisappearTimeoutMs = 100; diff --git a/web/utils/tooltip-utils.js b/web/tooltips/tooltip-utils.js rename from web/utils/tooltip-utils.js rename to web/tooltips/tooltip-utils.js --- a/web/utils/tooltip-utils.js +++ b/web/tooltips/tooltip-utils.js @@ -3,17 +3,17 @@ import invariant from 'invariant'; import * as React from 'react'; -import { getAppContainerPositionInfo } from './window-utils.js'; import { + labelTooltipStyle, tooltipButtonStyle, tooltipLabelStyle, tooltipStyle, reactionTooltipStyle, reactionSeeMoreLabel, -} from '../chat/chat-constants.js'; +} from './tooltip-constants.js'; import type { PositionInfo } from '../chat/position-types.js'; -import { labelTooltipStyle } from '../navigation-sidebar/navigation-sidebar-constants.js'; import { calculateMaxTextWidth } from '../utils/text-utils.js'; +import { getAppContainerPositionInfo } from '../utils/window-utils.js'; export const tooltipPositions = Object.freeze({ LEFT: 'left', diff --git a/web/utils/tooltip-utils.test.js b/web/tooltips/tooltip-utils.test.js rename from web/utils/tooltip-utils.test.js rename to web/tooltips/tooltip-utils.test.js diff --git a/web/chat/tooltip.css b/web/tooltips/tooltip.css rename from web/chat/tooltip.css rename to web/tooltips/tooltip.css