tsindt/simply_cpq
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design and layout updates for X-CPQ Material Editor interface

Browse Source
This commit is contained in:
tsindt
2026-09-03 23:14:59 +02:00
parent 30b1f09cdf
commit 441e218428
3 changed files with 111 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
xcpq/buildtime/xcpq_editor/static/css/scpq_content.css
+36 -9
View File
@@ -3,33 +3,60 @@
main { main {
padding: var(--main-content-padding); padding: var(--main-content-padding);
margin: 16px; 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: 1px solid var(--secondary-color);
border-radius: var(--box-border-radius); 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 { .node {
justify-content: center; 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 { .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 { .leaf {
padding-left: 20px; /* Einrückung für Blätter */ padding-left: 20px;
/* Einrückung für Blätter */
color: var(--primary-color); color: var(--primary-color);
font-weight: lighter; font-weight: lighter;
} }
/* Style für allgemeine Elemente */ /* Style für allgemeine Elemente */
.box { .box {
border: 1px solid var(--primary-color); border: 1px solid var(--primary-color);
xcpq/buildtime/xcpq_editor/static/css/scpq_global.css
+4
View File
@@ -8,6 +8,10 @@
--font-color: #333333; --font-color: #333333;
--secondary-font-color: #f3f5f4; --secondary-font-color: #f3f5f4;
--background-color: #f3f5f4; --background-color: #f3f5f4;
--highlight-color: #f0f0f0;
--error-color: #ff4d4f;
--success-color: #52c41a;
--data-background-color: #ffffff;
/* Dimensions */ /* Dimensions */
--header-height: 32px; --header-height: 32px;
xcpq/buildtime/xcpq_editor/static/index.html
+33 -23
View File
@@ -17,8 +17,9 @@
<body> <body>
<header> <header>
<img src="/static/images/SimplyCPQ_Logo.svg" alt="Simply CPQ Logo"/> <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> <nav>
<!-- Navigation links can be added here --> <!-- Navigation links can be added here -->
<ul> <ul>
@@ -32,68 +33,77 @@
</header> </header>
<main> <main>
<section id="main-content"> <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 --> <!-- 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> <h3>Property Type Groups</h3>
<ul class="node mt-16"> <ul class="node mt-16">
<details open> <details open>
<summary> <summary>
<img src="/static/images/property_type_group.svg" alt="group"/> <img src="/static/images/property_type_group.svg" alt="group" />
Produktgruppe Root Details X-CPQ-Eigenschaften
</summary> </summary>
<ul class="node"> <ul class="node">
<details open> <details open>
<summary> <summary>
<img src="/static/images/property_type_group.svg" alt="group"/> <img src="/static/images/property_type_group.svg" alt="group" />
Produktgruppe 2 Details</summary> Systemeigenschaften
</summary>
<ul class="node"> <ul class="node">
<li class="leaf"> <li class="leaf">
<img src="/static/images/property_type.svg" alt="property"/> <img src="/static/images/property_type.svg" alt="property" />
Eigenschaft 1 Eigenschaft 1
</li> </li>
<li class="leaf"> <li class="leaf">
<img src="/static/images/property_type.svg" alt="property"/> <img src="/static/images/property_type.svg" alt="property" />
Eigenschaft 2 Eigenschaft 2
</li> </li>
</ul> </ul>
</details> </details>
<details open> <details open>
<summary> <summary>
<img src="/static/images/property_type_group.svg" alt="group"/> <img src="/static/images/property_type_group.svg" alt="group" />
Produktgruppe 3 Details</summary> Catalog Eigenschaften
</summary>
<ul class="node"> <ul class="node">
<li class="leaf"> <li class="leaf">
<img src="/static/images/property_type.svg" alt="property"/> <img src="/static/images/property_type.svg" alt="property" />
Eigenschaft 1 Eigenschaft 1
</li> </li>
<li class="leaf"> <li class="leaf">
<img src="/static/images/property_type.svg" alt="property"/> <img src="/static/images/property_type.svg" alt="property" />
Eigenschaft 2 Eigenschaft 2
</li> </li>
</ul> </ul>
</details> </details>
<li class="leaf"> <li class="leaf">
<img src="/static/images/property_type.svg" alt="property"/> <img src="/static/images/property_type.svg" alt="property" />
Eigenschaft 1 Eigenschaft 1
</li> </li>
<li class="leaf"> <li class="leaf">
<img src="/static/images/property_type.svg" alt="property"/> <img src="/static/images/property_type.svg" alt="property" />
Eigenschaft 2 Eigenschaft 2
</li> </li>
</ul> </ul>
</details> </details>
</ul> </ul>
</section> </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> </section>
<aside>
<!-- Additional content can be added here -->
<p>Randnotiz</p>
</aside>
</main> </main>
<footer> <footer>
<!-- Footer content can be added here --> <!-- Footer content can be added here -->
<p>&copy; 2026 Simply CPQ</p> <p>&copy; 2026 Simply CPQ</p>