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

DM's and layout fixes

Browse Source
This commit is contained in:
Sacha Weatherstone
2022-02-13 16:38:39 +11:00
parent 0245a95fa9
commit 1a4efc17d7
20 changed files with 964 additions and 817 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Sidebar/ButtonNav.tsx
+3 -3
View File
@@ -4,8 +4,8 @@ import { FiMessageCircle, FiSettings } from 'react-icons/fi';
import { RiMindMap, RiRoadMapLine } from 'react-icons/ri';
import { VscExtensions } from 'react-icons/vsc';
import { toggleMobileNav } from '@app/core/slices/appSlice.js';
import { useAppDispatch } from '@app/hooks/useAppDispatch.js';
import { toggleMobileNav } from '@app/core/slices/appSlice';
import { useAppDispatch } from '@app/hooks/useAppDispatch';
import { routes, useRoute } from '@core/router';
import { NavLinkButton } from './NavLinkButton';
@@ -21,7 +21,7 @@ export const ButtonNav = ({
const dispatch = useAppDispatch();
return (
<div className="z-10 flex justify-between border-t border-gray-300 px-6 py-2 dark:border-gray-600 dark:bg-primaryDark">
<div className="z-30 flex justify-between border-t border-gray-300 px-6 py-2 dark:border-gray-600 dark:bg-primaryDark">
<div
onClick={(): void => {
dispatch(toggleMobileNav());
src/components/layout/Sidebar/Settings/Channels.tsx
+15 -16
View File
@@ -9,7 +9,6 @@ import {
} from 'react-icons/ri';
import { ListItem } from '@app/components/generic/ListItem';
import type { ChannelData } from '@app/core/slices/meshtasticSlice';
import { connection } from '@core/connection';
import { useAppSelector } from '@hooks/useAppSelector';
import { Checkbox, Input, Select, Tooltip } from '@meshtastic/components';
@@ -19,19 +18,19 @@ export const Channels = (): JSX.Element => {
const channels = useAppSelector((state) => state.meshtastic.radio.channels);
const adminChannel =
channels.find(
(channel) => channel.channel.role === Protobuf.Channel_Role.PRIMARY,
(channel) => channel.role === Protobuf.Channel_Role.PRIMARY,
) ?? channels[0];
const [usePreset, setUsePreset] = React.useState(true);
const [loading, setLoading] = React.useState(false);
const [selectedChannel, setSelectedChannel] = React.useState<
ChannelData | undefined
Protobuf.Channel | undefined
>();
const { register, handleSubmit, reset, formState } = useForm<
DeepOmit<Protobuf.Channel, 'psk'>
>({
defaultValues: {
...adminChannel.channel,
...adminChannel,
},
});
@@ -42,7 +41,7 @@ export const Channels = (): JSX.Element => {
...data,
settings: {
...data.settings,
psk: adminChannel.channel.settings?.psk,
psk: adminChannel.settings?.psk,
},
});
@@ -111,7 +110,7 @@ export const Channels = (): JSX.Element => {
)}
{channels.map((channel) => (
<ListItem
key={channel.channel.index}
key={channel.index}
onClick={(): void => {
setSelectedChannel(channel);
}}
@@ -121,23 +120,23 @@ export const Channels = (): JSX.Element => {
[
Protobuf.Channel_Role.SECONDARY,
Protobuf.Channel_Role.PRIMARY,
].find((role) => role === channel.channel.role)
].find((role) => role === channel.role)
? 'bg-green-500'
: 'bg-gray-400'
}`}
/>
}
selected={selectedChannel?.channel.index === channel.channel.index}
selected={selectedChannel?.index === channel.index}
selectedIcon={<FiExternalLink />}
actions={
<Tooltip content={`MQTT Status`}>
<div className="rounded-md p-2">
{channel.channel.settings?.uplinkEnabled &&
channel.channel.settings?.downlinkEnabled ? (
{channel.settings?.uplinkEnabled &&
channel.settings?.downlinkEnabled ? (
<RiArrowUpDownLine className="p-0.5 group-active:scale-90" />
) : channel.channel.settings?.uplinkEnabled ? (
) : channel.settings?.uplinkEnabled ? (
<RiArrowUpLine className="p-0.5 group-active:scale-90" />
) : channel.channel.settings?.downlinkEnabled ? (
) : channel.settings?.downlinkEnabled ? (
<RiArrowDownLine className="p-0.5 group-active:scale-90" />
) : (
<FiX className="p-0.5" />
@@ -147,11 +146,11 @@ export const Channels = (): JSX.Element => {
}
>
<div>
{channel.channel.settings?.name.length
? channel.channel.settings.name
: channel.channel.role === Protobuf.Channel_Role.PRIMARY
{channel.settings?.name.length
? channel.settings.name
: channel.role === Protobuf.Channel_Role.PRIMARY
? 'Primary'
: `Channel: ${channel.channel.index}`}
: `Channel: ${channel.index}`}
</div>
</ListItem>
))}
src/components/layout/Sidebar/Settings/radio/channels/panels/ChannelsGroup.tsx
+10 -10
View File
@@ -17,21 +17,21 @@ export const ChannelsGroup = (): JSX.Element => {
<>
{channels.map((channel) => {
return (
<div key={channel.channel.index}>
<div key={channel.index}>
<CollapsibleSection
title={
channel.channel.settings?.name.length
? channel.channel.settings.name
: channel.channel.role === Protobuf.Channel_Role.PRIMARY
channel.settings?.name.length
? channel.settings.name
: channel.role === Protobuf.Channel_Role.PRIMARY
? 'Primary'
: `Channel: ${channel.channel.index}`
: `Channel: ${channel.index}`
}
icon={
<div
className={`h-3 w-3 rounded-full ${
channel.channel.role === Protobuf.Channel_Role.PRIMARY
channel.role === Protobuf.Channel_Role.PRIMARY
? 'bg-orange-500'
: channel.channel.role === Protobuf.Channel_Role.SECONDARY
: channel.role === Protobuf.Channel_Role.SECONDARY
? 'bg-green-500'
: 'bg-gray-500'
}`}
@@ -46,9 +46,9 @@ export const ChannelsGroup = (): JSX.Element => {
}
>
<>
{/* <DebugPanel channel={channel.channel} /> */}
{/* <QRCodePanel channel={channel.channel} /> */}
<SettingsPanel channel={channel.channel} />
{/* <DebugPanel channel={channel} /> */}
{/* <QRCodePanel channel={channel} /> */}
<SettingsPanel channel={channel} />
</>
</CollapsibleSection>
</div>
src/components/layout/Sidebar/index.tsx
+15 -17
View File
@@ -1,6 +1,6 @@
import React from 'react';
import { useAppSelector } from '@app/hooks/useAppSelector.js';
import { useAppSelector } from '@app/hooks/useAppSelector';
import { ButtonNav } from './ButtonNav';
import { Settings } from './Settings/Index';
@@ -15,23 +15,21 @@ export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
const appState = useAppSelector((state) => state.app);
return (
<div className="flex flex-grow">
<div
className={`absolute h-full w-full flex-grow flex-col pb-6 md:relative md:flex md:w-96 md:pb-0 ${
appState.mobileNavOpen ? 'flex' : 'hidden'
}`}
>
<div className="flex h-full w-full flex-col shadow-xl dark:bg-primaryDark">
<div className="relative flex-grow gap-1">
<div className="absolute h-full w-full">{children}</div>
<Settings open={settingsOpen} setOpen={setSettingsOpen} />
</div>
<ButtonNav
toggleSettingsOpen={(): void => {
setSettingsOpen(!settingsOpen);
}}
/>
<div
className={`absolute z-20 h-full w-full flex-grow flex-col md:relative md:flex md:w-96 ${
appState.mobileNavOpen ? 'flex' : 'hidden'
}`}
>
<div className="flex h-full w-full flex-col shadow-xl dark:bg-primaryDark">
<div className="relative flex-grow gap-1">
<div className="absolute h-full w-full">{children}</div>
<Settings open={settingsOpen} setOpen={setSettingsOpen} />
</div>
<ButtonNav
toggleSettingsOpen={(): void => {
setSettingsOpen(!settingsOpen);
}}
/>
</div>
</div>
);
src/components/layout/Sidebar/sections/SidebarOverlay.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export const SidebarOverlay = ({
<AnimatePresence>
{open && (
<m.div
className="absolute z-10 flex h-full w-full flex-col bg-gray-100 dark:bg-primaryDark"
className="absolute z-30 flex h-full w-full flex-col bg-gray-100 dark:bg-primaryDark"
animate={direction === 'x' ? { translateX: 0 } : { translateY: 0 }}
initial={
direction === 'x' ? { translateX: '-100%' } : { translateY: '100%' }
src/components/layout/index.tsx
+11 -9
View File
@@ -21,16 +21,18 @@ export const Layout = ({
children,
}: LayoutProps): JSX.Element => {
return (
<div className="flex w-full bg-gray-100 dark:bg-secondaryDark md:overflow-hidden md:shadow-xl">
<Sidebar>
<div className="flex gap-2 border-b border-gray-300 p-2 dark:border-gray-600">
<IconButton icon={icon} />
<div className="my-auto text-lg font-medium dark:text-white">
{title}
<div className="relative flex w-full bg-gray-100 dark:bg-secondaryDark md:overflow-hidden md:shadow-xl">
<div className="flex flex-grow">
<Sidebar>
<div className="flex gap-2 border-b border-gray-300 p-2 dark:border-gray-600">
<IconButton icon={icon} />
<div className="my-auto text-lg font-medium dark:text-white">
{title}
</div>
</div>
</div>
<div className="flex flex-col gap-2">{sidebarContents}</div>
</Sidebar>
<div className="flex flex-col gap-2">{sidebarContents}</div>
</Sidebar>
</div>
<ErrorBoundary FallbackComponent={ErrorFallback}>
{children}
</ErrorBoundary>