Skip to content

Commit

Permalink
feat(core): add tooltips to sidebar resize handle (#8717)
Browse files Browse the repository at this point in the history
  • Loading branch information
JimmFly committed Nov 6, 2024
1 parent 584d095 commit 59264b9
Show file tree
Hide file tree
Showing 7 changed files with 89 additions and 32 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import clsx from 'clsx';
import { forwardRef, useCallback, useLayoutEffect, useRef } from 'react';
import { useTransition } from 'react-transition-state';

import { Tooltip, type TooltipProps } from '../../ui/tooltip';
import * as styles from './resize-panel.css';

export interface ResizeHandleProps
Expand All @@ -17,6 +18,10 @@ export interface ResizeHandleProps
onOpen: (open: boolean) => void;
onResizing: (resizing: boolean) => void;
onWidthChange: (width: number) => void;
tooltip?: TooltipProps['content'];
tooltipShortcut?: TooltipProps['shortcut'];
tooltipOptions?: Partial<Omit<TooltipProps, 'content' | 'shortcut'>>;
tooltipShortcutClassName?: string;
}

export interface ResizePanelProps
Expand All @@ -29,6 +34,12 @@ export interface ResizePanelProps
resizeHandlePos: 'left' | 'right';
resizeHandleOffset?: number;
resizeHandleVerticalPadding?: number;
resizeHandleTooltip?: TooltipProps['content'];
resizeHandleTooltipShortcut?: TooltipProps['shortcut'];
resizeHandleTooltipShortcutClassName?: string;
resizeHandleTooltipOptions?: Partial<
Omit<TooltipProps, 'content' | 'shortcut'>
>;
enableAnimation?: boolean;
width: number;
unmountOnExit?: boolean;
Expand All @@ -49,6 +60,10 @@ const ResizeHandle = ({
onOpen,
onResizing,
onWidthChange,
tooltip,
tooltipShortcut,
tooltipOptions,
tooltipShortcutClassName,
...rest
}: ResizeHandleProps) => {
const ref = useRef<HTMLDivElement>(null);
Expand Down Expand Up @@ -101,24 +116,31 @@ const ResizeHandle = ({
);

return (
<div
{...rest}
data-testid="resize-handle"
ref={ref}
style={assignInlineVars({
[styles.resizeHandleOffsetVar]: `${resizeHandleOffset ?? 0}px`,
[styles.resizeHandleVerticalPadding]: `${
resizeHandleVerticalPadding ?? 0
}px`,
})}
className={clsx(styles.resizeHandleContainer, className)}
data-handle-position={resizeHandlePos}
data-resizing={resizing}
data-open={open}
onMouseDown={onResizeStart}
<Tooltip
content={tooltip}
shortcut={tooltipShortcut}
shortcutClassName={tooltipShortcutClassName}
{...tooltipOptions}
>
<div className={styles.resizerInner} />
</div>
<div
{...rest}
data-testid="resize-handle"
ref={ref}
style={assignInlineVars({
[styles.resizeHandleOffsetVar]: `${resizeHandleOffset ?? 0}px`,
[styles.resizeHandleVerticalPadding]: `${
resizeHandleVerticalPadding ?? 0
}px`,
})}
className={clsx(styles.resizeHandleContainer, className)}
data-handle-position={resizeHandlePos}
data-resizing={resizing}
data-open={open}
onMouseDown={onResizeStart}
>
<div className={styles.resizerInner} />
</div>
</Tooltip>
);
};

Expand All @@ -143,6 +165,10 @@ export const ResizePanel = forwardRef<HTMLDivElement, ResizePanelProps>(
resizeHandlePos,
resizeHandleOffset,
resizeHandleVerticalPadding,
resizeHandleTooltip,
resizeHandleTooltipShortcut,
resizeHandleTooltipShortcutClassName,
resizeHandleTooltipOptions,
...rest
},
ref
Expand Down Expand Up @@ -176,6 +202,10 @@ export const ResizePanel = forwardRef<HTMLDivElement, ResizePanelProps>(
resizeHandlePos={resizeHandlePos}
resizeHandleOffset={resizeHandleOffset}
resizeHandleVerticalPadding={resizeHandleVerticalPadding}
tooltip={resizeHandleTooltip}
tooltipOptions={resizeHandleTooltipOptions}
tooltipShortcut={resizeHandleTooltipShortcut}
tooltipShortcutClassName={resizeHandleTooltipShortcutClassName}
maxWidth={maxWidth}
minWidth={minWidth}
onOpen={onOpen}
Expand Down
17 changes: 14 additions & 3 deletions packages/frontend/component/src/ui/tooltip/tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,22 @@ export interface TooltipProps {
rootOptions?: Omit<RootProps, 'children'>;
portalOptions?: TooltipPortalProps;
options?: Omit<TooltipContentProps, 'side' | 'align'>;
shortcutClassName?: string;
}

const TooltipShortcut = ({ shortcut }: { shortcut: string | string[] }) => {
const TooltipShortcut = ({
shortcut,
className,
}: {
shortcut: string | string[];
className?: string;
}) => {
const commands = (Array.isArray(shortcut) ? shortcut : [shortcut])
.map(cmd => cmd.trim())
.map(cmd => getCommand(cmd));

return (
<div className={styles.shortcut}>
<div className={clsx(styles.shortcut, className)}>
{commands.map((cmd, index) => (
<div
key={`${index}-${cmd}`}
Expand All @@ -71,6 +78,7 @@ export const Tooltip = ({
options,
rootOptions,
portalOptions,
shortcutClassName,
}: TooltipProps) => {
if (!content) {
return children;
Expand All @@ -94,7 +102,10 @@ export const Tooltip = ({
{shortcut ? (
<div className={styles.withShortcut}>
<div className={styles.withShortcutContent}>{content}</div>
<TooltipShortcut shortcut={shortcut} />
<TooltipShortcut
shortcut={shortcut}
className={shortcutClassName}
/>
</div>
) : (
content
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -105,3 +105,8 @@ export const sidebarFloatMaskStyle = style({
},
},
});

export const resizeHandleShortcutStyle = style({
alignItems: 'flex-end',
marginBottom: '2px',
});
19 changes: 19 additions & 0 deletions packages/frontend/core/src/modules/app-sidebar/views/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { ResizePanel } from '@affine/component/resize-panel';
import { useAppSettingHelper } from '@affine/core/components/hooks/affine/use-app-setting-helper';
import { NavigateContext } from '@affine/core/components/hooks/use-navigate-helper';
import { WorkspaceNavigator } from '@affine/core/components/workspace-selector';
import { useI18n } from '@affine/i18n';
import {
useLiveData,
useService,
Expand All @@ -23,6 +24,7 @@ import {
navHeaderStyle,
navStyle,
navWrapperStyle,
resizeHandleShortcutStyle,
sidebarFloatMaskStyle,
} from './index.css';
import { SidebarHeader } from './sidebar-header';
Expand Down Expand Up @@ -170,6 +172,13 @@ export function AppSidebar({ children }: PropsWithChildren) {
})}
resizeHandleOffset={0}
resizeHandleVerticalPadding={clientBorder ? 16 : 0}
resizeHandleTooltip={<ResizeHandleTooltipContent />}
resizeHandleTooltipOptions={{
side: 'right',
align: 'center',
}}
resizeHandleTooltipShortcut={['$mod', '/']}
resizeHandleTooltipShortcutClassName={resizeHandleShortcutStyle}
data-transparent
data-open={sidebarState !== 'close'}
data-has-border={hasRightBorder}
Expand Down Expand Up @@ -198,6 +207,16 @@ export function AppSidebar({ children }: PropsWithChildren) {
);
}

const ResizeHandleTooltipContent = () => {
const t = useI18n();
return (
<div>
<div>{t['com.affine.rootAppSidebar.resize-handle.tooltip.drag']()}</div>
<div>{t['com.affine.rootAppSidebar.resize-handle.tooltip.click']()}</div>
</div>
);
};

export function FallbackHeader() {
return (
<div className={styles.fallbackHeader}>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { IconButton } from '@affine/component';
import { useI18n } from '@affine/i18n';
import { track } from '@affine/track';
import { SidebarIcon } from '@blocksuite/icons/rc';
import { useLiveData, useService } from '@toeverything/infra';
Expand Down Expand Up @@ -45,11 +44,6 @@ export const SidebarSwitch = ({
appSidebarService.toggleSidebar();
}, [appSidebarService, open]);

const t = useI18n();
const tooltipContent = open
? t['com.affine.sidebarSwitch.collapse']()
: t['com.affine.sidebarSwitch.expand']();

return (
<div
ref={switchRef}
Expand All @@ -59,12 +53,6 @@ export const SidebarSwitch = ({
onMouseEnter={handleMouseEnter}
>
<IconButton
tooltip={tooltipContent}
tooltipShortcut={['$mod', '/']}
tooltipOptions={{
side: open ? 'bottom' : 'right',
rootOptions: { delayDuration: 700 },
}}
className={className}
size="24"
style={{
Expand Down
2 changes: 2 additions & 0 deletions packages/frontend/i18n/src/resources/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -999,6 +999,8 @@
"com.affine.rootAppSidebar.tags.empty.new-tag-button": "New tag",
"com.affine.rootAppSidebar.tags.new-tag": "New tag",
"com.affine.rootAppSidebar.tags.no-doc": "No docs",
"com.affine.rootAppSidebar.resize-handle.tooltip.drag": "Drag to resize",
"com.affine.rootAppSidebar.resize-handle.tooltip.click": "Click to collapse",
"com.affine.search-tags.placeholder": "Type here ...",
"com.affine.selectPage.empty": "Empty",
"com.affine.selectPage.empty.tips": "No doc titles contain <1>{{search}}</1>",
Expand Down
2 changes: 2 additions & 0 deletions packages/frontend/i18n/src/resources/zh-Hans.json
Original file line number Diff line number Diff line change
Expand Up @@ -977,6 +977,8 @@
"com.affine.rootAppSidebar.tags.empty.new-tag-button": "新建标签",
"com.affine.rootAppSidebar.tags.new-tag": "新建标签",
"com.affine.rootAppSidebar.tags.no-doc": "没有文档",
"com.affine.rootAppSidebar.resize-handle.tooltip.drag": "拖动调整宽度",
"com.affine.rootAppSidebar.resize-handle.tooltip.click": "点击收起侧栏",
"com.affine.search-tags.placeholder": "在这输入...",
"com.affine.selectPage.empty": "选择页面为空",
"com.affine.selectPage.empty.tips": "没有文档标题包含 <1>{{search}}</1>",
Expand Down

0 comments on commit 59264b9

Please sign in to comment.