Design and layout updates for X-CPQ Material Editor interface

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 */
+    height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding) - 64px);
-    overflow-y: auto; /* Scrollbar, wenn der Inhalt zu groß ist */
+    /* 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 {
+.editor-container {
-    margin-top: 16px;
+    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 */
+    list-style-type: none;
-    padding-left: 20px; /* Einrückung für die Unterlisten */
+    /* Entfernt die Standard-Aufzählungszeichen */
+    padding-left: 20px;
+    /* Einrückung für die Unterlisten */
 }
 
 .node img {
-    height: 16px; /* Höhe des Bildes */
+    height: 12px;
-    margin-right: 2px; /* Abstand zwischen Bild und Text */
+    /* 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);

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;

xcpq/buildtime/xcpq_editor/static/index.html

@@ -18,7 +18,8 @@
 <body>
     <header>
         <img src="/static/images/SimplyCPQ_Logo.svg" alt="Simply CPQ Logo" />
-        <h1>X-CPQ Material Editor</h1> <p>by Simply CPQ</p>
+        <h1>X-CPQ Material Editor</h1>
+        <p>by Simply CPQ</p>
         <nav>
             <!-- Navigation links can be added here -->
             <ul>
@@ -32,24 +33,24 @@
     </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
+            <p>Der Eigenschaftspool dient der globalen Definition von Eigenschaften.</p>
-                verwalten.</p>
+            <div class="editor-container">
-
+                <section class="editor-view">
-            <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
+                                X-CPQ-Eigenschaften
                             </summary>
                             <ul class="node">
                                 <details open>
                                     <summary>
                                         <img src="/static/images/property_type_group.svg" alt="group" />
-                                    Produktgruppe 2 Details</summary>
+                                        Systemeigenschaften
+                                    </summary>
                                     <ul class="node">
                                         <li class="leaf">
                                             <img src="/static/images/property_type.svg" alt="property" />
@@ -64,7 +65,8 @@
                                 <details open>
                                     <summary>
                                         <img src="/static/images/property_type_group.svg" alt="group" />
-                                    Produktgruppe 3 Details</summary>
+                                        Catalog Eigenschaften
+                                    </summary>
                                     <ul class="node">
                                         <li class="leaf">
                                             <img src="/static/images/property_type.svg" alt="property" />
@@ -88,12 +90,20 @@
                         </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>