layout cleanup wip
This commit is contained in:
Sacha Weatherstone
@@ -24,8 +24,6 @@ import {
|
||||
Cog8ToothIcon,
|
||||
CubeTransparentIcon,
|
||||
DevicePhoneMobileIcon,
|
||||
DocumentTextIcon,
|
||||
IdentificationIcon,
|
||||
InboxIcon,
|
||||
LinkIcon,
|
||||
MapIcon,
|
||||
@@ -135,20 +133,6 @@ export const CommandPalette = (): JSX.Element => {
|
||||
action() {
|
||||
setActivePage("peers");
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Info",
|
||||
icon: IdentificationIcon,
|
||||
action() {
|
||||
setActivePage("info");
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Logs",
|
||||
icon: DocumentTextIcon,
|
||||
action() {
|
||||
setActivePage("logs");
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -2,52 +2,64 @@ import type React from "react";
|
||||
|
||||
import { useAppStore } from "@app/core/stores/appStore.js";
|
||||
import { useDeviceStore } from "@app/core/stores/deviceStore.js";
|
||||
import { NavSpacer } from "@app/Nav/NavSpacer.js";
|
||||
import { PageNav } from "@app/Nav/PageNav.js";
|
||||
import { Mono } from "@components/generic/Mono.js";
|
||||
import { Hashicon } from "@emeraldpay/hashicon-react";
|
||||
import { MoonIcon, PlusIcon } from "@heroicons/react/24/outline";
|
||||
import { IconButton } from "./form/IconButton.js";
|
||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
export const DeviceSelector = (): JSX.Element => {
|
||||
const { getDevices } = useDeviceStore();
|
||||
const { selectedDevice, setSelectedDevice, darkMode } = useAppStore();
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-16 items-center whitespace-nowrap bg-backgroundPrimary pt-12 [writing-mode:vertical-rl]">
|
||||
<Mono>Connected Devices</Mono>
|
||||
<span className="mt-6 flex gap-4 font-bold text-textPrimary">
|
||||
{getDevices().map((device) => (
|
||||
<div
|
||||
key={device.id}
|
||||
onClick={() => {
|
||||
setSelectedDevice(device.id);
|
||||
}}
|
||||
className="group flex h-8 w-8 cursor-pointer bg-backgroundPrimary p-0.5 drop-shadow-md hover:brightness-hover"
|
||||
>
|
||||
<Hashicon size={32} value={device.hardware.myNodeNum.toString()} />
|
||||
<div className="flex h-full w-14 items-center gap-3 bg-backgroundPrimary pt-3 [writing-mode:vertical-rl]">
|
||||
<div className="flex items-center gap-3">
|
||||
<Mono className="select-none">Connected Devices</Mono>
|
||||
<span className="flex font-bold text-textPrimary">
|
||||
{getDevices().map((device) => (
|
||||
<div
|
||||
className={`absolute -left-1.5 h-7 w-0.5 rounded-full group-hover:bg-accent ${
|
||||
device.id === selectedDevice ? "bg-accent" : "bg-transparent"
|
||||
key={device.id}
|
||||
onClick={() => {
|
||||
setSelectedDevice(device.id);
|
||||
}}
|
||||
className={`cursor-pointer border-x-4 border-backgroundPrimary bg-backgroundPrimary py-3 px-2 hover:brightness-hover active:brightness-press ${
|
||||
selectedDevice === device.id ? "border-l-accent" : ""
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<div
|
||||
onClick={() => {
|
||||
setSelectedDevice(0);
|
||||
}}
|
||||
className="group flex h-8 w-8 cursor-pointer p-0.5 drop-shadow-md"
|
||||
>
|
||||
<PlusIcon />
|
||||
>
|
||||
<Hashicon
|
||||
size={32}
|
||||
value={device.hardware.myNodeNum.toString()}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<div
|
||||
className={`absolute -left-1.5 h-7 w-0.5 rounded-full group-hover:bg-accent ${
|
||||
selectedDevice === 0 ? "bg-accent" : "bg-transparent"
|
||||
onClick={() => {
|
||||
setSelectedDevice(0);
|
||||
}}
|
||||
className={`cursor-pointer border-x-4 border-backgroundPrimary bg-backgroundPrimary py-4 px-3 hover:brightness-hover active:brightness-press ${
|
||||
selectedDevice === 0 ? "border-l-accent" : ""
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
>
|
||||
<PlusIcon className="w-6" />
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{selectedDevice !== 0 && (
|
||||
<>
|
||||
<NavSpacer />
|
||||
<PageNav />
|
||||
</>
|
||||
)}
|
||||
|
||||
<NavSpacer />
|
||||
|
||||
<div>//actions</div>
|
||||
|
||||
<img
|
||||
src={darkMode ? "Logo_White.svg" : "Logo_Black.svg"}
|
||||
className="mt-auto px-3 py-4"
|
||||
className="mt-auto px-2 py-3"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -17,8 +17,8 @@ export const Drawer = (): JSX.Element => {
|
||||
{ name: "Sensor", element: Sensor }
|
||||
];
|
||||
return (
|
||||
<Tab.Group>
|
||||
<Tab.List className="flex bg-backgroundPrimary">
|
||||
<Tab.Group as="div">
|
||||
<Tab.List className="flex w-full">
|
||||
{tabs.map((tab, index) => (
|
||||
<Tab key={index}>
|
||||
{({ selected }) => (
|
||||
@@ -26,7 +26,7 @@ export const Drawer = (): JSX.Element => {
|
||||
onClick={() => {
|
||||
setDrawerOpen(true);
|
||||
}}
|
||||
className={`flex h-full cursor-pointer border-b-2 px-1 first:pl-2 last:pr-2 hover:text-textPrimary ${
|
||||
className={`flex h-full cursor-pointer border-b-4 px-1 first:pl-2 last:pr-2 hover:text-textPrimary ${
|
||||
selected
|
||||
? "border-accent text-textPrimary"
|
||||
: "border-backgroundPrimary text-textSecondary"
|
||||
|
||||
@@ -1,89 +0,0 @@
|
||||
import type React from "react";
|
||||
|
||||
import { useDevice } from "@app/core/providers/useDevice.js";
|
||||
import type { Page } from "@app/core/stores/deviceStore.js";
|
||||
import {
|
||||
BeakerIcon,
|
||||
Cog8ToothIcon,
|
||||
DocumentTextIcon,
|
||||
IdentificationIcon,
|
||||
InboxIcon,
|
||||
MapIcon,
|
||||
Square3Stack3DIcon,
|
||||
UsersIcon
|
||||
} from "@heroicons/react/24/outline";
|
||||
|
||||
export const PageNav = (): JSX.Element => {
|
||||
const { activePage, setActivePage } = useDevice();
|
||||
|
||||
interface NavLink {
|
||||
name: string;
|
||||
icon: JSX.Element;
|
||||
page: Page;
|
||||
}
|
||||
|
||||
const pages: NavLink[] = [
|
||||
{
|
||||
name: "Messages",
|
||||
icon: <InboxIcon />,
|
||||
page: "messages"
|
||||
},
|
||||
{
|
||||
name: "Map",
|
||||
icon: <MapIcon />,
|
||||
page: "map"
|
||||
},
|
||||
{
|
||||
name: "Extensions",
|
||||
icon: <BeakerIcon />,
|
||||
page: "extensions"
|
||||
},
|
||||
{
|
||||
name: "Config",
|
||||
icon: <Cog8ToothIcon />,
|
||||
page: "config"
|
||||
},
|
||||
{
|
||||
name: "Channels",
|
||||
icon: <Square3Stack3DIcon />,
|
||||
page: "channels"
|
||||
},
|
||||
{
|
||||
name: "Peers",
|
||||
icon: <UsersIcon />,
|
||||
page: "peers"
|
||||
},
|
||||
{
|
||||
name: "Info",
|
||||
icon: <IdentificationIcon />,
|
||||
page: "info"
|
||||
},
|
||||
{
|
||||
name: "Logs",
|
||||
icon: <DocumentTextIcon />,
|
||||
page: "logs"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-shrink-0 whitespace-nowrap bg-backgroundPrimary text-sm [writing-mode:vertical-rl]">
|
||||
<span className="mt-2 flex gap-2 font-bold">
|
||||
{pages.map((Link) => (
|
||||
<div
|
||||
key={Link.name}
|
||||
onClick={() => {
|
||||
setActivePage(Link.page);
|
||||
}}
|
||||
className={`hover:border-orange-300 h-9 w-9 cursor-pointer border-l-2 p-1.5 ${
|
||||
Link.page === activePage
|
||||
? "border-accent text-textPrimary"
|
||||
: "border-backgroundPrimary text-textSecondary hover:text-textPrimary"
|
||||
}`}
|
||||
>
|
||||
{Link.icon}
|
||||
</div>
|
||||
))}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -16,7 +16,7 @@ export const IconButton = ({
|
||||
}: IconButtonProps): JSX.Element => {
|
||||
return (
|
||||
<button
|
||||
className={`flex rounded-md bg-accentMuted text-textPrimary hover:text-accent hover:brightness-hover focus:outline-none active:brightness-press ${
|
||||
className={`flex rounded-md bg-accentMuted text-textPrimary hover:brightness-hover focus:outline-none active:brightness-press ${
|
||||
size === "sm" ? "h-8 w-8" : size === "md" ? "h-10 w-10" : "h-12 w-12"
|
||||
} ${
|
||||
disabled
|
||||
|
||||
@@ -34,7 +34,7 @@ export const TabbedContent = ({
|
||||
<Tab key={index} disabled={entry.disabled}>
|
||||
{({ selected }) => (
|
||||
<div
|
||||
className={`flex h-10 gap-3 truncate border-b-2 px-3 text-sm font-medium ${
|
||||
className={`flex h-10 gap-3 truncate border-b-4 px-3 text-sm font-medium ${
|
||||
selected
|
||||
? "border-accent text-textPrimary"
|
||||
: "border-backgroundPrimary text-textSecondary hover:text-textPrimary"
|
||||
|
||||
Reference in New Issue
Block a user