From d4402203a2de86f0456e1efe2807ff7d7647bc80 Mon Sep 17 00:00:00 2001 From: Thulasizwe Nkambule Date: Wed, 2 Apr 2025 08:30:08 +0200 Subject: [PATCH 1/4] chore: labels to sentence case, labels as tooltips, --- .../storedFilesRendererBase/styles/styles.ts | 6 +++-- .../_settings/utils/background/utils.tsx | 24 +++++++++---------- .../src/designer-components/container/data.ts | 4 ++-- .../container/settingsForm.ts | 2 +- 4 files changed, 19 insertions(+), 17 deletions(-) diff --git a/shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts b/shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts index 57ffd6b5c7..aa00a5ad35 100644 --- a/shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts +++ b/shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts @@ -19,8 +19,8 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m const antUploadDragIcon = `${prefixCls}-upload-drag-icon`; const shaStoredFilesRenderer = cx("sha-stored-files-renderer", css` - --thumbnail-width: ${layout ? (width ?? height ?? '54px') : '100%'}; - --thumbnail-height: ${layout ? (height ?? width ?? '54px') : '100%'}; + --thumbnail-width: ${layout ? (width ?? '54px') : '100%'}; + --thumbnail-height: ${layout ? (height ?? '54px') : '100%'}; --ant-margin-xs: ${gap ?? '8px'} !important; --ant-border-radius-xs: ${borderRadius ?? '8px'} !important; --ant-border-radius-sm: ${borderRadius ?? '8px'} !important; @@ -52,6 +52,8 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m --ant-font-size: ${fontSize ?? '14px'} !important; border-radius: ${borderRadius ?? '8px'} !important; display: flex; + width: ${layout ? (width ?? '54px') : ''}; + height: ${layout ? (height ?? '54px') : ''}; :before { top: 0; diff --git a/shesha-reactjs/src/designer-components/_settings/utils/background/utils.tsx b/shesha-reactjs/src/designer-components/_settings/utils/background/utils.tsx index b70ee541cb..07825ce19a 100644 --- a/shesha-reactjs/src/designer-components/_settings/utils/background/utils.tsx +++ b/shesha-reactjs/src/designer-components/_settings/utils/background/utils.tsx @@ -61,14 +61,14 @@ export const getBackgroundStyle = (input: IBackgroundValue, jsStyle: React.CSSPr }; export const gradientDirectionOptions: IDropdownOption[] = [ - { value: 'to right', label: 'To Right' }, - { value: 'to left', label: 'To Left' }, - { value: 'to top', label: 'To Top' }, - { value: 'to bottom', label: 'To Bottom' }, - { value: 'to top right', label: 'To Top Right' }, - { value: 'to top left', label: 'To Top Left' }, - { value: 'to bottom right', label: 'To Bottom Right' }, - { value: 'to bottom left', label: 'To Bottom Left' }, + { value: 'to right', label: 'To right' }, + { value: 'to left', label: 'To left' }, + { value: 'to top', label: 'To top' }, + { value: 'to bottom', label: 'To bottom' }, + { value: 'to top right', label: 'To top right' }, + { value: 'to top left', label: 'To top left' }, + { value: 'to bottom right', label: 'To bottom right' }, + { value: 'to bottom left', label: 'To bottom left' }, ]; export const backgroundTypeOptions: IRadioOption[] = [ @@ -114,8 +114,8 @@ export const positionOptions: IDropdownOption[] = [ { value: 'left', label: 'Left' }, { value: 'right', label: 'Right' }, { value: 'bottom', label: 'Bottom' }, - { value: 'top left', label: 'Top Left' }, - { value: 'top right', label: 'Top Right' }, - { value: 'bottom left', label: 'Bottom Left' }, - { value: 'bottom right', label: 'Bottom Right' }]; + { value: 'top left', label: 'Top left' }, + { value: 'top right', label: 'Top right' }, + { value: 'bottom left', label: 'Bottom left' }, + { value: 'bottom right', label: 'Bottom right' }]; diff --git a/shesha-reactjs/src/designer-components/container/data.ts b/shesha-reactjs/src/designer-components/container/data.ts index 30b4567a40..9ca62bb86d 100644 --- a/shesha-reactjs/src/designer-components/container/data.ts +++ b/shesha-reactjs/src/designer-components/container/data.ts @@ -159,8 +159,8 @@ export const defaultStyles = (prev?: IContainerComponentProps): IStyleType & ICo minWidth = '0px', borderColor = '#d9d9d9', borderRadius = '8', - borderStyle = 'solid', - borderWidth = '0px', + borderStyle = 'none', + borderWidth = '1px', shadowStyle, } = prev || {}; diff --git a/shesha-reactjs/src/designer-components/container/settingsForm.ts b/shesha-reactjs/src/designer-components/container/settingsForm.ts index cc4345ea18..7029e9b9c0 100644 --- a/shesha-reactjs/src/designer-components/container/settingsForm.ts +++ b/shesha-reactjs/src/designer-components/container/settingsForm.ts @@ -116,7 +116,7 @@ export const getSettings = (data) => { }, dropdownOptions: [ { value: 'relative', label: 'Relative' }, - { value: 'Fixed', label: 'Fixed' }, + { value: 'absolute', label: 'Absolute' } ] }) .addSettingsInputRow( From 025702036637613986b2ea951930db670e2cac23 Mon Sep 17 00:00:00 2001 From: Thulasizwe Nkambule Date: Wed, 2 Apr 2025 08:30:30 +0200 Subject: [PATCH 2/4] label as tooltip --- shesha-reactjs/src/designer-components/inputComponent/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/shesha-reactjs/src/designer-components/inputComponent/index.tsx b/shesha-reactjs/src/designer-components/inputComponent/index.tsx index 3359ff2f31..8c14d172c6 100644 --- a/shesha-reactjs/src/designer-components/inputComponent/index.tsx +++ b/shesha-reactjs/src/designer-components/inputComponent/index.tsx @@ -141,7 +141,7 @@ export const InputComponent: FC> = (props) = value={value || defaultValue} style={{ width: "100%" }} onChange={onChange} - addonAfter={iconElement(icon, null, tooltip, {}, styles)} + addonAfter={iconElement(icon, null, tooltip || label, {}, styles)} />; case 'customDropdown': { const options = dropdownOptions as IDropdownOption[]; From 813e8014e9ad500a07df7273662caf9717b1ea14 Mon Sep 17 00:00:00 2001 From: Thulasizwe Nkambule Date: Wed, 2 Apr 2025 08:44:51 +0200 Subject: [PATCH 3/4] removed container position styles --- .../container/settingsForm.ts | 85 +++++++++---------- 1 file changed, 42 insertions(+), 43 deletions(-) diff --git a/shesha-reactjs/src/designer-components/container/settingsForm.ts b/shesha-reactjs/src/designer-components/container/settingsForm.ts index 7029e9b9c0..a5363eff7d 100644 --- a/shesha-reactjs/src/designer-components/container/settingsForm.ts +++ b/shesha-reactjs/src/designer-components/container/settingsForm.ts @@ -14,7 +14,6 @@ import { import { FormLayout } from 'antd/lib/form/Form'; import { getBorderInputs, getCornerInputs } from '../_settings/utils/border/utils'; -import { getPositionInputs } from '../_settings/utils/position/utils'; import { backgroundTypeOptions, positionOptions, repeatOptions, sizeOptions } from '../_settings/utils/background/utils'; export const getSettings = (data) => { @@ -93,48 +92,48 @@ export const getSettings = (data) => { }, components: [ ...new DesignerToolbarSettings() - .addCollapsiblePanel({ - id: 'positionCollapsiblePanel', - propertyName: 'pnlPosition', - label: 'Position', - labelAlign: 'right', - parentId: 'styleRouter', - ghost: true, - collapsible: 'header', - content: { - id: 'positionStylePnl', - components: [...new DesignerToolbarSettings() - .addSettingsInput({ - id: 'position-s4gmBg31azZC0UjZjpfTm', - propertyName: 'position.value', - label: 'Position', - parentId: 'positionCollapsiblePanel', - inputType: 'dropdown', - description: 'The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.', - validate: { - required: true, - }, - dropdownOptions: [ - { value: 'relative', label: 'Relative' }, - { value: 'absolute', label: 'Absolute' } - ] - }) - .addSettingsInputRow( - getPositionInputs()[0] as any - ) - .addSettingsInputRow( - getPositionInputs()[1] as any - ) - .addSettingsInputRow( - getPositionInputs()[2] as any - ) - .addSettingsInputRow( - getPositionInputs()[3] as any - ) - .toJson() - ] - } - }) + // .addCollapsiblePanel({ + // id: 'positionCollapsiblePanel', + // propertyName: 'pnlPosition', + // label: 'Position', + // labelAlign: 'right', + // parentId: 'styleRouter', + // ghost: true, + // collapsible: 'header', + // content: { + // id: 'positionStylePnl', + // components: [...new DesignerToolbarSettings() + // .addSettingsInput({ + // id: 'position-s4gmBg31azZC0UjZjpfTm', + // propertyName: 'position.value', + // label: 'Position', + // parentId: 'positionCollapsiblePanel', + // inputType: 'dropdown', + // description: 'The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.', + // validate: { + // required: true, + // }, + // dropdownOptions: [ + // { value: 'relative', label: 'Relative' }, + // { value: 'absolute', label: 'Absolute' } + // ] + // }) + // .addSettingsInputRow( + // getPositionInputs()[0] as any + // ) + // .addSettingsInputRow( + // getPositionInputs()[1] as any + // ) + // .addSettingsInputRow( + // getPositionInputs()[2] as any + // ) + // .addSettingsInputRow( + // getPositionInputs()[3] as any + // ) + // .toJson() + // ] + // } + // }) .addCollapsiblePanel({ id: 'displayCollapsiblePanel', propertyName: 'pnlDisplayStyle', From 25094e31a55b7e5c610833d62f3360ab957b11f2 Mon Sep 17 00:00:00 2001 From: Thulasizwe Nkambule Date: Wed, 2 Apr 2025 08:53:36 +0200 Subject: [PATCH 4/4] no default styling --- .../designer-components/container/containerComponent.tsx | 1 + .../src/designer-components/container/settingsForm.ts | 9 +++++++++ 2 files changed, 10 insertions(+) diff --git a/shesha-reactjs/src/designer-components/container/containerComponent.tsx b/shesha-reactjs/src/designer-components/container/containerComponent.tsx index e1f6f698e3..6070423100 100644 --- a/shesha-reactjs/src/designer-components/container/containerComponent.tsx +++ b/shesha-reactjs/src/designer-components/container/containerComponent.tsx @@ -113,6 +113,7 @@ const ContainerComponent: IToolboxComponent = { style={{ ...getStyle(model?.style, formData), }} + noDefaultStyling={model.noDefaultStyling} className={model.className} dynamicComponents={model?.isDynamic ? model?.components : []} {...flexAndGridStyles} diff --git a/shesha-reactjs/src/designer-components/container/settingsForm.ts b/shesha-reactjs/src/designer-components/container/settingsForm.ts index a5363eff7d..813a65d332 100644 --- a/shesha-reactjs/src/designer-components/container/settingsForm.ts +++ b/shesha-reactjs/src/designer-components/container/settingsForm.ts @@ -69,6 +69,15 @@ export const getSettings = (data) => { }, ], }) + .addSettingsInput({ + id: 'noDefaultStyling-s4gmBg31azZC0UjZjpfTm', + inputType: 'switch', + propertyName: 'noDefaultStyling', + label: 'No Default Styling', + parentId: 's4gmBg31azZC0UjZjpfTm', + size: 'small', + jsSetting: true, + }) .toJson() ] },