Skip to content

Thulasizwe/en/container container #3115

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
James-Baloyi merged 5 commits into from
Apr 4, 2025
Merged

Thulasizwe/en/container container #3115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
14fec9d
fix: spacing
czwe-01 Feb 28, 2025
9a7e099
fix: styling
czwe-01 Feb 28, 2025
d597522
Merge branch 'main' into thulasizwe/en/container-container
czwe-01 Apr 3, 2025
4c11c1c
fix: grid and inline grid display
czwe-01 Apr 4, 2025
12d5359
Merge branch 'main' into thulasizwe/en/container-container
czwe-01 Apr 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions shesha-reactjs/src/components/listEditor/styles/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,15 +103,15 @@ export const useStyles = createStyles(({ css, cx, token }) => {
cursor: grab;
}


.${listItemContent} {
display: flex;
flex: 1;
margin-left: 30px;

.${listItemName} {
margin-left: 10px;
margin-right: 10px;
}
}+
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Apr 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fixed syntax error with extra closing brace.

Corrected a syntax issue by adding the missing closing brace after the listItemName class definition, which improves code structure and prevents potential styling issues.

.${helpIcon} {
cursor: help;
font-size: 14px;
Expand Down
1 change: 0 additions & 1 deletion shesha-reactjs/src/components/mainLayout/styles/indexStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,6 @@ export const GlobalSheshaStyles = createGlobalStyle`
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

}

}
Expand Down
246 changes: 123 additions & 123 deletions shesha-reactjs/src/designer-components/container/data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,150 +2,150 @@ import { ICommonContainerProps, IContainerComponentProps, IStyleType } from '@/i
import { nanoid } from '@/utils/uuid';

export const JUSTIFY_ITEMS = [
{ id: nanoid(), label: 'center', value: 'center' },
{ id: nanoid(), label: 'start', value: 'start' },
{ id: nanoid(), label: 'end', value: 'end' },
{ id: nanoid(), label: 'flex-start', value: 'flex-start' },
{ id: nanoid(), label: 'flex-end', value: 'flex-end' },
{ id: nanoid(), label: 'left', value: 'left' },
{ id: nanoid(), label: 'right', value: 'right' },
{ id: nanoid(), label: 'normal', value: 'normal' },
{ id: nanoid(), label: 'space-between', value: 'space-between' },
{ id: nanoid(), label: 'space-around', value: 'space-around' },
{ id: nanoid(), label: 'space-evenly', value: 'space-evenly' },
{ id: nanoid(), label: 'stretch', value: 'stretch' },
{ id: nanoid(), label: 'safe center', value: 'safe center' },
{ id: nanoid(), label: 'unsafe center', value: 'unsafe center' },
{ id: nanoid(), label: 'inherit', value: 'inherit' },
{ id: nanoid(), label: 'initial', value: 'initial' },
{ id: nanoid(), label: 'revert', value: 'revert' },
{ id: nanoid(), label: 'revert-layer', value: 'revert-layer' },
{ id: nanoid(), label: 'unset', value: 'unset' },
{ id: nanoid(), label: 'Center', value: 'center' },
{ id: nanoid(), label: 'Start', value: 'start' },
{ id: nanoid(), label: 'End', value: 'end' },
{ id: nanoid(), label: 'Flex start', value: 'flex-start' },
{ id: nanoid(), label: 'Flex end', value: 'flex-end' },
{ id: nanoid(), label: 'Left', value: 'left' },
{ id: nanoid(), label: 'Right', value: 'right' },
{ id: nanoid(), label: 'Normal', value: 'normal' },
{ id: nanoid(), label: 'Space between', value: 'space-between' },
{ id: nanoid(), label: 'Space around', value: 'space-around' },
{ id: nanoid(), label: 'Space evenly', value: 'space-evenly' },
{ id: nanoid(), label: 'Stretch', value: 'stretch' },
{ id: nanoid(), label: 'Safe center', value: 'safe center' },
{ id: nanoid(), label: 'Unsafe center', value: 'unsafe center' },
{ id: nanoid(), label: 'Inherit', value: 'inherit' },
{ id: nanoid(), label: 'Initial', value: 'initial' },
{ id: nanoid(), label: 'Revert', value: 'revert' },
{ id: nanoid(), label: 'Revert layer', value: 'revert-layer' },
{ id: nanoid(), label: 'Unset', value: 'unset' },
];
export const FLEX_DIRECTION = [
{ id: nanoid(), label: 'row', value: 'row' },
{ id: nanoid(), label: 'row-reverse', value: 'row-reverse' },
{ id: nanoid(), label: 'column', value: 'column' },
{ id: nanoid(), label: 'column-reverse', value: 'column-reverse' },
{ id: nanoid(), label: 'inherit', value: 'inherit' },
{ id: nanoid(), label: 'initial', value: 'initial' },
{ id: nanoid(), label: 'revert', value: 'revert' },
{ id: nanoid(), label: 'revert-layer', value: 'revert-layer' },
{ id: nanoid(), label: 'unset', value: 'unset' },
{ id: nanoid(), label: 'Row', value: 'row' },
{ id: nanoid(), label: 'Row reverse', value: 'row-reverse' },
{ id: nanoid(), label: 'Column', value: 'column' },
{ id: nanoid(), label: 'Column reverse', value: 'column-reverse' },
{ id: nanoid(), label: 'Inherit', value: 'inherit' },
{ id: nanoid(), label: 'Initial', value: 'initial' },
{ id: nanoid(), label: 'Revert', value: 'revert' },
{ id: nanoid(), label: 'Revert layer', value: 'revert-layer' },
{ id: nanoid(), label: 'Unset', value: 'unset' },
];

export const FLEX_WRAP = [
{ id: nanoid(), label: 'nowrap', value: 'nowrap' },
{ id: nanoid(), label: 'wrap', value: 'wrap' },
{ id: nanoid(), label: 'wrap-reverse', value: 'wrap-reverse' },
{ id: nanoid(), label: 'inherit', value: 'inherit' },
{ id: nanoid(), label: 'initial', value: 'initial' },
{ id: nanoid(), label: 'revert', value: 'revert' },
{ id: nanoid(), label: 'revert-layer', value: 'revert-layer' },
{ id: nanoid(), label: 'unset', value: 'unset' },
{ id: nanoid(), label: 'No wrap', value: 'nowrap' },
{ id: nanoid(), label: 'Wrap', value: 'wrap' },
{ id: nanoid(), label: 'Wrap reverse', value: 'wrap-reverse' },
{ id: nanoid(), label: 'Inherit', value: 'inherit' },
{ id: nanoid(), label: 'Initial', value: 'initial' },
{ id: nanoid(), label: 'Revert', value: 'revert' },
{ id: nanoid(), label: 'Revert layer', value: 'revert-layer' },
{ id: nanoid(), label: 'Unset', value: 'unset' },
];

export const JUSTIFY_CONTENT = [
{ id: nanoid(), label: 'center', value: 'center' },
{ id: nanoid(), label: 'start', value: 'start' },
{ id: nanoid(), label: 'end', value: 'end' },
{ id: nanoid(), label: 'flex-start', value: 'flex-start' },
{ id: nanoid(), label: 'flex-end', value: 'flex-end' },
{ id: nanoid(), label: 'left', value: 'left' },
{ id: nanoid(), label: 'right', value: 'right' },
{ id: nanoid(), label: 'normal', value: 'normal' },
{ id: nanoid(), label: 'space-between', value: 'space-between' },
{ id: nanoid(), label: 'space-around', value: 'space-around' },
{ id: nanoid(), label: 'space-evenly', value: 'space-evenly' },
{ id: nanoid(), label: 'stretch', value: 'stretch' },
{ id: nanoid(), label: 'safe center', value: 'safe center' },
{ id: nanoid(), label: 'unsafe center', value: 'unsafe center' },
{ id: nanoid(), label: 'Center', value: 'center' },
{ id: nanoid(), label: 'Start', value: 'start' },
{ id: nanoid(), label: 'End', value: 'end' },
{ id: nanoid(), label: 'Flex start', value: 'flex-start' },
{ id: nanoid(), label: 'Flex end', value: 'flex-end' },
{ id: nanoid(), label: 'Left', value: 'left' },
{ id: nanoid(), label: 'Right', value: 'right' },
{ id: nanoid(), label: 'Normal', value: 'normal' },
{ id: nanoid(), label: 'Space between', value: 'space-between' },
{ id: nanoid(), label: 'Space around', value: 'space-around' },
{ id: nanoid(), label: 'Space evenly', value: 'space-evenly' },
{ id: nanoid(), label: 'Stretch', value: 'stretch' },
{ id: nanoid(), label: 'Safe center', value: 'safe center' },
{ id: nanoid(), label: 'Unsafe center', value: 'unsafe center' },
{ id: nanoid(), label: 'inherit', value: 'inherit' },
{ id: nanoid(), label: 'initial', value: 'initial' },
{ id: nanoid(), label: 'revert', value: 'revert' },
{ id: nanoid(), label: 'revert-layer', value: 'revert-layer' },
{ id: nanoid(), label: 'unset', value: 'unset' },
{ id: nanoid(), label: 'Initial', value: 'initial' },
{ id: nanoid(), label: 'Revert', value: 'revert' },
{ id: nanoid(), label: 'Revert layer', value: 'revert-layer' },
{ id: nanoid(), label: 'Unset', value: 'unset' },
];

export const JUSTIFY_SELF = [
{ id: nanoid(), label: 'auto', value: 'auto' },
{ id: nanoid(), label: 'normal', value: 'normal' },
{ id: nanoid(), label: 'stretch', value: 'stretch' },
{ id: nanoid(), label: 'center', value: 'center' },
{ id: nanoid(), label: 'start', value: 'start' },
{ id: nanoid(), label: 'end', value: 'end' },
{ id: nanoid(), label: 'flex-start', value: 'flex-start' },
{ id: nanoid(), label: 'flex-end', value: 'flex-end' },
{ id: nanoid(), label: 'self-start', value: 'self-start' },
{ id: nanoid(), label: 'self-end', value: 'self-end' },
{ id: nanoid(), label: 'left', value: 'left' },
{ id: nanoid(), label: 'right', value: 'right' },
{ id: nanoid(), label: 'baseline', value: 'baseline' },
{ id: nanoid(), label: 'first baseline', value: 'first baseline' },
{ id: nanoid(), label: 'last baseline', value: 'last baseline' },
{ id: nanoid(), label: 'safe center', value: 'safe center' },
{ id: nanoid(), label: 'unsafe center', value: 'unsafe center' },
{ id: nanoid(), label: 'inherit', value: 'inherit' },
{ id: nanoid(), label: 'initial', value: 'initial' },
{ id: nanoid(), label: 'revert', value: 'revert' },
{ id: nanoid(), label: 'revert-layer', value: 'revert-layer' },
{ id: nanoid(), label: 'unset', value: 'unset' },
{ id: nanoid(), label: 'Auto', value: 'auto' },
{ id: nanoid(), label: 'Normal', value: 'normal' },
{ id: nanoid(), label: 'Stretch', value: 'stretch' },
{ id: nanoid(), label: 'Center', value: 'center' },
{ id: nanoid(), label: 'Start', value: 'start' },
{ id: nanoid(), label: 'End', value: 'end' },
{ id: nanoid(), label: 'Flex start', value: 'flex-start' },
{ id: nanoid(), label: 'Flex end', value: 'flex-end' },
{ id: nanoid(), label: 'Self start', value: 'self-start' },
{ id: nanoid(), label: 'Self end', value: 'self-end' },
{ id: nanoid(), label: 'Left', value: 'left' },
{ id: nanoid(), label: 'Right', value: 'right' },
{ id: nanoid(), label: 'Baseline', value: 'baseline' },
{ id: nanoid(), label: 'First baseline', value: 'first baseline' },
{ id: nanoid(), label: 'Last baseline', value: 'last baseline' },
{ id: nanoid(), label: 'Safe center', value: 'safe center' },
{ id: nanoid(), label: 'Unsafe center', value: 'unsafe center' },
{ id: nanoid(), label: 'Inherit', value: 'inherit' },
{ id: nanoid(), label: 'Initial', value: 'initial' },
{ id: nanoid(), label: 'Revert', value: 'revert' },
{ id: nanoid(), label: 'Revert layer', value: 'revert-layer' },
{ id: nanoid(), label: 'Unset', value: 'unset' },
];

export const TEXT_JUSTIFY = [
{ id: nanoid(), label: 'none', value: 'none' },
{ id: nanoid(), label: 'auto', value: 'auto' },
{ id: nanoid(), label: 'inter-word', value: 'inter-word' },
{ id: nanoid(), label: 'inter-character', value: 'inter-character' },
{ id: nanoid(), label: 'distribute', value: 'distribute' },
{ id: nanoid(), label: 'inherit', value: 'inherit' },
{ id: nanoid(), label: 'initial', value: 'initial' },
{ id: nanoid(), label: 'revert', value: 'revert' },
{ id: nanoid(), label: 'revert-layer', value: 'revert-layer' },
{ id: nanoid(), label: 'unset', value: 'unset' },
{ id: nanoid(), label: 'None', value: 'none' },
{ id: nanoid(), label: 'Auto', value: 'auto' },
{ id: nanoid(), label: 'Inter word', value: 'inter-word' },
{ id: nanoid(), label: 'Inter character', value: 'inter-character' },
{ id: nanoid(), label: 'Distribute', value: 'distribute' },
{ id: nanoid(), label: 'Inherit', value: 'inherit' },
{ id: nanoid(), label: 'Initial', value: 'initial' },
{ id: nanoid(), label: 'Revert', value: 'revert' },
{ id: nanoid(), label: 'Revert layer', value: 'revert-layer' },
{ id: nanoid(), label: 'Unset', value: 'unset' },
];

export const ALIGN_ITEMS = [
{ id: nanoid(), label: 'normal', value: 'normal' },
{ id: nanoid(), label: 'stretch', value: 'stretch' },
{ id: nanoid(), label: 'center', value: 'center' },
{ id: nanoid(), label: 'start', value: 'start' },
{ id: nanoid(), label: 'end', value: 'end' },
{ id: nanoid(), label: 'flex-start', value: 'flex-start' },
{ id: nanoid(), label: 'flex-end', value: 'flex-end' },
{ id: nanoid(), label: 'baseline', value: 'baseline' },
{ id: nanoid(), label: 'first baseline', value: 'first baseline' },
{ id: nanoid(), label: 'last baseline', value: 'last baseline' },
{ id: nanoid(), label: 'safe center', value: 'safe center' },
{ id: nanoid(), label: 'unsafe center', value: 'unsafe center' },
{ id: nanoid(), label: 'inherit', value: 'inherit' },
{ id: nanoid(), label: 'initial', value: 'initial' },
{ id: nanoid(), label: 'revert', value: 'revert' },
{ id: nanoid(), label: 'revert-layer', value: 'revert-layer' },
{ id: nanoid(), label: 'unset', value: 'unset' },
{ id: nanoid(), label: 'Normal', value: 'normal' },
{ id: nanoid(), label: 'Stretch', value: 'stretch' },
{ id: nanoid(), label: 'Center', value: 'center' },
{ id: nanoid(), label: 'Start', value: 'start' },
{ id: nanoid(), label: 'End', value: 'end' },
{ id: nanoid(), label: 'Flex start', value: 'flex-start' },
{ id: nanoid(), label: 'Flex end', value: 'flex-end' },
{ id: nanoid(), label: 'Baseline', value: 'baseline' },
{ id: nanoid(), label: 'First baseline', value: 'first baseline' },
{ id: nanoid(), label: 'Last baseline', value: 'last baseline' },
{ id: nanoid(), label: 'Safe center', value: 'safe center' },
{ id: nanoid(), label: 'Unsafe center', value: 'unsafe center' },
{ id: nanoid(), label: 'Inherit', value: 'inherit' },
{ id: nanoid(), label: 'Initial', value: 'initial' },
{ id: nanoid(), label: 'Revert', value: 'revert' },
{ id: nanoid(), label: 'Revert layer', value: 'revert-layer' },
{ id: nanoid(), label: 'Unset', value: 'unset' },
];

export const ALIGN_SELF = [
{ id: nanoid(), label: 'auto', value: 'auto' },
{ id: nanoid(), label: 'normal', value: 'normal' },
{ id: nanoid(), label: 'center', value: 'center' },
{ id: nanoid(), label: 'start', value: 'start' },
{ id: nanoid(), label: 'end', value: 'end' },
{ id: nanoid(), label: 'self-start', value: 'self-start' },
{ id: nanoid(), label: 'self-end', value: 'self-end' },
{ id: nanoid(), label: 'flex-start', value: 'flex-start' },
{ id: nanoid(), label: 'flex-end', value: 'flex-end' },
{ id: nanoid(), label: 'baseline', value: 'baseline' },
{ id: nanoid(), label: 'first baseline', value: 'first baseline' },
{ id: nanoid(), label: 'last baseline', value: 'last baseline' },
{ id: nanoid(), label: 'stretch', value: 'stretch' },
{ id: nanoid(), label: 'safe center', value: 'safe center' },
{ id: nanoid(), label: 'unsafe center', value: 'unsafe center' },
{ id: nanoid(), label: 'inherit', value: 'inherit' },
{ id: nanoid(), label: 'initial', value: 'initial' },
{ id: nanoid(), label: 'revert', value: 'revert' },
{ id: nanoid(), label: 'revert-layer', value: 'revert-layer' },
{ id: nanoid(), label: 'unset', value: 'unset' },
{ id: nanoid(), label: 'Auto', value: 'auto' },
{ id: nanoid(), label: 'Normal', value: 'normal' },
{ id: nanoid(), label: 'Center', value: 'center' },
{ id: nanoid(), label: 'Start', value: 'start' },
{ id: nanoid(), label: 'End', value: 'end' },
{ id: nanoid(), label: 'Self start', value: 'self-start' },
{ id: nanoid(), label: 'Self end', value: 'self-end' },
{ id: nanoid(), label: 'Flex start', value: 'flex-start' },
{ id: nanoid(), label: 'Flex end', value: 'flex-end' },
{ id: nanoid(), label: 'Baseline', value: 'baseline' },
{ id: nanoid(), label: 'First baseline', value: 'first baseline' },
{ id: nanoid(), label: 'Last baseline', value: 'last baseline' },
{ id: nanoid(), label: 'Stretch', value: 'stretch' },
{ id: nanoid(), label: 'Safe center', value: 'safe center' },
{ id: nanoid(), label: 'Unsafe center', value: 'unsafe center' },
{ id: nanoid(), label: 'Inherit', value: 'inherit' },
{ id: nanoid(), label: 'Initial', value: 'initial' },
{ id: nanoid(), label: 'Revert', value: 'revert' },
{ id: nanoid(), label: 'Revert layer', value: 'revert-layer' },
{ id: nanoid(), label: 'Unset', value: 'unset' },
];


Expand Down
6 changes: 3 additions & 3 deletions shesha-reactjs/src/designer-components/container/settingsForm.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ export const getSettings = (data) => {
{ value: 'block', title: 'Block', icon: 'BorderOutlined' },
{ value: 'grid', title: 'Grid', icon: 'AppstoreOutlined' },
{ value: 'flex', title: 'Flex', icon: 'flex' },
{ value: 'inline-grid', title: 'Inline Grid', icon: 'TableOutlined' }
{ value: 'inline-grid', title: 'Inline grid', icon: 'TableOutlined' }
]
})
.addSettingsInputRow({
Expand Down Expand Up @@ -226,7 +226,7 @@ export const getSettings = (data) => {
description: 'Examples of a valid gap include: `10` | `10px` | `20px 20px`',
},
{
type: 'textField',
type: 'numberField',
id: 'grid-columns-count-s4gmBg31azZC0UjZjpfTm',
propertyName: 'gridColumnsCount',
parentId: 'pnl64664-cbc9-4cef-babc-6fbea44cd0ca',
Expand Down Expand Up @@ -688,7 +688,7 @@ export const getSettings = (data) => {
.addCollapsiblePanel({
id: 'customStyleCollapsiblePanel',
propertyName: 'customStyle',
label: 'Custom Style',
label: 'Custom Styles',
labelAlign: 'right',
ghost: true,
parentId: 'styleRouter',
Expand Down
2 changes: 1 addition & 1 deletion shesha-reactjs/src/designer-components/inputComponent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export const InputComponent: FC<Omit<ISettingsInputProps, 'hidden'>> = (props) =
const codeEditorProps: ICodeEditorProps = {
readOnly: readOnly,
description: description,
mode: 'dialog',
mode: props.mode ?? 'dialog',
language: props.language ?? 'typescript',
fileName: propertyName,
label: label ?? propertyName,
Expand Down
Loading