Propertygroup Editor Anzeige
This commit is contained in:
@@ -4,13 +4,14 @@
|
||||
padding: 16px;
|
||||
color: gray;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
background: var(--code-bg);
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.navbar h1 {
|
||||
font-size: 26px;
|
||||
font-size: 32px;
|
||||
letter-spacing: -1.68px;
|
||||
margin: 4px 10px 0 0;
|
||||
@media (max-width: 1024px) {
|
||||
@@ -31,7 +32,7 @@
|
||||
color: gray;
|
||||
text-decoration: none;
|
||||
margin-left: 16px;
|
||||
font-size: 14px;
|
||||
font-size: 20px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
@@ -56,7 +57,7 @@
|
||||
}
|
||||
|
||||
.sidebar h1 {
|
||||
font-size: 16px;
|
||||
font-size: 24px;
|
||||
letter-spacing: -1.68px;
|
||||
margin: 4px 10px 0 0;
|
||||
@media (max-width: 1024px) {
|
||||
@@ -107,4 +108,69 @@ footer {
|
||||
}
|
||||
|
||||
|
||||
.editor {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
padding: 16px;
|
||||
margin: 16px;
|
||||
color: gray;
|
||||
background: whitesmoke;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.editor-title {
|
||||
font-size: 24px;
|
||||
letter-spacing: -1.68px;
|
||||
margin: 16px;
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 14px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 100%; /* Full width */
|
||||
padding: 2px; /* Inner spacing */
|
||||
margin: 8px 0; /* Space around */
|
||||
box-sizing: border-box; /* Include padding in width */
|
||||
border: 2px solid #000000; /* Green border */
|
||||
border-radius: 10px; /* Rounded corners */
|
||||
background-color: #ffffff; /* Light background */
|
||||
font-size: 16px; /* Text size */
|
||||
}
|
||||
|
||||
input[type="text"]:focus {
|
||||
border-color: #45a049; /* Darker green on focus */
|
||||
outline: none; /* Remove default outline */
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%; /* Full width */
|
||||
height: 150px;
|
||||
padding: 2px; /* Inner spacing */
|
||||
margin: 8px 0; /* Space around */
|
||||
box-sizing: border-box; /* Include padding in width */
|
||||
border: 2px solid #000000; /* Green border */
|
||||
border-radius: 10px; /* Rounded corners */
|
||||
background-color: #ffffff; /* Light background */
|
||||
font-size: 16px; /* Text size */
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
border-color: #45a049; /* Darker green on focus */
|
||||
outline: none; /* Remove default outline */
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
padding: 16px;
|
||||
margin: 16px;
|
||||
color: gray;
|
||||
background: whitesmoke;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@import "tailwindcss";
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const EditPropertyGroup = ({ propertyGroup, onClose }) => {
|
||||
const [labelTranslation, setLabelTranslation] = useState(propertyGroup.labelTranslation);
|
||||
const [description, setDescription] = useState(propertyGroup.description);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2 className="editor-title">Edit Property Group</h2>
|
||||
<div className="editor">
|
||||
<label>
|
||||
<span className={`flex flex-row gap-2`}>
|
||||
<p>Name:</p>
|
||||
<input className='input_text' type="text" value={labelTranslation} onChange={(e) => setLabelTranslation(e.target.value)} />
|
||||
</span>
|
||||
</label>
|
||||
<span>
|
||||
<label>
|
||||
Description:
|
||||
<textarea className='input_area' value={description} onChange={(e) => setDescription(e.target.value)} />
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
<button onClick={onClose}>Save</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditPropertyGroup;
|
||||
@@ -0,0 +1,24 @@
|
||||
import { useEffect } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
function PropertyGroupContent({ children, onClose }) {
|
||||
|
||||
useEffect(() => {
|
||||
const handleEsc = (e) => e.key === "Escape" && onClose();
|
||||
window.addEventListener("keydown", handleEsc);
|
||||
return () => window.removeEventListener("keydown", handleEsc);
|
||||
}, [onClose]);
|
||||
|
||||
return ReactDOM.createPortal(
|
||||
<div className="overlay" onClick={onClose}>
|
||||
<div className="modal" onClick={(e) => e.stopPropagation()}>
|
||||
{children}
|
||||
</div>
|
||||
</div>,
|
||||
|
||||
document.getElementById("property-content")
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default PropertyGroupContent;
|
||||
@@ -1,5 +1,4 @@
|
||||
import React, { Component } from 'react';
|
||||
import { useState } from 'react';
|
||||
import React from 'react';
|
||||
import PropertyTreeView from './PropertyTreeView';
|
||||
|
||||
const PropertySideBar = ({ properties }) => {
|
||||
@@ -11,7 +10,7 @@ const PropertySideBar = ({ properties }) => {
|
||||
<div className="side-links">
|
||||
<ul>
|
||||
{properties.map((node) => (
|
||||
<PropertyTreeView node={node} />
|
||||
<PropertyTreeView node={node} key={node.id} />
|
||||
))}
|
||||
</ul>
|
||||
</div><div className="spacer">...</div>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import React from 'react';
|
||||
import { useState } from 'react';
|
||||
|
||||
import { ChevronRightIcon } from '@heroicons/react/16/solid';
|
||||
import { DocumentIcon, FolderIcon } from '@heroicons/react/16/solid';
|
||||
import React, { useState } from 'react';
|
||||
import PropertyGroupContent from './PropertyGroupContent';
|
||||
import EditPropertyGroup from './EditPropertyGroup';
|
||||
import { ChevronRightIcon, DocumentIcon, FolderIcon, DocumentPlusIcon, FolderPlusIcon, PencilIcon } from '@heroicons/react/24/solid';
|
||||
|
||||
const PropertyTreeView = ({ node, key }) => {
|
||||
const [expanded, setExpanded] = useState(true);
|
||||
const [open, setOpen] = useState(false);
|
||||
return (
|
||||
<li key={node.id}>
|
||||
<span className="flex items-center gap-1 py-1">
|
||||
@@ -16,9 +16,24 @@ const PropertyTreeView = ({ node, key }) => {
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
<FolderIcon className={`size-3 text-gray-500`} />{node.labelTranslation}
|
||||
<FolderIcon className={`size-4 text-gray-500`} />{node.labelTranslation}
|
||||
<span className="flex items-center gap-1 mr-auto">
|
||||
|
||||
<button onClick={() => setOpen(true)} className="p-1 -m-1">
|
||||
<PencilIcon className="size-4 text-gray-500 hover:bg-gray-300" />
|
||||
</button>{open && (
|
||||
<PropertyGroupContent onClose={() => setOpen(false)}>
|
||||
<EditPropertyGroup propertyGroup={node} onClose={() => setOpen(false)} />
|
||||
</PropertyGroupContent>
|
||||
)}
|
||||
<button className="p-1 -m-1">
|
||||
<FolderPlusIcon className="size-4 text-gray-500 hover:bg-gray-300" />
|
||||
</button>
|
||||
<button className="p-1 -m-1">
|
||||
<DocumentPlusIcon className="size-4 text-gray-500 hover:bg-gray-300" />
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{expanded && (
|
||||
<ul className="ml-1 border-l border-gray-300 pl-8">
|
||||
{node.subPropertygroups?.map((node) => (
|
||||
|
||||
@@ -11,8 +11,9 @@ const PropertyPage = () => {
|
||||
|
||||
return (
|
||||
<div className="content">
|
||||
<div><PropertySideBar properties={[properties]} /></div>
|
||||
<div className="main"></div>
|
||||
<span className="flex flex-row size-full">
|
||||
<div><PropertySideBar properties={[properties]} /></div><div id="property-content" className="main">Simply CPQ Data</div>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user