hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modal and connection modal improvements

Browse Source
This commit is contained in:
Sacha Weatherstone
2022-02-26 15:05:09 +11:00
parent 7d0c264313
commit 819c14a592
7 changed files with 240 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Connection.tsx
+5 -10
View File
@@ -1,7 +1,7 @@
import type React from 'react';
import { useEffect } from 'react';
import { AnimatePresence, m } from 'framer-motion';
import { m } from 'framer-motion';
import { BLE } from '@components/connection/BLE';
import { HTTP } from '@components/connection/HTTP';
@@ -49,17 +49,16 @@ export const Connection = (): JSX.Element => {
}, [meshtasticState.ready, dispatch]);
return (
<AnimatePresence>
{appState.connectionModalOpen && (
<Modal
title="Connect to a device"
open={appState.connectionModalOpen}
onClose={(): void => {
dispatch(closeConnectionModal());
}}
>
<div className="flex max-w-3xl flex-col gap-4 md:flex-row">
<div className="md:w-1/2">
<div className="space-y-2">
<div className="flex flex-col md:w-1/2">
<div className="flex flex-grow flex-col space-y-2">
<Select
label="Connection Method"
optionsEnum={connType}
@@ -108,9 +107,7 @@ export const Connection = (): JSX.Element => {
exit={{ opacity: 0 }}
className="m-auto h-40 w-40 text-green-500"
src={`/placeholders/${
appState.darkMode
? 'View Code Dark.svg'
: 'View Code.svg'
appState.darkMode ? 'View Code Dark.svg' : 'View Code.svg'
}`}
/>
</div>
@@ -134,7 +131,5 @@ export const Connection = (): JSX.Element => {
</div>
</div>
</Modal>
)}
</AnimatePresence>
);
};
src/components/connection/BLE.tsx
+12 -7
View File
@@ -36,13 +36,12 @@ export const BLE = ({ connecting }: BLEProps): JSX.Element => {
});
return (
<form onSubmit={onSubmit} className="space-y-2">
{bleDevices.map((device, index) => (
<form onSubmit={onSubmit} className="flex flex-grow flex-col">
<div className="flex flex-grow flex-col gap-2 overflow-y-auto rounded-md border border-gray-300 bg-gray-200 p-2 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400">
{bleDevices.length > 0 ? (
bleDevices.map((device, index) => (
<div
onClick={async (): Promise<void> => {
await setConnection(connType.BLE);
}}
className="flex justify-between rounded-md bg-gray-700 p-2 dark:text-white"
className="flex justify-between rounded-md bg-white p-2 dark:bg-primaryDark dark:text-white"
key={index}
>
<div className="my-auto">{device.name}</div>
@@ -55,7 +54,13 @@ export const BLE = ({ connecting }: BLEProps): JSX.Element => {
disabled={connecting}
/>
</div>
))}
))
) : (
<div className="m-auto">
<p>No previously connected devices found</p>
</div>
)}
</div>
<Button
className="mt-2 ml-auto"
onClick={async (): Promise<void> => {
src/components/connection/Serial.tsx
+5 -4
View File
@@ -38,11 +38,12 @@ export const Serial = ({ connecting }: SerialProps): JSX.Element => {
});
return (
<form onSubmit={onSubmit} className="space-y-2">
<form onSubmit={onSubmit} className="flex flex-grow flex-col">
<div className="flex flex-grow flex-col gap-2 overflow-y-auto rounded-md border border-gray-300 bg-gray-200 p-2 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400">
{serialDevices.length > 0 ? (
serialDevices.map((device, index) => (
<div
className="flex justify-between rounded-md bg-secondaryDark p-2 dark:text-white"
className="flex justify-between rounded-md bg-white p-2 dark:bg-primaryDark dark:text-white"
key={index}
>
<div className="my-auto flex gap-4">
@@ -54,7 +55,6 @@ export const Serial = ({ connecting }: SerialProps): JSX.Element => {
</p>
</div>
<IconButton
nested
onClick={async (): Promise<void> => {
dispatch(
setConnectionParams({
@@ -72,10 +72,11 @@ export const Serial = ({ connecting }: SerialProps): JSX.Element => {
</div>
))
) : (
<div className="h-40 rounded-md border border-gray-300 dark:border-gray-600">
<div className="m-auto">
<p>No previously connected devices found</p>
</div>
)}
</div>
<Button
className="mt-2 ml-auto"
onClick={async (): Promise<void> => {
src/components/generic/Card.tsx
+1
View File
@@ -47,6 +47,7 @@ export const Card = ({
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.1 }}
>
{children}
</m.div>
src/components/generic/Modal.tsx
+34 -18
View File
@@ -1,33 +1,45 @@
import type React from 'react';
import { m } from 'framer-motion';
import { AnimatePresence, m } from 'framer-motion';
import { FiX } from 'react-icons/fi';
import { useAppSelector } from '@hooks/useAppSelector';
import { IconButton } from './button/IconButton';
import { Card } from './Card';
import { Card, CardProps } from './Card';
export interface ModalProps {
title: string;
export interface ModalProps extends CardProps {
open: boolean;
bgDismiss?: boolean;
onClose: () => void;
actions?: React.ReactNode;
children: React.ReactNode;
}
export const Modal = ({
title,
open,
bgDismiss,
onClose,
actions,
children,
...props
}: ModalProps): JSX.Element => {
const darkMode = useAppSelector((state) => state.app.darkMode);
return (
<m.div className={`fixed inset-0 z-30 ${darkMode ? 'dark' : ''}`}>
<AnimatePresence>
{open && (
<m.div
className="fixed h-full w-full backdrop-blur-sm backdrop-filter"
onClick={onClose}
className={`fixed inset-0 ${darkMode ? 'dark' : ''} ${
open ? 'z-30' : 'z-0'
}`}
>
<m.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.1 }}
className="fixed h-full w-full backdrop-blur-md backdrop-filter"
onClick={(): void => {
bgDismiss && onClose();
}}
/>
<m.div className="text-center ">
<span
@@ -40,19 +52,23 @@ export const Modal = ({
<Card
border
draggable
title={title}
actions={
<>
<div className="flex gap-2">
{actions}
<IconButton tooltip="Close" icon={<FiX />} onClick={onClose} />
</>
<IconButton
tooltip="Close"
icon={<FiX />}
onClick={onClose}
/>
</div>
}
className="relative flex-col gap-4"
>
{children}
</Card>
{...props}
/>
</div>
</m.div>
</m.div>
)}
</AnimatePresence>
);
};
src/components/menu/BottomNav.tsx
+1 -1
View File
@@ -146,7 +146,7 @@ export const BottomNav = (): JSX.Element => {
</BottomNavItem>
<VersionInfo
visible={showVersionInfo}
modalOpen={showVersionInfo}
onClose={(): void => {
setShowVersionInfo(false);
}}
src/components/modals/VersionInfo.tsx
+6 -11
View File
@@ -1,7 +1,6 @@
import type React from 'react';
import { useEffect } from 'react';
import { AnimatePresence } from 'framer-motion';
import { MdUpgrade } from 'react-icons/md';
import useSWR from 'swr';
@@ -38,12 +37,12 @@ export interface Commit {
}
export interface VersionInfoProps {
visible: boolean;
modalOpen: boolean;
onClose: () => void;
}
export const VersionInfo = ({
visible,
modalOpen,
onClose,
}: VersionInfoProps): JSX.Element => {
const appState = useAppSelector((state) => state.app);
@@ -67,13 +66,13 @@ export const VersionInfo = ({
dispatch(setUpdateAvaliable(true));
}
}
}, [data]);
}, [data, dispatch]);
return (
<AnimatePresence>
{visible && (
<Modal
open={modalOpen}
title="Version Info"
bgDismiss
actions={
// TODO: Check if version is hosted, and merge pwa update button here
appState.updateAvaliable && (
@@ -98,9 +97,7 @@ export const VersionInfo = ({
}`}
>
<div className="my-auto text-xs dark:text-gray-400">
{new Date(
commit.commit.committer.date,
).toLocaleDateString()}
{new Date(commit.commit.committer.date).toLocaleDateString()}
</div>
<div className="my-auto font-mono text-sm">
{commit.sha.substring(0, 7)}
@@ -110,7 +107,5 @@ export const VersionInfo = ({
))}
</div>
</Modal>
)}
</AnimatePresence>
);
};