CSS fixes, refactor

This commit is contained in:
Quinten Kock 2025-10-18 03:13:34 +02:00
parent 9096973dc6
commit 75e0d1b3d5
3 changed files with 41 additions and 25 deletions

View File

@ -12,7 +12,7 @@ const fixedHeightEditor = EditorView.theme({
minWidth: "8em",
flex: "none",
},
".cm-scroller": { overflow: "auto" },
".cm-scroller": { overflow: "auto scroll" },
});
export class Editor {

35
src/app/editorgrid.ts Normal file
View File

@ -0,0 +1,35 @@
import van from "vanjs-core";
import * as vanX from "vanjs-ext";
const v = van.tags;
import { Editor } from "./editor";
import * as u from "./utils";
const EditorWrapper = (editor: any, del: any, k: any) =>
v.div(
{ class: "flex flex-col" },
v.div(
{ class: "flex" },
v.span({ class: "mx-1 flex-1" }, "Editor " + k),
u.InlineButton(del, "Close", "❌"),
),
v.div({ class: "flex-auto h-4" }, editor.val.dom),
);
const editors = vanX.reactive([]);
export function addEditor() {
editors.push(vanX.noreactive(new Editor()));
}
export const EditorGrid = v.main({
class: "flex flex-auto gap-4 overflow-x-auto",
});
vanX.list(EditorGrid, editors, EditorWrapper);
// const grid = v.main({
// class: "flex flex-auto gap-4 overflow-x-auto",
// });
// export const EditorGrid = vanX.list(grid, editors, EditorWrapper);
// vanX.list(document.getElementById("editorGrid"), editors, EditorWrapper);
// van.add(document.getElementById("editorGrid"), EditorGrid);

View File

@ -7,30 +7,11 @@ const v = van.tags;
import { Editor } from "./editor";
import { FolderTreeView } from "./foldernav";
import { EditorGrid, addEditor } from "./editorgrid";
import * as u from "./utils";
const EditorWrapper = (editor: any, del: any, k: any) =>
v.div(
{ class: "flex flex-col" },
v.div(
{ class: "flex" },
v.span({ class: "mx-1 flex-1" }, "Editor " + k),
u.InlineButton(del, "Close", "❌"),
),
v.div({ class: "h-full" }, editor.val.dom),
);
// Create and mount editor list
const editors = vanX.reactive([]);
vanX.list(document.getElementById("editorGrid"), editors, EditorWrapper);
function addView() {
editors.push(vanX.noreactive(new Editor()));
}
document.getElementById("addEditor")?.addEventListener("click", addView);
addView();
// Mount the folder tree view to the nav
van.add(document.querySelector("aside nav"), FolderTreeView);
van.add(document.getElementById("editorGrid"), EditorGrid);
document.getElementById("addEditor")?.addEventListener("click", addEditor);
addEditor();