From 6931a777a2bd373fda8244f1eb1119e32ace7310 Mon Sep 17 00:00:00 2001
From: STEINNI <nicolas.stein@ext.ec.europa.eu>
Date: Thu, 23 Oct 2025 16:41:05 +0000
Subject: [PATCH] kfeditor : html & css cleanup

---
 app/views/editors/KeyframeView.html | 33 +++++++++++++++++------------
 app/views/editors/KeyframeView.js   |  3 +++
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/app/views/editors/KeyframeView.html b/app/views/editors/KeyframeView.html
index 0eab4c1..78176a4 100644
--- a/app/views/editors/KeyframeView.html
+++ b/app/views/editors/KeyframeView.html
@@ -8,25 +8,32 @@
         height: 100%;
         margin: 0;
     }
-    .kf-editor > article, .kf-editor > article header{ border-color: #473; }
-    .kf-editor article.agent-preview header { padding:0; }
     .kf-editor canvas[data-output="agentSampleCanvas"]{ width:100%; aspect-ratio: 1 / 1;} 
     .kf-editor canvas[data-output="kfArenaCanvas"]{ width:100%; height:100%; } 
-    .kf-editor article.agent-preview section{
+    .kf-editor article.left-pane section{
         display: grid;
         grid-template-rows: 2em auto;
         overflow: visible; 
     }
      .kf-editor article.agent-properties section{
         display: grid;
-        grid-template-rows: 2em auto;
+        grid-template-rows: 2em 3em auto;
         overflow: visible;
         height:100%;
     }
-    .kf-editor article.agent-preview section.selector{ padding: 0.5em .5em 1.5em .5em; }
-    .kf-editor article.agent-preview section.browser{ padding:0; }
-    .kf-editor article.agent-preview section.browser header { border-top: 1px solid #473; border-bottom: 1px solid #473;}
-    .kf-editor article.agent-preview section.browser header h1{ text-align: center; margin-top: .3em;}
+    .kf-editor article.left-pane > section, .kf-editor article.agent-properties > section { padding:0; }
+    .kf-editor article.left-pane > section header, .kf-editor article.agent-properties > section header {
+        margin: 0; 
+        padding: 0;
+        border-top: 1px solid #473; 
+        border-bottom: 1px solid #473;
+        background-color: #342;
+    }
+    .kf-editor article.left-pane > section header h1, .kf-editor article.agent-properties > section header h1{ 
+        text-align: center; 
+        margin-top: .3em;
+    }
+    .kf-editor article.left-pane > section > bz-select{ margin: 0 0.5em 1em 0.5em; }
     .kf-editor article.kfArena section{
         padding: 0;
         height: 100%;
@@ -39,6 +46,7 @@
         box-shadow: 0px 0px 7px #0B69;
         height: 2em;
         padding: 0 5px 0 5px;
+        margin-top: .5em;
     }
     .kf-editor article.agent-properties section div.agent-actions button{
         color: #DDD;
@@ -55,8 +63,6 @@
     .kf-editor button[data-trigger="onRemoveAgent"] { background-color: #A00; }
     .kf-editor button[data-trigger="onSaveKF"] { background-color: #367; }
     .kf-editor button[data-trigger="onResetKF"] { background-color: #A00; }    
-    .kf-editor section[data-output="agentProperties"] label{ font-size: 0.9em; }
-    .kf-editor section[data-output="agentProperties"] div.cols-2 { grid-template-columns: 4fr 3fr; }
     .kf-editor div[data-output="agentId"] {
         border: 1px solid #574;
         border-radius: 5px;
@@ -69,9 +75,10 @@
     }
 </style>
 <div class="kf-editor cols-3">
-    <article eiccard class="agent-preview">
-        <header><canvas data-output="agentSampleCanvas"></canvas></header>
+    <article eiccard class="left-pane">
         <section class="selector">
+            <header><h1>Agent type browser</h1></header>
+            <canvas data-output="agentSampleCanvas"></canvas>
             <bz-select label="Agent type..." data-output="agentsSelector"></bz-select>
         </section>
         <section class="browser">
@@ -84,8 +91,8 @@
         </section>
     </article>
     <article eiccard class="agent-properties">
-        <header><h1>Agent properties</h1></header>
         <section>
+            <header><h1>Agent properties</h1></header>
             <div class="agent-actions cols-2">
                 <button eicbutton rounded data-output="btnAddAgent" data-trigger="onAddAgent">Create agent</button>
                 <button eicbutton rounded data-output="btnRemoveAgent" data-trigger="onRemoveAgent" >Remove agent</button>
diff --git a/app/views/editors/KeyframeView.js b/app/views/editors/KeyframeView.js
index 9bb9bfe..3e62723 100644
--- a/app/views/editors/KeyframeView.js
+++ b/app/views/editors/KeyframeView.js
@@ -124,6 +124,9 @@ class KeyframeView extends WindozDomContent {
         this.setupRefs()
     }
 
+    onSaveKF(evt){
+        console.log('SAVE:',this.kfArena.agents)
+    }
 
 }