Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

ElementsList: Add separators and add parity background color

Browse source
This commit is contained in:
Eric NGUYEN 2023-02-23 15:12:04 +01:00
parent 982a066770
commit 2c5a617b3a
1 changed files with 57 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

87
src/Components/ElementsSidebar/ElementsSidebar.tsx
View file

@ -27,13 +27,17 @@ interface IElementsSidebarProps {
onExpandChange: (value: ExtendedSidebar) => void
}
function RemoveBorderClasses(target: HTMLButtonElement, exception: string = ''): void {
function RemoveBorderClasses(target: HTMLElement, exception: string = ''): void {
const bordersClasses = ['border-t-8', 'border-8', 'border-b-8'].filter(className => className !== exception);
target.classList.remove(...bordersClasses);
}
function HandleDragLeave(event: React.DragEvent): void {
const target: HTMLButtonElement = event.target as HTMLButtonElement;
let target: HTMLButtonElement = event.target as HTMLButtonElement;
if (target.classList.contains('list-vertical-bar')) {
target = target.parentElement as HTMLButtonElement;
}
RemoveBorderClasses(target);
}
@ -43,7 +47,11 @@ function HandleDragOver(
mainContainer: IContainerModel
): void {
event.preventDefault();
const target: HTMLButtonElement = event.target as HTMLButtonElement;
let target = event.target as HTMLElement;
if (target.classList.contains('list-vertical-bar')) {
target = target.parentElement as HTMLButtonElement;
}
const rect = target.getBoundingClientRect();
const y = event.clientY - rect.top; // y position within the element.
@ -73,7 +81,12 @@ function HandleOnDrop(
): void {
event.preventDefault();
const type = event.dataTransfer.getData('type');
const target: HTMLButtonElement = event.target as HTMLButtonElement;
let target: HTMLButtonElement = event.target as HTMLButtonElement;
if (target.classList.contains('list-vertical-bar')) {
target = target.parentElement as HTMLButtonElement;
}
RemoveBorderClasses(target);
const targetContainer: IContainerModel | undefined = FindContainerById(
@ -132,6 +145,7 @@ export function ElementsSidebar(props: IElementsSidebarProps): JSX.Element {
// States
const divRef = React.useRef<HTMLDivElement>(null);
const [,height] = useSize(divRef);
console.log(height);
// Render
const it = MakeRecursionDFSIterator(props.mainContainer, props.containers, 0, [0, 0], true);
@ -155,6 +169,7 @@ export function ElementsSidebar(props: IElementsSidebarProps): JSX.Element {
return (
ElementsListRow(
key,
index,
container,
depth,
isSelected,
@ -208,6 +223,7 @@ export function ElementsSidebar(props: IElementsSidebarProps): JSX.Element {
function ElementsListRow(
key: string,
index: number,
container: IContainerModel,
depth: number,
isSelected: boolean,
@ -219,39 +235,50 @@ function ElementsListRow(
selectContainer: (containerId: string) => void
): JSX.Element {
const verticalBars: JSX.Element[] = [];
const verticalBarSelectedClass = isSelected
? 'border-l-blue-400 group-hover:border-l-blue-300'
: 'border-l-slate-400 group-hover:border-l-slate-300';
let buttonClass = 'bg-blue-500 shadow-lg shadow-blue-500/60' +
' hover:bg-blue-600 hover:shadow-blue-500 text-slate-50 border-blue-600';
let verticalBarClass = 'border-l-blue-400 group-hover:border-l-blue-300';
if (!isSelected) {
const isPair = (index & 1) === 0;
if (isPair) {
buttonClass = 'bg-slate-300/20 border-slate-500/50';
} else {
buttonClass = 'bg-slate-400/30 border-slate-500/80';
}
verticalBarClass = 'border-l-slate-400 group-hover:border-l-slate-300';
buttonClass += ' hover:bg-slate-400 hover:shadow-slate-400';
}
for (let i = 0; i < depth; i++) {
verticalBars.push(<span
key={`${key}-${i}`}
className={`h-full border-l-2 pr-2 ${verticalBarSelectedClass}`}
className={`list-vertical-bar h-full border-l-2 pr-1 ${verticalBarClass}`}
></span>);
}
const buttonSelectedClass: string = isSelected
? 'bg-blue-500 shadow-lg shadow-blue-500/60 hover:bg-blue-600 border-blue-600 hover:shadow-blue-500 text-slate-50'
: 'bg-slate-300/60 hover:bg-slate-400 hover:shadow-slate-400';
return <button type="button"
className={`transition-all border-blue-500
return <div style={style}>
<button type="button"
className={`transition-all h-[38px]
hover:shadow-lg elements-sidebar-row whitespace-pre
text-left text-sm font-medium flex items-center align-middle group
${container.properties.type} ${buttonSelectedClass}`}
id={key}
key={key}
style={style}
title={container.properties.warning}
onClick={() => { selectContainer(container.properties.id); }}
onDrop={(event) => {
HandleOnDrop(event, containers, mainContainer, addContainer);
}}
onDragOver={(event) => { HandleDragOver(event, mainContainer); }}
onDragLeave={(event) => { HandleDragLeave(event); }}
>
{verticalBars}
{text}
{container.properties.warning.length > 0 &&
${container.properties.type} ${buttonClass}`}
id={key}
key={key}
title={container.properties.warning}
onClick={() => { selectContainer(container.properties.id); }}
onDrop={(event) => {
HandleOnDrop(event, containers, mainContainer, addContainer);
}}
onDragOver={(event) => { HandleDragOver(event, mainContainer); }}
onDragLeave={(event) => { HandleDragLeave(event); }}
>
{verticalBars}
{text}
{container.properties.warning.length > 0 &&
<ExclamationTriangleIcon className='pl-2 w-7' />}
</button>;
</button>
<hr className='border-t-2 h-[2px] border-t-slate-500'></hr>
</div>;
}