wyl/jsonhero-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added a search bar to the path bar

Browse Source
This commit is contained in:
James Ritchie
2022-03-18 16:22:01 +00:00
parent 7c0ebd9675
commit f2a4488d29
4 changed files with 54 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Icons/ShortcutIcon.tsx
+1 -3
View File
@@ -5,9 +5,7 @@ export const ShortcutIcon: FunctionComponent<{ className?: string }> = ({
children,
}) => {
return (
<span
className={`flex items-center justify-center h-[26px] w-[26px] ml-1 text-slate-700 bg-slate-200 dark:text-slate-300 dark:bg-slate-800 rounded ${className}`}
>
<span className={`flex items-center justify-center rounded ${className}`}>
{children}
</span>
);
app/components/JsonView.tsx
+3 -1
View File
@@ -1,16 +1,18 @@
import React from "react";
import { PathBar, PathHistoryControls } from "./PathBar";
import { SearchBar } from "./SearchBar";
export function JsonView({ children }: { children: React.ReactNode }) {
return (
<div className="path-bar-and-column-wrapper flex flex-col flex-grow overflow-x-hidden border-l-[1px] border-slate-300 transition dark:border-slate-600">
<div className="path-bar p-1 flex bg-slate-200 border-slate-300 border-b-[1px] transition dark:bg-slate-900 dark:border-slate-600">
<div className="flex justify-between p-1 bg-slate-200 border-slate-300 border-b-[1px] transition dark:bg-slate-900 dark:border-slate-600">
<div className="flex-shrink-0 flex-grow-0">
<PathHistoryControls />
</div>
<div className="flex-1 pr-2 min-w-0">
<PathBar />
</div>
<SearchBar />
</div>
{children}
app/components/SearchBar.tsx
+26
View File
@@ -0,0 +1,26 @@
import { SearchIcon } from "@heroicons/react/outline";
import { ShortcutIcon } from "./Icons/ShortcutIcon";
import { Body } from "./Primitives/Body";
export type SearchBarProps = {
className?: string;
};
export function SearchBar({ className }: SearchBarProps) {
return (
<div className="flex justify-between items-center group w-44 rounded-sm bg-slate-300 transition hover:bg-slate-400 hover:bg-opacity-50 dark:bg-slate-800 dark:text-slate-400 hover:cursor-pointer hover:dark:bg-slate-700 hover:dark:bg-opacity-70">
<div className="flex items-center pl-2">
<SearchIcon className="w-4 h-4 mr-1" />
<Body>Search…</Body>
</div>
<div className="flex items-center gap-1 pr-2">
<ShortcutIcon className="w-4 h-4 text-sm bg-slate-200 transition group-hover:bg-slate-100 dark:bg-slate-700 dark:group-hover:bg-slate-600">
⌘
</ShortcutIcon>
<ShortcutIcon className="w-4 h-4 text-sm bg-slate-200 transition group-hover:bg-slate-100 dark:bg-slate-700 dark:group-hover:bg-slate-600">
K
</ShortcutIcon>
</div>
</div>
);
}
app/components/SideBar.tsx
+24 -8
View File
@@ -16,24 +16,36 @@ export function SideBar() {
<SidebarLink to={`/j/${doc.id}`} hotKey="cmd+1">
<ToolTip arrow="left">
<Body>Column view</Body>
<ShortcutIcon>⌘</ShortcutIcon>
<ShortcutIcon>1</ShortcutIcon>
<ShortcutIcon className="w-[26px] h-[26px] ml-1 text-slate-700 bg-slate-200 dark:text-slate-300 dark:bg-slate-800">
⌘
</ShortcutIcon>
<ShortcutIcon className="w-[26px] h-[26px] ml-1 text-slate-700 bg-slate-200 dark:text-slate-300 dark:bg-slate-800">
1
</ShortcutIcon>
</ToolTip>
<TemplateIcon className="p-2 w-full h-full" />
</SidebarLink>
<SidebarLink to={`/j/${doc.id}/editor`} hotKey="cmd+2">
<ToolTip arrow="left">
<Body>JSON view</Body>
<ShortcutIcon>⌘</ShortcutIcon>
<ShortcutIcon>2</ShortcutIcon>
<ShortcutIcon className="w-[26px] h-[26px] ml-1 text-slate-700 bg-slate-200 dark:text-slate-300 dark:bg-slate-800">
⌘
</ShortcutIcon>
<ShortcutIcon className="w-[26px] h-[26px] ml-1 text-slate-700 bg-slate-200 dark:text-slate-300 dark:bg-slate-800">
2
</ShortcutIcon>
</ToolTip>
<CodeIcon className="p-2 w-full h-full" />
</SidebarLink>
<SidebarLink to={`/j/${doc.id}/tree`} hotKey="cmd+3">
<ToolTip arrow="left">
<Body>Tree view</Body>
<ShortcutIcon>⌘</ShortcutIcon>
<ShortcutIcon>3</ShortcutIcon>
<ShortcutIcon className="w-[26px] h-[26px] ml-1 text-slate-700 bg-slate-200 dark:text-slate-300 dark:bg-slate-800">
⌘
</ShortcutIcon>
<ShortcutIcon className="w-[26px] h-[26px] ml-1 text-slate-700 bg-slate-200 dark:text-slate-300 dark:bg-slate-800">
3
</ShortcutIcon>
</ToolTip>
<TreeIcon className="p-2 w-full h-full" />
</SidebarLink>
@@ -42,8 +54,12 @@ export function SideBar() {
<SidebarLink to={`/j/${doc.id}/terminal`} hotKey="cmd+4">
<ToolTip arrow="left">
<Body>Terminal</Body>
<ShortcutIcon>⌘</ShortcutIcon>
<ShortcutIcon>4</ShortcutIcon>
<ShortcutIcon className="w-[26px] h-[26px] ml-1 text-slate-700 bg-slate-200 dark:text-slate-300 dark:bg-slate-800">
⌘
</ShortcutIcon>
<ShortcutIcon className="w-[26px] h-[26px] ml-1 text-slate-700 bg-slate-200 dark:text-slate-300 dark:bg-slate-800">
4
</ShortcutIcon>
</ToolTip>
<TerminalIcon className="p-2 w-full h-full" />
</SidebarLink>