Panels V1: basic panel overview, basic binding of macros to buttons, basic panel-view.

This commit is contained in:
Jesse Malotaux 2025-04-11 13:50:24 +02:00
parent 45d3135aa9
commit 887080efa6
9 changed files with 538 additions and 111 deletions

View file

@ -1,6 +0,0 @@
{
"name": "Almost empty panel",
"description": "This is the third panel to be created. It is also a test panel.",
"aspectRatio": "4/3",
"macros": {}
}

View file

@ -6,116 +6,116 @@
<title>Document</title>
<link rel="stylesheet" href="./output.css" />
</head>
<body class="bg-slate-400 w-screen h-screen m-0">
<div class="h-full aspect-[9/20] bg-slate-500 border border-red-500">
<div class="size-full grid grid-cols-2 grid-rows-8 gap-2">
<body class="bg-slate-400 w-screen h-screen m-0 aspect-[9/20]">
<div class="h-full bg-slate-500">
<div class="grid grid-cols-2 gap-2 size-full grid-rows-8">
<div
class="bg-sky-400 flex justify-center items-center"
class="flex items-center justify-center bg-sky-400"
id="button_1"
mcrm__button
>
button1
Task manager
</div>
<div
class="bg-sky-400 flex justify-center items-center"
class="flex items-center justify-center bg-sky-400"
id="button_2"
mcrm__button
>
button2
Close window
</div>
<div
class="bg-sky-400 flex justify-center items-center"
class="flex items-center justify-center bg-sky-400"
id="button_3"
mcrm__button
>
button3
</div>
<div
class="bg-sky-400 flex justify-center items-center"
class="flex items-center justify-center bg-sky-400"
id="button_4"
mcrm__button
>
button4
</div>
<div
class="bg-sky-400 flex justify-center items-center"
class="flex items-center justify-center bg-sky-400"
id="button_5"
mcrm__button
>
button5
</div>
<div
class="bg-sky-400 flex justify-center items-center"
class="flex items-center justify-center bg-sky-400"
id="button_6"
mcrm__button
>
button6
</div>
<div
class="bg-sky-400 flex justify-center items-center"
class="flex items-center justify-center bg-sky-400"
id="button_7"
mcrm__button
>
button7
</div>
<div
class="bg-sky-400 flex justify-center items-center"
class="flex items-center justify-center bg-sky-400"
id="button_8"
mcrm__button
>
button8
</div>
<div
class="bg-sky-400 flex justify-center items-center"
class="flex items-center justify-center bg-sky-400"
id="button_9"
mcrm__button
>
button9
</div>
<div
class="bg-sky-400 flex justify-center items-center"
class="flex items-center justify-center bg-sky-400"
id="button_10"
mcrm__button
>
button10
</div>
<div
class="bg-sky-400 flex justify-center items-center"
class="flex items-center justify-center bg-sky-400"
id="button_11"
mcrm__button
>
button11
</div>
<div
class="bg-sky-400 flex justify-center items-center"
class="flex items-center justify-center bg-sky-400"
id="button_12"
mcrm__button
>
button12
</div>
<div
class="bg-sky-400 flex justify-center items-center"
class="flex items-center justify-center bg-sky-400"
id="button_13"
mcrm__button
>
button13
</div>
<div
class="bg-sky-400 flex justify-center items-center"
class="flex items-center justify-center bg-sky-400"
id="button_14"
mcrm__button
>
button14
</div>
<div
class="bg-sky-400 flex justify-center items-center"
class="flex items-center justify-center bg-sky-400"
id="button_15"
mcrm__button
>
button15
</div>
<div
class="bg-sky-400 flex justify-center items-center"
class="flex items-center justify-center bg-sky-400"
id="button_16"
mcrm__button
>

View file

@ -1,8 +1 @@
{
"name": "Test Panel 1",
"description": "This is the very first panel to be created. It is a test panel.",
"aspectRatio": "9/20",
"macros": {
"button_1": "task_manager"
}
}
{"dir":"","name":"Test Panel 1","description":"This is the very first panel to be created. It is a test panel. I'm gonna add more words to this description, not because it's an unclear description. But more so to test long descriptions in the UI. Very Nice.","aspectRatio":"10/20","macros":{"button_1":"Task_manager","button_16":"Task_manager","button_2":"ALT+F4"}}