Skip to content

Commit

Permalink
Styling changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@rllyy97
rllyy97 committed Dec 10, 2024
1 parent 49b1bd2 commit c3d5017
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 92 deletions.
33 changes: 20 additions & 13 deletions libs/designer-ui/src/lib/arrayeditor/arrayeditor.less
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
@import (reference) '../variables.less';

@command-icon-width: 16px;
@padding: 5px;

.msla-array-editor-container {
border: 1px dashed @defaultBorderColor;
border: 1px solid @defaultBorderColor;
border-radius: 4px;
display: flex;

> .msla-array-container {
padding: 10px 5px;
}

.msla-array-commands {
vertical-align: top;
display: inline-block;
Expand All @@ -15,9 +19,12 @@

.msla-array-container {
flex: 1 1 100%;
display: flex;
flex-direction: column;
gap: 8px;

&.msla-array-editor-collapsed {
padding: 10px 0px 10px @padding;
padding: 10px;

.msla-input-parameter-label {
align-self: center;
Expand All @@ -40,6 +47,7 @@

.editor-input {
outline: 1px solid @panel-mode-panel-border-color;
border-radius: 2px;
resize: none;
font-size: 15px;
tab-size: 1;
Expand Down Expand Up @@ -80,22 +88,21 @@
}

.msla-array-item-container {
margin: 10px 0;
padding: 0 @padding;

.msla-array-item {
display: flex;
flex-direction: row;
align-items: top;
gap: 4px;

&.complex {
margin: 4px;
padding: 4px 4px 4px 4px;
.complex-input-container {
flex-grow: 1;
border: 1px dashed @defaultBorderColor;
}
&.isNested {
border: 1px dotted @defaultBorderColor;
border-radius: 4px;
padding: 2px 8px 8px;
display: flex;
flex-direction: column;
gap: 2px;
}

.msla-array-index {
Expand All @@ -105,11 +112,11 @@
.msla-array-editor-container-expanded {
width: 100%;
border-radius: 2px;
padding-bottom: 5px;
position: relative;

.editor-input {
outline: 1px solid @panel-mode-panel-border-color;
border-radius: 2px;
resize: none;
font-size: 15px;
tab-size: 1;
Expand Down Expand Up @@ -157,6 +164,6 @@

.msla-array-toolbar {
display: flex;
margin: 4px 2px 0px;
margin: 0px 2px;
}
}
4 changes: 1 addition & 3 deletions libs/designer-ui/src/lib/arrayeditor/collapsedarray.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,7 @@ export const CollapsedArray = ({
const { text, isRequiredField } = labelProps as LabelProps;
return (
<div className="msla-input-parameter-label">
<div className="msla-array-editor-label">
<Label text={text} isRequiredField={isRequiredField} requiredMarkerSide={RequiredMarkerSide.LEFT} />
</div>
<Label text={text} isRequiredField={isRequiredField} requiredMarkerSide={RequiredMarkerSide.LEFT} />
</div>
);
};
Expand Down
153 changes: 77 additions & 76 deletions libs/designer-ui/src/lib/arrayeditor/expandedcomplexarray.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ export const ExpandedComplexArray = ({
allItems,
canDeleteLastItem,
setItems,
isNested = false,
options,
...props
}: ExpandedComplexArrayProps): JSX.Element => {
Expand Down Expand Up @@ -93,88 +92,90 @@ export const ExpandedComplexArray = ({
<div className="msla-array-container msla-array-item-container">
{allItems.map((item, index) => {
return (
<div key={item.key + index} className={css('msla-array-item', 'complex', isNested && 'isNested')}>
{dimensionalSchema.map((schemaItem: ItemSchemaItemProps, i) => {
const complexItem = item.items.find((complexItem) => complexItem.key === schemaItem.key);
const comboboxOptions = getComoboxEnumOptions(options, schemaItem.enum);
const dropdownOptions: DropdownItem[] | undefined =
schemaItem.type === constants.SWAGGER.TYPE.BOOLEAN ? getBooleanDropdownOptions() : undefined;
return (
<div key={schemaItem.key + i}>
{schemaItem.type === constants.SWAGGER.TYPE.ARRAY && schemaItem.items && !hideComplexArray(schemaItem.items) ? (
<div>
<Label text={schemaItem.title} />
<ExpandedComplexArray
{...props}
dimensionalSchema={schemaItem.items}
allItems={complexItem?.arrayItems ?? ([] as ComplexArrayItems[])}
canDeleteLastItem={canDeleteLastItem}
setItems={(newItems) => {
handleNestedArraySaved(newItems, index, schemaItem);
}}
isNested={true}
itemKey={guid()}
/>
</div>
) : (
<>
{
// hide empty readonly editors
schemaItem?.readOnly && (!complexItem || complexItem.value.length === 0) ? null : (
<>
<Badge className="msla-array-index" shape="rounded" appearance="tint">
{index + 1}
</Badge>
{comboboxOptions ? (
<Combobox
{...props}
valueType={schemaItem?.type}
options={comboboxOptions}
placeholder={schemaItem.description}
initialValue={complexItem?.value ?? []}
onChange={(newState) => handleArrayElementSaved(newState, index, schemaItem)}
/>
) : dropdownOptions ? (
<DropdownEditor
{...props}
options={dropdownOptions}
initialValue={complexItem?.value ?? []}
onChange={(newState) => handleArrayElementSaved(newState, index, schemaItem)}
/>
) : (
<StringEditor
{...props}
readonly={schemaItem?.readOnly}
valueType={schemaItem?.type}
className="msla-array-editor-container-expanded"
initialValue={complexItem?.value ?? []}
editorBlur={(newState) => handleArrayElementSaved(newState, index, schemaItem)}
placeholder={schemaItem?.description}
/>
)}
{i === 0 ? (
<RemoveItemButton
disabled={!!props.readonly}
itemKey={index}
visible={canDeleteLastItem || allItems.length > 1}
onClick={(index) => deleteItem(index)}
/>
) : null}
</>
)
}
</>
)}
</div>
);
})}
<div key={item.key + index} className={css('msla-array-item', 'complex')}>
<Badge className="msla-array-index" shape="rounded" appearance="tint">
{index + 1}
</Badge>
<div className={'complex-input-container'}>
{dimensionalSchema.map((schemaItem: ItemSchemaItemProps, i) => {
const complexItem = item.items.find((complexItem) => complexItem.key === schemaItem.key);
const comboboxOptions = getComoboxEnumOptions(options, schemaItem.enum);
const dropdownOptions: DropdownItem[] | undefined =
schemaItem.type === constants.SWAGGER.TYPE.BOOLEAN ? getBooleanDropdownOptions() : undefined;
return (
<div key={schemaItem.key + i}>
{schemaItem.type === constants.SWAGGER.TYPE.ARRAY && schemaItem.items && !hideComplexArray(schemaItem.items) ? (
<div>
<Label text={schemaItem.title} />
<ExpandedComplexArray
{...props}
dimensionalSchema={schemaItem.items}
allItems={complexItem?.arrayItems ?? ([] as ComplexArrayItems[])}
canDeleteLastItem={canDeleteLastItem}
setItems={(newItems) => {
handleNestedArraySaved(newItems, index, schemaItem);
}}
itemKey={guid()}
/>
</div>
) : (
<>
{
// hide empty readonly editors
schemaItem?.readOnly && (!complexItem || complexItem.value.length === 0) ? null : (
<>
<Label isRequiredField={schemaItem?.isRequired ?? false} text={schemaItem.title} />
{comboboxOptions ? (
<Combobox
{...props}
valueType={schemaItem?.type}
options={comboboxOptions}
placeholder={schemaItem.description}
initialValue={complexItem?.value ?? []}
onChange={(newState) => handleArrayElementSaved(newState, index, schemaItem)}
/>
) : dropdownOptions ? (
<DropdownEditor
{...props}
options={dropdownOptions}
initialValue={complexItem?.value ?? []}
onChange={(newState) => handleArrayElementSaved(newState, index, schemaItem)}
/>
) : (
<StringEditor
{...props}
readonly={schemaItem?.readOnly}
valueType={schemaItem?.type}
className="msla-array-editor-container-expanded"
initialValue={complexItem?.value ?? []}
editorBlur={(newState) => handleArrayElementSaved(newState, index, schemaItem)}
placeholder={schemaItem?.description}
/>
)}
</>
)
}
</>
)}
</div>
);
})}
</div>
<RemoveItemButton
disabled={!!props.readonly}
itemKey={index}
visible={canDeleteLastItem || allItems.length > 1}
onClick={(index) => deleteItem(index)}
/>
</div>
);
})}
<div className="msla-array-toolbar">
<Button
disabled={props.readonly}
icon={<AddIcon />}
size={'small'}
appearance="subtle"
onClick={() => {
setItems([
...allItems,
Expand Down
1 change: 1 addition & 0 deletions libs/designer-ui/src/lib/settings/settings.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
tab-size: 1;
min-height: 30px;
line-height: 20px;
border-radius: 2px;
padding-inline-start: 5px;
&.readonly {
background-color: rgba(128, 128, 128, 0.1);
Expand Down

0 comments on commit c3d5017

Please sign in to comment.