Merged PR 204: Implement Properties' categories

src/Components/Category/Category.tsx

@@ -4,25 +4,29 @@ import { ICategory } from '../../Interfaces/ICategory';
 import { TruncateString } from '../../utils/stringtools';
 
 interface ICategoryProps {
-  children: JSX.Element[]
+  heightClass?: string
+  children?: JSX.Element[] | JSX.Element
   category: ICategory
+  defaultIsOpen?: boolean
 }
 
 export function Category(props: ICategoryProps): JSX.Element {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(props.defaultIsOpen ?? false);
 
   const categoryType: string = props.category.Type;
   const categoryDisplayedText: string = props.category.DisplayedText ?? categoryType;
 
+  const heightClass = props.heightClass ?? 'h-16';
+
   return (
     <div
-      className={` transition-all text-center ${isOpen ? 'overflow-hidden h-full' : 'overflow-visible h-16'}`}
+      className={` transition-all text-center ${isOpen ? 'overflow-hidden h-full' : `overflow-visible ${heightClass}`}`}
       key={categoryType}
       id={categoryType}
       title={categoryDisplayedText}
     >
       <div
-        className={'flex flex-row group h-16 cursor-pointer'}
+        className={`flex flex-row group cursor-pointer ${heightClass}`}
         onClick={() => setIsOpen(!isOpen)}
       >
         <span className={`transition-all flex-1 h-full justify-center sidebar-component-left ${isOpen ? 'rounded-b-none bg-slate-400/80 group-hover:bg-blue-600' : ''}`}>

src/Components/ContainerProperties/ContainerForm.tsx

@@ -12,6 +12,7 @@ import { PositionReferenceSelector } from '../RadioGroupButtons/PositionReferenc
 import { OrientationSelector } from '../RadioGroupButtons/OrientationSelector';
 import { OrientationCheckboxes } from '../CheckboxGroupButtons/OrientationCheckboxes';
 import { PositionCheckboxes } from '../CheckboxGroupButtons/PositionCheckboxes';
+import { Category } from '../Category/Category';
 
 interface IContainerFormProps {
   properties: IContainerProperties
@@ -28,8 +29,8 @@ function GetCSSInputs(properties: IContainerProperties,
       id={key}
       labelText={key}
       inputKey={key}
-      labelClassName=''
+      labelClassName='col-span-2'
-      inputClassName=''
+      inputClassName='col-span-3'
       type='string'
       value={(properties.style as any)[key]}
       onChange={(value) => onChange(key, value, PropertyType.Style)} />);
@@ -38,32 +39,9 @@ function GetCSSInputs(properties: IContainerProperties,
 }
 
 export function ContainerForm(props: IContainerFormProps): JSX.Element {
+  const categoryHeight = 'h-11';
   return (
-    <div className='grid grid-cols-1 md:grid-cols-2 gap-y-6 items-center'>
+    <div className='grid grid-cols-1 gap-y-4 items-center'>
-      <InputGroup
-        labelText='Name'
-        inputKey='id'
-        labelClassName=''
-        inputClassName=''
-        type='string'
-        value={props.properties.id.toString()}
-        isDisabled={true} />
-      <InputGroup
-        labelText='Parent name'
-        inputKey='parentId'
-        labelClassName=''
-        inputClassName=''
-        type='string'
-        value={props.properties.parentId}
-        isDisabled={true} />
-      <InputGroup
-        labelText='Type'
-        inputKey='type'
-        labelClassName=''
-        inputClassName=''
-        type='string'
-        value={props.properties.type}
-        isDisabled={true} />
       <TextInputGroup
         id={`${props.properties.id}-displayedText`}
         labelText='Displayed text'
@@ -80,12 +58,62 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
         value={props.properties.orientation}
         onChange={props.onChange}
       />
+
+      <Category
+        category={{
+          Type: 'Properties',
+          DisplayedText: 'Properties'
+        }}
+        heightClass={`${categoryHeight}`}
+      >
+        <div className='grid grid-cols-1 gap-y-6 items-center prop-category-body'>
+          <div>
+            <InputGroup
+              labelText='Name'
+              inputKey='id'
+              labelClassName=''
+              inputClassName=''
+              type='string'
+              value={props.properties.id.toString()}
+              isDisabled={true} />
+          </div>
+          <div>
+            <InputGroup
+              labelText='Parent name'
+              inputKey='parentId'
+              labelClassName=''
+              inputClassName=''
+              type='string'
+              value={props.properties.parentId}
+              isDisabled={true} />
+          </div>
+          <div>
+            <InputGroup
+              labelText='Type'
+              inputKey='type'
+              labelClassName=''
+              inputClassName=''
+              type='string'
+              value={props.properties.type}
+              isDisabled={true} />
+          </div>
+        </div>
+      </Category>
+
+      <Category category={{
+        Type: 'Position',
+        DisplayedText: 'Position'
+      }}
+      defaultIsOpen={true}
+      heightClass={`${categoryHeight}`}
+      >
+        <div className='grid grid-cols-3 gap-y-2 items-center prop-category-body'>
           <TextInputGroup
             id={`${props.properties.id}-x`}
             labelText='x'
             inputKey='x'
             labelClassName=''
-        inputClassName=''
+            inputClassName='col-span-2'
             type='number'
             isDisabled={props.properties.linkedSymbolId !== ''}
             value={TransformX(
@@ -109,7 +137,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
             labelText='y'
             inputKey='y'
             labelClassName=''
-        inputClassName=''
+            inputClassName='col-span-2'
             type='number'
             value={TransformY(
               RemoveXMargin(props.properties.y, props.properties.margin.top),
@@ -127,64 +155,65 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
                 props.properties.margin.top
               )
             )} />
+        </div>
+      </Category>
+
+      <Category category={{
+        Type: 'Size',
+        DisplayedText: 'Size'
+      }}
+      heightClass={`${categoryHeight}`}
+      >
+        <div className='grid grid-cols-5 gap-y-2 items-center prop-category-body'>
           <TextInputGroup
             id={`${props.properties.id}-minWidth`}
             labelText='Minimum Width'
             inputKey='minWidth'
-        labelClassName=''
+            labelClassName='col-span-2'
-        inputClassName=''
+            inputClassName='col-span-3'
             type='number'
             min={1}
             value={props.properties.minWidth.toString()}
             onChange={(value) => props.onChange('minWidth', Number(value))} />
-      <TextInputGroup
-        id={`${props.properties.id}-maxWidth`}
-        labelText='Maximum Width'
-        inputKey='maxWidth'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        min={1}
-        value={props.properties.maxWidth.toString()}
-        onChange={(value) => props.onChange('maxWidth', Number(value))} />
           <TextInputGroup
             id={`${props.properties.id}-width`}
             labelText='Width'
             inputKey='width'
-        labelClassName=''
+            labelClassName='col-span-2'
-        inputClassName=''
+            inputClassName='col-span-3'
             type='number'
             min={props.properties.minWidth}
             max={props.properties.maxWidth}
             value={(RemoveWidthMargin(props.properties.width, props.properties.margin.left, props.properties.margin.right)).toString()}
             onChange={(value) => props.onChange('width', ApplyWidthMargin(Number(value), props.properties.margin.left, props.properties.margin.right))}
             isDisabled={props.properties.isFlex} />
+          <TextInputGroup
+            id={`${props.properties.id}-maxWidth`}
+            labelText='Maximum Width'
+            inputKey='maxWidth'
+            labelClassName='col-span-2'
+            inputClassName='col-span-3'
+            type='number'
+            min={1}
+            value={props.properties.maxWidth.toString()}
+            onChange={(value) => props.onChange('maxWidth', Number(value))} />
+          <div className='col-span-5 p-3'></div>
           <TextInputGroup
             id={`${props.properties.id}-minHeight`}
             labelText='Minimum Height'
             inputKey='minHeight'
-        labelClassName=''
+            labelClassName='col-span-2'
-        inputClassName=''
+            inputClassName='col-span-3'
             type='number'
             min={1}
             value={props.properties.minHeight.toString()}
             onChange={(value) => props.onChange('minHeight', Number(value))} />
-      <TextInputGroup
-        id={`${props.properties.id}-maxHeight`}
-        labelText='Maximum Height'
-        inputKey='maxHeight'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        min={1}
-        value={props.properties.maxHeight.toString()}
-        onChange={(value) => props.onChange('maxHeight', Number(value))} />
           <TextInputGroup
             id={`${props.properties.id}-height`}
             labelText='Height'
             inputKey='height'
-        labelClassName=''
+            labelClassName='col-span-2'
-        inputClassName=''
+            inputClassName='col-span-3'
             type='number'
             min={props.properties.minHeight}
             max={props.properties.maxHeight}
@@ -192,6 +221,26 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
             onChange={(value) => props.onChange('height', ApplyWidthMargin(Number(value), props.properties.margin.top, props.properties.margin.bottom))}
             isDisabled={props.properties.isFlex}
           />
+          <TextInputGroup
+            id={`${props.properties.id}-maxHeight`}
+            labelText='Maximum Height'
+            inputKey='maxHeight'
+            labelClassName='col-span-2'
+            inputClassName='col-span-3'
+            type='number'
+            min={1}
+            value={props.properties.maxHeight.toString()}
+            onChange={(value) => props.onChange('maxHeight', Number(value))} />
+        </div>
+      </Category>
+
+      <Category category={{
+        Type: 'Margins',
+        DisplayedText: 'Margins'
+      }}
+      heightClass={`${categoryHeight}`}
+      >
+        <div className='grid grid-cols-2 items-center gap-y-2 prop-category-body'>
           <TextInputGroup
             id={`${props.properties.id}-ml`}
             labelText='Margin left'
@@ -232,11 +281,21 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
             min={0}
             value={(props.properties.margin.right ?? 0).toString()}
             onChange={(value) => props.onChange('right', Number(value), PropertyType.Margin)} />
+        </div>
+      </Category>
+
+      <Category category={{
+        Type: 'Behaviors',
+        DisplayedText: 'Behaviors'
+      }}
+      heightClass={`${categoryHeight}`}
+      >
+        <div className='grid grid-cols-2 items-center gap-y-2 prop-category-body'>
           <ToggleButton
             labelText='Flex'
             inputKey='isFlex'
             labelClassName=''
-        inputClassName=''
+            inputClassName='ml-auto mr-auto block'
             type={ToggleType.Full}
             checked={props.properties.isFlex}
             onChange={(event) => props.onChange('isFlex', event.target.checked)}
@@ -245,10 +304,20 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
             labelText='Anchor'
             inputKey='isAnchor'
             labelClassName=''
-        inputClassName=''
+            inputClassName='ml-auto mr-auto block'
             type={ToggleType.Full}
             checked={props.properties.isAnchor}
             onChange={(event) => props.onChange('isAnchor', event.target.checked)} />
+        </div>
+      </Category>
+
+      <Category category={{
+        Type: 'Alignment',
+        DisplayedText: 'Alignment'
+      }}
+      heightClass={`${categoryHeight}`}
+      >
+        <div className='prop-category-body'>
           <PositionReferenceSelector
             id='positionReference'
             name='PositionReference'
@@ -256,6 +325,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
             value={props.properties.positionReference}
             onChange={props.onChange}
           />
+          <div className='p-3'></div>
           <Select
             inputKey='linkedSymbolId'
             labelText='Align with symbol'
@@ -268,9 +338,19 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
             }))}
             value={props.properties.linkedSymbolId ?? ''}
             onChange={(event) => props.onChange('linkedSymbolId', event.target.value)} />
-      {GetCSSInputs(props.properties, props.onChange)}
+        </div>
+      </Category>
+
+      <Category category={{
+        Type: 'Dimensions',
+        DisplayedText: 'Dimensions'
+      }}
+      heightClass={`${categoryHeight}`}
+      >
+        <div className='grid grid-cols-1 gap-6 prop-category-body'>
           {
             SHOW_SELF_DIMENSIONS &&
+            <div className='grid grid-cols-1 gap-2'>
               <PositionCheckboxes
                 id='showSelfDimensions'
                 name='ShowSelfDimensions'
@@ -278,9 +358,11 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
                 value={props.properties.showSelfDimensions}
                 onChange={props.onChange}
               />
+            </div>
           }
           {
             SHOW_CHILDREN_DIMENSIONS &&
+            <div className='grid grid-cols-1 gap-2'>
               <PositionCheckboxes
                 id='showChildrenDimensions'
                 name='ShowChildrenDimensions'
@@ -288,10 +370,12 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
                 value={props.properties.showChildrenDimensions}
                 onChange={props.onChange}
               />
+            </div>
           }
           {
             SHOW_BORROWER_DIMENSIONS &&
           <>
+            <div className='grid grid-cols-1 gap-2'>
               <OrientationCheckboxes
                 id='markPosition'
                 name='MarkPosition'
@@ -299,6 +383,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
                 labelText='Mark the position'
                 onChange={props.onChange}
               />
+            </div>
+            <div className='grid grid-cols-1 gap-2'>
               <PositionCheckboxes
                 id='showDimensionWithMarks'
                 name='ShowDimensionWithMarks'
@@ -306,8 +392,22 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
                 value={props.properties.showDimensionWithMarks}
                 onChange={props.onChange}
               />
+            </div>
           </>
           }
         </div>
+      </Category>
+
+      <Category category={{
+        Type: 'Style',
+        DisplayedText: 'Style'
+      }}
+      heightClass={`${categoryHeight}`}
+      >
+        <div className='grid grid-cols-5 gap-6 items-center prop-category-body'>
+          {GetCSSInputs(props.properties, props.onChange)}
+        </div>
+      </Category>
+    </div>
   );
 }

src/Components/ToggleButton/ToggleButton.tsx

@@ -35,7 +35,7 @@ export function ToggleButton(props: IToggleButtonProps): JSX.Element {
       { props.labelText }
     </label>
     <label
-      className="relative cursor-pointer"
+      className={`relative cursor-pointer ${props.inputClassName}`}
       htmlFor={props.inputKey}
     >
       <input

src/index.scss

@@ -118,6 +118,10 @@
         text-xs font-medium transition-all text-gray-800 mt-1 px-3 py-2
         bg-white border-2 border-white rounded-lg placeholder-gray-800
         focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
-        disabled:bg-slate-300 disabled:text-gray-500 disabled:border-slate-300 disabled:shadow-none;
+        disabled:bg-slate-200 disabled:text-gray-500 disabled:border-slate-300 disabled:shadow-none;
+  }
+
+  .prop-category-body {
+    @apply rounded-lg bg-slate-300 p-3
   }
 }