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

fix page scroll behaviour

Browse Source
This commit is contained in:
Sacha Weatherstone
2023-02-25 22:35:10 +10:00
parent 61db7580e0
commit a711db4ee3
8 changed files with 644 additions and 572 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+13 -12
View File
@@ -25,18 +25,19 @@
"@meshtastic/meshtasticjs": "2.0.20-5",
"@preact/signals-react": "^1.2.2",
"@radix-ui/react-accordion": "^1.1.0",
"@radix-ui/react-checkbox": "^1.0.1",
"@radix-ui/react-checkbox": "^1.0.2",
"@radix-ui/react-dialog": "^1.0.2",
"@radix-ui/react-dropdown-menu": "^2.0.2",
"@radix-ui/react-dropdown-menu": "^2.0.3",
"@radix-ui/react-label": "^2.0.0",
"@radix-ui/react-menubar": "^1.0.0",
"@radix-ui/react-popover": "^1.0.3",
"@radix-ui/react-menubar": "^1.0.1",
"@radix-ui/react-popover": "^1.0.4",
"@radix-ui/react-scroll-area": "^1.0.2",
"@radix-ui/react-select": "^1.2.0",
"@radix-ui/react-separator": "^1.0.1",
"@radix-ui/react-switch": "^1.0.1",
"@radix-ui/react-tabs": "^1.0.2",
"@radix-ui/react-toast": "^1.1.2",
"@radix-ui/react-tooltip": "^1.0.3",
"@radix-ui/react-tooltip": "^1.0.4",
"@tailwindcss/typography": "^0.5.9",
"@turf/turf": "^6.5.0",
"base64-js": "^1.5.1",
@@ -52,26 +53,26 @@
"maplibre-gl": "2.4.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.43.1",
"react-hook-form": "^7.43.2",
"react-map-gl": "^7.0.21",
"react-qrcode-logo": "^2.8.0",
"rfc4648": "^1.5.2",
"tailwind-merge": "^1.9.1",
"tailwind-merge": "^1.10.0",
"tailwindcss-animate": "^1.0.5",
"timeago-react": "^3.0.5",
"zustand": "4.3.3"
},
"devDependencies": {
"@tailwindcss/forms": "^0.5.3",
"@types/chrome": "^0.0.216",
"@types/chrome": "^0.0.217",
"@types/geodesy": "^2.2.3",
"@types/node": "^18.14.0",
"@types/node": "^18.14.1",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@types/w3c-web-serial": "^1.0.3",
"@types/web-bluetooth": "^0.0.16",
"@typescript-eslint/eslint-plugin": "^5.52.0",
"@typescript-eslint/parser": "^5.52.0",
"@typescript-eslint/eslint-plugin": "^5.53.0",
"@typescript-eslint/parser": "^5.53.0",
"@vitejs/plugin-react": "^3.1.0",
"autoprefixer": "^10.4.13",
"eslint": "^8.34.0",
@@ -89,7 +90,7 @@
"tar": "^6.1.13",
"tslib": "^2.5.0",
"typescript": "^4.9.5",
"vite": "^4.1.2",
"vite": "^4.1.4",
"vite-plugin-environment": "^1.1.3",
"vite-plugin-pwa": "^0.14.4"
}
pnpm-lock.yaml
Generated
+571 -548
View File
File diff suppressed because it is too large Load Diff
src/App.tsx
+2 -2
View File
@@ -29,12 +29,12 @@ export const App = (): JSX.Element => {
<Toaster />
<MapProvider>
<DeviceWrapper device={device}>
<div className="flex min-h-screen flex-col bg-backgroundPrimary text-textPrimary">
<div className="flex flex-col overflow-hidden bg-backgroundPrimary text-textPrimary">
<div className="flex flex-grow">
<DeviceSelector />
<div className="flex flex-grow flex-col">
{device ? (
<div className="flex flex-grow">
<div className="flex h-screen">
<DialogManager />
<CommandPalette />
<PageRouter />
src/components/PageLayout.tsx
+6 -2
View File
@@ -40,8 +40,12 @@ export const PageLayout = ({
</div>
</div>
</div>
{/* relative flex h-full w-full flex-col */}
<div className={cn("flex h-full w-full flex-col", !noPadding && "p-3")}>
<div
className={cn(
"flex h-full w-full flex-col overflow-y-auto",
!noPadding && "p-3"
)}
>
{children}
</div>
</div>
src/components/UI/ScrollArea.tsx
+46
View File
@@ -0,0 +1,46 @@
import * as React from "react";
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
import { cn } from "@core/utils/cn.js";
const ScrollArea = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
<ScrollAreaPrimitive.Root
ref={ref}
className={cn("relative overflow-hidden", className)}
{...props}
>
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
{children}
</ScrollAreaPrimitive.Viewport>
<ScrollBar />
<ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root>
));
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
const ScrollBar = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
<ScrollAreaPrimitive.ScrollAreaScrollbar
ref={ref}
orientation={orientation}
className={cn(
"flex touch-none select-none transition-colors",
orientation === "vertical" &&
"h-full w-2.5 border-l border-l-transparent p-[1px]",
orientation === "horizontal" &&
"h-2.5 border-t border-t-transparent p-[1px]",
className
)}
{...props}
>
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-slate-300 dark:bg-slate-700" />
</ScrollAreaPrimitive.ScrollAreaScrollbar>
));
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
export { ScrollArea, ScrollBar };
src/components/UI/Select.tsx
+5 -5
View File
@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
<SelectPrimitive.Trigger
ref={ref}
className={cn(
"border-slate-300 placeholder:text-slate-400 focus:ring-slate-400 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 flex h-10 w-full items-center justify-between rounded-md border bg-transparent py-2 px-3 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
"flex h-10 w-full items-center justify-between rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
className
)}
{...props}
@@ -36,7 +36,7 @@ const SelectContent = React.forwardRef<
<SelectPrimitive.Content
ref={ref}
className={cn(
"border-slate-100 bg-white text-slate-700 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400 relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md animate-in fade-in-80",
"relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white text-slate-700 shadow-md animate-in fade-in-80 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400",
className
)}
{...props}
@@ -56,7 +56,7 @@ const SelectLabel = React.forwardRef<
<SelectPrimitive.Label
ref={ref}
className={cn(
"text-slate-900 dark:text-slate-300 py-1.5 pr-2 pl-8 text-sm font-semibold",
"py-1.5 pr-2 pl-8 text-sm font-semibold text-slate-900 dark:text-slate-300",
className
)}
{...props}
@@ -71,7 +71,7 @@ const SelectItem = React.forwardRef<
<SelectPrimitive.Item
ref={ref}
className={cn(
"focus:bg-slate-100 dark:focus:bg-slate-700 relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm font-medium outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700",
className
)}
{...props}
@@ -93,7 +93,7 @@ const SelectSeparator = React.forwardRef<
>(({ className, ...props }, ref) => (
<SelectPrimitive.Separator
ref={ref}
className={cn("bg-slate-100 dark:bg-slate-700 -mx-1 my-1 h-px", className)}
className={cn("-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-700", className)}
{...props}
/>
));
src/pages/Channels.tsx
-2
View File
@@ -40,8 +40,6 @@ export const ChannelsPage = (): JSX.Element => {
{
icon: ImportIcon,
onClick() {
console.log("fired");
setDialogOpen("import", true);
}
},
src/pages/Peers.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ export const PeersPage = (): JSX.Element => {
<Hashicon size={24} value={node.num.toString()} />,
<h1>
{node.user?.longName ?? node.user?.macaddr
? `Meshtastic_${base16
? `Meshtastic ${base16
.stringify(node.user?.macaddr.subarray(4, 6) ?? [])
.toLowerCase()}`
: `UNK: ${node.num}`}