From 441e2184286663df966f81785ec9599d5421a938 Mon Sep 17 00:00:00 2001
From: Thomas Sindt <Thomas.Sindt@gmx.de>
Date: Thu, 3 Sep 2026 23:14:59 +0200
Subject: [PATCH] Design and layout updates for X-CPQ Material Editor interface

---
 .../xcpq_editor/static/css/scpq_content.css   |  45 ++++--
 .../xcpq_editor/static/css/scpq_global.css    |   4 +
 xcpq/buildtime/xcpq_editor/static/index.html  | 132 ++++++++++--------
 3 files changed, 111 insertions(+), 70 deletions(-)

diff --git a/xcpq/buildtime/xcpq_editor/static/css/scpq_content.css b/xcpq/buildtime/xcpq_editor/static/css/scpq_content.css
index 8ee36b536..0753e1a83 100644
--- a/xcpq/buildtime/xcpq_editor/static/css/scpq_content.css
+++ b/xcpq/buildtime/xcpq_editor/static/css/scpq_content.css
@@ -3,33 +3,60 @@
 main {
     padding: var(--main-content-padding);
     margin: 16px;
-    height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding) - 64px); /* 32px für die Margen */
-    overflow-y: auto; /* Scrollbar, wenn der Inhalt zu groß ist */
+    height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding) - 64px);
+    /* 32px für die Margen */
+    overflow-y: auto;
+    /* Scrollbar, wenn der Inhalt zu groß ist */
     border: 1px solid var(--secondary-color);
     border-radius: var(--box-border-radius);
 }
 
-.tree-view {
-    margin-top: 16px;
+.editor-container {
+    height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding) - 132px);
+    display: flex;
+    flex-direction: row;
+    /* Elemente horizontal anordnen */
+    gap: 16px;
+    /* Abstand zwischen den Elementen */
+    padding: 16px;
+    /* Innenabstand */
+    border-radius: var(--box-border-radius);
+    background-color: var(--data-background-color);
 }
+
+.editor-view {
+    margin-top: 8px;
+    padding: 8px;
+    border: 1px solid var(--primary-color);
+    border-radius: var(--box-border-radius);
+}
+
+/** tree components */
 .node {
     justify-content: center;
-    list-style-type: none; /* Entfernt die Standard-Aufzählungszeichen */
-    padding-left: 20px; /* Einrückung für die Unterlisten */
+    list-style-type: none;
+    /* Entfernt die Standard-Aufzählungszeichen */
+    padding-left: 20px;
+    /* Einrückung für die Unterlisten */
 }
 
 .node img {
-    height: 16px; /* Höhe des Bildes */
-    margin-right: 2px; /* Abstand zwischen Bild und Text */
+    height: 12px;
+    /* Höhe des Bildes */
+    margin-right: 2px;
+    /* Abstand zwischen Bild und Text */
 }
 
 .leaf {
-    padding-left: 20px; /* Einrückung für Blätter */
+    padding-left: 20px;
+    /* Einrückung für Blätter */
     color: var(--primary-color);
     font-weight: lighter;
 }
 
 
+
+
 /* Style für allgemeine Elemente */
 .box {
     border: 1px solid var(--primary-color);
diff --git a/xcpq/buildtime/xcpq_editor/static/css/scpq_global.css b/xcpq/buildtime/xcpq_editor/static/css/scpq_global.css
index 8aebc4761..e301b3f99 100644
--- a/xcpq/buildtime/xcpq_editor/static/css/scpq_global.css
+++ b/xcpq/buildtime/xcpq_editor/static/css/scpq_global.css
@@ -8,6 +8,10 @@
     --font-color: #333333;
     --secondary-font-color: #f3f5f4;
     --background-color: #f3f5f4;
+    --highlight-color: #f0f0f0;
+    --error-color: #ff4d4f;
+    --success-color: #52c41a;
+    --data-background-color: #ffffff;
 
     /* Dimensions */
     --header-height: 32px;
diff --git a/xcpq/buildtime/xcpq_editor/static/index.html b/xcpq/buildtime/xcpq_editor/static/index.html
index 0d3e5ab0e..fe2d14a0a 100644
--- a/xcpq/buildtime/xcpq_editor/static/index.html
+++ b/xcpq/buildtime/xcpq_editor/static/index.html
@@ -17,8 +17,9 @@
 
 <body>
     <header>
-        <img src="/static/images/SimplyCPQ_Logo.svg" alt="Simply CPQ Logo"/>
-        <h1>X-CPQ Material Editor</h1> <p>by Simply CPQ</p>
+        <img src="/static/images/SimplyCPQ_Logo.svg" alt="Simply CPQ Logo" />
+        <h1>X-CPQ Material Editor</h1>
+        <p>by Simply CPQ</p>
         <nav>
             <!-- Navigation links can be added here -->
             <ul>
@@ -32,68 +33,77 @@
     </header>
     <main>
         <section id="main-content">
-            <h2>Willkommen bei X-CPQ Material Editor</h2>
+            <h2>X-CPQ Material Editor: Eigenschaften</h2>
             <!-- Main content can be added here -->
-            <p>Der Software, die Dir hilft, Deine variantenreichen und ggf. erklärungsbedürftigen Produkte effizient zu
-                verwalten.</p>
-
-            <section class="tree-view">
-                <h3>Property Type Groups</h3>
-                <ul class="node mt-16">
-                    <details open>
-                        <summary>
-                            <img src="/static/images/property_type_group.svg" alt="group"/>
-                            Produktgruppe Root Details
-                        </summary>
-                        <ul class="node">
-                            <details open>
-                                <summary>
-                                    <img src="/static/images/property_type_group.svg" alt="group"/>
-                                    Produktgruppe 2 Details</summary>
-                                <ul class="node">
-                                    <li class="leaf">
-                                        <img src="/static/images/property_type.svg" alt="property"/>
-                                        Eigenschaft 1
-                                    </li>
-                                    <li class="leaf">
-                                        <img src="/static/images/property_type.svg" alt="property"/>
-                                        Eigenschaft 2
-                                    </li>
-                                </ul>
-                            </details>
-                            <details open>
-                                <summary>
-                                    <img src="/static/images/property_type_group.svg" alt="group"/>
-                                    Produktgruppe 3 Details</summary>
-                                <ul class="node">
-                                    <li class="leaf">
-                                        <img src="/static/images/property_type.svg" alt="property"/>
-                                        Eigenschaft 1
-                                    </li>
-                                    <li class="leaf">
-                                        <img src="/static/images/property_type.svg" alt="property"/>
-                                        Eigenschaft 2
-                                    </li>
-                                </ul>
-                            </details>
-                            <li class="leaf">
-                                <img src="/static/images/property_type.svg" alt="property"/>
-                                Eigenschaft 1
-                            </li>
-                            <li class="leaf">
-                                <img src="/static/images/property_type.svg" alt="property"/>
-                                Eigenschaft 2
-                            </li>
-                        </ul>
-                    </details>
-                </ul>
-            </section>    
+            <p>Der Eigenschaftspool dient der globalen Definition von Eigenschaften.</p>
+            <div class="editor-container">
+                <section class="editor-view">
+                    <h3>Property Type Groups</h3>
+                    <ul class="node mt-16">
+                        <details open>
+                            <summary>
+                                <img src="/static/images/property_type_group.svg" alt="group" />
+                                X-CPQ-Eigenschaften
+                            </summary>
+                            <ul class="node">
+                                <details open>
+                                    <summary>
+                                        <img src="/static/images/property_type_group.svg" alt="group" />
+                                        Systemeigenschaften
+                                    </summary>
+                                    <ul class="node">
+                                        <li class="leaf">
+                                            <img src="/static/images/property_type.svg" alt="property" />
+                                            Eigenschaft 1
+                                        </li>
+                                        <li class="leaf">
+                                            <img src="/static/images/property_type.svg" alt="property" />
+                                            Eigenschaft 2
+                                        </li>
+                                    </ul>
+                                </details>
+                                <details open>
+                                    <summary>
+                                        <img src="/static/images/property_type_group.svg" alt="group" />
+                                        Catalog Eigenschaften
+                                    </summary>
+                                    <ul class="node">
+                                        <li class="leaf">
+                                            <img src="/static/images/property_type.svg" alt="property" />
+                                            Eigenschaft 1
+                                        </li>
+                                        <li class="leaf">
+                                            <img src="/static/images/property_type.svg" alt="property" />
+                                            Eigenschaft 2
+                                        </li>
+                                    </ul>
+                                </details>
+                                <li class="leaf">
+                                    <img src="/static/images/property_type.svg" alt="property" />
+                                    Eigenschaft 1
+                                </li>
+                                <li class="leaf">
+                                    <img src="/static/images/property_type.svg" alt="property" />
+                                    Eigenschaft 2
+                                </li>
+                            </ul>
+                        </details>
+                    </ul>
+                </section>
+                <section class="editor-view">
+                    <h3>Property-Type</h3>
+                    <p>Hier können die Details der ausgewählten Eigenschaft bearbeitet werden.</p>
+                    <!-- Editor content can be added here -->
+                </section>
+                <section class="editor-view">
+                    <h3>Values</h3>
+                    <p>Hier können die Werte der ausgewählten Eigenschaft bearbeitet werden.</p>
+                    <!-- Editor content can be added here -->
+                </section>
+            </div>
         </section>
-        <aside>
-            <!-- Additional content can be added here -->
-            <p>Randnotiz</p>
-        </aside>
     </main>
+    
     <footer>
         <!-- Footer content can be added here -->
         <p>&copy; 2026 Simply CPQ</p>