Page MenuHomePhorge
Files F32213751

D10472.1765149450.diff
No OneTemporary
Actions

Size
11 KB
Referenced Files
None
Subscribers
None

D10472.1765149450.diff
View Options

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
@@ -6,8 +6,10 @@
import { useDispatch } from 'lib/utils/redux-utils.js';
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 { tooltipPositions } from '../utils/tooltip-utils.js';
function AccountSettingsButton(): React.Node {
const dispatch = useDispatch();
@@ -26,6 +28,8 @@
const { onMouseEnter, onMouseLeave } = useNavigationSidebarTooltip({
tooltipLabel: 'Settings',
+ position: tooltipPositions.RIGHT,
+ tooltipMargin: navigationSidebarLabelTooltipMargin,
});
return (
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
@@ -6,8 +6,10 @@
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
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 { tooltipPositions } from '../utils/tooltip-utils.js';
function CommunityCreationButton(): React.Node {
const { pushModal } = useModalContext();
@@ -19,6 +21,8 @@
const { onMouseEnter, onMouseLeave } = useNavigationSidebarTooltip({
tooltipLabel: 'Create community',
+ position: tooltipPositions.RIGHT,
+ tooltipMargin: navigationSidebarLabelTooltipMargin,
});
return (
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
@@ -6,10 +6,12 @@
import type { ResolvedThreadInfo } from 'lib/types/thread-types.js';
import css from './community-list-item.css';
+import { navigationSidebarLabelTooltipMargin } from './navigation-sidebar-constants.js';
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 { tooltipPositions } from '../utils/tooltip-utils.js';
type Props = {
+threadInfo: ResolvedThreadInfo,
@@ -36,6 +38,8 @@
const { onMouseEnter, onMouseLeave } = useNavigationSidebarTooltip({
tooltipLabel: threadInfo.uiName,
+ position: tooltipPositions.RIGHT,
+ tooltipMargin: navigationSidebarLabelTooltipMargin,
});
return (
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,8 +1,6 @@
// @flow
-export const navigationSidebarTooltipContainerStyle = {
- marginLeft: 24,
-};
+export const navigationSidebarLabelTooltipMargin = 24;
export const navigationSidebarTooltipStyle = {
paddingTop: 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
@@ -5,16 +5,20 @@
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import { unreadCount } from 'lib/selectors/thread-selectors.js';
+import { navigationSidebarLabelTooltipMargin } from './navigation-sidebar-constants.js';
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 { tooltipPositions } from '../utils/tooltip-utils.js';
function NavigationSidebarHomeButton(): React.Node {
const unreadCountValue = useSelector(unreadCount);
const { onMouseEnter, onMouseLeave } = useNavigationSidebarTooltip({
tooltipLabel: 'Home',
+ position: tooltipPositions.RIGHT,
+ tooltipMargin: navigationSidebarLabelTooltipMargin,
});
const unreadBadge = React.useMemo(() => {
diff --git a/web/navigation-sidebar/navigation-sidebar-toolitp.react.js b/web/navigation-sidebar/navigation-sidebar-toolitp.react.js
--- a/web/navigation-sidebar/navigation-sidebar-toolitp.react.js
+++ b/web/navigation-sidebar/navigation-sidebar-toolitp.react.js
@@ -1,26 +1,44 @@
// @flow
+import classNames from 'classnames';
import * as React from 'react';
-import {
- navigationSidebarTooltipContainerStyle,
- navigationSidebarTooltipStyle,
-} from './navigation-sidebar-constants.js';
+import { navigationSidebarTooltipStyle } from './navigation-sidebar-constants.js';
import css from './navigation-sidebar-tooltip.css';
+import {
+ tooltipPositions,
+ type TooltipPosition,
+} from '../utils/tooltip-utils.js';
type Props = {
+tooltipLabel: string,
+ +position: TooltipPosition,
+ +tooltipMargin: number,
};
function NavigationSidebarTooltip(props: Props): React.Node {
- const { tooltipLabel } = props;
+ const { tooltipLabel, position, tooltipMargin } = props;
+
+ const tooltipMarginStyle = React.useMemo(
+ () => ({
+ marginLeft: position === tooltipPositions.RIGHT ? tooltipMargin : 0,
+ marginRight: position === tooltipPositions.LEFT ? tooltipMargin : 0,
+ marginTop: position === tooltipPositions.BOTTOM ? tooltipMargin : 0,
+ marginBottom: position === tooltipPositions.TOP ? tooltipMargin : 0,
+ }),
+ [position, tooltipMargin],
+ );
+
+ const arrowClassName = classNames(css.arrow, {
+ [css.arrowLeft]: position === tooltipPositions.RIGHT,
+ [css.arrowRight]: position === tooltipPositions.LEFT,
+ [css.arrowTop]: position === tooltipPositions.BOTTOM,
+ [css.arrowBottom]: position === tooltipPositions.TOP,
+ });
return (
- <div
- className={css.container}
- style={navigationSidebarTooltipContainerStyle}
- >
- <div className={css.arrowLeft} />
+ <div className={css.container} style={tooltipMarginStyle}>
+ <div className={arrowClassName} />
<div className={css.tooltipLabel} style={navigationSidebarTooltipStyle}>
{tooltipLabel}
</div>
diff --git a/web/navigation-sidebar/navigation-sidebar-tooltip.css b/web/navigation-sidebar/navigation-sidebar-tooltip.css
--- a/web/navigation-sidebar/navigation-sidebar-tooltip.css
+++ b/web/navigation-sidebar/navigation-sidebar-tooltip.css
@@ -2,18 +2,48 @@
position: relative;
}
-.arrowLeft {
+.arrow {
position: absolute;
- top: 50%;
- transform: translateY(-50%);
- right: 100%;
width: 0;
height: 0;
+}
+
+.arrowLeft,
+.arrowRight {
+ top: 50%;
+ transform: translateY(-50%);
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
+}
+
+.arrowTop,
+.arrowBottom {
+ left: 50%;
+ transform: translateX(-50%);
+ border-left: 10px solid transparent;
+ border-right: 10px solid transparent;
+}
+
+.arrowLeft {
+ right: 100%;
border-right: 10px solid var(--tooltip-background-primary-default);
}
+.arrowRight {
+ left: 100%;
+ border-left: 10px solid var(--tooltip-background-primary-default);
+}
+
+.arrowTop {
+ bottom: 100%;
+ border-bottom: 10px solid var(--tooltip-background-primary-default);
+}
+
+.arrowBottom {
+ top: 100%;
+ border-top: 10px solid var(--tooltip-background-primary-default);
+}
+
.tooltipLabel {
border-radius: 4px;
background-color: var(--tooltip-background-primary-default);
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
@@ -32,7 +32,6 @@
type TooltipPositionStyle,
type TooltipSize,
} from './tooltip-utils.js';
-import { tooltipPositions } 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';
@@ -480,32 +479,47 @@
};
}
-const availableNavigationSidebarTooltipPositions = [tooltipPositions.RIGHT];
-
type UseNavigationSidebarTooltipArgs = {
+tooltipLabel: string,
+ +position: TooltipPosition,
+ // The margin size should be between the point of origin and
+ // the base of the tooltip. The arrow is a "decoration" and
+ // should not be considered when measuring the margin size.
+ +tooltipMargin: number,
};
function useNavigationSidebarTooltip({
tooltipLabel,
+ position,
+ tooltipMargin,
}: UseNavigationSidebarTooltipArgs): UseTooltipResult {
const tooltipSize = React.useMemo(() => {
if (typeof document === 'undefined') {
return undefinedTooltipSize;
}
- return calculateNavigationSidebarTooltipSize(tooltipLabel);
- }, [tooltipLabel]);
+ return calculateNavigationSidebarTooltipSize(
+ tooltipLabel,
+ position,
+ tooltipMargin,
+ );
+ }, [position, tooltipLabel, tooltipMargin]);
const createNavigationSidebarTooltip = React.useCallback(
- () => <NavigationSidebarTooltip tooltipLabel={tooltipLabel} />,
- [tooltipLabel],
+ () => (
+ <NavigationSidebarTooltip
+ tooltipLabel={tooltipLabel}
+ position={position}
+ tooltipMargin={tooltipMargin}
+ />
+ ),
+ [position, tooltipLabel, tooltipMargin],
);
const { onMouseEnter, onMouseLeave } = useTooltip({
createTooltip: createNavigationSidebarTooltip,
tooltipSize,
- availablePositions: availableNavigationSidebarTooltipPositions,
+ availablePositions: [position],
});
return {
diff --git a/web/utils/tooltip-utils.js b/web/utils/tooltip-utils.js
--- a/web/utils/tooltip-utils.js
+++ b/web/utils/tooltip-utils.js
@@ -12,10 +12,7 @@
reactionSeeMoreLabel,
} from '../chat/chat-constants.js';
import type { PositionInfo } from '../chat/position-types.js';
-import {
- navigationSidebarTooltipContainerStyle,
- navigationSidebarTooltipStyle,
-} from '../navigation-sidebar/navigation-sidebar-constants.js';
+import { navigationSidebarTooltipStyle } from '../navigation-sidebar/navigation-sidebar-constants.js';
import { calculateMaxTextWidth } from '../utils/text-utils.js';
export const tooltipPositions = Object.freeze({
@@ -413,8 +410,9 @@
function calculateNavigationSidebarTooltipSize(
tooltipLabel: string,
+ position: TooltipPosition,
+ tooltipMargin: number,
): TooltipSize {
- const { marginLeft } = navigationSidebarTooltipContainerStyle;
const {
paddingLeft,
paddingRight,
@@ -425,8 +423,17 @@
const tooltipLabelTextWidth = calculateMaxTextWidth([tooltipLabel], 14);
- const width = marginLeft + paddingLeft + tooltipLabelTextWidth + paddingRight;
- const height = paddingTop + contentHeight + paddingBottom;
+ const marginIsHorizontal =
+ position === tooltipPositions.RIGHT || position === tooltipPositions.LEFT;
+ const marginIsVertical =
+ position === tooltipPositions.TOP || position === tooltipPositions.BOTTOM;
+
+ const horizontalMargin = marginIsHorizontal ? tooltipMargin : 0;
+ const verticalMargin = marginIsVertical ? tooltipMargin : 0;
+
+ const width =
+ paddingLeft + tooltipLabelTextWidth + paddingRight + horizontalMargin;
+ const height = paddingTop + contentHeight + paddingBottom + verticalMargin;
return {
width,

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 7, 11:17 PM (4 h, 50 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5843655
Default Alt Text
D10472.1765149450.diff (11 KB)

Event Timeline