client: auto hide controll after 2000ms if there is not user interaction

This commit is contained in:
fantasticit 2022-08-15 19:42:52 +08:00
parent b92f7b4ffe
commit 26bd9a06e0
2 changed files with 26 additions and 9 deletions

View File

@ -91,18 +91,18 @@
.fullScreenToolbar { .fullScreenToolbar {
position: fixed; position: fixed;
bottom: 10px; bottom: 40px;
left: 10px; left: 50%;
z-index: 2; z-index: 2;
padding: 12px; padding: 12px;
background-color: rgb(var(--semi-grey-9)); background-color: rgb(var(--semi-grey-9));
border-radius: var(--semi-border-radius-medium); border-radius: var(--semi-border-radius-medium);
opacity: 0.1; opacity: 0;
transition: opacity 0.3s ease-in-out; transform: translateX(-50%);
transition: opacity 0.5s ease-in-out;
&:hover { &.isVisible {
opacity: 1; opacity: 1;
transition: opacity 0.3s ease-in-out;
} }
.selected { .selected {

View File

@ -7,14 +7,19 @@ import { IconPencil } from 'components/icons/IconPencil';
import { safeJSONParse } from 'helpers/json'; import { safeJSONParse } from 'helpers/json';
import { useDrawingCursor } from 'hooks/use-cursor'; import { useDrawingCursor } from 'hooks/use-cursor';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import React, { useCallback, useEffect, useState } from 'react'; import React, { useCallback, useEffect, useRef, useState } from 'react';
import { FullScreen, useFullScreenHandle } from 'react-full-screen'; import { FullScreen, useFullScreenHandle } from 'react-full-screen';
import { CollaborationKit, Document } from 'tiptap/editor'; import { CollaborationKit, Document } from 'tiptap/editor';
import styles from './index.module.scss'; import styles from './index.module.scss';
const { Title } = Typography;
// 控制器 // 控制器
const FullscreenController = ({ handle: fullscreenHandler, isDrawing, toggleDrawing }) => { const FullscreenController = ({ handle: fullscreenHandler, isDrawing, toggleDrawing }) => {
const timerRef = useRef<ReturnType<typeof setTimeout>>(null);
const [visible, toggleVisible] = useState(true);
const startDrawing = useCallback(() => { const startDrawing = useCallback(() => {
toggleDrawing(!isDrawing); toggleDrawing(!isDrawing);
}, [isDrawing, toggleDrawing]); }, [isDrawing, toggleDrawing]);
@ -24,8 +29,21 @@ const FullscreenController = ({ handle: fullscreenHandler, isDrawing, toggleDraw
toggleDrawing(false); toggleDrawing(false);
}, [fullscreenHandler, toggleDrawing]); }, [fullscreenHandler, toggleDrawing]);
useEffect(() => {
timerRef.current = setTimeout(() => {
toggleVisible(false);
}, 2000);
}, [toggleVisible]);
return ( return (
<div className={styles.fullScreenToolbar}> <div
className={cls(styles.fullScreenToolbar, visible && styles.isVisible)}
onMouseEnter={() => {
clearTimeout(timerRef.current);
toggleVisible(true);
}}
onMouseLeave={() => toggleVisible(false)}
>
<Space> <Space>
<button type="button" className={cls(styles.customButton, isDrawing && styles.selected)} onClick={startDrawing}> <button type="button" className={cls(styles.customButton, isDrawing && styles.selected)} onClick={startDrawing}>
<IconPencil /> <IconPencil />
@ -86,7 +104,6 @@ export const DocumentFullscreen: React.FC<IProps> = ({ data }) => {
editor.commands.setContent(docJSON); editor.commands.setContent(docJSON);
}, [editor, data, visible]); }, [editor, data, visible]);
const { Title } = Typography;
return ( return (
<Tooltip content="演示文档" position="bottom"> <Tooltip content="演示文档" position="bottom">
<Button <Button