From 0cc83a0c193acc3c69868eb014d7e05c029b54e2 Mon Sep 17 00:00:00 2001 From: Thomas Sindt Date: Wed, 29 Jul 2026 00:03:24 +0200 Subject: [PATCH] -React ui tested --- .../logical-editor/public/SimplyCPQ_Logo.svg | 1 + buildtime/client/logical-editor/src/App.css | 37 +++++++++++++++++-- buildtime/client/logical-editor/src/App.jsx | 3 +- .../src/components/LangSideBar.jsx | 20 ++++++++++ .../src/components/Language.jsx | 11 +++--- .../logical-editor/src/components/NavBar.jsx | 2 +- buildtime/client/logical-editor/src/index.css | 3 +- buildtime/client/package-lock.json | 6 +++ 8 files changed, 70 insertions(+), 13 deletions(-) create mode 100644 buildtime/client/logical-editor/public/SimplyCPQ_Logo.svg create mode 100644 buildtime/client/logical-editor/src/components/LangSideBar.jsx create mode 100644 buildtime/client/package-lock.json diff --git a/buildtime/client/logical-editor/public/SimplyCPQ_Logo.svg b/buildtime/client/logical-editor/public/SimplyCPQ_Logo.svg new file mode 100644 index 000000000..deca30faa --- /dev/null +++ b/buildtime/client/logical-editor/public/SimplyCPQ_Logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/buildtime/client/logical-editor/src/App.css b/buildtime/client/logical-editor/src/App.css index 1c895ac36..3755f00a1 100644 --- a/buildtime/client/logical-editor/src/App.css +++ b/buildtime/client/logical-editor/src/App.css @@ -4,7 +4,7 @@ display: flex; background: var(--code-bg); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - height: 30px; + height: 50px; } .navbar h1 { @@ -24,11 +24,40 @@ } .logo { - width: 60px; - height: 60px; + width: 55px; + height: 55px; float: right; align-items: right; margin-right: 5px; margin-left: 5px; - margin-top: -15px; + margin-top: -5px; +} + +.sidebar { + padding: 16px; + color: gray; + background: var(--code-bg); + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + height: 100%; + width: 200px; +} + +.sidebar h1 { + font-size: 16px; + letter-spacing: -1.68px; + margin: 4px 10px 0 0; + @media (max-width: 1024px) { + font-size: 14px; + margin: 20px 0; + } +} + +.sidebar h2 { + font-size: 14px; + letter-spacing: -1px; + margin: 8px 16px 0 0; + @media (max-width: 1024px) { + font-size: 14px; + margin: 20px 0; + } } \ No newline at end of file diff --git a/buildtime/client/logical-editor/src/App.jsx b/buildtime/client/logical-editor/src/App.jsx index 1c4d1544a..9363b85cb 100644 --- a/buildtime/client/logical-editor/src/App.jsx +++ b/buildtime/client/logical-editor/src/App.jsx @@ -1,13 +1,14 @@ import { useState } from 'react' import './App.css' import NavBar from './components/NavBar.jsx' +import LangSideBar from './components/LangSideBar.jsx' const App = () => { return (
-
+
diff --git a/buildtime/client/logical-editor/src/components/LangSideBar.jsx b/buildtime/client/logical-editor/src/components/LangSideBar.jsx new file mode 100644 index 000000000..a24a25b0d --- /dev/null +++ b/buildtime/client/logical-editor/src/components/LangSideBar.jsx @@ -0,0 +1,20 @@ +import React, { Component } from 'react'; +import { useState } from 'react' +import Language from './Language'; + +const LangSideBar = () => { + return ( + + ); +}; + +export default LangSideBar; diff --git a/buildtime/client/logical-editor/src/components/Language.jsx b/buildtime/client/logical-editor/src/components/Language.jsx index e8dc056c9..b5ec8b9b9 100644 --- a/buildtime/client/logical-editor/src/components/Language.jsx +++ b/buildtime/client/logical-editor/src/components/Language.jsx @@ -1,12 +1,11 @@ -import UseFetch from './tools/UseFetch'; - -function Language ({ languageid }) { +import { useState } from 'react' +//import UseFetch from './tools/UseFetch'; +const Language = ({ languageid }) => { return ( -
-

Language Komponent

- +
+

Language ${languageid}

); } diff --git a/buildtime/client/logical-editor/src/components/NavBar.jsx b/buildtime/client/logical-editor/src/components/NavBar.jsx index 5316b1f29..2a0fa754b 100644 --- a/buildtime/client/logical-editor/src/components/NavBar.jsx +++ b/buildtime/client/logical-editor/src/components/NavBar.jsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import scpqLogo from '../assets/SimplyCPQ_logo.svg'; +import scpqLogo from '../assets/SimplyCPQ_Logo.svg'; const NavBar = () => { return ( diff --git a/buildtime/client/logical-editor/src/index.css b/buildtime/client/logical-editor/src/index.css index f10458709..ac19b3e7b 100644 --- a/buildtime/client/logical-editor/src/index.css +++ b/buildtime/client/logical-editor/src/index.css @@ -50,8 +50,9 @@ } } -body { +html, body { margin: 0; + height: 100%; } #root { diff --git a/buildtime/client/package-lock.json b/buildtime/client/package-lock.json new file mode 100644 index 000000000..ac6f59a2e --- /dev/null +++ b/buildtime/client/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "client", + "lockfileVersion": 3, + "requires": true, + "packages": {} +}