diff --git a/.vscode/settings.json b/.vscode/settings.json index 2b006d2e..8b8a815f 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -3,4 +3,4 @@ "editor.quickSuggestions": { "strings": true } -} +} \ No newline at end of file diff --git a/src/components/NewDevice.tsx b/src/components/NewDevice.tsx index ae15f589..e2bacb90 100644 --- a/src/components/NewDevice.tsx +++ b/src/components/NewDevice.tsx @@ -14,22 +14,23 @@ export const NewDevice = () => { icon: , element: BLE, disabled: !navigator.bluetooth, - disabledMessage: - "WebBluetooth is currently only supported by Chromium based browsers: https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility", + disabledMessage: "Web Bluetooth is currently only supported by Chromium-based browsers", + disabledLink: "https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility" }, { name: "HTTP", icon: , element: HTTP, disabled: false, + disabledMessage: "Unsuported connection method" }, { name: "Serial", icon: , element: Serial, disabled: !navigator.serial, - disabledMessage: - "WebSerial is currently only supported by Chromium based browsers: https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API#browser_compatibility", + disabledMessage: "Web Serial is currently only supported by Chromium-based browsers", + disabledLink: "https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API#browser_compatibility" }, ]); diff --git a/src/components/layout/page/TabbedContent.tsx b/src/components/layout/page/TabbedContent.tsx index 4da00ae1..e3292fce 100644 --- a/src/components/layout/page/TabbedContent.tsx +++ b/src/components/layout/page/TabbedContent.tsx @@ -10,6 +10,7 @@ export interface TabType { element: () => JSX.Element; disabled?: boolean; disabledMessage?: string; + disabledLink?: string; } export interface TabbedContentProps { @@ -28,11 +29,10 @@ export const TabbedContent = ({ {({ selected }) => (
{entry.icon && ( @@ -55,7 +55,28 @@ export const TabbedContent = ({ {!entry.disabled ? ( ) : ( - {entry.disabledMessage} +
+ + {entry.disabledMessage || "This tab is disabled"}. + {' '} + {entry.disabledLink && ( + <> + Click + {' '} + + here + + {' '} + for more information. + + )} + +
)} ))}