From ad7e1fbe617de6c02e2c8a630c8a7b4ec08f47df Mon Sep 17 00:00:00 2001 From: Thulasizwe Nkambule Date: Thu, 3 Apr 2025 12:22:10 +0200 Subject: [PATCH 1/4] most issue from #3101 addressed --- .../src/components/editableTagGroup/index.tsx | 2 +- .../storedFilesRendererBase/index.tsx | 7 +- .../storedFilesRendererBase/styles/styles.ts | 14 ++-- .../_settings/settingsControl.tsx | 5 +- .../attachmentsEditor/settings.ts | 79 +++++++++++-------- .../attachmentsEditor/utils.ts | 2 +- .../codeEditor/codeEditor.tsx | 2 +- 7 files changed, 61 insertions(+), 50 deletions(-) diff --git a/shesha-reactjs/src/components/editableTagGroup/index.tsx b/shesha-reactjs/src/components/editableTagGroup/index.tsx index 271f035f03..b3575e2d35 100644 --- a/shesha-reactjs/src/components/editableTagGroup/index.tsx +++ b/shesha-reactjs/src/components/editableTagGroup/index.tsx @@ -143,7 +143,7 @@ export const EditableTagGroup: FC = ({ value = [], onCha - New value + New Value diff --git a/shesha-reactjs/src/components/storedFilesRendererBase/index.tsx b/shesha-reactjs/src/components/storedFilesRendererBase/index.tsx index b95103347d..12a5bd6b0d 100644 --- a/shesha-reactjs/src/components/storedFilesRendererBase/index.tsx +++ b/shesha-reactjs/src/components/storedFilesRendererBase/index.tsx @@ -160,7 +160,7 @@ export const StoredFilesRendererBase: FC = ({ const { styles } = useStyles({ containerStyles: { ...{ ...containerDimensions, width: layout === 'vertical' ? '' : addPx(containerDimensions.width), height: layout === 'horizontal' ? '' : addPx(containerDimensions.height) }, ...containerJsStyle }, - style: finalStyle, model: { gap, layout: listType === 'thumbnail' && !isDragger, hideFileName: rest.hideFileName && listType === 'thumbnail', isDragger }, + style: finalStyle, model: { gap: addPx(gap), layout: listType === 'thumbnail' && !isDragger, hideFileName: rest.hideFileName && listType === 'thumbnail', isDragger }, primaryColor }); @@ -212,7 +212,6 @@ export const StoredFilesRendererBase: FC = ({ setPreviewOpen(true); }; - const iconRender = (file) => { const { type, uid } = file; @@ -304,7 +303,7 @@ export const StoredFilesRendererBase: FC = ({ theme={{ components: { Upload: { - actionsColor: '#1890ff', + actionsColor: primaryColor, }, }, }} @@ -312,7 +311,7 @@ export const StoredFilesRendererBase: FC = ({ {isStub ? (isDragger ? - :
{renderUploadContent()}
) + :
{renderUploadContent()}
) : (props.disabled ? : isDragger diff --git a/shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts b/shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts index 4455194665..b5d1e1b89a 100644 --- a/shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts +++ b/shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts @@ -10,7 +10,7 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m const { width: containerWidth, height: containerHeight, maxHeight: containerMaxHeight, maxWidth: containerMaxWidth, minHeight: containerMinHeight, - minWidth: containerMinWidth } = containerStyles; + minWidth: containerMinWidth, ...restContainerStyles } = containerStyles; const { gap, layout, hideFileName, isDragger } = model; @@ -31,11 +31,12 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m --container-min-height: ${containerMinHeight}; --container-max-height: ${containerMaxHeight}; --container-height: ${containerHeight}; + --ant-upload-actions-color: ${token.colorError} !important; --ant-button-content-font-size: ${fontSize ?? '14px'} !important; --ant-button-font-weight: ${fontWeight ?? '400'} !important; --ant-font-family: ${fontFamily ?? 'Segoe UI'} !important; --ant-button-font-weight: ${fontWeight ?? '400'} !important; - ${rest} + ${restContainerStyles} ${containerStyles} max-height: auto; @@ -65,8 +66,6 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m } .ant-upload-list-item-thumbnail { - border-radius: ${borderRadius ?? '8px'} !important; - padding: 0 !important; background: ${backgroundImage ?? (backgroundColor || '#fff')} !important; border: ${borderWidth} ${borderStyle} ${borderColor}; border-top: ${borderTopWidth || borderWidth} ${borderTopStyle || borderStyle} ${borderTopColor || borderColor}; @@ -74,7 +73,8 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m border-left: ${borderLeftWidth || borderWidth} ${borderLeftStyle || borderStyle} ${borderLeftColor || borderColor}; border-bottom: ${borderBottomWidth || borderWidth} ${borderBottomStyle || borderStyle} ${borderBottomColor || borderColor}; box-shadow: ${boxShadow}; - + ${rest} + img { width: var(--thumbnail-width, 54px) !important; height: var(--thumbnail-height, 54px) !important; @@ -194,7 +194,7 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m .${prefixCls}-upload-list { display: flex !important; flex-wrap: nowrap !important; - flex-direction: row !important; + flex-direction: row-reverse !important; flex-shrink: 0 !important; overflow-x: auto; overflow-y: clip !important; @@ -231,7 +231,7 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m min-height: var(--container-min-height) !important; .${prefixCls}-upload-list { display: flex !important; - flex-direction: column !important; + flex-direction: column-reverse !important; flex-wrap: nowrap !important; padding: 2px ${borderWidth ?? '2px'} !important; height: var(--container-height) !important; diff --git a/shesha-reactjs/src/designer-components/_settings/settingsControl.tsx b/shesha-reactjs/src/designer-components/_settings/settingsControl.tsx index 371fd95d4b..87911a6e66 100644 --- a/shesha-reactjs/src/designer-components/_settings/settingsControl.tsx +++ b/shesha-reactjs/src/designer-components/_settings/settingsControl.tsx @@ -11,7 +11,8 @@ import { useConstantsEvaluator } from '../codeEditor/hooks/useConstantsEvaluator import { useResultTypeEvaluator } from '../codeEditor/hooks/useResultType'; import { Button } from 'antd'; import { - CodeOutlined, CodeFilled, FormOutlined + CodeOutlined, CodeFilled, + EditOutlined } from '@ant-design/icons'; export type SettingsControlChildrenType = (value: any, onChange: (val: any) => void, propertyName: string) => ReactElement; @@ -122,7 +123,7 @@ export const SettingsControl = (props: ISettingsControlProps danger={mode === 'value' && !!code} ghost size='small' - icon={mode === 'code' ? : !!code ? : } + icon={mode === 'code' ? : !!code ? : } color='lightslategrey' onClick={onSwitchMode} /> diff --git a/shesha-reactjs/src/designer-components/attachmentsEditor/settings.ts b/shesha-reactjs/src/designer-components/attachmentsEditor/settings.ts index 85298de1bb..c49579d14f 100644 --- a/shesha-reactjs/src/designer-components/attachmentsEditor/settings.ts +++ b/shesha-reactjs/src/designer-components/attachmentsEditor/settings.ts @@ -78,35 +78,6 @@ export const getSettings = () => { hidden: { _code: 'return getSettingValue(data?.isDragger);', _mode: 'code', _value: false } as any, jsSetting: true, }, - { - id: 'f01e54aa-a1a4-4bd6-ba73-c39te48af8ce', - propertyName: 'filesLayout', - label: 'Layout', - type: 'dropdown', - dropdownOptions: [ - { label: 'Vertical', value: 'vertical' }, - { label: 'Horizontal', value: 'horizontal' }, - { label: 'Grid', value: 'grid' }, - ], - jsSetting: true, - hidden: { _code: 'return getSettingValue(data?.listType) !== "thumbnail" || getSettingValue(data?.isDragger);', _mode: 'code', _value: false } as any, - } - ] - }) - .addSettingsInputRow({ - id: 'b920ef96-thumbnail-4a01-bfad-bob7d07218da', - readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any, - parentId: '11114bf6-f76d-4139-a850-c99bf06c8b69', - inputs: [ - { - id: 'b920ef96-ae27-4a01-bfad-b5b7d07218da', - propertyName: 'gap', - label: 'Gap', - type: 'numberField', - description: 'The gap between the thumbnails.', - jsSetting: true, - hidden: { _code: 'return getSettingValue(data?.listType) !== "thumbnail";', _mode: 'code', _value: false } as any, - }, { id: 'b920ef96-ae27-4a01-bfad-b5b7d0xc18da', propertyName: 'hideFileName', @@ -193,7 +164,7 @@ export const getSettings = () => { { id: '1c03863c-880d-4308-8667-c3d996619cb7', propertyName: 'ownerId', - label: 'Owner Id', + label: 'Owner ID', type: 'textField', jsSetting: true, }, @@ -265,10 +236,20 @@ export const getSettings = () => { components: [...new DesignerToolbarSettings() .addSettingsInput({ id: '48ff91b3-5fb1-4e1b-a17f-ff86bce22e0b', + inputType: 'codeEditor', propertyName: 'onFileChanged', label: 'On File List Changed', - inputType: 'codeEditor', - description: 'Callback that is triggered when the file is changed.' + labelAlign: 'right', + parentId: 'root', + hidden: false, + description: 'Callback that is triggered when the file is changed.', + validate: {}, + settingsValidationErrors: [], + wrapInTemplate: true, + templateSettings: { + functionName: 'onFileListChanged', + useAsyncDeclaration: true, + }, }) .toJson() ] @@ -765,6 +746,36 @@ export const getSettings = () => { content: { id: 'containerStylePnl', components: [...new DesignerToolbarSettings() + .addSettingsInputRow({ + id: 'b920ef96-thumbnail-4a01-bfad-bob7d07218da', + readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any, + parentId: '11114bf6-f76d-4139-a850-c99bf06c8b69', + inputs: [ + { + id: 'f01e54aa-a1a4-4bd6-ba73-c39te48af8ce', + propertyName: 'filesLayout', + label: 'Layout', + type: 'dropdown', + dropdownOptions: [ + { label: 'Vertical', value: 'vertical' }, + { label: 'Horizontal', value: 'horizontal' }, + { label: 'Grid', value: 'grid' }, + ], + defaultValue: 'horizontal', + jsSetting: true, + hidden: { _code: 'return getSettingValue(data?.listType) !== "thumbnail" || getSettingValue(data?.isDragger);', _mode: 'code', _value: false } as any, + }, + { + id: 'b920ef96-ae27-4a01-bfad-b5b7d07218da', + propertyName: 'gap', + label: 'Gap', + type: 'numberField', + description: 'The gap between the thumbnails.', + jsSetting: true, + hidden: { _code: 'return getSettingValue(data?.listType) !== "thumbnail";', _mode: 'code', _value: false } as any, + } + ] + }) .addCollapsiblePanel({ id: 'containerDimensionsStyleCollapsiblePanel', propertyName: 'pnlDimensions', @@ -779,7 +790,7 @@ export const getSettings = () => { id: 'dimensionsStyleRowWidth', parentId: 'container-dimensionsStylePnl', inline: true, - hidden: { _code: 'return getSettingValue(data?.filesLayout) === "vertical";', _mode: 'code', _value: false } as any, + hidden: { _code: 'return getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.filesLayout) === "vertical";', _mode: 'code', _value: false } as any, readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any, inputs: [ { @@ -816,7 +827,7 @@ export const getSettings = () => { id: 'dimensionsStyleRowHeight', parentId: 'container-dimensionsStylePnl', inline: true, - hidden: { _code: 'return getSettingValue(data?.filesLayout) === "horizontal";', _mode: 'code', _value: false } as any, + hidden: { _code: 'return getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.filesLayout) === "horizontal";', _mode: 'code', _value: false } as any, readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any, inputs: [ { diff --git a/shesha-reactjs/src/designer-components/attachmentsEditor/utils.ts b/shesha-reactjs/src/designer-components/attachmentsEditor/utils.ts index 1c9aa14c70..54d90616ee 100644 --- a/shesha-reactjs/src/designer-components/attachmentsEditor/utils.ts +++ b/shesha-reactjs/src/designer-components/attachmentsEditor/utils.ts @@ -39,7 +39,7 @@ export const containerDefaultStyles = (): IStyleType => { width: 'auto', height: 'auto', minHeight: '0px', - maxHeight: '140px', + maxHeight: '100%', minWidth: '0px', maxWidth: '100%', } diff --git a/shesha-reactjs/src/designer-components/codeEditor/codeEditor.tsx b/shesha-reactjs/src/designer-components/codeEditor/codeEditor.tsx index d13eecd73d..2919eaed10 100644 --- a/shesha-reactjs/src/designer-components/codeEditor/codeEditor.tsx +++ b/shesha-reactjs/src/designer-components/codeEditor/codeEditor.tsx @@ -149,7 +149,7 @@ export const CodeEditor: FC = ({ className={props.className} size="small" onClick={openEditorDialog} - style={hasValue ? { fontFamily: 'monospace', fontSize: '12px' } : undefined} + style={hasValue ? { fontFamily: 'monospace', fontSize: '12px', width: '100%' } : { width: '100%' }} > {hasValue ? <> {value} : <> ...} From 32d6fd911c875cc4fb4c3f8cd7a75f19cffeea57 Mon Sep 17 00:00:00 2001 From: Thulasizwe Nkambule Date: Fri, 4 Apr 2025 08:47:04 +0200 Subject: [PATCH 2/4] fix: styling box --- .../storedFilesRendererBase/index.tsx | 19 +- .../storedFilesRendererBase/styles/styles.ts | 268 ++++++++++-------- .../attachmentsEditor/attachmentsEditor.tsx | 8 +- .../attachmentsEditor/settings.ts | 4 +- .../inputComponent/index.tsx | 21 +- 5 files changed, 179 insertions(+), 141 deletions(-) diff --git a/shesha-reactjs/src/components/storedFilesRendererBase/index.tsx b/shesha-reactjs/src/components/storedFilesRendererBase/index.tsx index 12a5bd6b0d..75ab986e66 100644 --- a/shesha-reactjs/src/components/storedFilesRendererBase/index.tsx +++ b/shesha-reactjs/src/components/storedFilesRendererBase/index.tsx @@ -143,11 +143,10 @@ export const StoredFilesRendererBase: FC = ({ fetchStyles(); }, [background, backendUrl, httpHeaders, jsStyle]); - const styling = JSON.parse(model.stylingBox || '{}'); + const styling = JSON.parse(model.container?.stylingBox || '{}'); const stylingBoxAsCSS = pickStyleFromModel(styling); const additionalStyles: CSSProperties = removeUndefinedProps({ - ...stylingBoxAsCSS, ...dimensionsStyles, ...borderStyles, ...fontStyles, @@ -159,8 +158,8 @@ export const StoredFilesRendererBase: FC = ({ const finalStyle = removeUndefinedProps(additionalStyles); const { styles } = useStyles({ - containerStyles: { ...{ ...containerDimensions, width: layout === 'vertical' ? '' : addPx(containerDimensions.width), height: layout === 'horizontal' ? '' : addPx(containerDimensions.height) }, ...containerJsStyle }, - style: finalStyle, model: { gap: addPx(gap), layout: listType === 'thumbnail' && !isDragger, hideFileName: rest.hideFileName && listType === 'thumbnail', isDragger }, + containerStyles: { ...{ ...containerDimensions, width: layout === 'vertical' ? '' : addPx(containerDimensions.width), height: layout === 'horizontal' ? '' : addPx(containerDimensions.height) }, ...containerJsStyle, ...stylingBoxAsCSS }, + style: finalStyle, model: { gap: addPx(gap), layout: listType === 'thumbnail' && !isDragger, hideFileName: rest.hideFileName && listType === 'thumbnail', isDragger, isStub }, primaryColor }); @@ -311,11 +310,17 @@ export const StoredFilesRendererBase: FC = ({ {isStub ? (isDragger ? - :
{renderUploadContent()}
) + :
+ {renderUploadContent()} + {listType !== 'text' && !rest.hideFileName && {'name'}} +
) : (props.disabled ? - : isDragger - ? + : isDragger ? + + + : {!disabled ? renderUploadContent() : null}) } diff --git a/shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts b/shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts index b5d1e1b89a..641a9a4bcc 100644 --- a/shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts +++ b/shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts @@ -5,14 +5,23 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m borderBottomWidth, borderLeftWidth, borderLeftColor, borderLeftStyle, borderRightColor, borderRightStyle, borderColor, borderTopStyle, borderTopColor, borderTop, boxShadow, borderBottom, borderBottomColor, borderBottomStyle, borderRight, borderRightWidth, backgroundColor, backgroundPosition, backgroundRepeat, backgroundSize, borderStyle, color, fontFamily, fontSize, fontWeight, height, maxHeight, minHeight, textAlign, + ...rest } = style; const { width: containerWidth, height: containerHeight, maxHeight: containerMaxHeight, maxWidth: containerMaxWidth, minHeight: containerMinHeight, - minWidth: containerMinWidth, ...restContainerStyles } = containerStyles; + minWidth: containerMinWidth, marginTop, marginLeft, marginRight, marginBottom, paddingTop, + paddingLeft, paddingRight, paddingBottom, ...restContainerStyles } = containerStyles; + + const { gap, layout, hideFileName, isDragger, isStub } = model; - const { gap, layout, hideFileName, isDragger } = model; + const padding = isStub ? { + paddingTop: paddingTop || '2px', + paddingLeft: paddingLeft || '2px', + paddingRight: paddingRight || '2px', + paddingBottom: paddingBottom || '2px' + } : {}; const storedFilesRendererBtnContainer = "stored-files-renderer-btn-container"; const storedFilesRendererNoFiles = "stored-files-renderer-no-files"; @@ -36,8 +45,12 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m --ant-button-font-weight: ${fontWeight ?? '400'} !important; --ant-font-family: ${fontFamily ?? 'Segoe UI'} !important; --ant-button-font-weight: ${fontWeight ?? '400'} !important; + margin-top: ${marginTop}; + margin-left: ${marginLeft}; + margin-right: ${marginRight}; + margin-bottom: ${marginBottom}; + ${padding} ${restContainerStyles} - ${containerStyles} max-height: auto; .ant-upload:not(.ant-upload-disabled) { @@ -45,14 +58,12 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m color: ${primaryColor || token.colorPrimary} !important; }; } - .ant-upload-list-item { --ant-line-width: 0px !important; --ant-padding-xs: 0px !important; --font-size: ${fontSize || '14px'} !important; --ant-font-size: ${fontSize || '14px'} !important; - border-radius: ${borderRadius || '8px'} !important; display: flex; width: ${layout ? (width ?? '54px') : ''}; height: ${layout ? (height ?? '54px') : ''}; @@ -60,8 +71,8 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m :before { top: 0; width: 100% !important; - border-radius: ${borderRadius ?? '8px'} !important; height: 100% !important; + ${rest} } } @@ -103,7 +114,7 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m .ant-upload-list-text { height: calc(var(--container-height) - 32px) !important; - max-height: calc(var(--container-max-height) - calc(${fontSize} * 4)) !important; + max-height: calc(var(--container-max-height) - calc(${isDragger ? '0px' : fontSize} * 4)) !important; min-height: calc(var(--container-min-height) - 32px) !important; width: calc(var(--container-width) - 32px) !important; max-width: calc(var(--container-max-width) - 32px) !important; @@ -117,7 +128,7 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m .${prefixCls}-upload { ${(layout && !isDragger) && 'width: var(--thumbnail-width) !important;'}; ${(layout && !isDragger) && 'height: var(--thumbnail-height) !important'}; - border-radius: ${borderRadius ?? '8px'} !important; + ${rest} align-items: center; &.${prefixCls}-upload-btn { @@ -152,9 +163,12 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m } .${prefixCls}-upload-list { - padding: 2px !important; /*to remove scroller*/ --ant-margin-xs: ${gap ?? '8px'} !important; overflow-y: auto; + padding-top: ${paddingTop || '2px'}; + padding-left: ${paddingLeft || '2px'}; + padding-right: ${paddingRight || '2px'}; + padding-bottom: ${paddingBottom || '2px'}; } .ant-upload-list-item-uploading { @@ -165,7 +179,6 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m display: inline-block !important; width: var(--thumbnail-width) !important; height: var(--thumbnail-height) !important; - border-radius: ${borderRadius ?? '8px'} !important; &.ant-upload-animate-inline-appear, &.ant-upload-animate-inline-appear-active, &.ant-upload-animate-inline { @@ -174,128 +187,143 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m transition: none !important; } } - `); + + .ant-upload-list-item-action { + > .ant-btn-icon{ + >.anticon-delete{ + color: ${token.colorError} !important; + } + } + } + + .thumbnail-stub { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + ${rest} + } +`); const antPreviewDownloadIcon = cx("ant-preview-download-icon", css` - background: #0000001A; - font-size: 24px; - padding: 8px; - border-radius: 100px; +background: #0000001A; +font - size: 24px; +padding: 8px; +border - radius: 100px; :hover { - color: #fff; - } - `); + color: #fff; +} +`); const shaStoredFilesRendererHorizontal = cx("sha-stored-files-renderer-horizontal", css` - height: var(--container-height) !important; - width: var(--container-width) !important; - max-height: var(--container-max-height) !important; - max-width: var(--container-max-width) !important; - min-height: var(--container-min-height) !important; - .${prefixCls}-upload-list { - display: flex !important; - flex-wrap: nowrap !important; - flex-direction: row-reverse !important; - flex-shrink: 0 !important; - overflow-x: auto; - overflow-y: clip !important; - align-items: center !important; - padding: 0 ${borderWidth ?? '2px'} !important; - height: max-content !important; - width: var(--container-width) !important; - min-width: var(--container-min-width) !important; - max-width: var(--container-max-width) !important; - } +height: var(--container - height)!important; +width: var(--container - width)!important; +max - height: var(--container - max - height)!important; +max - width: var(--container - max - width)!important; +min - height: var(--container - min - height)!important; + .${prefixCls} -upload - list { + display: flex!important; + flex - wrap: nowrap!important; + flex - direction: row - reverse!important; + flex - shrink: 0!important; + overflow - x: auto; + overflow - y: clip!important; + align - items: center!important; + padding: 0 ${borderWidth ?? '2px'} !important; + height: max - content!important; + width: var(--container - width)!important; + min - width: var(--container - min - width)!important; + max - width: var(--container - max - width)!important; +} - .ant-upload-list-item-container { - display: inline-block !important; - max-width: var(--thumbnail-width) !important; - height: var(--thumbnail-height) !important; - border-radius: ${borderRadius ?? '8px'} !important; - &.ant-upload-animate-inline-appear, - &.ant-upload-animate-inline-appear-active, - &.ant-upload-animate-inline { - display: none !important; - animation: none !important; - transition: none !important; - } - } - `); + .ant - upload - list - item - container { + display: inline - block!important; + max - width: var(--thumbnail - width)!important; + height: var(--thumbnail - height)!important; + border - radius: ${borderRadius ?? '8px'} !important; + &.ant - upload - animate - inline - appear, + &.ant - upload - animate - inline - appear - active, + &.ant - upload - animate - inline { + display: none!important; + animation: none!important; + transition: none!important; + } +} +`); const shaStoredFilesRendererVertical = cx("sha-stored-files-renderer-vertical", css` - width: max-content; - max-width: var(--container-max-width) !important; - padding: ${borderWidth ?? '2px'} !important; - width: max-content !important; - height: var(--container-height) !important; - max-height: var(--container-max-height) !important; - min-height: var(--container-min-height) !important; - .${prefixCls}-upload-list { - display: flex !important; - flex-direction: column-reverse !important; - flex-wrap: nowrap !important; - padding: 2px ${borderWidth ?? '2px'} !important; - height: var(--container-height) !important; - width: 100% !important; - max-height: calc(var(--container-max-height) - 32px) !important; - min-height: calc(var(--container-min-height) - 32px) !important; - min-height: calc(var(--container-min-height) - 32px) !important; - } +width: max - content; +max - width: var(--container - max - width)!important; +padding: ${borderWidth ?? '2px'} !important; +width: max - content!important; +height: var(--container - height)!important; +max - height: var(--container - max - height)!important; +min - height: var(--container - min - height)!important; + .${prefixCls} -upload - list { + display: flex!important; + flex - direction: column - reverse!important; + flex - wrap: nowrap!important; + padding: 2px ${borderWidth ?? '2px'} !important; + height: var(--container - height)!important; + width: 100 % !important; + max - height: calc(var(--container - max - height) - 32px) !important; + min - height: calc(var(--container - min - height) - 32px) !important; +} - .stored-files-renderer-btn-container { - justify-content: flex-start; - .ant-btn { - padding: 0; - } - } + .stored - files - renderer - btn - container { + justify - content: flex - start; + .ant - btn { + padding: 0; + } +} - .ant-upload-list-item-container { - display: inline-block !important; - width: var(--thumbnail-width) !important; - height: var(--thumbnail-height) !important; - border-radius: ${borderRadius ?? '8px'} !important; - &.ant-upload-animate-inline-appear, - &.ant-upload-animate-inline-appear-active, - &.ant-upload-animate-inline { - display: none !important; - animation: none !important; - transition: none !important; - } - } - `); + .ant - upload - list - item - container { + display: inline - block!important; + width: var(--thumbnail - width)!important; + height: var(--thumbnail - height)!important; + border - radius: ${borderRadius ?? '8px'} !important; + &.ant - upload - animate - inline - appear, + &.ant - upload - animate - inline - appear - active, + &.ant - upload - animate - inline { + display: none!important; + animation: none!important; + transition: none!important; + } +} +`); - const shaStoredFilesRendererGrid = cx("sha-stored-files-renderer-grid", css` - max-width: var(--container-width) !important; - max-height: var(--container-height) !important; + const shaStoredFilesRendererGrid = cx("sha-stored-files-renderer-grid", css` +max - width: var(--container - width)!important; +max - height: var(--container - height)!important; - .${prefixCls}-upload-list { - align-items: center; - padding: 2px; - height: var(--container-height) !important; - width: var(--container-width) !important; - max-height: var(--container-max-height) !important; - max-width: var(--container-max-width) !important; - min-height: var(--container-min-height) !important; - min-width: var(--container-min-width) !important; - .${prefixCls}-upload-list-item { - width: 100% !important; - height: 100% !important; - } - } + .${prefixCls} -upload - list { + align - items: center; + padding: 2px; + height: var(--container - height)!important; + width: var(--container - width)!important; + max - height: var(--container - max - height)!important; + max - width: var(--container - max - width)!important; + min - height: var(--container - min - height)!important; + min - width: var(--container - min - width)!important; + .${prefixCls} -upload - list - item { + width: 100 % !important; + height: 100 % !important; + } +} - .ant-upload-list-item-container { - display: inline-block !important; - width: var(--thumbnail-width) !important; - height: var(--thumbnail-height) !important; - border-radius: ${borderRadius ?? '8px'} !important; - &.ant-upload-animate-inline-appear, - &.ant-upload-animate-inline-appear-active, - &.ant-upload-animate-inline { - display: none !important; - animation: none !important; - transition: none !important; - } - } - `); + .ant - upload - list - item - container { + display: inline - block!important; + width: var(--thumbnail - width)!important; + height: var(--thumbnail - height)!important; + border - radius: ${borderRadius ?? '8px'} !important; + &.ant - upload - animate - inline - appear, + &.ant - upload - animate - inline - appear - active, + &.ant - upload - animate - inline { + display: none!important; + animation: none!important; + transition: none!important; + } +} +`); return { shaStoredFilesRenderer, diff --git a/shesha-reactjs/src/designer-components/attachmentsEditor/attachmentsEditor.tsx b/shesha-reactjs/src/designer-components/attachmentsEditor/attachmentsEditor.tsx index f8544e996b..e61cb58166 100644 --- a/shesha-reactjs/src/designer-components/attachmentsEditor/attachmentsEditor.tsx +++ b/shesha-reactjs/src/designer-components/attachmentsEditor/attachmentsEditor.tsx @@ -152,7 +152,13 @@ const AttachmentsEditor: IToolboxComponent = { onFileChanged: migrateFormApi.withoutFormData(prev?.onFileChanged), })) .add(6, (prev) => ({ ...prev, listType: !prev.listType ? 'text' : prev.listType })) - .add(7, (prev) => ({ ...prev, desktop: { ...defaultStyles(), container: containerDefaultStyles() }, mobile: { ...defaultStyles() }, tablet: { ...defaultStyles() } })), + .add(7, (prev) => ( + { + ...prev, ...defaultStyles(), + desktop: { ...defaultStyles(), container: containerDefaultStyles() }, + mobile: { ...defaultStyles(), container: containerDefaultStyles() }, + tablet: { ...defaultStyles(), container: containerDefaultStyles() } + })), }; export default AttachmentsEditor; diff --git a/shesha-reactjs/src/designer-components/attachmentsEditor/settings.ts b/shesha-reactjs/src/designer-components/attachmentsEditor/settings.ts index c49579d14f..b3dfa9eb0c 100644 --- a/shesha-reactjs/src/designer-components/attachmentsEditor/settings.ts +++ b/shesha-reactjs/src/designer-components/attachmentsEditor/settings.ts @@ -738,7 +738,7 @@ export const getSettings = () => { .addCollapsiblePanel({ id: 'containerStyleCollapsiblePanel', propertyName: 'pnlContainerStyle', - label: 'Container', + label: 'Container Styles', labelAlign: 'right', ghost: true, parentId: 'styleRouter', @@ -878,7 +878,7 @@ export const getSettings = () => { id: 'styleBoxPnl', label: 'Margin Padding', hideLabel: true, - propertyName: 'stylingBox', + propertyName: 'container.stylingBox', }) .toJson() ] diff --git a/shesha-reactjs/src/designer-components/inputComponent/index.tsx b/shesha-reactjs/src/designer-components/inputComponent/index.tsx index 8c14d172c6..6494e188bf 100644 --- a/shesha-reactjs/src/designer-components/inputComponent/index.tsx +++ b/shesha-reactjs/src/designer-components/inputComponent/index.tsx @@ -3,7 +3,7 @@ import { Alert, AutoComplete, Button, Input, InputNumber, Radio, Select, Switch import { EditableTagGroup, EndpointsAutocomplete, FormComponentSelector, ButtonGroupConfigurator, ColorPicker, FormAutocomplete, LabelValueEditor, PermissionAutocomplete } from '@/components'; import { PropertyAutocomplete } from '@/components/propertyAutocomplete/propertyAutocomplete'; import { IObjectMetadata } from '@/interfaces/metadata'; -import { evaluateString, evaluateValue, executeScript, MetadataProvider, useAvailableConstantsData, useFormData, useMetadata } from '@/index'; +import { evaluateString, evaluateValue, executeScript, useAvailableConstantsData, useFormData, useMetadata } from '@/index'; import { ICodeEditorProps } from '@/designer-components/codeEditor/interfaces'; import { useMetadataBuilderFactory } from '@/utils/metadata/hooks'; import camelcase from 'camelcase'; @@ -214,16 +214,15 @@ export const InputComponent: FC> = (props) = case 'editableTagGroupProps': return ; case 'propertyAutocomplete': - return - - ; + return ; case 'contextPropertyAutocomplete': return ; case 'formAutocomplete': From 6c1d124d009dc0a906397c790c6ecf2cb728a430 Mon Sep 17 00:00:00 2001 From: Thulasizwe Nkambule Date: Fri, 4 Apr 2025 08:59:29 +0200 Subject: [PATCH 3/4] fix: list maxheight --- .../src/designer-components/attachmentsEditor/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/shesha-reactjs/src/designer-components/attachmentsEditor/utils.ts b/shesha-reactjs/src/designer-components/attachmentsEditor/utils.ts index 54d90616ee..1c9aa14c70 100644 --- a/shesha-reactjs/src/designer-components/attachmentsEditor/utils.ts +++ b/shesha-reactjs/src/designer-components/attachmentsEditor/utils.ts @@ -39,7 +39,7 @@ export const containerDefaultStyles = (): IStyleType => { width: 'auto', height: 'auto', minHeight: '0px', - maxHeight: '100%', + maxHeight: '140px', minWidth: '0px', maxWidth: '100%', } From d75efc79192ac5818d37ba449738c3815bfa1109 Mon Sep 17 00:00:00 2001 From: Thulasizwe Nkambule Date: Fri, 4 Apr 2025 10:53:59 +0200 Subject: [PATCH 4/4] fix: js/value switch resetting to code on refresh when there's code and mode is value --- .../_settings/settingsControl.tsx | 15 +++------------ .../designer-components/codeEditor/codeEditor.tsx | 2 +- 2 files changed, 4 insertions(+), 13 deletions(-) diff --git a/shesha-reactjs/src/designer-components/_settings/settingsControl.tsx b/shesha-reactjs/src/designer-components/_settings/settingsControl.tsx index 87911a6e66..b80eca7aec 100644 --- a/shesha-reactjs/src/designer-components/_settings/settingsControl.tsx +++ b/shesha-reactjs/src/designer-components/_settings/settingsControl.tsx @@ -1,4 +1,4 @@ -import React, { ReactElement, useEffect } from 'react'; +import React, { ReactElement } from 'react'; import { getPropertySettingsFromValue } from './utils'; import { CodeEditor, IPropertySetting, PropertySettingMode } from '@/index'; import { useStyles } from './styles/styles'; @@ -10,10 +10,7 @@ import { CodeEditorWithStandardConstants } from '../codeEditor/codeEditorWithCon import { useConstantsEvaluator } from '../codeEditor/hooks/useConstantsEvaluator'; import { useResultTypeEvaluator } from '../codeEditor/hooks/useResultType'; import { Button } from 'antd'; -import { - CodeOutlined, CodeFilled, - EditOutlined -} from '@ant-design/icons'; +import { CodeOutlined, CodeFilled } from '@ant-design/icons'; export type SettingsControlChildrenType = (value: any, onChange: (val: any) => void, propertyName: string) => ReactElement; @@ -62,12 +59,6 @@ export const SettingsControl = (props: ISettingsControlProps props.onChange(newValue); }; - useEffect(() => { - const newMode = !!code ? 'code' : 'value' as IPropertySetting['_mode']; - props.setHasCode?.(newMode === 'code'); - onInternalChange({ ...setting, _mode: newMode }, newMode); - }, [code]); - const codeOnChange = (val: any) => { const newValue = { ...setting, _code: val }; onInternalChange(newValue); @@ -123,7 +114,7 @@ export const SettingsControl = (props: ISettingsControlProps danger={mode === 'value' && !!code} ghost size='small' - icon={mode === 'code' ? : !!code ? : } + icon={mode === 'code' && !!code ? : !!code ? : } color='lightslategrey' onClick={onSwitchMode} /> diff --git a/shesha-reactjs/src/designer-components/codeEditor/codeEditor.tsx b/shesha-reactjs/src/designer-components/codeEditor/codeEditor.tsx index 2919eaed10..9bb2e83c9f 100644 --- a/shesha-reactjs/src/designer-components/codeEditor/codeEditor.tsx +++ b/shesha-reactjs/src/designer-components/codeEditor/codeEditor.tsx @@ -151,7 +151,7 @@ export const CodeEditor: FC = ({ onClick={openEditorDialog} style={hasValue ? { fontFamily: 'monospace', fontSize: '12px', width: '100%' } : { width: '100%' }} > - {hasValue ? <> {value} : <> ...} + {<> {hasValue ? value : '...'}} {showDialog && (