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 {
position: fixed;
bottom: 10px;
left: 10px;
bottom: 40px;
left: 50%;
z-index: 2;
padding: 12px;
background-color: rgb(var(--semi-grey-9));
border-radius: var(--semi-border-radius-medium);
opacity: 0.1;
transition: opacity 0.3s ease-in-out;
opacity: 0;
transform: translateX(-50%);
transition: opacity 0.5s ease-in-out;
&:hover {
&.isVisible {
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
.selected {

View File

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