Page Menu
Home
Phabricator
Search
Configure Global Search
Log In
Files
F3506978
D10474.id35041.diff
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Flag For Later
Size
16 KB
Referenced Files
None
Subscribers
None
D10474.id35041.diff
View Options
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<MessageTooltipAction>,
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 labelTooltipStyle = {
+ paddingTop: 8,
+ paddingBottom: 8,
+ paddingLeft: 8,
+ paddingRight: 8,
+ height: 17,
+};
+
+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,
+};
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
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Sat, Dec 21, 6:49 PM (21 h, 12 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2688755
Default Alt Text
D10474.id35041.diff (16 KB)
Attached To
Mode
D10474: [web] cleanup and better organize code for tooltips
Attached
Detach File
Event Timeline
Log In to Comment