-
- {isLoading ? (
-
- ) : (
-
- )}
+
+
+
+ {isLoading ? (
+
+ ) : (
+
+ )}
+
+
);
};
diff --git a/web/src/pages/desktop/menu/screen/index.tsx b/web/src/pages/desktop/menu/screen/index.tsx
index 12b70e2..9b291bb 100644
--- a/web/src/pages/desktop/menu/screen/index.tsx
+++ b/web/src/pages/desktop/menu/screen/index.tsx
@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
-import { Popover } from 'antd';
+import { Popover, Tooltip } from 'antd';
import { useAtomValue } from 'jotai';
import { MonitorIcon } from 'lucide-react';
@@ -14,6 +14,7 @@ import { Quality } from './quality';
import { Reset } from './reset.tsx';
import { Resolution } from './resolution';
import { VideoMode } from './video-mode.tsx';
+import { t } from 'i18next';
export const Screen = () => {
const videoMode = useAtomValue(videoModeAtom);
@@ -21,10 +22,12 @@ export const Screen = () => {
const [fps, setFps] = useState(30);
const [quality, setQuality] = useState(2);
+ const tooltip = t('screen.title');
+ const [tooltipValue, setTooltipValue] = useState(tooltip);
+
useEffect(() => {
updateScreen('type', videoMode === 'mjpeg' ? 0 : 1);
updateScreen('resolution', resolution!.height);
-
updateQuality();
updateFps();
}, []);
@@ -69,10 +72,13 @@ export const Screen = () => {
placement="bottomLeft"
trigger="click"
arrow={false}
+ onOpenChange={(visible) => setTooltipValue(visible ? '' : tooltip)}
>
-
-
-
+
+
+
+
+
);
};
diff --git a/web/src/pages/desktop/menu/script/index.tsx b/web/src/pages/desktop/menu/script/index.tsx
index b079a83..00e6a16 100644
--- a/web/src/pages/desktop/menu/script/index.tsx
+++ b/web/src/pages/desktop/menu/script/index.tsx
@@ -1,6 +1,6 @@
import { ChangeEvent, useRef, useState } from 'react';
import { UploadOutlined } from '@ant-design/icons';
-import { Button, Divider, Popconfirm, Popover } from 'antd';
+import { Button, Divider, Popconfirm, Popover, Tooltip } from 'antd';
import clsx from 'clsx';
import { ChevronRightIcon, FileJsonIcon } from 'lucide-react';
import { useTranslation } from 'react-i18next';
@@ -22,6 +22,9 @@ export const Script = () => {
const [isUploading, setIsUploading] = useState(false);
const inputRef = useRef
(null);
+ const tooltip = t('script.title');
+ const [tooltipValue, setTooltipValue] = useState(tooltip);
+
function handleOpenChange(open: boolean) {
if (open) {
getScripts();
@@ -194,11 +197,16 @@ export const Script = () => {
trigger="click"
arrow={false}
open={isPopoverOpen}
- onOpenChange={handleOpenChange}
+ onOpenChange={(visible) => {
+ handleOpenChange(visible);
+ setTooltipValue(visible ? '' : tooltip);
+ }}
>
-
-
-
+
+
+
+
+
{isRunning && }
diff --git a/web/src/pages/desktop/menu/settings/index.tsx b/web/src/pages/desktop/menu/settings/index.tsx
index 9d15bf9..294c83a 100644
--- a/web/src/pages/desktop/menu/settings/index.tsx
+++ b/web/src/pages/desktop/menu/settings/index.tsx
@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
-import { Badge, Modal } from 'antd';
+import { Badge, Modal, Tooltip } from 'antd';
import clsx from 'clsx';
import {
BadgeInfoIcon,
@@ -32,6 +32,9 @@ export const Settings = () => {
const [isUpdateAvailable, setIsUpdateAvailable] = useState(false);
+ const tooltip = t('settings.title');
+ const [tooltipValue, setTooltipValue] = useState(tooltip);
+
const tabs = [
{ id: 'about', icon: , component: },
{ id: 'appearance', icon: , component: },
@@ -92,16 +95,18 @@ export const Settings = () => {
return (
<>
- setIsModalOpen(true)}
- >
-
-
-
-
-
-
setIsModalOpen(true)}
+ >
+
+
+
+
+
+
diff --git a/web/src/pages/desktop/menu/terminal/index.tsx b/web/src/pages/desktop/menu/terminal/index.tsx
index 7f65584..82e525d 100644
--- a/web/src/pages/desktop/menu/terminal/index.tsx
+++ b/web/src/pages/desktop/menu/terminal/index.tsx
@@ -1,5 +1,5 @@
import { useState } from 'react';
-import { Divider, Popover } from 'antd';
+import { Divider, Popover, Tooltip } from 'antd';
import { SquareTerminalIcon } from 'lucide-react';
import { useTranslation } from 'react-i18next';
@@ -10,6 +10,9 @@ export const Terminal = () => {
const { t } = useTranslation();
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+ const tooltip = t('terminal.title');
+ const [tooltipValue, setTooltipValue] = useState(tooltip);
+
const content = (
@@ -30,11 +33,16 @@ export const Terminal = () => {
trigger="click"
arrow={false}
open={isPopoverOpen}
- onOpenChange={setIsPopoverOpen}
+ onOpenChange={(visible) => {
+ setIsPopoverOpen(visible);
+ setTooltipValue(visible ? '' : tooltip);
+ }}
>
-
-
-
+
+
+
+
+
);
};
diff --git a/web/src/pages/desktop/menu/wol/index.tsx b/web/src/pages/desktop/menu/wol/index.tsx
index ca58d08..9d0a13d 100644
--- a/web/src/pages/desktop/menu/wol/index.tsx
+++ b/web/src/pages/desktop/menu/wol/index.tsx
@@ -1,5 +1,5 @@
import { ChangeEvent, useRef, useState } from 'react';
-import { Button, Divider, Input, List, Popover } from 'antd';
+import { Button, Divider, Input, List, Popover, Tooltip } from 'antd';
import type { InputRef } from 'antd';
import clsx from 'clsx';
import { useSetAtom } from 'jotai';
@@ -22,6 +22,9 @@ export const Wol = () => {
const [status, setStatus] = useState('');
const [log, setLog] = useState('');
+ const tooltip = t('wol.title');
+ const [tooltipValue, setTooltipValue] = useState(tooltip);
+
const [macList, setMacList] = useState
([]);
const inputRef = useRef(null);
@@ -153,11 +156,16 @@ export const Wol = () => {
trigger="click"
arrow={false}
open={isPopoverOpen}
- onOpenChange={handleOpenChange}
+ onOpenChange={(visible) => {
+ handleOpenChange(visible);
+ setTooltipValue(visible ? '' : tooltip);
+ }}
>
-
-
-
+
+
+
+
+
);
};