mirror
/
meshastic.web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Clenup bottom nav, fix tooltip

pull/21/head
Sacha Weatherstone 4 years ago
parent
d8fedb56bb
commit
609d9b9359
6 changed files with 135 additions and 129 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      package.json
  2. 6
      pnpm-lock.yaml
  3. 4
      src/components/generic/Tooltip.tsx
  4. 220
      src/components/menu/BottomNav.tsx
  5. 32
      src/components/menu/BottomNavItem.tsx
  6. 1
      src/components/modals/VersionInfo.tsx

1
package.json
View File

@ -18,7 +18,6 @@
"@reduxjs/toolkit": "^1.7.2",
"@tippyjs/react": "^4.2.6",
"base64-js": "^1.5.1",
"cuid": "^2.1.8",
"framer-motion": "^6.2.6",
"mapbox-gl": "^2.7.0",
"react": "^17.0.2",

6
pnpm-lock.yaml
View File

@ -18,7 +18,6 @@ specifiers:
autoprefixer: ^10.4.2
babel-plugin-module-resolver: ^4.1.0
base64-js: ^1.5.1
cuid: ^2.1.8
eslint: 8.9.0
eslint-config-prettier: ^8.3.0
eslint-import-resolver-alias: ^1.1.2
@ -65,7 +64,6 @@ dependencies:
'@reduxjs/toolkit': 1.7[email protected][email protected]
'@tippyjs/react': 4.2[email protected][email protected]
base64-js: 1.5.1
cuid: 2.1.8
framer-motion: 6.2[email protected][email protected]
mapbox-gl: 2.7.0
react: 17.0.2
@ -2662,10 +2660,6 @@ packages:
/csstype/3.0.10:
resolution: {integrity: sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==}
/cuid/2.1.8:
resolution: {integrity: sha512-xiEMER6E7TlTPnDxrM4eRiC6TRgjNX9xzEZ5U/Se2YJKr7Mq4pJn/2XEHjl3STcSh96GmkHPcBXLES8M29wyyg==}
dev: false
/d3-color/3.0.1:
resolution: {integrity: sha512-6/SlHkDOBLyQSJ1j1Ghs82OIUXpKWlR0hCsw0XrLSQhuUPuCSmLQ1QPH98vpnQxMUQM2/gfAkUEWsupVpd9JGw==}
engines: {node: '>=12'}

4
src/components/generic/Tooltip.tsx
View File

@ -2,8 +2,6 @@ import 'tippy.js/dist/tippy.css';
import type React from 'react';
import cuid from 'cuid';
import Tippy, { TippyProps } from '@tippyjs/react';
export const Tooltip = ({
@ -13,7 +11,7 @@ export const Tooltip = ({
}: TippyProps): JSX.Element => {
return (
<Tippy content={content} {...props}>
<div key={cuid()}>{children}</div>
<div>{children}</div>
</Tippy>
);
};

220
src/components/menu/BottomNav.tsx
View File

@ -17,7 +17,6 @@ import {
RiArrowUpLine,
} from 'react-icons/ri';
import { Tooltip } from '@components/generic/Tooltip';
import {
connType,
openConnectionModal,
@ -29,6 +28,7 @@ import { useAppSelector } from '@hooks/useAppSelector';
import { Protobuf, Types } from '@meshtastic/meshtasticjs';
import { VersionInfo } from '../modals/VersionInfo';
import { BottomNavItem } from './BottomNavItem';
export const BottomNav = (): JSX.Element => {
const [showVersionInfo, setShowVersionInfo] = React.useState(false);
@ -40,133 +40,117 @@ export const BottomNav = (): JSX.Element => {
).find((channel) => channel.role === Protobuf.Channel_Role.PRIMARY)?.settings;
return (
<div className="z-20 flex justify-between border-t border-gray-300 bg-white dark:border-gray-600 dark:bg-secondaryDark">
<div className="flex">
<Tooltip content="Meshtastic WebUI">
<div className="group flex cursor-pointer select-none border-r border-gray-300 p-1 hover:bg-gray-200 dark:border-gray-600 dark:text-white dark:hover:bg-primaryDark">
<img
title="Logo"
className="w-5 dark:hidden"
src="/Logo_Black.svg"
/>
<img
title="Logo"
className="hidden w-5 dark:flex"
src="/Logo_White.svg"
/>
</div>
</Tooltip>
<div className="z-20 flex justify-between divide-x divide-gray-300 border-t border-gray-300 bg-white dark:divide-gray-600 dark:border-gray-600 dark:bg-secondaryDark">
<BottomNavItem tooltip="Meshtastic WebUI">
<img
title="Logo"
className="my-auto w-5"
src={appState.darkMode ? '/Logo_White.svg' : '/Logo_Black.svg'}
/>
</BottomNavItem>
<Tooltip content={`Connection Status`}>
<div
className={`group flex w-min cursor-pointer p-1 hover:bg-opacity-80 ${
[
Types.DeviceStatusEnum.DEVICE_CONNECTED,
Types.DeviceStatusEnum.DEVICE_CONFIGURED,
<BottomNavItem
tooltip="Connection Status"
onClick={(): void => {
dispatch(openConnectionModal());
}}
className={
[
Types.DeviceStatusEnum.DEVICE_CONNECTED,
Types.DeviceStatusEnum.DEVICE_CONFIGURED,
].includes(meshtasticState.deviceStatus)
? 'bg-primary dark:bg-primary'
: [
Types.DeviceStatusEnum.DEVICE_CONNECTING,
Types.DeviceStatusEnum.DEVICE_RECONNECTING,
Types.DeviceStatusEnum.DEVICE_CONFIGURING,
].includes(meshtasticState.deviceStatus)
? 'bg-primary'
: [
Types.DeviceStatusEnum.DEVICE_CONNECTING,
Types.DeviceStatusEnum.DEVICE_RECONNECTING,
Types.DeviceStatusEnum.DEVICE_CONFIGURING,
].includes(meshtasticState.deviceStatus)
? 'bg-yellow-400'
: 'bg-gray-400'
}`}
onClick={(): void => {
dispatch(dispatch(openConnectionModal()));
}}
>
{appState.connType === connType.BLE ? (
<FiBluetooth className="mr-1 p-0.5 group-active:scale-90" />
) : appState.connType === connType.SERIAL ? (
<FiCpu className="mr-1 p-0.5 group-active:scale-90" />
) : (
<FiWifi className="mr-1 p-0.5 group-active:scale-90" />
)}
<div className="truncate text-xs font-medium group-active:scale-90">
{meshtasticState.nodes.find(
(node) =>
node.number === meshtasticState.radio.hardware.myNodeNum,
)?.user?.longName ?? 'Disconnected'}
</div>
</div>
</Tooltip>
<Tooltip content="MQTT Status">
<div className="group flex cursor-pointer select-none border-r border-gray-300 p-1 hover:bg-gray-200 dark:border-gray-600 dark:text-white dark:hover:bg-primaryDark">
{primaryChannelSettings?.uplinkEnabled &&
primaryChannelSettings?.downlinkEnabled &&
!meshtasticState.radio.preferences.mqttDisabled ? (
<RiArrowUpDownLine className="p-0.5 group-active:scale-90" />
) : primaryChannelSettings?.uplinkEnabled &&
!meshtasticState.radio.preferences.mqttDisabled ? (
<RiArrowUpLine className="p-0.5 group-active:scale-90" />
) : primaryChannelSettings?.downlinkEnabled &&
!meshtasticState.radio.preferences.mqttDisabled ? (
<RiArrowDownLine className="p-0.5 group-active:scale-90" />
) : (
<FiX className="p-0.5" />
)}
</div>
</Tooltip>
? 'bg-yellow-400 dark:bg-yellow-400'
: 'bg-gray-400 dark:bg-secondaryDark dark:text-white'
}
>
{appState.connType === connType.BLE ? (
<FiBluetooth className="h-4" />
) : appState.connType === connType.SERIAL ? (
<FiCpu className="h-4" />
) : (
<FiWifi className="h-4" />
)}
<div className="truncate text-xs font-medium">
{meshtasticState.nodes.find(
(node) => node.number === meshtasticState.radio.hardware.myNodeNum,
)?.user?.longName ?? 'Disconnected'}
</div>
</BottomNavItem>
<BottomNavItem tooltip="MQTT Status">
{primaryChannelSettings?.uplinkEnabled &&
primaryChannelSettings?.downlinkEnabled &&
!meshtasticState.radio.preferences.mqttDisabled ? (
<RiArrowUpDownLine className="h-4" />
) : primaryChannelSettings?.uplinkEnabled &&
!meshtasticState.radio.preferences.mqttDisabled ? (
<RiArrowUpLine className="h-4" />
) : primaryChannelSettings?.downlinkEnabled &&
!meshtasticState.radio.preferences.mqttDisabled ? (
<RiArrowDownLine className="h-4" />
) : (
<FiX className="h-4" />
)}
</BottomNavItem>
<div className="flex-grow">
<BottomNavItem
tooltip="Toggle Navigation"
onClick={(): void => {
dispatch(toggleMobileNav());
}}
className="md:hidden"
>
{appState.mobileNavOpen ? (
<FiX className="m-auto h-4" />
) : (
<FiMenu className="m-auto h-4" />
)}
</BottomNavItem>
</div>
<div
<BottomNavItem
tooltip={
appState.updateAvaliable ? 'Update Avaliable' : 'Current Commit'
}
onClick={(): void => {
dispatch(toggleMobileNav());
setShowVersionInfo(true);
}}
className="group flex w-full cursor-pointer select-none border-r border-gray-300 p-1 hover:bg-gray-200 dark:border-gray-600 dark:text-white dark:hover:bg-primaryDark md:hidden"
className={appState.updateAvaliable ? 'animate-pulse' : ''}
>
{appState.mobileNavOpen ? (
<FiX className="m-auto p-0.5 group-active:scale-90" />
{appState.updateAvaliable ? (
<MdUpgrade className="h-4" />
) : (
<FiMenu className="m-auto p-0.5 group-active:scale-90" />
<FiGitBranch className="h-4" />
)}
</div>
<div className="flex">
<VersionInfo
visible={showVersionInfo}
onClose={(): void => {
setShowVersionInfo(false);
}}
/>
<p className="text-xs opacity-60">{process.env.COMMIT_HASH}</p>
</BottomNavItem>
<Tooltip
content={
appState.updateAvaliable ? 'Update Avaliable' : 'Current Commit'
}
>
<div
onClick={(): void => {
setShowVersionInfo(true);
}}
className={`group flex cursor-pointer select-none border-l border-gray-300 p-1 hover:bg-gray-200 dark:border-gray-600 dark:text-white dark:hover:bg-primaryDark ${
appState.updateAvaliable ? 'animate-pulse' : ''
}`}
>
{appState.updateAvaliable ? (
<MdUpgrade className="mr-1 p-0.5 group-active:scale-90" />
) : (
<FiGitBranch className="mr-1 p-0.5 group-active:scale-90" />
)}
<p className="text-xs opacity-60">{process.env.COMMIT_HASH}</p>
</div>
</Tooltip>
<BottomNavItem
tooltip="Toggle Theme"
onClick={(): void => {
dispatch(setDarkModeEnabled(!appState.darkMode));
}}
>
{appState.darkMode ? (
<FiSun className="h-4" />
) : (
<FiMoon className="h-4" />
)}
</BottomNavItem>
<Tooltip content={`Toggle Theme`}>
<div
className="group cursor-pointer border-l border-gray-300 p-1 hover:bg-gray-200 dark:border-gray-600 dark:text-white dark:hover:bg-primaryDark"
onClick={(): void => {
dispatch(setDarkModeEnabled(!appState.darkMode));
}}
>
{appState.darkMode ? (
<FiSun className="p-0.5 group-active:scale-90" />
) : (
<FiMoon className="p-0.5 group-active:scale-90" />
)}
</div>
</Tooltip>
</div>
<VersionInfo
visible={showVersionInfo}
onClose={(): void => {
setShowVersionInfo(false);
}}
/>
</div>
);
};

32
src/components/menu/BottomNavItem.tsx
View File

@ -0,0 +1,32 @@
import type React from 'react';
import { m } from 'framer-motion';
import { Tooltip } from '@components/generic/Tooltip';
export interface BottomNavItemProps {
tooltip: string;
onClick?: () => void;
className?: string;
children: React.ReactNode;
}
export const BottomNavItem = ({
tooltip,
onClick,
className,
children,
}: BottomNavItemProps) => {
return (
<Tooltip content={tooltip}>
<div
onClick={onClick}
className={`group flex h-full cursor-pointer select-none p-1 hover:bg-gray-200 dark:text-white dark:hover:bg-primaryDark ${className}`}
>
<m.div className="flex w-full gap-1" whileTap={{ scale: 0.99 }}>
{children}
</m.div>
</div>
</Tooltip>
);
};

1
src/components/modals/VersionInfo.tsx
View File

@ -51,7 +51,6 @@ export const VersionInfo = ({
const index = data.findIndex(
(commit) => commit.sha.substring(0, 7) === process.env.COMMIT_HASH,
);
console.log(index);
if (index === -1 || index > 0) {
dispatch(setUpdateAvaliable(true));

Write Preview
Loading…
Cancel
Save