improved "doubleclick to maximize"

* no longer selecting text
* no longer reacting to doubleclick on toolbar buttons
development
Michael Ochmann 1 year ago
parent cc51075190
commit 87e2bf0b2f
  1. 2
      src/ui/src/components/Ation.js
  2. 25
      src/ui/src/components/Toolbar.js

@ -44,7 +44,7 @@ const Ation = () => {
});
(async set => set(await window.api.appVersion()))(setVersion);
//(async setFont => setFont(await window.appSettings.get("font", "Iosevka")))(setFont);
}, [basePath, slide]);
const openFile = () => {

@ -1,4 +1,4 @@
import React, {useContext} from "react";
import React, {useContext, useEffect, useRef} from "react";
import {Folder2Open, Cast, InfoCircle, XSquare, LayoutSplit} from "react-bootstrap-icons";
@ -8,6 +8,7 @@ import Mode from "../models/Mode";
import {ReactComponent as Logo} from "../assets/images/logo_ation.svg";
const Toolbar = ({openFile, setShowTips, version, toggleEdit}) => {
const toolbar = useRef();
const {setMode, setSlide, slideCount} = useContext(SlideContext);
const present = () => {
@ -16,12 +17,30 @@ const Toolbar = ({openFile, setShowTips, version, toggleEdit}) => {
document.documentElement.requestFullscreen();
};
const toggleMaximize = () => {
const toggleMaximize = event => {
if (event.target !== toolbar.current)
return;
window.api.maximize();
event.stopPropagation();
};
// prevent text selection on doubleclick
useEffect(() => {
const tBar = toolbar.current;
const doubleClickListener = event => {
if (event.detail > 1)
event.preventDefault();
};
tBar?.addEventListener("mousedown", doubleClickListener);
return () => {
tBar?.removeEventListener("mousedown", doubleClickListener);
};
}, [toolbar]);
return (
<nav className="toolbar" onDoubleClick={toggleMaximize}>
<nav className="toolbar" onDoubleClick={toggleMaximize} ref={toolbar}>
<button onClick={openFile} title="Open file [⌘+O]"><Folder2Open /></button>
<button onClick={present} title="Start presentation [F5]"><Cast /></button>
<Logo />

Loading…
Cancel
Save