Scaffold pane layout

offen · Jan 25, 2025 · b182316 · b182316
1 parent ed28df0
commit b182316
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -13,23 +13,50 @@
         <p>{{ globalError.message }}</p>
         <pre>{{ globalError.stack }}</pre>
       </div>
-      <div v-else-if="pyodide">
-        <h1 class="sans-serif f1">
-          Pyla
-        </h1>
-        <label>
-          Script
-          <textarea class="db" v-model="script"></textarea>
-        </label>
-        <label>
-          Requirements
-          <textarea class="db" v-model="requirements"></textarea>
-        </label>
-        <button @click="run">Run Script</button>
-        <div>
-          <pre v-if="output.length">{{ output.join('\n') }}</pre>
-          <pre v-else>Output goes here ...</pre>
-        </div>
+      <div v-else-if="pyodide" id="container">
+        <splitpanes horizontal class="default-theme">
+          <pane max-size="20">
+            <h1 class="sans-serif f1 ml4">
+              Pyla
+            </h1>
+          </pane>
+          <pane>
+            <splitpanes>
+              <pane max-size="25">
+                File Tree goes here ...
+              </pane>
+              <pane>
+                <splitpanes horizontal>
+                  <pane>
+                    <splitpanes>
+                      <pane>
+                        <label>
+                          Script
+                          <textarea class="db w-100 h-100" v-model="script"></textarea>
+                        </label>
+                      </pane>
+                      <pane>
+                        <label>
+                          Requirements
+                          <textarea class="db w-100 h-100" v-model="requirements"></textarea>
+                        </label>
+                      </pane>
+                    </splitpanes>
+                  </pane>
+                  <pane max-size="42">
+                    <div>
+                      <button @click="run">Run Script</button>
+                    </div>
+                    <div>
+                      <pre v-if="output.length">{{ output.join('\n') }}</pre>
+                      <pre v-else>Output goes here ...</pre>
+                    </div>
+                  </pane>
+                </splitpanes>
+              </pane>
+            </splitpanes>
+          </pane>
+        </splitpanes>
       </div>
       <div v-else>
         <p>Python runtime is initializing ...</p>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "splitpanes": "^3.1.8",
     "vue": "^3.5.13"
   },
   "devDependencies": {

diff --git a/public/style.css b/public/style.css
@@ -5,3 +5,7 @@
 #app {
   max-width: 1280px;
 }
+
+html, body, #app, #container {
+  height: 100%;
+}
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,9 @@
 import { createApp } from 'vue'
+import { Splitpanes, Pane } from 'splitpanes'
+import 'splitpanes/dist/splitpanes.css'
 
 createApp({
+  components: { Splitpanes, Pane },
   data() {
     return {
       pyodide: null,