Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 James Ritchie
|
2a3219989f | ||
|
James Ritchie
|
e8e08899dd |
@@ -0,0 +1,9 @@
|
||||
import { Body } from "./Primitives/Body";
|
||||
|
||||
export function Banner() {
|
||||
return (
|
||||
<div className="flex justify-center items-center w-screen bg-yellow-300 min-h-[30px]">
|
||||
<Body>Test Banner</Body>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -94,10 +94,7 @@ export function CodeEditor(opts: CodeEditorProps) {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
className="h-jsonViewerHeight overflow-y-auto no-scrollbar"
|
||||
ref={editor}
|
||||
/>
|
||||
<div className="h-full overflow-y-auto no-scrollbar" ref={editor} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -20,16 +20,14 @@ function ColumnElement(column: ColumnProps) {
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
"column flex-none border-r-[1px] border-slate-300 w-80 transition dark:border-slate-600"
|
||||
"column flex-none overflow-x-auto no-scrollbar border-r-[1px] border-slate-300 w-80 transition dark:border-slate-600"
|
||||
}
|
||||
>
|
||||
<div className="flex items-center text-slate-800 bg-slate-50 mb-[3px] p-2 pb-0 transition dark:bg-slate-900 dark:text-slate-300">
|
||||
{column.icon && <column.icon className="h-6 w-6 mr-1" />}
|
||||
<Title className="">{title}</Title>
|
||||
</div>
|
||||
<div className="overflow-y-auto h-viewerHeight no-scrollbar">
|
||||
{children}
|
||||
</div>
|
||||
<div className="h-full">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -10,7 +10,13 @@ import { BlankColumn } from "./BlankColumn";
|
||||
import { Column } from "./Column";
|
||||
import { ColumnItem } from "./ColumnItem";
|
||||
|
||||
function ColumnsElement({ columns }: { columns: ColumnDefinition[] }) {
|
||||
function ColumnsElement({
|
||||
columns,
|
||||
props,
|
||||
}: {
|
||||
columns: ColumnDefinition[];
|
||||
props?: any;
|
||||
}) {
|
||||
const [json] = useJson();
|
||||
const { selectedPath, highlightedPath, highlightedNodeId } =
|
||||
useJsonColumnViewState();
|
||||
@@ -27,7 +33,10 @@ function ColumnsElement({ columns }: { columns: ColumnDefinition[] }) {
|
||||
}, [highlightedPath, json]);
|
||||
|
||||
return (
|
||||
<div className="columns flex flex-grow overflow-x-auto no-scrollbar focus:outline-none">
|
||||
<div
|
||||
className="all-columns flex h-full overflow-hidden focus:outline-none"
|
||||
{...props}
|
||||
>
|
||||
{columns.map((column) => {
|
||||
return (
|
||||
<Column
|
||||
|
||||
@@ -7,7 +7,7 @@ import { ThemeModeToggler } from "./ThemeModeToggle";
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="flex items-center justify-between w-screen h-[30px] bg-slate-200 dark:bg-slate-800 border-t-[1px] border-slate-400 transition dark:border-slate-600">
|
||||
<footer className="flex items-center justify-between w-screen min-h-[30px] bg-slate-200 dark:bg-slate-800 border-t-[1px] border-slate-400 transition dark:border-slate-600">
|
||||
<ol className="flex pl-3">
|
||||
<li className="flex items-center">
|
||||
<ArrowKeysIcon className="transition text-slate-300 dark:text-slate-500" />
|
||||
|
||||
@@ -24,7 +24,7 @@ export function InfoPanel() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="h-inspectorHeight p-4 bg-white border-l-[1px] border-slate-300 overflow-y-auto no-scrollbar transition dark:bg-slate-800 dark:border-slate-600">
|
||||
<div className="h-full p-4 bg-white border-l-[1px] border-slate-300 overflow-y-auto no-scrollbar transition dark:bg-slate-800 dark:border-slate-600">
|
||||
<InfoHeader relatedPaths={relatedPaths} />
|
||||
|
||||
<div className="mb-4">
|
||||
|
||||
@@ -12,9 +12,7 @@ export function JsonColumnView() {
|
||||
return (
|
||||
<>
|
||||
<KeyboardShortcuts />
|
||||
<div {...getColumnViewProps()}>
|
||||
<Columns columns={columns} />
|
||||
</div>
|
||||
<Columns columns={columns} props={getColumnViewProps()} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -68,7 +66,9 @@ function KeyboardShortcuts() {
|
||||
[api]
|
||||
);
|
||||
|
||||
return <>
|
||||
<CopySelectedNodeShortcut />
|
||||
</>;
|
||||
return (
|
||||
<>
|
||||
<CopySelectedNodeShortcut />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@ 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-and-columns flex flex-col flex-grow overflow-x-hidden border-l-[1px] border-slate-300 transition 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 />
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
export default function Index() {
|
||||
return <Flex />;
|
||||
}
|
||||
|
||||
function Grid() {
|
||||
return (
|
||||
<div className="grid overflow-hidden grid-cols-1 grid-rows-app gap-0 h-screen">
|
||||
<div className="bg-yellow-300 border-yellow-500 border-dashed border">
|
||||
banner
|
||||
</div>
|
||||
<div className="bg-green-300 border-green-500 border-dashed border">
|
||||
header
|
||||
</div>
|
||||
<div className="bg-red-300 border-red-500 border-dashed border">
|
||||
<div className="flex h-full w-24 bg-slate-500"></div>
|
||||
</div>
|
||||
<div className="bg-blue-300 border-blue-500 border-dashed border">
|
||||
footer
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Flex() {
|
||||
return (
|
||||
<div className="flex overflow-hidden flex-col gap-0 h-screen">
|
||||
<div className="bg-yellow-300 border-yellow-500 border-dashed border min-h-8">
|
||||
banner
|
||||
</div>
|
||||
<div className="bg-green-300 border-green-500 border-dashed border min-h-8">
|
||||
header
|
||||
</div>
|
||||
<div className="bg-red-300 border-red-500 overflow-y-auto border-dashed border flex-grow">
|
||||
<div className="h-full w-48 overflow-y-auto no-scrollbar bg-slate-500">
|
||||
<div className="">
|
||||
<TestItem></TestItem>
|
||||
<TestItem></TestItem>
|
||||
<TestItem></TestItem>
|
||||
<TestItem></TestItem>
|
||||
<TestItem></TestItem>
|
||||
<TestItem></TestItem>
|
||||
<TestItem></TestItem>
|
||||
<TestItem></TestItem>
|
||||
<TestItem></TestItem>
|
||||
<TestItem></TestItem>
|
||||
<TestItem></TestItem>
|
||||
<TestItem></TestItem>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-blue-300 border-blue-500 border-dashed border min-h-8">
|
||||
footer
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TestItem() {
|
||||
return (
|
||||
<div className="flex items-center justify-center bg-orange-300 border-b-slate-900 border-b">
|
||||
<p className="text-2xl text-black">Test Item</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -28,6 +28,7 @@ import { Body } from "~/components/Primitives/Body";
|
||||
import { PageNotFoundTitle } from "~/components/Primitives/PageNotFoundTitle";
|
||||
import { SmallSubtitle } from "~/components/Primitives/SmallSubtitle";
|
||||
import { Logo } from "~/components/Icons/Logo";
|
||||
import { Banner } from "~/components/Banner";
|
||||
|
||||
export const loader: LoaderFunction = async ({ params, request }) => {
|
||||
invariant(params.id, "expected params.id");
|
||||
@@ -145,6 +146,7 @@ export default function JsonDocumentRoute() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-screen flex flex-col sm:overflow-hidden">
|
||||
<Banner />
|
||||
<Header />
|
||||
<div className="bg-slate-50 flex-grow transition dark:bg-slate-900">
|
||||
<div className="main-container flex justify-items-stretch h-full">
|
||||
|
||||
+6
-3
@@ -20,9 +20,12 @@ module.exports = {
|
||||
},
|
||||
extend: {
|
||||
height: {
|
||||
viewerHeight: "calc(100vh - 146px)",
|
||||
inspectorHeight: "calc(100vh - 70px)",
|
||||
jsonViewerHeight: "calc(100vh - 106px)",
|
||||
// viewerHeight: "calc(100vh - 146px)",
|
||||
// inspectorHeight: "calc(100vh - 70px)",
|
||||
// jsonViewerHeight: "calc(100vh - 106px)",
|
||||
},
|
||||
gridTemplateColumns: {
|
||||
'json-column': 'auto',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ["Source Sans Pro", "sans-serif"],
|
||||
|
||||
Reference in New Issue
Block a user