mirror of https://github.com/fantasticit/think.git
client: auto hide controll after 2000ms if there is not user interaction
This commit is contained in:
parent
b92f7b4ffe
commit
26bd9a06e0
|
@ -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 {
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue