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,7 +8,7 @@ import css from './account-settings-button.css'; import { navigationSidebarLabelTooltipMargin } from './navigation-sidebar-constants.js'; import { updateNavInfoActionType } from '../redux/action-types.js'; -import { useNavigationSidebarTooltip } from '../utils/tooltip-action-utils.js'; +import { useLabelTooltip } from '../utils/tooltip-action-utils.js'; import { tooltipPositions } from '../utils/tooltip-utils.js'; function AccountSettingsButton(): React.Node { @@ -26,7 +26,7 @@ [dispatch], ); - const { onMouseEnter, onMouseLeave } = useNavigationSidebarTooltip({ + const { onMouseEnter, onMouseLeave } = useLabelTooltip({ tooltipLabel: 'Settings', position: tooltipPositions.RIGHT, tooltipMargin: navigationSidebarLabelTooltipMargin, 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,7 +8,7 @@ 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 { useNavigationSidebarTooltip } from '../utils/tooltip-action-utils.js'; +import { useLabelTooltip } from '../utils/tooltip-action-utils.js'; import { tooltipPositions } from '../utils/tooltip-utils.js'; function CommunityCreationButton(): React.Node { @@ -19,7 +19,7 @@ [pushModal], ); - const { onMouseEnter, onMouseLeave } = useNavigationSidebarTooltip({ + const { onMouseEnter, onMouseLeave } = useLabelTooltip({ tooltipLabel: 'Create community', position: tooltipPositions.RIGHT, tooltipMargin: navigationSidebarLabelTooltipMargin, 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,7 +10,7 @@ import ThreadAvatar from '../avatars/thread-avatar.react.js'; import UnreadBadge from '../components/unread-badge.react.js'; import { useSelector } from '../redux/redux-utils.js'; -import { useNavigationSidebarTooltip } from '../utils/tooltip-action-utils.js'; +import { useLabelTooltip } from '../utils/tooltip-action-utils.js'; import { tooltipPositions } from '../utils/tooltip-utils.js'; type Props = { @@ -36,7 +36,7 @@ ); }, [unreadCountValue]); - const { onMouseEnter, onMouseLeave } = useNavigationSidebarTooltip({ + const { onMouseEnter, onMouseLeave } = useLabelTooltip({ tooltipLabel: threadInfo.uiName, position: tooltipPositions.RIGHT, tooltipMargin: navigationSidebarLabelTooltipMargin, diff --git a/web/navigation-sidebar/navigation-sidebar-toolitp.react.js b/web/navigation-sidebar/label-toolitp.react.js rename from web/navigation-sidebar/navigation-sidebar-toolitp.react.js rename to web/navigation-sidebar/label-toolitp.react.js --- a/web/navigation-sidebar/navigation-sidebar-toolitp.react.js +++ b/web/navigation-sidebar/label-toolitp.react.js @@ -3,8 +3,8 @@ import classNames from 'classnames'; import * as React from 'react'; -import { navigationSidebarTooltipStyle } from './navigation-sidebar-constants.js'; -import css from './navigation-sidebar-tooltip.css'; +import css from './label-tooltip.css'; +import { labelTooltipStyle } from './navigation-sidebar-constants.js'; import { tooltipPositions, type TooltipPosition, @@ -16,7 +16,7 @@ +tooltipMargin: number, }; -function NavigationSidebarTooltip(props: Props): React.Node { +function LabelTooltip(props: Props): React.Node { const { tooltipLabel, position, tooltipMargin } = props; const tooltipMarginStyle = React.useMemo(() => { @@ -53,11 +53,11 @@ return (
-
+
{tooltipLabel}
); } -export default NavigationSidebarTooltip; +export default LabelTooltip; diff --git a/web/navigation-sidebar/navigation-sidebar-tooltip.css b/web/navigation-sidebar/label-tooltip.css rename from web/navigation-sidebar/navigation-sidebar-tooltip.css rename to web/navigation-sidebar/label-tooltip.css 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 @@ -2,7 +2,7 @@ export const navigationSidebarLabelTooltipMargin = 24; -export const navigationSidebarTooltipStyle = { +export const labelTooltipStyle = { paddingTop: 8, paddingBottom: 8, paddingLeft: 8, 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,13 +9,13 @@ import css from './navigation-sidebar-home-button.css'; import UnreadBadge from '../components/unread-badge.react.js'; import { useSelector } from '../redux/redux-utils.js'; -import { useNavigationSidebarTooltip } from '../utils/tooltip-action-utils.js'; +import { useLabelTooltip } from '../utils/tooltip-action-utils.js'; import { tooltipPositions } from '../utils/tooltip-utils.js'; function NavigationSidebarHomeButton(): React.Node { const unreadCountValue = useSelector(unreadCount); - const { onMouseEnter, onMouseLeave } = useNavigationSidebarTooltip({ + const { onMouseEnter, onMouseLeave } = useLabelTooltip({ tooltipLabel: 'Home', position: tooltipPositions.RIGHT, tooltipMargin: navigationSidebarLabelTooltipMargin, diff --git a/web/utils/tooltip-action-utils.js b/web/utils/tooltip-action-utils.js --- a/web/utils/tooltip-action-utils.js +++ b/web/utils/tooltip-action-utils.js @@ -27,7 +27,7 @@ getTooltipPositionStyle, calculateMessageTooltipSize, calculateReactionTooltipSize, - calculateNavigationSidebarTooltipSize, + calculateLabelTooltipSize, type TooltipPosition, type TooltipPositionStyle, type TooltipSize, @@ -41,7 +41,7 @@ import CommIcon from '../CommIcon.react.js'; import { InputStateContext } from '../input/input-state.js'; import TogglePinModal from '../modals/chat/toggle-pin-modal.react.js'; -import NavigationSidebarTooltip from '../navigation-sidebar/navigation-sidebar-toolitp.react.js'; +import LabelTooltip from '../navigation-sidebar/label-toolitp.react.js'; import { useOnClickPendingSidebar, useOnClickThread, @@ -479,7 +479,7 @@ }; } -type UseNavigationSidebarTooltipArgs = { +type UseLabelTooltipArgs = { +tooltipLabel: string, +position: TooltipPosition, // The margin size should be between the point of origin and @@ -488,26 +488,22 @@ +tooltipMargin: number, }; -function useNavigationSidebarTooltip({ +function useLabelTooltip({ tooltipLabel, position, tooltipMargin, -}: UseNavigationSidebarTooltipArgs): UseTooltipResult { +}: UseLabelTooltipArgs): UseTooltipResult { const tooltipSize = React.useMemo(() => { if (typeof document === 'undefined') { return undefinedTooltipSize; } - return calculateNavigationSidebarTooltipSize( - tooltipLabel, - position, - tooltipMargin, - ); + return calculateLabelTooltipSize(tooltipLabel, position, tooltipMargin); }, [position, tooltipLabel, tooltipMargin]); - const createNavigationSidebarTooltip = React.useCallback( + const createLabelTooltip = React.useCallback( () => ( -