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..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, 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 }); @@ -212,7 +211,6 @@ export const StoredFilesRendererBase: FC = ({ setPreviewOpen(true); }; - const iconRender = (file) => { const { type, uid } = file; @@ -304,7 +302,7 @@ export const StoredFilesRendererBase: FC = ({ theme={{ components: { Upload: { - actionsColor: '#1890ff', + actionsColor: primaryColor, }, }, }} @@ -312,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 4455194665..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 } = 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"; @@ -31,12 +40,17 @@ 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} - ${containerStyles} + margin-top: ${marginTop}; + margin-left: ${marginLeft}; + margin-right: ${marginRight}; + margin-bottom: ${marginBottom}; + ${padding} + ${restContainerStyles} max-height: auto; .ant-upload:not(.ant-upload-disabled) { @@ -44,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') : ''}; @@ -59,14 +71,12 @@ 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} } } .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 +84,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; @@ -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 !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 !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/_settings/settingsControl.tsx b/shesha-reactjs/src/designer-components/_settings/settingsControl.tsx index 371fd95d4b..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,9 +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, FormOutlined -} from '@ant-design/icons'; +import { CodeOutlined, CodeFilled } from '@ant-design/icons'; export type SettingsControlChildrenType = (value: any, onChange: (val: any) => void, propertyName: string) => ReactElement; @@ -61,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); @@ -122,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/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 85298de1bb..b3dfa9eb0c 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() ] @@ -757,7 +738,7 @@ export const getSettings = () => { .addCollapsiblePanel({ id: 'containerStyleCollapsiblePanel', propertyName: 'pnlContainerStyle', - label: 'Container', + label: 'Container Styles', labelAlign: 'right', ghost: true, parentId: 'styleRouter', @@ -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: [ { @@ -867,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/codeEditor/codeEditor.tsx b/shesha-reactjs/src/designer-components/codeEditor/codeEditor.tsx index d13eecd73d..9bb2e83c9f 100644 --- a/shesha-reactjs/src/designer-components/codeEditor/codeEditor.tsx +++ b/shesha-reactjs/src/designer-components/codeEditor/codeEditor.tsx @@ -149,9 +149,9 @@ 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} : <> ...} + {<> {hasValue ? value : '...'}} {showDialog && ( > = (props) = case 'editableTagGroupProps': return ; case 'propertyAutocomplete': - return - - ; + return ; case 'contextPropertyAutocomplete': return ; case 'formAutocomplete':