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
Unified 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", "@reduxjs/toolkit": "^1.7.2",
"@tippyjs/react": "^4.2.6", "@tippyjs/react": "^4.2.6",
"base64-js": "^1.5.1", "base64-js": "^1.5.1",
"cuid": "^2.1.8",
"framer-motion": "^6.2.6", "framer-motion": "^6.2.6",
"mapbox-gl": "^2.7.0", "mapbox-gl": "^2.7.0",
"react": "^17.0.2", "react": "^17.0.2",

6
pnpm-lock.yaml
View File

@ -18,7 +18,6 @@ specifiers:
autoprefixer: ^10.4.2 autoprefixer: ^10.4.2
babel-plugin-module-resolver: ^4.1.0 babel-plugin-module-resolver: ^4.1.0
base64-js: ^1.5.1 base64-js: ^1.5.1
cuid: ^2.1.8
eslint: 8.9.0 eslint: 8.9.0
eslint-config-prettier: ^8.3.0 eslint-config-prettier: ^8.3.0
eslint-import-resolver-alias: ^1.1.2 eslint-import-resolver-alias: ^1.1.2
@ -65,7 +64,6 @@ dependencies:
'@reduxjs/toolkit': 1.7[email protected][email protected] '@reduxjs/toolkit': 1.7[email protected][email protected]
'@tippyjs/react': 4.2[email protected][email protected] '@tippyjs/react': 4.2[email protected][email protected]
base64-js: 1.5.1 base64-js: 1.5.1
cuid: 2.1.8
framer-motion: 6.2[email protected][email protected] framer-motion: 6.2[email protected][email protected]
mapbox-gl: 2.7.0 mapbox-gl: 2.7.0
react: 17.0.2 react: 17.0.2
@ -2662,10 +2660,6 @@ packages:
/csstype/3.0.10: /csstype/3.0.10:
resolution: {integrity: sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==} resolution: {integrity: sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==}
/cuid/2.1.8:
resolution: {integrity: sha512-xiEMER6E7TlTPnDxrM4eRiC6TRgjNX9xzEZ5U/Se2YJKr7Mq4pJn/2XEHjl3STcSh96GmkHPcBXLES8M29wyyg==}
dev: false
/d3-color/3.0.1: /d3-color/3.0.1:
resolution: {integrity: sha512-6/SlHkDOBLyQSJ1j1Ghs82OIUXpKWlR0hCsw0XrLSQhuUPuCSmLQ1QPH98vpnQxMUQM2/gfAkUEWsupVpd9JGw==} resolution: {integrity: sha512-6/SlHkDOBLyQSJ1j1Ghs82OIUXpKWlR0hCsw0XrLSQhuUPuCSmLQ1QPH98vpnQxMUQM2/gfAkUEWsupVpd9JGw==}
engines: {node: '>=12'} 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 type React from 'react';
import cuid from 'cuid';
import Tippy, { TippyProps } from '@tippyjs/react'; import Tippy, { TippyProps } from '@tippyjs/react';
export const Tooltip = ({ export const Tooltip = ({
@ -13,7 +11,7 @@ export const Tooltip = ({
}: TippyProps): JSX.Element => { }: TippyProps): JSX.Element => {
return ( return (
<Tippy content={content} {...props}> <Tippy content={content} {...props}>
<div key={cuid()}>{children}</div> <div>{children}</div>
</Tippy> </Tippy>
); );
}; };

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

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

Write Preview
Loading…
Cancel
Save