From 30b1f09cdf9f739f169a22d2067c5634762ece92 Mon Sep 17 00:00:00 2001 From: tsindt Date: Thu, 3 Sep 2026 21:37:28 +0200 Subject: [PATCH] Tree view und CSS refinement --- .../xcpq_editor/static/css/scpq_content.css | 41 ++++++++ .../xcpq_editor/static/css/scpq_footer.css | 11 +++ .../xcpq_editor/static/css/scpq_global.css | 39 ++++++++ .../xcpq_editor/static/css/scpq_header.css | 48 ++++++++++ .../xcpq_editor/static/css/simplycpq.css | 95 ------------------- .../static/images/property_type.svg | 1 + .../static/images/property_type_group.svg | 1 + xcpq/buildtime/xcpq_editor/static/index.html | 60 +++++++++++- 8 files changed, 199 insertions(+), 97 deletions(-) create mode 100644 xcpq/buildtime/xcpq_editor/static/css/scpq_content.css create mode 100644 xcpq/buildtime/xcpq_editor/static/css/scpq_footer.css create mode 100644 xcpq/buildtime/xcpq_editor/static/css/scpq_global.css create mode 100644 xcpq/buildtime/xcpq_editor/static/css/scpq_header.css delete mode 100644 xcpq/buildtime/xcpq_editor/static/css/simplycpq.css create mode 100644 xcpq/buildtime/xcpq_editor/static/images/property_type.svg create mode 100644 xcpq/buildtime/xcpq_editor/static/images/property_type_group.svg diff --git a/xcpq/buildtime/xcpq_editor/static/css/scpq_content.css b/xcpq/buildtime/xcpq_editor/static/css/scpq_content.css new file mode 100644 index 000000000..8ee36b536 --- /dev/null +++ b/xcpq/buildtime/xcpq_editor/static/css/scpq_content.css @@ -0,0 +1,41 @@ +/** layout Main Bereich */ + +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 */ + border: 1px solid var(--secondary-color); + border-radius: var(--box-border-radius); +} + +.tree-view { + margin-top: 16px; +} +.node { + justify-content: center; + 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 */ +} + +.leaf { + 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); + border-radius: var(--box-border-radius); +} + +.mt-16 { + margin-top: 16px; +} \ No newline at end of file diff --git a/xcpq/buildtime/xcpq_editor/static/css/scpq_footer.css b/xcpq/buildtime/xcpq_editor/static/css/scpq_footer.css new file mode 100644 index 000000000..38c4c719b --- /dev/null +++ b/xcpq/buildtime/xcpq_editor/static/css/scpq_footer.css @@ -0,0 +1,11 @@ +/** footer styles */ + +footer { + height: var(--footer-height); + background-color: var(--primary-color); + border: 1px solid var(--secondary-color); + border-radius: var(--box-border-radius); + color: var(--secondary-font-color); + margin: 16px; + padding: 10px; +} diff --git a/xcpq/buildtime/xcpq_editor/static/css/scpq_global.css b/xcpq/buildtime/xcpq_editor/static/css/scpq_global.css new file mode 100644 index 000000000..8aebc4761 --- /dev/null +++ b/xcpq/buildtime/xcpq_editor/static/css/scpq_global.css @@ -0,0 +1,39 @@ +/** global styles */ + +/* globale Variablen */ +:root { + /* colors */ + --primary-color: #1976D2; + --secondary-color: #d27519; + --font-color: #333333; + --secondary-font-color: #f3f5f4; + --background-color: #f3f5f4; + + /* Dimensions */ + --header-height: 32px; + --footer-height: 32px; + --main-content-padding: 20px; + --box-border-radius: 10px; +} + + +/* 1. Schriftart definieren */ +@font-face { + font-family: 'Inter'; /* Name, den du später im CSS verwendest */ + src: url('/static/fonts/Inter.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +* { + margin: 0; + padding: 0; +} + +/* 2. Schriftart anwenden und Ränder entfernen*/ +body { + font-family: 'Inter', Arial, sans-serif; + background-color: var(--background-color); + color: var(--font-color); +} + diff --git a/xcpq/buildtime/xcpq_editor/static/css/scpq_header.css b/xcpq/buildtime/xcpq_editor/static/css/scpq_header.css new file mode 100644 index 000000000..671115599 --- /dev/null +++ b/xcpq/buildtime/xcpq_editor/static/css/scpq_header.css @@ -0,0 +1,48 @@ +/** Header and included nav styles */ + +/* Style für Header, Navigation, Main Content, Aside und Footer */ +header { + display: flex; + justify-content: flex-start; + align-items: center; + + height: var(--header-height); + background-color: var(--primary-color); + border: 1px solid var(--secondary-color); + border-radius: var(--box-border-radius); + color: var(--secondary-font-color); + margin: 16px; + padding: 10px; +} + +header img { + height: calc(var(--header-height) - 5px); /* Adjust the image height to fit within the header */ + margin-left: 10px; /* Space between the image and the header text */ + padding-right: 16px; /* Space between the image and the header text */ +} + +header p { + font-weight: 100; + margin-left: 16px; + padding-right: 16px; +} + +nav { + margin: 16px; + padding: 10px; +} + +nav ul { + list-style-type: none; /* Entfernt die Standard-Aufzählungszeichen */ + display: flex; /* Macht die Liste horizontal */ + gap: 20px; /* Abstand zwischen den Listenelementen */ +} + +nav ul li a { + text-decoration: none; /* Entfernt die Unterstreichung */ + color: var(--secondary-font-color); /* Setzt die Schriftfarbe */ +} +nav ul li a:hover { + text-decoration: underline; /* Unterstreichung beim Überfahren mit der Maus */ + font-weight: bold; /* Macht den Text fett */ +} diff --git a/xcpq/buildtime/xcpq_editor/static/css/simplycpq.css b/xcpq/buildtime/xcpq_editor/static/css/simplycpq.css deleted file mode 100644 index 8df4589ca..000000000 --- a/xcpq/buildtime/xcpq_editor/static/css/simplycpq.css +++ /dev/null @@ -1,95 +0,0 @@ -/** global styles */ - -/* globale Variablen */ -:root { - /* colors */ - --primary-color: #1976D2; - --secondary-color: #d27519; - --font-color: #333333; - --secondary-font-color: #f3f5f4; - --background-color: #f3f5f4; - - /* Dimensions */ - --header-height: 32px; - --footer-height: 32px; - --main-content-padding: 20px; - --box-border-radius: 10px; -} - - -/* 1. Schriftart definieren */ -@font-face { - font-family: 'Inter'; /* Name, den du später im CSS verwendest */ - src: url('/static/fonts/Inter.ttf') format('truetype'); - font-weight: normal; - font-style: normal; -} - -* { - margin: 0; - padding: 0; -} - -/* 2. Schriftart anwenden und Ränder entfernen*/ -body { - font-family: 'Inter', Arial, sans-serif; - background-color: var(--background-color); - color: var(--font-color); -} - -/* Style für allgemeine Elemente */ -.box { - border: 1px solid var(--primary-color); - border-radius: var(--box-border-radius); -} - -/* Style für Header, Navigation, Main Content, Aside und Footer */ -header { - display: flex; - justify-content: flex-start; - align-items: center; - - height: var(--header-height); - background-color: var(--primary-color); - border: 1px solid var(--secondary-color); - border-radius: var(--box-border-radius); - color: var(--secondary-font-color); - margin: 16px; - padding: 10px; -} - -nav { - margin: 16px; - padding: 10px; -} - -nav ul { - list-style-type: none; /* Entfernt die Standard-Aufzählungszeichen */ - display: flex; /* Macht die Liste horizontal */ - gap: 20px; /* Abstand zwischen den Listenelementen */ -} - -nav ul li a { - text-decoration: none; /* Entfernt die Unterstreichung */ - color: var(--secondary-font-color); /* Setzt die Schriftfarbe */ - font-weight: bold; /* Macht den Text fett */ -} - -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 */ - border: 1px solid var(--secondary-color); - border-radius: var(--box-border-radius); -} - -footer { - height: var(--footer-height); - background-color: var(--primary-color); - border: 1px solid var(--secondary-color); - border-radius: var(--box-border-radius); - color: var(--secondary-font-color); - margin: 16px; - padding: 10px; -} diff --git a/xcpq/buildtime/xcpq_editor/static/images/property_type.svg b/xcpq/buildtime/xcpq_editor/static/images/property_type.svg new file mode 100644 index 000000000..963c2d6b2 --- /dev/null +++ b/xcpq/buildtime/xcpq_editor/static/images/property_type.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/xcpq/buildtime/xcpq_editor/static/images/property_type_group.svg b/xcpq/buildtime/xcpq_editor/static/images/property_type_group.svg new file mode 100644 index 000000000..a2f71ecee --- /dev/null +++ b/xcpq/buildtime/xcpq_editor/static/images/property_type_group.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/xcpq/buildtime/xcpq_editor/static/index.html b/xcpq/buildtime/xcpq_editor/static/index.html index cf7336f74..0d3e5ab0e 100644 --- a/xcpq/buildtime/xcpq_editor/static/index.html +++ b/xcpq/buildtime/xcpq_editor/static/index.html @@ -7,14 +7,18 @@ X-CPQ by Simply CPQ - + + + +
-

X-CPQ by Simply CPQ

+ Simply CPQ Logo +

X-CPQ Material Editor

by Simply CPQ