Clenup bottom nav, fix tooltip

2022-02-19 23:00:32 +11:00
parent d8fedb56bb
commit 609d9b9359
6 changed files with 141 additions and 135 deletions
@@ -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>
  );
 };
@@ -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>
-
-        <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,
-              ].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>
-      </div>
-      <div
-        onClick={(): void => {
-          dispatch(toggleMobileNav());
-        }}
-        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"
-      >
-        {appState.mobileNavOpen ? (
-          <FiX className="m-auto p-0.5 group-active:scale-90" />
-        ) : (
-          <FiMenu className="m-auto p-0.5 group-active:scale-90" />
-        )}
-      </div>
-      <div className="flex">
-        <VersionInfo
-          visible={showVersionInfo}
-          onClose={(): void => {
-            setShowVersionInfo(false);
-          }}
+    <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={
-            appState.updateAvaliable ? 'Update Avaliable' : 'Current Commit'
-          }
+      <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-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"
        >
-          <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>
-
-        <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>
+          {appState.mobileNavOpen ? (
+            <FiX className="m-auto h-4" />
+          ) : (
+            <FiMenu className="m-auto h-4" />
+          )}
+        </BottomNavItem>
      </div>
+
+      <BottomNavItem
+        tooltip={
+          appState.updateAvaliable ? 'Update Avaliable' : 'Current Commit'
+        }
+        onClick={(): void => {
+          setShowVersionInfo(true);
+        }}
+        className={appState.updateAvaliable ? 'animate-pulse' : ''}
+      >
+        {appState.updateAvaliable ? (
+          <MdUpgrade className="h-4" />
+        ) : (
+          <FiGitBranch className="h-4" />
+        )}
+        <p className="text-xs opacity-60">{process.env.COMMIT_HASH}</p>
+      </BottomNavItem>
+
+      <BottomNavItem
+        tooltip="Toggle Theme"
+        onClick={(): void => {
+          dispatch(setDarkModeEnabled(!appState.darkMode));
+        }}
+      >
+        {appState.darkMode ? (
+          <FiSun className="h-4" />
+        ) : (
+          <FiMoon className="h-4" />
+        )}
+      </BottomNavItem>
+
+      <VersionInfo
+        visible={showVersionInfo}
+        onClose={(): void => {
+          setShowVersionInfo(false);
+        }}
+      />
    </div>
  );
 };
@@ -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>
+  );
+};
@@ -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));