ElementsList: Add separators and add parity background color

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -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'
+  let buttonClass = 'bg-blue-500 shadow-lg shadow-blue-500/60' +
-    : 'border-l-slate-400 group-hover:border-l-slate-300';
+  ' 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
+  return <div style={style}>
-    ? 'bg-blue-500  shadow-lg shadow-blue-500/60 hover:bg-blue-600 border-blue-600 hover:shadow-blue-500 text-slate-50'
+    <button type="button"
-    : 'bg-slate-300/60 hover:bg-slate-400 hover:shadow-slate-400';
+      className={`transition-all h-[38px]
-
-  return <button type="button"
-    className={`transition-all border-blue-500 
       hover:shadow-lg elements-sidebar-row whitespace-pre 
       text-left text-sm font-medium flex items-center align-middle group 
-      ${container.properties.type} ${buttonSelectedClass}`}
+      ${container.properties.type} ${buttonClass}`}
-    id={key}
+      id={key}
-    key={key}
+      key={key}
-    style={style}
+      title={container.properties.warning}
-    title={container.properties.warning}
+      onClick={() => { selectContainer(container.properties.id); }}
-    onClick={() => { selectContainer(container.properties.id); }}
+      onDrop={(event) => {
-    onDrop={(event) => {
+        HandleOnDrop(event, containers, mainContainer, addContainer);
-      HandleOnDrop(event, containers, mainContainer, addContainer);
+      }}
-    }}
+      onDragOver={(event) => { HandleDragOver(event, mainContainer); }}
-    onDragOver={(event) => { HandleDragOver(event, mainContainer); }}
+      onDragLeave={(event) => { HandleDragLeave(event); }}
-    onDragLeave={(event) => { HandleDragLeave(event); }}
+    >
-  >
+      {verticalBars}
-    {verticalBars}
+      {text}
-    {text}
+      {container.properties.warning.length > 0 &&
-    {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>;
 }