🚀 Add panes

antoniovizuete · Oct 5, 2022 · e697b85 · e697b85
1 parent a80330d
commit e697b85
Show file tree

Hide file tree

Showing 8 changed files with 185 additions and 79 deletions.
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Clickhouser - Clickhouse query runner</title>
+  <title>Clickhouser - ClickHouse query runner</title>
 </head>
 
 <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "@blueprintjs/popover2": "^1.6.7",
     "@blueprintjs/table": "^4.6.8",
     "@monaco-editor/react": "^4.4.6",
+    "allotment": "1.17.0",
     "monaco-editor": "0.34.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -1,4 +1,6 @@
+import { Allotment } from "allotment";
 import { useState } from "react";
+
 import { QueryResult } from "../lib/peform-query";
 import "../styles/App.css";
 import QueryForm from "./QueryForm";
@@ -22,19 +24,17 @@ export default function App() {
   };
 
   return (
-    <main className="h-full w-full">
-      <div className="flex flex-col h-full">
-        <div className="flex-grow">
-          <QueryForm
-            onSuccess={handleOnSuccess}
-            onError={handleOnError}
-            onQuery={setLoading}
-          />
-        </div>
-        <div className="h-full">
-          <Result result={result} error={error} loading={loading} />
-        </div>
-      </div>
-    </main>
+    <Allotment vertical>
+      <Allotment.Pane minSize={100}>
+        <QueryForm
+          onSuccess={handleOnSuccess}
+          onError={handleOnError}
+          onQuery={setLoading}
+        />
+      </Allotment.Pane>
+      <Allotment.Pane>
+        <Result result={result} error={error} loading={loading} />
+      </Allotment.Pane>
+    </Allotment>
   );
 }
diff --git a/src/components/QueryForm/QueryForm.tsx b/src/components/QueryForm/QueryForm.tsx
@@ -6,9 +6,8 @@ import {
   Navbar,
 } from "@blueprintjs/core";
 import { Popover2 } from "@blueprintjs/popover2";
+import { Allotment } from "allotment";
 
-import { useState } from "react";
-import { QueryParam } from "../../lib/peform-query";
 import { GitHubIcon } from "../svgs/GitHub";
 import Editor from "./components/Editor";
 import ParameterDialog from "./components/ParameterDialog";
@@ -51,72 +50,82 @@ export default function QueryForm(props: QueryFormParams) {
   } = useQueryFormParamaterHandler({ params, setParams });
 
   return (
-    <main className="h-full w-full">
-      <Navbar className="mb-2">
-        <Navbar.Group align={Alignment.LEFT}>
-          <Navbar.Heading className="font-semibold tracking-tight text-[#eca834]">
-            Clickhouser
-          </Navbar.Heading>
-          <InputGroup
-            leftIcon="globe-network"
-            value={serverAddress}
-            placeholder="Server address"
-            onChange={(e) => setServerAddress(e.target.value)}
-            className="flex-grow"
-            size={40}
-          />
-          <InputGroup
-            leftIcon="user"
-            placeholder="Username"
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-          />
-          <InputGroup
-            leftIcon="lock"
-            placeholder="Password"
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-          />
-          <Button
-            icon="play"
-            intent="warning"
-            text="Run query"
-            onClick={runQuery}
-            disabled={!query}
-          />
-          <Popover2
-            content={
-              <ParametersMenu
-                params={params}
-                onClickAdd={handleOnAddParameter}
-                onClickRemove={handleOnRemoveParameter}
-                onClickEdit={handleOnEditParameter}
+    <>
+      <Allotment vertical>
+        <Allotment.Pane maxSize={48} minSize={48}>
+          <Navbar className="mb-2">
+            <Navbar.Group align={Alignment.LEFT}>
+              <Navbar.Heading className="font-semibold tracking-tight text-[#eca834]">
+                Clickhouser
+              </Navbar.Heading>
+              <InputGroup
+                leftIcon="globe-network"
+                value={serverAddress}
+                placeholder="Server address"
+                onChange={(e) => setServerAddress(e.target.value)}
+                className="flex-grow"
+                size={40}
               />
-            }
-            minimal
-            placement="bottom-start"
-          >
-            <Button icon="variable" intent={Intent.NONE} text="Parameters" />
-          </Popover2>
-        </Navbar.Group>
-        <Navbar.Group align={Alignment.RIGHT}>
-          <a
-            href="https://github.com/antoniovizuete/clickhouser"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <GitHubIcon />
-          </a>
-        </Navbar.Group>
-      </Navbar>
-      <Editor value={query} onChange={setQuery} onCmdEnter={runQuery} />
+              <InputGroup
+                leftIcon="user"
+                placeholder="Username"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+              />
+              <InputGroup
+                leftIcon="lock"
+                placeholder="Password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+              <Button
+                icon="play"
+                intent="warning"
+                text="Run query"
+                onClick={runQuery}
+                disabled={!query}
+              />
+              <Popover2
+                content={
+                  <ParametersMenu
+                    params={params}
+                    onClickAdd={handleOnAddParameter}
+                    onClickRemove={handleOnRemoveParameter}
+                    onClickEdit={handleOnEditParameter}
+                  />
+                }
+                minimal
+                placement="bottom-start"
+              >
+                <Button
+                  icon="variable"
+                  intent={Intent.NONE}
+                  text="Parameters"
+                />
+              </Popover2>
+            </Navbar.Group>
+            <Navbar.Group align={Alignment.RIGHT}>
+              <a
+                href="https://github.com/antoniovizuete/clickhouser"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <GitHubIcon />
+              </a>
+            </Navbar.Group>
+          </Navbar>
+        </Allotment.Pane>
+        <Allotment.Pane>
+          <Editor value={query} onChange={setQuery} onCmdEnter={runQuery} />
+        </Allotment.Pane>
+      </Allotment>
       <ParameterDialog
         data={parameterDialogData}
         isOpen={isParameterDialogOpen}
         onClose={closeParameterDialog}
         onConfirm={handleOnConfirmParameterDialog}
       />
-    </main>
+    </>
   );
 }
diff --git a/src/components/QueryForm/components/Editor.tsx b/src/components/QueryForm/components/Editor.tsx
@@ -29,7 +29,7 @@ export default function Editor({ value, onChange, onCmdEnter }: EditorProps) {
 
   return (
     <MonacoEditor
-      height="50vh"
+      height="100%"
       width="100%"
       defaultValue={value ?? "-- TYPE YOUR SQL HERE"}
       language="sql"

diff --git a/src/main.css b/src/main.css
@@ -7,3 +7,7 @@ body,
 #root {
   height: 100vh;
 }
+
+:root {
+  --focus-border: #eca834;
+}