mirror/web
1
0
Fork 0
mirror of https://github.com/meshtastic/web.git synced 2026-05-18 19:25:09 -04:00
Code Issues Packages Projects Releases Wiki Activity

Misc fixed and lightmode improvements

Browse Source
This commit is contained in:
Sacha Weatherstone
2022-02-17 21:39:28 +11:00
parent fe84b27059
commit 6c023d6656
11 changed files with 92 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Connection.tsx
View File

@@ -95,7 +95,7 @@ export const Connection = (): JSX.Element => {
<div className="h-96 overflow-y-auto rounded-md bg-secondaryDark p-2">
{state.logs.map((log, index) => (
<div key={index} className="flex">
<div className="truncate text-sm font-medium">
<div className="truncate font-mono text-sm">
{log.message}
</div>
</div>

23
src/components/generic/ContextItem.tsx Normal file
View File

@@ -0,0 +1,23 @@
import type React from 'react';
import { m } from 'framer-motion';
export interface ContextItem {
title: string;
icon: JSX.Element;
}
export const ContextItem = ({ title, icon }: ContextItem): JSX.Element => {
return (
<div className="cursor-pointer first:rounded-t-md last:rounded-b-md hover:dark:bg-secondaryDark">
<m.div
whileHover={{ scale: 1.01 }}
whileTap={{ scale: 0.99 }}
className="flex gap-2 p-2"
>
<div className="my-auto">{icon}</div>
<div className="truncate">{title}</div>
</m.div>
</div>
);
};

95
src/components/generic/ContextMenu.tsx
View File

@@ -1,91 +1,54 @@
import React from 'react';
import { m } from 'framer-motion';
import { FiActivity, FiAperture, FiTag } from 'react-icons/fi';
import { ContextItem } from './ContextItem';
export interface ContextMenuProps {
items?: JSX.Element;
children: React.ReactNode;
}
export const ContextMenu = ({ children }: ContextMenuProps): JSX.Element => {
export const ContextMenu = ({
items,
children,
}: ContextMenuProps): JSX.Element => {
const [visible, setVisible] = React.useState(false);
const [position, setPosition] = React.useState({ x: 0, y: 0 });
const [selectedValue, setSelectedValue] = React.useState<string>();
const doSomething = (selectedValue: string) => {
setSelectedValue(selectedValue);
};
const showContextMenu = (event: React.MouseEvent<HTMLDivElement>) => {
event.preventDefault();
setVisible(false);
const newPosition = {
x: event.pageX,
y: event.pageY,
};
setPosition(newPosition);
setVisible(true);
};
const hideContextMenu = (event: React.MouseEvent<HTMLDivElement>) => {
setVisible(false);
};
return (
<div
className="h-full"
onContextMenu={showContextMenu}
onClick={hideContextMenu}
onContextMenu={(e): void => {
e.preventDefault();
setVisible(false);
const newPosition = {
x: e.pageX,
y: e.pageY,
};
setPosition(newPosition);
setVisible(true);
}}
onClick={(): void => {
setVisible(false);
}}
>
{children}
{selectedValue && <h1>{selectedValue} is selected</h1>}
{visible && (
<div
style={{ top: position.y, left: position.x }}
className="fixed z-50 w-60 gap-2 divide-y divide-gray-300 rounded-md border border-gray-300 font-medium shadow-md backdrop-blur-xl dark:divide-gray-600 dark:border-gray-600 dark:text-gray-400"
>
<div className="cursor-pointer first:rounded-t-md last:rounded-b-md hover:dark:bg-secondaryDark">
<m.div
whileHover={{ scale: 1.01 }}
whileTap={{ scale: 0.99 }}
className="flex gap-2 p-2"
>
<div className="my-auto">
<FiActivity />
</div>
<div className="truncate">Menu item</div>
</m.div>
</div>
<div className="cursor-pointer first:rounded-t-md last:rounded-b-md hover:dark:bg-secondaryDark">
<m.div
whileHover={{ scale: 1.01 }}
whileTap={{ scale: 0.99 }}
className="flex gap-2 p-2"
>
<div className="my-auto">
<FiAperture />
</div>
<div className="truncate">Menu item 2</div>
</m.div>
</div>
<div className="cursor-pointer first:rounded-t-md last:rounded-b-md hover:dark:bg-secondaryDark">
<m.div
whileHover={{ scale: 1.01 }}
whileTap={{ scale: 0.99 }}
className="flex gap-2 p-2"
>
<div className="my-auto">
<FiTag />
</div>
<div className="truncate">
Menu item 3 with a very long name that should wrap
</div>
</m.div>
</div>
{items}
<ContextItem title="Menu item" icon={<FiActivity />} />
<ContextItem title="Menu item 2" icon={<FiAperture />} />
<ContextItem
title="Menu item 3 with a very long name that should wrap"
icon={<FiTag />}
/>
</div>
)}
</div>

2
src/components/layout/Sidebar/ButtonNav.tsx
View File

@@ -21,7 +21,7 @@ export const ButtonNav = ({
const dispatch = useAppDispatch();
return (
<div className="z-30 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 bg-white px-6 py-2 dark:border-gray-600 dark:bg-primaryDark">
<div
onClick={(): void => {
dispatch(toggleMobileNav());

6
src/components/layout/Sidebar/sections/CollapsibleSection.tsx
View File

@@ -22,14 +22,14 @@ export const CollapsibleSection = ({
<m.div>
<m.div
layout
className="w-full cursor-pointer select-none overflow-hidden shadow-md dark:bg-secondaryDark dark:text-gray-400"
className="w-full cursor-pointer select-none overflow-hidden dark:bg-secondaryDark dark:text-gray-400"
>
<m.div
layout
onClick={toggleOpen}
whileHover={{ scale: 1.01 }}
whileTap={{ scale: 0.99 }}
className="flex justify-between gap-2 border-b border-primaryDark p-2 text-sm font-medium"
className="flex justify-between gap-2 border-b border-gray-300 p-2 text-sm font-medium dark:border-primaryDark"
>
<m.div className="flex gap-2 ">
<m.div className="my-auto">{icon}</m.div>
@@ -52,7 +52,7 @@ export const CollapsibleSection = ({
{open && (
<>
{actions && (
<m.div className="flex justify-end gap-1 rounded-b-md border-x border-b p-1 shadow-inner dark:border-gray-600">
<m.div className="flex justify-end gap-1 rounded-b-md border-x border-b p-1 dark:border-gray-600">
{actions}
</m.div>
)}

4
src/components/layout/Sidebar/sections/ExternalSection.tsx
View File

@@ -24,14 +24,14 @@ export const ExternalSection = ({
>
<m.div
layout
className="w-full cursor-pointer select-none overflow-hidden shadow-md dark:bg-secondaryDark dark:text-gray-400"
className="w-full cursor-pointer select-none overflow-hidden dark:bg-secondaryDark dark:text-gray-400"
>
<m.div
layout
onClick={toggleOpen}
whileHover={{ scale: 1.01 }}
whileTap={{ scale: 0.99 }}
className="flex justify-between gap-2 border-b border-primaryDark p-2 text-sm font-medium"
className="flex justify-between gap-2 border-b border-gray-300 p-2 text-sm font-medium dark:border-primaryDark"
>
<m.div className="flex gap-2 ">
<m.div className="my-auto">{icon}</m.div>

4
src/components/layout/index.tsx
View File

@@ -34,7 +34,9 @@ export const Layout = ({
</Sidebar>
</div>
<ErrorBoundary FallbackComponent={ErrorFallback}>
{children}
<div className="flex h-full w-full bg-gray-300 dark:bg-secondaryDark">
{children}
</div>
</ErrorBoundary>
</div>
);

6
src/pages/Extensions/FileBrowser.tsx
View File

@@ -39,8 +39,8 @@ export const FileBrowser = (): JSX.Element => {
return (
<div className="flex h-full w-full select-none flex-col gap-4 p-4">
<div className="w-full flex-grow rounded-md bg-gray-200 dark:bg-primaryDark">
<div className="flex h-10 w-full rounded-t-md bg-gray-300 px-4 text-lg font-semibold dark:bg-zinc-700 dark:text-white">
<div className="w-full flex-grow rounded-md bg-white dark:bg-primaryDark">
<div className="flex h-10 w-full rounded-t-md border-b border-gray-300 px-4 text-lg font-semibold shadow-md dark:border-gray-600 dark:bg-zinc-700 dark:text-white">
<div className="my-auto w-1/3">FileName</div>
<div className="my-auto w-1/3">Actions</div>
</div>
@@ -63,7 +63,7 @@ export const FileBrowser = (): JSX.Element => {
{data?.data.files.map((file) => (
<div
key={file.name}
className="flex h-10 w-full border-b border-gray-500 px-4 font-medium dark:text-white"
className="flex h-10 w-full border-b border-gray-300 px-4 font-medium dark:border-gray-600 dark:text-white"
>
<div className="my-auto w-1/3">
<a

12
src/pages/Extensions/Info.tsx
View File

@@ -1,6 +1,5 @@
import React from 'react';
import { m } from 'framer-motion';
import JSONPretty from 'react-json-pretty';
import { useAppSelector } from '@app/hooks/useAppSelector';
@@ -17,20 +16,17 @@ export const Info = (): JSX.Element => {
);
return (
<div className="flex w-full flex-grow select-none flex-col gap-4 p-4">
<m.div
whileHover={{ scale: 1.01 }}
className="flex w-full flex-col gap-4 rounded-md p-8 shadow-md dark:bg-primaryDark"
>
<div className="flex h-full flex-col gap-4 p-4 md:flex-row">
<div className="flex w-full flex-col gap-4 rounded-md bg-white p-8 shadow-md dark:bg-primaryDark md:w-1/4">
<div className="m-auto">
<Hashicon value={hardwareInfo.myNodeNum.toString()} size={180} />
</div>
<div className="text-center text-lg font-medium dark:text-white">
{node?.user?.longName || 'Unknown'}
</div>
</m.div>
</div>
<div className="flex-grow rounded-md p-8 shadow-md dark:bg-primaryDark">
<div className="flex-grow rounded-md bg-white p-8 shadow-md dark:bg-primaryDark">
<JSONPretty className="overflow-y-auto" data={hardwareInfo} />
</div>
</div>

23
src/pages/Extensions/Logs.tsx
View File

@@ -48,9 +48,8 @@ export const Logs = (): JSX.Element => {
};
return (
<div className="flex h-full p-4 ">
<table className="table-cell h-full w-full select-none rounded-md dark:bg-primaryDark">
{/* \/ flex flex-col gap-2 */}
<div className="flex h-full p-4">
<table className="table-cell h-full w-full select-none rounded-md bg-white dark:bg-primaryDark">
<tbody
className="
block h-full flex-col overflow-y-auto py-4 px-2 font-mono text-xs dark:text-gray-400"
@@ -71,13 +70,24 @@ export const Logs = (): JSX.Element => {
)}
</AnimatePresence>
{logs.map((log, index) => (
<tr key={index} className="group hover:bg-secondaryDark">
// <ContextMenu
// key={index}
// items={
// <>
// <ContextItem title="Test" icon={<FiGitBranch />} />
// </>
// }
// >
<tr
key={index}
className="group hover:bg-gray-200 dark:hover:bg-secondaryDark"
>
<m.td
className="w-6 cursor-pointer"
whileHover={{ scale: 1.01 }}
whileTap={{ scale: 0.99 }}
>
<div className="m-auto pl-2 dark:text-primaryDark dark:group-hover:text-gray-400">
<div className="m-auto pl-2 text-white group-hover:text-black dark:text-primaryDark dark:group-hover:text-gray-400">
<FiArrowRight />
</div>
</m.td>
@@ -112,6 +122,7 @@ export const Logs = (): JSX.Element => {
</td>
<td className="truncate pl-1">{log.message}</td>
</tr>
// </ContextMenu>
))}
</tbody>
</table>
@@ -128,7 +139,7 @@ const Wrapper = ({
}): JSX.Element => (
<td className={className}>
<m.div
className="-my-0.5 flex max-w-min cursor-pointer truncate rounded-sm px-0.5 hover:bg-gray-700"
className="-my-0.5 flex max-w-min cursor-pointer truncate rounded-sm px-0.5 hover:bg-gray-400 dark:hover:bg-gray-700"
whileHover={{ scale: 1.01 }}
whileTap={{ scale: 0.99 }}
>

7
src/pages/Map/MapContainer.tsx
View File

@@ -40,7 +40,12 @@ export const MapContainer = (): JSX.Element => {
);
return (
<div className="relative flex h-full w-full">
<div
className="relative flex h-full w-full"
onContextMenu={(e): void => {
e.stopPropagation();
}}
>
<div className="absolute right-0 z-10 m-4 space-y-2 rounded-md border border-gray-300 bg-white p-2 shadow-md dark:border-gray-600 dark:bg-primaryDark">
<IconButton
active={mapState.style === 'Satellite'}