mirror
/
meshastic.web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Minor style fixes

pull/596/head
philon- 1 year ago
parent
79910dfec7
commit
a02579d6dd
3 changed files with 154 additions and 131 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 113
      src/components/Sidebar.tsx
  2. 12
      src/components/UI/Checkbox/index.tsx
  3. 30
      src/components/UI/Sidebar/SidebarSection.tsx

113
src/components/Sidebar.tsx
View File

@ -46,26 +46,34 @@ const CollapseToggleButton = () => {
aria-label={buttonLabel} aria-label={buttonLabel}
onClick={toggleSidebar} onClick={toggleSidebar}
className={cn( className={cn(
'absolute top-20 right-0 z-10 p-0.5 rounded-full transform translate-x-1/2', "absolute top-20 right-0 z-10 p-0.5 rounded-full transform translate-x-1/2",
'transition-colors duration-300 ease-in-out', "transition-colors duration-300 ease-in-out",
'border border-slate-300 dark:border-slate-200', "border border-slate-300 dark:border-slate-200",
'text-slate-500 dark:text-slate-200 hover:text-slate-400 dark:hover:text-slate-400', "text-slate-500 dark:text-slate-200 hover:text-slate-400 dark:hover:text-slate-400",
'focus:outline-none focus:ring-2 focus:ring-accent transition-transform' "focus:outline-none focus:ring-2 focus:ring-accent transition-transform bg-background-primary",
)} )}
> >
<CircleChevronLeft <CircleChevronLeft
size={24} size={24}
className={cn( className={cn(
'transition-transform duration-300 ease-in-out', "transition-transform duration-300 ease-in-out",
isCollapsed && 'rotate-180' isCollapsed && "rotate-180",
)} )}
/> />
</button> </button>
); );
} };
export const Sidebar = ({ children }: SidebarProps) => { export const Sidebar = ({ children }: SidebarProps) => {
const { hardware, getNode, getNodesLength, metadata, activePage, setActivePage, setDialogOpen } = useDevice(); const {
hardware,
getNode,
getNodesLength,
metadata,
activePage,
setActivePage,
setDialogOpen,
} = useDevice();
const { setCommandPaletteOpen } = useAppStore(); const { setCommandPaletteOpen } = useAppStore();
const myNode = getNode(hardware.myNodeNum); const myNode = getNode(hardware.myNodeNum);
const { isCollapsed } = useSidebar(); const { isCollapsed } = useSidebar();
@ -86,19 +94,18 @@ export const Sidebar = ({ children }: SidebarProps) => {
return ( return (
<div <div
className={cn( className={cn(
'relative border-slate-300 dark:border-slate-700', "relative border-slate-300 dark:border-slate-700",
'transition-all duration-300 ease-in-out flex-shrink-0', "transition-all duration-300 ease-in-out flex-shrink-0",
isCollapsed ? 'w-24' : 'w-46 lg:w-64' isCollapsed ? "w-24" : "w-46 lg:w-64",
)} )}
> >
<CollapseToggleButton /> <CollapseToggleButton />
<div <div
className={cn( className={cn(
'h-14 flex mt-2 gap-2 items-center flex-shrink-0 transition-all duration-300 ease-in-out', "h-14 flex mt-2 gap-2 items-center flex-shrink-0 transition-all duration-300 ease-in-out",
'border-b-[0.5px] border-slate-300 dark:border-slate-700', "border-b-[0.5px] border-slate-300 dark:border-slate-700",
isCollapsed && 'justify-center px-0' isCollapsed && "justify-center px-0",
)} )}
> >
<img <img
@ -108,11 +115,11 @@ export const Sidebar = ({ children }: SidebarProps) => {
/> />
<h2 <h2
className={cn( className={cn(
'text-xl font-semibold text-gray-800 dark:text-gray-100 whitespace-nowrap', "text-xl font-semibold text-gray-800 dark:text-gray-100 whitespace-nowrap",
'transition-all duration-300 ease-in-out', "transition-all duration-300 ease-in-out",
isCollapsed isCollapsed
? 'opacity-0 max-w-0 invisible ml-0' ? "opacity-0 max-w-0 invisible ml-0"
: 'opacity-100 max-w-xs visible ml-2' : "opacity-100 max-w-xs visible ml-2",
)} )}
> >
Meshtastic Meshtastic
@ -136,49 +143,50 @@ export const Sidebar = ({ children }: SidebarProps) => {
))} ))}
</SidebarSection> </SidebarSection>
<div className={cn( <div
'flex-1 min-h-0', className={cn(
isCollapsed && 'overflow-hidden' "flex-1 min-h-0",
isCollapsed && "overflow-hidden",
)} )}
> >
{children} {children}
</div> </div>
<div className="pt-4 border-t-[0.5px] bg-background-primary border-slate-300 dark:border-slate-700 flex-shrink-0"> <div className="pt-4 border-t-[0.5px] bg-background-primary border-slate-300 dark:border-slate-700 flex-shrink-0">
{myNode === undefined ? ( {myNode === undefined
? (
<div className="flex flex-col items-center justify-center py-6"> <div className="flex flex-col items-center justify-center py-6">
<Spinner /> <Spinner />
<Subtle <Subtle
className={cn( className={cn(
'mt-4 transition-opacity duration-300', "mt-4 transition-opacity duration-300",
isCollapsed ? 'opacity-0 invisible' : 'opacity-100 visible' isCollapsed ? "opacity-0 invisible" : "opacity-100 visible",
)} )}
> >
Loading... Loading...
</Subtle> </Subtle>
</div> </div>
) : ( )
: (
<> <>
<div <div
className={cn( className={cn(
'flex place-items-center gap-2', "flex place-items-center gap-2",
isCollapsed && 'justify-center' isCollapsed && "justify-center",
)} )}
> >
<Avatar <Avatar
text={myNode.user?.shortName ?? myNode.num.toString()} text={myNode.user?.shortName ?? myNode.num.toString()}
className={cn("flex-shrink-0 ml-2", className={cn("flex-shrink-0 ml-2", isCollapsed && "ml-0")}
isCollapsed && "ml-0",
)}
size="sm" size="sm"
/> />
<p <p
className={cn( className={cn(
'max-w-[20ch] text-wrap text-sm font-medium', "max-w-[20ch] text-wrap text-sm font-medium",
'transition-all duration-300 ease-in-out overflow-hidden', "transition-all duration-300 ease-in-out overflow-hidden",
isCollapsed isCollapsed
? 'opacity-0 max-w-0 invisible' ? "opacity-0 max-w-0 invisible"
: 'opacity-100 max-w-full visible' : "opacity-100 max-w-full visible",
)} )}
> >
{myNode.user?.longName} {myNode.user?.longName}
@ -187,32 +195,42 @@ export const Sidebar = ({ children }: SidebarProps) => {
<div <div
className={cn( className={cn(
'flex flex-col gap-0.5 ml-2 mt-2', "flex flex-col gap-0.5 ml-2 mt-2",
'transition-all duration-300 ease-in-out', "transition-all duration-300 ease-in-out",
isCollapsed isCollapsed
? 'opacity-0 max-w-0 h-0 invisible' ? "opacity-0 max-w-0 h-0 invisible"
: 'opacity-100 max-w-xs h-auto visible' : "opacity-100 max-w-xs h-auto visible",
)} )}
> >
<div className="inline-flex gap-2"> <div className="inline-flex gap-2">
<BatteryStatus deviceMetrics={myNode.deviceMetrics} /> <BatteryStatus deviceMetrics={myNode.deviceMetrics} />
</div> </div>
<div className="inline-flex gap-2"> <div className="inline-flex gap-2">
<ZapIcon size={18} className="text-gray-500 dark:text-gray-400 w-4 flex-shrink-0" /> <ZapIcon
<Subtle>{myNode.deviceMetrics?.voltage?.toPrecision(3) ?? "UNK"} volts</Subtle> size={18}
className="text-gray-500 dark:text-gray-400 w-4 flex-shrink-0"
/>
<Subtle>
{myNode.deviceMetrics?.voltage?.toPrecision(3) ?? "UNK"}
{" "}
volts
</Subtle>
</div> </div>
<div className="inline-flex gap-2"> <div className="inline-flex gap-2">
<CpuIcon size={18} className="text-gray-500 dark:text-gray-400 w-4 flex-shrink-0" /> <CpuIcon
size={18}
className="text-gray-500 dark:text-gray-400 w-4 flex-shrink-0"
/>
<Subtle>v{myMetadata?.firmwareVersion ?? "UNK"}</Subtle> <Subtle>v{myMetadata?.firmwareVersion ?? "UNK"}</Subtle>
</div> </div>
</div> </div>
<div <div
className={cn( className={cn(
'flex items-center flex-shrink-0 ml-2', "flex items-center flex-shrink-0 ml-2",
'transition-all duration-300 ease-in-out', "transition-all duration-300 ease-in-out",
isCollapsed isCollapsed
? 'opacity-0 max-w-0 invisible pointer-events-none' ? "opacity-0 max-w-0 invisible pointer-events-none"
: 'opacity-100 max-w-xs visible' : "opacity-100 max-w-xs visible",
)} )}
> >
<button <button
@ -232,7 +250,6 @@ export const Sidebar = ({ children }: SidebarProps) => {
<SearchIcon /> <SearchIcon />
</button> </button>
</div> </div>
</> </>
)} )}
</div> </div>

12
src/components/UI/Checkbox/index.tsx
View File

@ -1,4 +1,4 @@
import { useState, useEffect, useId } from "react"; import { useEffect, useId, useState } from "react";
import { Check } from "lucide-react"; import { Check } from "lucide-react";
import { Label } from "@components/UI/Label.tsx"; import { Label } from "@components/UI/Label.tsx";
import { cn } from "@core/utils/cn.ts"; import { cn } from "@core/utils/cn.ts";
@ -65,13 +65,15 @@ export function Checkbox({
role="presentation" role="presentation"
className={cn( className={cn(
"w-6 h-6 border-2 border-gray-500 rounded-md flex items-center justify-center", "w-6 h-6 border-2 border-gray-500 rounded-md flex items-center justify-center",
disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2", disabled
isChecked ? "" : "" ? "opacity-50 cursor-not-allowed"
: "cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
isChecked ? "" : "",
)} )}
> >
{isChecked && ( {isChecked && (
<div className="animate-fade-in scale-100 opacity-100"> <div className="animate-fade-in scale-100 opacity-100">
<Check className="w-4 h-4 text-slate-900 dark:text-slate-200" /> <Check className="w-4 h-4" />
</div> </div>
)} )}
</div> </div>
@ -85,7 +87,7 @@ export function Checkbox({
className={cn( className={cn(
"text-gray-900 dark:text-gray-900", "text-gray-900 dark:text-gray-900",
disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
labelClassName labelClassName,
)} )}
> >
{children} {children}

30
src/components/UI/Sidebar/SidebarSection.tsx
View File

@ -16,25 +16,29 @@ export const SidebarSection = ({
}: SidebarSectionProps) => { }: SidebarSectionProps) => {
const { isCollapsed } = useSidebar(); const { isCollapsed } = useSidebar();
return ( return (
<div className={cn( <div
className={cn(
"py-2", "py-2",
isCollapsed ? 'px-0' : 'px-4', isCollapsed ? "px-0" : "px-4",
className, className,
)}> )}
>
<Heading as="h3" className={cn( <Heading
'mb-2', as="h3"
'uppercase tracking-wider text-md', className={cn(
'transition-all duration-300 ease-in-out', "mb-2",
'whitespace-nowrap overflow-hidden', "uppercase tracking-wider text-md",
"transition-all duration-300 ease-in-out",
"whitespace-nowrap overflow-hidden",
isCollapsed isCollapsed
? 'opacity-0 max-w-0 h-0 invisible px-0 mb-0' ? "opacity-0 max-w-0 h-0 invisible px-0 mb-0"
: 'opacity-100 max-w-xs h-auto visible px-1 mb-1' : "opacity-100 max-w-xs h-auto visible px-1 mb-1",
)}> )}
>
{label} {label}
</Heading> </Heading>
<div className="space-y-0.5"> <div className="space-y-1">
{children} {children}
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save