From d3289a078c778b0313f1dc1a9e4deed3f0a9ceb1 Mon Sep 17 00:00:00 2001 From: Neil Enns Date: Fri, 31 May 2024 05:51:54 -0700 Subject: [PATCH 01/10] Add restore button to mini mode Fixes #76 --- src/app/components/MiniModeToggleButton.tsx | 38 +++++++++++++++++++++ src/app/components/mini.tsx | 23 +++++++++++-- src/app/components/navbar.tsx | 13 ++----- src/app/style/app.scss | 17 +++++++++ 4 files changed, 77 insertions(+), 14 deletions(-) create mode 100644 src/app/components/MiniModeToggleButton.tsx diff --git a/src/app/components/MiniModeToggleButton.tsx b/src/app/components/MiniModeToggleButton.tsx new file mode 100644 index 0000000..6d478e7 --- /dev/null +++ b/src/app/components/MiniModeToggleButton.tsx @@ -0,0 +1,38 @@ +import React, { useCallback } from "react"; +import { Fullscreen, FullscreenExit } from "react-bootstrap-icons"; + +interface MiniModeToggleButtonProps { + showRestoreButton: boolean; +} + +const MiniModeToggleButton: React.FC = ({ + showRestoreButton, +}) => { + const toggleMiniMode = useCallback(() => { + window.api.toggleMiniMode().catch((error: unknown) => { + console.error(error); + }); + }, []); + + return ( + + ); +}; + +export default MiniModeToggleButton; diff --git a/src/app/components/mini.tsx b/src/app/components/mini.tsx index bf81441..dbaa529 100644 --- a/src/app/components/mini.tsx +++ b/src/app/components/mini.tsx @@ -1,11 +1,21 @@ -import React from "react"; +import React, { useState } from "react"; import useRadioState from "../store/radioStore"; +import MiniModeToggleButton from "./MiniModeToggleButton"; const Mini: React.FC = () => { const [radios] = useRadioState((state) => [state.radios]); + const [isHovered, setIsHovered] = useState(false); return ( -
+
{ + setIsHovered(true); + }} + onMouseLeave={() => { + setIsHovered(false); + }} + >
{radios .filter((r) => r.rx) @@ -15,7 +25,9 @@ const Mini: React.FC = () => { - {radio.callsign !== "MANUAL" ? radio.callsign : radio.humanFrequency} + {radio.callsign !== "MANUAL" + ? radio.callsign + : radio.humanFrequency} :{" "} { ); })}
+
+ +
); }; diff --git a/src/app/components/navbar.tsx b/src/app/components/navbar.tsx index 9ecb866..f5930a6 100644 --- a/src/app/components/navbar.tsx +++ b/src/app/components/navbar.tsx @@ -11,7 +11,7 @@ import { } from "../helpers/CallsignHelper"; import useUtilStore from "../store/utilStore"; import { Configuration } from "../../config"; -import { FullscreenExit } from "react-bootstrap-icons"; +import MiniModeToggleButton from "./MiniModeToggleButton"; const Navbar: React.FC = () => { const [showModal, setShowModal] = useState(false); @@ -205,16 +205,7 @@ const Navbar: React.FC = () => { onWheel={handleRadioGainMouseWheel} value={radioGain} > - + {platform === "linux" && (