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

Multiple theme support & fixes

Browse Source
This commit is contained in:
Sacha Weatherstone
2022-12-29 23:45:16 +11:00
parent 5022bda660
commit dab158c7b3
61 changed files with 2462 additions and 581 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/CommandPalette/GroupView.tsx
+3 -7
View File
@@ -14,19 +14,15 @@ export const GroupView = ({ group }: GroupViewProps): JSX.Element => {
value={group.name}
className={({ active }) =>
`flex cursor-default select-none items-center rounded-md px-3 py-2 ${
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
active ? "bg-backgroundPrimary text-textPrimary" : ""
}`
}
>
{({ active }) => (
<>
<group.icon
className={`h-6 w-6 flex-none text-gray-900 text-opacity-40 ${
active ? "text-opacity-100" : ""
}`}
/>
<group.icon className="h-6 w-6" />
<span className="ml-3 flex-auto truncate">{group.name}</span>
{active && <ChevronRightIcon className="h-5 text-gray-400" />}
{active && <ChevronRightIcon className="h-5 text-textSecondary" />}
</>
)}
</Combobox.Option>
src/components/CommandPalette/Index.tsx
+145 -51
View File
@@ -1,16 +1,3 @@
/**
* Contextual
* - Reset nodedb
* - Map commands
* - Disconnect
* Debug commands
* - Re-configure
* - clear parts of store (messages, positions, telemetry etc)
*
* Application
* - Light/Dark mode
*/
import type React from "react";
import { Fragment, useEffect, useState } from "react";
@@ -47,11 +34,15 @@ import {
QrCodeIcon,
QueueListIcon,
Square3Stack3DIcon,
SwatchIcon,
TrashIcon,
UsersIcon,
WindowIcon,
XCircleIcon
} from "@heroicons/react/24/outline";
import { ThemeController } from "../generic/ThemeController.js";
import { Blur } from "../generic/Blur.js";
import { accentColor } from "@core/stores/appStore.js";
export interface Group {
name: string;
@@ -79,7 +70,10 @@ export const CommandPalette = (): JSX.Element => {
devices,
setSelectedDevice,
removeDevice,
selectedDevice
selectedDevice,
darkMode,
setDarkMode,
setAccent
} = useAppStore();
const { getDevices } = useDeviceStore();
@@ -276,11 +270,108 @@ export const CommandPalette = (): JSX.Element => {
icon: WindowIcon,
commands: [
{
name: "[WIP] Toggle Dark Mode",
name: "Toggle Dark Mode",
icon: MoonIcon,
action() {
alert("This feature is not implemented");
setDarkMode(!darkMode);
}
},
{
name: "Accent Color",
icon: SwatchIcon,
subItems: [
{
name: "Red",
icon: (
<span
className={`h-3 w-3 rounded-full ${
darkMode ? "bg-[#f25555]" : "bg-[#f28585]"
}`}
/>
),
action() {
setAccent("red");
}
},
{
name: "Orange",
icon: (
<span
className={`h-3 w-3 rounded-full ${
darkMode ? "bg-[#e1720b]" : "bg-[#edb17a]"
}`}
/>
),
action() {
setAccent("orange");
}
},
{
name: "Yellow",
icon: (
<span
className={`h-3 w-3 rounded-full ${
darkMode ? "bg-[#ac8c1a]" : "bg-[#e0cc87]"
}`}
/>
),
action() {
setAccent("yellow");
}
},
{
name: "Green",
icon: (
<span
className={`h-3 w-3 rounded-full ${
darkMode ? "bg-[#27a341]" : "bg-[#8bc9c5]"
}`}
/>
),
action() {
setAccent("green");
}
},
{
name: "Blue",
icon: (
<span
className={`h-3 w-3 rounded-full ${
darkMode ? "bg-[#2093fe]" : "bg-[#70afea]"
}`}
/>
),
action() {
setAccent("blue");
}
},
{
name: "Purple",
icon: (
<span
className={`h-3 w-3 rounded-full ${
darkMode ? "bg-[#926bff]" : "bg-[#a09eef]"
}`}
/>
),
action() {
setAccent("purple");
}
},
{
name: "Pink",
icon: (
<span
className={`h-3 w-3 rounded-full ${
darkMode ? "bg-[#e454c4]" : "bg-[#dba0c7]"
}`}
/>
),
action() {
setAccent("pink");
}
}
]
}
]
}
@@ -326,43 +417,46 @@ export const CommandPalette = (): JSX.Element => {
className="relative z-10"
onClose={setCommandPaletteOpen}
>
<PaletteTransition>
<Dialog.Panel className="mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
<Combobox<Command | string>
onChange={(input) => {
if (typeof input === "string") {
setQuery(input);
} else if (input.action) {
setCommandPaletteOpen(false);
input.action();
}
}}
>
<SearchBox setQuery={setQuery} />
<ThemeController>
<Blur />
<PaletteTransition>
<Dialog.Panel className="mx-auto max-w-2xl transform overflow-hidden rounded-md bg-backgroundPrimary transition-all">
<Combobox<Command | string>
onChange={(input) => {
if (typeof input === "string") {
setQuery(input);
} else if (input.action) {
setCommandPaletteOpen(false);
input.action();
}
}}
>
<SearchBox setQuery={setQuery} />
{query === "" || filtered.length > 0 ? (
<Combobox.Options
static
className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
>
<li className="p-2">
<ul className="flex flex-col gap-2 text-sm text-gray-700">
{filtered.map((group, index) => (
<SearchResult key={index} group={group} />
))}
{query === "" &&
groups.map((group, index) => (
<GroupView key={index} group={group} />
{query === "" || filtered.length > 0 ? (
<Combobox.Options
static
className="max-h-80 scroll-py-2 divide-y divide-opacity-10 overflow-y-auto bg-backgroundSecondary"
>
<li className="p-2">
<ul className="flex flex-col gap-2 text-sm text-textSecondary">
{filtered.map((group, index) => (
<SearchResult key={index} group={group} />
))}
</ul>
</li>
</Combobox.Options>
) : (
query !== "" && filtered.length === 0 && <NoResults />
)}
</Combobox>
</Dialog.Panel>
</PaletteTransition>
{query === "" &&
groups.map((group, index) => (
<GroupView key={index} group={group} />
))}
</ul>
</li>
</Combobox.Options>
) : (
query !== "" && filtered.length === 0 && <NoResults />
)}
</Combobox>
</Dialog.Panel>
</PaletteTransition>
</ThemeController>
</Dialog>
</Transition.Root>
);
src/components/CommandPalette/NoResults.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ import { CommandLineIcon } from "@heroicons/react/24/outline";
export const NoResults = (): JSX.Element => {
return (
<div className="py-14 px-14 text-center">
<CommandLineIcon className="mx-auto h-6 text-slate-500" />
<CommandLineIcon className="mx-auto h-6 text-textSecondary" />
<Mono className="tracking-tighter">
Query does not match any avaliable commands
</Mono>
src/components/CommandPalette/PaletteTransition.tsx
+5 -5
View File
@@ -14,23 +14,23 @@ export const PaletteTransition = ({
<>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enter="ease-out duration-200"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leave="ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" />
<div className="bg-gray-500 fixed inset-0 bg-opacity-25 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enter="ease-out duration-200"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leave="ease-in duration-100"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
src/components/CommandPalette/SearchBox.tsx
+2 -2
View File
@@ -10,9 +10,9 @@ export interface SearchBoxProps {
export const SearchBox = ({ setQuery }: SearchBoxProps): JSX.Element => {
return (
<div className="relative">
<MagnifyingGlassIcon className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40" />
<MagnifyingGlassIcon className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-textSecondary" />
<Combobox.Input
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-sm text-gray-900 placeholder-gray-500 focus:ring-0"
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-sm text-textPrimary placeholder-textSecondary focus:ring-0"
placeholder="Search..."
onChange={(event) => setQuery(event.target.value)}
/>
src/components/CommandPalette/SearchResult.tsx
+9 -7
View File
@@ -10,9 +10,9 @@ export interface SearchResultProps {
export const SearchResult = ({ group }: SearchResultProps): JSX.Element => {
return (
<div className="rounded-md border border-gray-300 py-2 shadow-md">
<div className="rounded-md border-2 border-backgroundPrimary py-2">
<div className="flex items-center px-3 py-2">
<group.icon className="h-6 w-6 flex-none text-gray-900 text-opacity-40" />
<group.icon className="text-gray-900 h-6 w-6 flex-none text-opacity-40" />
<span className="ml-3 flex-auto truncate">{group.name}</span>
</div>
{group.commands.map((command, index) => (
@@ -21,20 +21,20 @@ export const SearchResult = ({ group }: SearchResultProps): JSX.Element => {
value={command}
className={({ active }) =>
`mr-2 ml-4 flex cursor-pointer select-none items-center rounded-md px-3 py-1 ${
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
active ? "text-gray-900 bg-backgroundPrimary" : ""
}`
}
>
{({ active }) => (
<>
<command.icon
className={`h-4 flex-none text-gray-900 text-opacity-40 ${
className={`text-gray-900 h-4 flex-none text-opacity-40 ${
active ? "text-opacity-100" : ""
}`}
/>
<span className="ml-3">{command.name}</span>
{active && (
<ChevronRightIcon className="ml-auto h-4 text-gray-400" />
<ChevronRightIcon className="text-gray-400 ml-auto h-4" />
)}
</>
)}
@@ -47,7 +47,9 @@ export const SearchResult = ({ group }: SearchResultProps): JSX.Element => {
value={item}
className={({ active }) =>
`mx-2 flex cursor-pointer select-none items-center rounded-md px-3 py-1 ${
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
active
? "text-gray-900 bg-backgroundPrimary bg-opacity-5"
: ""
}`
}
>
@@ -56,7 +58,7 @@ export const SearchResult = ({ group }: SearchResultProps): JSX.Element => {
{item.icon}
<span className="ml-3">{item.name}</span>
{active && (
<ChevronRightIcon className="ml-auto h-4 text-gray-400" />
<ChevronRightIcon className="text-gray-400 ml-auto h-4" />
)}
</>
)}