From 06c5f809b944ef8727d25ca0d83145d701ce6b95 Mon Sep 17 00:00:00 2001 From: Tshepo Date: Sun, 6 Apr 2025 21:05:28 +0200 Subject: [PATCH 1/6] chore: hiding footer and header style when not set --- .../drawer/settingsForm.ts | 92 +++++++++++++------ 1 file changed, 65 insertions(+), 27 deletions(-) diff --git a/shesha-reactjs/src/designer-components/drawer/settingsForm.ts b/shesha-reactjs/src/designer-components/drawer/settingsForm.ts index e795fb09e5..6937782661 100644 --- a/shesha-reactjs/src/designer-components/drawer/settingsForm.ts +++ b/shesha-reactjs/src/designer-components/drawer/settingsForm.ts @@ -64,7 +64,7 @@ export const getSettings = (data: any) => { components: [ ...new DesignerToolbarSettings() .addSettingsInputRow({ - id: '12d700d6-ed4d-49d5-9cfd-fe8f0060f3b6', + id: '12d700d6-ed4d-49d5-9cfd-fe8f00d6-ed4d-49d5-9cfd-fe8f00w0f3b6', parentId: 's4gmBg31azZC0UjZjpfTm', readOnly: { _code: 'return getSettingValue(data?.readOnly);', @@ -725,6 +725,11 @@ export const getSettings = (data: any) => { ghost: true, parentId: 'styleRouter', collapsible: 'header', + hidden: { + _code: 'return !getSettingValue(data?.showHeader);', + _mode: 'code', + _value: false, + } as any, content: { id: 'stylePnl-M500-911MFR', components: [ @@ -1066,19 +1071,33 @@ export const getSettings = (data: any) => { ], }, }) - .addSettingsInput({ - readOnly: { - _code: 'return getSettingValue(data?.readOnly);', - _mode: 'code', - _value: false, - } as any, - id: 'custom-css-412c-8461-4c8d55e5c073', - inputType: 'codeEditor', - propertyName: 'headerStyle', - hideLabel: false, - label: 'Style', - description: - 'A script that returns the style of the element as an object. This should conform to CSSProperties', + .addCollapsiblePanel({ + id: 'footerStyleCollapsiblePanell', + propertyName: 'headerStylePanell', + label: 'Custom Styles', + labelAlign: 'right', + ghost: true, + parentId: 'styleRouter', + collapsible: 'header', + content: { + id: 'footerStylePnl', + components: new DesignerToolbarSettings() + .addSettingsInput({ + readOnly: { + _code: 'return getSettingValue(data?.readOnly);', + _mode: 'code', + _value: false, + } as any, + id: 'custom-css-412c-8461-sc1d55e5c0734', + inputType: 'codeEditor', + propertyName: 'headerStyle', + hideLabel: false, + label: 'Style', + description: + 'A script that returns the style of the element as an object. This should conform to CSSProperties', + }) + .toJson() + } }) .toJson(), ], @@ -1093,6 +1112,11 @@ export const getSettings = (data: any) => { ghost: true, parentId: 'styleRouter', collapsible: 'header', + hidden: { + _code: 'return !getSettingValue(data?.showFooter);', + _mode: 'code', + _value: false, + } as any, content: { id: 'stolePnl-M500-911MFR', components: [ @@ -1434,19 +1458,33 @@ export const getSettings = (data: any) => { ], }, }) - .addSettingsInput({ - readOnly: { - _code: 'return getSettingValue(data?.readOnly);', - _mode: 'code', - _value: false, - } as any, - id: 'custom-css-412c-8461-sc1d55e5c073', - inputType: 'codeEditor', - propertyName: 'footerStyle', - hideLabel: false, - label: 'Style', - description: - 'A script that returns the style of the element as an object. This should conform to CSSProperties', + .addCollapsiblePanel({ + id: 'footerStyleCollapsiblePanel', + propertyName: 'footerStylePanel', + label: 'Custom Styles', + labelAlign: 'right', + ghost: true, + parentId: 'styleRouter', + collapsible: 'header', + content: { + id: 'footerStylePnl', + components: new DesignerToolbarSettings() + .addSettingsInput({ + readOnly: { + _code: 'return getSettingValue(data?.readOnly);', + _mode: 'code', + _value: false, + } as any, + id: 'custom-css-412c-8461-sc1d55e5c073', + inputType: 'codeEditor', + propertyName: 'footerStyle', + hideLabel: false, + label: 'Style', + description: + 'A script that returns the style of the element as an object. This should conform to CSSProperties', + }) + .toJson() + } }) .toJson(), ], From 734af4597c697497913f84e2d582ad0ea12814b5 Mon Sep 17 00:00:00 2001 From: Tshepo Date: Sun, 6 Apr 2025 21:05:55 +0200 Subject: [PATCH 2/6] chore: separating the style to the body and content --- shesha-reactjs/src/designer-components/drawer/drawer.tsx | 6 +++++- shesha-reactjs/src/designer-components/drawer/index.tsx | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/shesha-reactjs/src/designer-components/drawer/drawer.tsx b/shesha-reactjs/src/designer-components/drawer/drawer.tsx index 9054933ef0..814d21bb03 100644 --- a/shesha-reactjs/src/designer-components/drawer/drawer.tsx +++ b/shesha-reactjs/src/designer-components/drawer/drawer.tsx @@ -27,6 +27,7 @@ interface IShaDrawer { placement?: 'top' | 'right' | 'bottom' | 'left'; width?: string | number; readOnly?: boolean; + background?: CSSProperties; } interface IShaDrawerState { @@ -54,6 +55,7 @@ const ShaDrawer: FC = (props) => { headerStyle, footerStyle, showFooter, + background, } = props; const allData = useAvailableConstantsData(); const [state, setState] = useState(); @@ -138,6 +140,7 @@ const ShaDrawer: FC = (props) => { ); } + return ( = (props) => { styles={{ header: { display: showHeader ? 'block' : 'none', ...headerStyle }, footer: { display: showFooter ? 'block' : 'none', ...footerStyle }, - body: style, + body: background, + content: style, }} title={label} size="large" diff --git a/shesha-reactjs/src/designer-components/drawer/index.tsx b/shesha-reactjs/src/designer-components/drawer/index.tsx index ba65843c50..424345983a 100644 --- a/shesha-reactjs/src/designer-components/drawer/index.tsx +++ b/shesha-reactjs/src/designer-components/drawer/index.tsx @@ -114,7 +114,6 @@ const DrawerComponent: IToolboxComponent = { ...shadowStyles, ...stylingBoxAsCSS, ...borderStyles, - ...backgroundStyles, ...jsStyle, }); @@ -132,6 +131,7 @@ const DrawerComponent: IToolboxComponent = { return ( Date: Sun, 6 Apr 2025 21:25:12 +0200 Subject: [PATCH 3/6] chore: fixing the alignment of repeat options on background --- .../drawer/settingsForm.ts | 281 +++++++++--------- .../src/designer-components/drawer/utils.ts | 12 + 2 files changed, 147 insertions(+), 146 deletions(-) diff --git a/shesha-reactjs/src/designer-components/drawer/settingsForm.ts b/shesha-reactjs/src/designer-components/drawer/settingsForm.ts index 6937782661..1f30445def 100644 --- a/shesha-reactjs/src/designer-components/drawer/settingsForm.ts +++ b/shesha-reactjs/src/designer-components/drawer/settingsForm.ts @@ -2,7 +2,12 @@ import { DesignerToolbarSettings } from '@/interfaces/toolbarSettings'; import { nanoid } from '@/utils/uuid'; import { FormLayout } from 'antd/lib/form/Form'; import { getBorderInputs, getCornerInputs } from '../_settings/utils/border/utils'; -import { repeatOptions } from '../_settings/utils/background/utils'; +import { + backgroundTypeOptions, + positionOptions, + repeatOptions, + sizeOptions, +} from '../_settings/utils/background/utils'; export const getSettings = (data: any) => { return { components: new DesignerToolbarSettings(data) @@ -42,7 +47,7 @@ export const getSettings = (data: any) => { label: 'Header Title', size: 'large', jsSetting: true, - } + }, ], hidden: { _code: 'return !getSettingValue(data?.showHeader);', @@ -105,58 +110,75 @@ export const getSettings = (data: any) => { } as any, parentId: 'pnl24bf6-f76d-4139-a850-c99bf06c8b69', components: new DesignerToolbarSettings() - .addSectionSeparator({ + // .addSectionSeparator({ + // id: nanoid(), + // propertyName: 'okButtonSeparator', + // label: 'Ok button', + // }) + .addCollapsiblePanel({ id: nanoid(), - propertyName: 'okButtonSeparator', - label: 'Ok button', - }) - .addConfigurableActionConfigurator({ - id: nanoid(), - propertyName: 'onOkAction', - parentId: 'ccc24bf6-f76d-4139-a850-c99bf06c8b69', - label: 'Ok Action', - }) - .addSettingsInput({ - id: nanoid(), - propertyName: 'okText', - parentId: 'ccc24bf6-f76d-4139-a850-c99bf06c8b69', - label: 'Ok Text', - description: 'The text that will be displayed on the Ok button', - }) - .addSettingsInput({ - id: nanoid(), - propertyName: 'okButtonCustomEnabled', + propertyName: 'okButtonCollapsiblePanel', + label: 'Ok Button', parentId: 'ccc24bf6-f76d-4139-a850-c99bf06c8b69', - label: 'Custom Enabled', - inputType: 'codeEditor', - description: 'Enter custom enabled of the Ok button', + content: { + id: nanoid(), + components: new DesignerToolbarSettings() + .addConfigurableActionConfigurator({ + id: nanoid(), + propertyName: 'onOkAction', + parentId: 'ccc24bf6-f76d-4139-a850-c99bf06c8b69', + label: 'Ok Action', + }) + .addSettingsInput({ + id: nanoid(), + propertyName: 'okText', + parentId: 'ccc24bf6-f76d-4139-a850-c99bf06c8b69', + label: 'Ok Text', + description: 'The text that will be displayed on the Ok button', + }) + .addSettingsInput({ + id: nanoid(), + propertyName: 'okButtonCustomEnabled', + parentId: 'ccc24bf6-f76d-4139-a850-c99bf06c8b69', + label: 'Custom Enabled', + inputType: 'codeEditor', + description: 'Enter custom enabled of the Ok button', + }) + .toJson(), + }, }) - .addSectionSeparator({ - id: nanoid(), - propertyName: 'cancelButtonSeparator', - label: 'Cancel button', - parentId: 'ccc24bf6-f76d-4139-a850-c99bf06c8b69', - }) - .addConfigurableActionConfigurator({ - id: nanoid(), - propertyName: 'onCancelAction', - label: 'Ok Cancel', - parentId: 'ccc24bf6-f76d-4139-a850-c99bf06c8b69', - }) - .addSettingsInput({ - id: nanoid(), - propertyName: 'cancelText', - label: 'Cancel Text', - description: 'The text that will be displayed on the Cancel button', - parentId: 'ccc24bf6-f76d-4139-a850-c99bf06c8b69', - }) - .addSettingsInput({ + + .addCollapsiblePanel({ id: nanoid(), - propertyName: 'cancelButtonCustomEnabled', - label: 'Custom Enabled', - inputType: 'codeEditor', - description: 'Enter custom enabled of the Cancel button', + propertyName: 'cancelButtonCollapsiblePanel', + label: 'Cancel Button', parentId: 'ccc24bf6-f76d-4139-a850-c99bf06c8b69', + content: { + id: nanoid(), + components: new DesignerToolbarSettings() + .addConfigurableActionConfigurator({ + id: nanoid(), + propertyName: 'onCancelAction', + label: 'Ok Cancel', + parentId: 'ccc24bf6-f76d-4139-a850-c99bf06c8b69', + }) + .addSettingsInput({ + id: nanoid(), + propertyName: 'cancelText', + label: 'Cancel Text', + description: 'The text that will be displayed on the Cancel button', + parentId: 'ccc24bf6-f76d-4139-a850-c99bf06c8b69', + }) + .addSettingsInput({ + id: nanoid(), + propertyName: 'cancelButtonCustomEnabled', + label: 'Custom Enabled', + inputType: 'codeEditor', + description: 'Enter custom enabled of the Cancel button', + parentId: 'ccc24bf6-f76d-4139-a850-c99bf06c8b69', + }) + .toJson(), + }, }) .toJson(), }) @@ -238,7 +260,7 @@ export const getSettings = (data: any) => { width: 85, defaultValue: '100%', propertyName: 'width', - icon: "widthIcon", + icon: 'widthIcon', tooltip: 'You can use any unit (%, px, em, etc). px by default if without unit', }, ], @@ -296,33 +318,7 @@ export const getSettings = (data: any) => { propertyName: 'background.type', inputType: 'radio', tooltip: 'Select a type of background', - buttonGroupOptions: [ - { - value: 'color', - icon: 'FormatPainterOutlined', - title: 'Color', - }, - { - value: 'gradient', - icon: 'BgColorsOutlined', - title: 'Gradient', - }, - { - value: 'image', - icon: 'PictureOutlined', - title: 'Image', - }, - { - value: 'url', - icon: 'LinkOutlined', - title: 'URL', - }, - { - value: 'storedFile', - icon: 'DatabaseOutlined', - title: 'Stored File', - }, - ], + buttonGroupOptions: backgroundTypeOptions, readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', @@ -454,8 +450,13 @@ export const getSettings = (data: any) => { .addSettingsInputRow({ id: 'backgroundStyleRow-controls', parentId: 'backgroundStyleRow', - hidden: { _code: 'return getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.background?.type) === "color";', _mode: 'code', _value: false } as any, inline: true, + hidden: { + _code: + 'return getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.background?.type) === "color";', + _mode: 'code', + _value: false, + } as any, readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', @@ -468,75 +469,53 @@ export const getSettings = (data: any) => { label: 'Size', hideLabel: true, propertyName: 'background.size', - dropdownOptions: [ - { - value: 'cover', - label: 'Cover', - }, - { - value: 'contain', - label: 'Contain', - }, - { - value: 'auto', - label: 'Auto', - }, - ], + customTooltip: + 'Size of the background image, two space separated values with units e.g "100% 100px"', + dropdownOptions: sizeOptions, + hidden: { + _code: + 'return getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.background?.type) === "color";', + _mode: 'code', + _value: false, + } as any, }, { type: 'customDropdown', id: 'backgroundStyleRow-position', label: 'Position', hideLabel: true, + customTooltip: + 'Position of the background image, two space separated values with units e.g "5em 100px"', propertyName: 'background.position', - dropdownOptions: [ - { - value: 'center', - label: 'Center', - }, - { - value: 'top', - label: 'Top', - }, - { - 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', - }, - ], + dropdownOptions: positionOptions, }, + ], + }) + .addSettingsInputRow({ + id: 'backgroundStyleRow-repeat', + parentId: 'backgroundStyleRow', + readOnly: { + _code: 'return getSettingValue(data?.readOnly);', + _mode: 'code', + _value: false, + } as any, + inputs: [ { type: 'radio', - id: 'backgroundStyleRow-repeat', - label: "Repeat", + id: 'backgroundStyleRow-repeat-radio', + label: 'Repeat', hideLabel: true, - propertyName: "background.repeat", + propertyName: 'background.repeat', + inputType: 'radio', buttonGroupOptions: repeatOptions, }, ], + hidden: { + _code: + 'return getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.background?.type) === "color";', + _mode: 'code', + _value: false, + } as any, }) .toJson(), ], @@ -583,12 +562,12 @@ export const getSettings = (data: any) => { .addContainer({ id: 'borderStyleRow', parentId: 'borderStylePnl', - components: getBorderInputs() as any + components: getBorderInputs() as any, }) .addContainer({ id: 'borderRadiusStyleRow', parentId: 'borderStylePnl', - components: getCornerInputs() as any + components: getCornerInputs() as any, }) .toJson(), ], @@ -912,7 +891,12 @@ export const getSettings = (data: any) => { .addSettingsInputRow({ id: 'backgroundStyleRow-controls', parentId: 'backgroundStyleRow', - hidden: { _code: 'return getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.background?.type) === "color";', _mode: 'code', _value: false } as any, + hidden: { + _code: + 'return getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.background?.type) === "color";', + _mode: 'code', + _value: false, + } as any, inline: true, readOnly: { _code: 'return getSettingValue(data?.readOnly);', @@ -989,9 +973,9 @@ export const getSettings = (data: any) => { { type: 'radio', id: 'backgroundStyleRow-repeat', - label: "Repeat", + label: 'Repeat', hideLabel: true, - propertyName: "background.repeat", + propertyName: 'background.repeat', buttonGroupOptions: repeatOptions, }, ], @@ -1096,8 +1080,8 @@ export const getSettings = (data: any) => { description: 'A script that returns the style of the element as an object. This should conform to CSSProperties', }) - .toJson() - } + .toJson(), + }, }) .toJson(), ], @@ -1299,7 +1283,12 @@ export const getSettings = (data: any) => { .addSettingsInputRow({ id: 'footerBackground-controls', parentId: 'backgroundStyleRow', - hidden: { _code: 'return getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.background?.type) === "color";', _mode: 'code', _value: false } as any, + hidden: { + _code: + 'return getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.background?.type) === "color";', + _mode: 'code', + _value: false, + } as any, inline: true, readOnly: { _code: 'return getSettingValue(data?.readOnly);', @@ -1376,9 +1365,9 @@ export const getSettings = (data: any) => { { type: 'radio', id: 'backgroundStyleRow-repeat', - label: "Repeat", + label: 'Repeat', hideLabel: true, - propertyName: "background.repeat", + propertyName: 'background.repeat', buttonGroupOptions: repeatOptions, }, ], @@ -1483,8 +1472,8 @@ export const getSettings = (data: any) => { description: 'A script that returns the style of the element as an object. This should conform to CSSProperties', }) - .toJson() - } + .toJson(), + }, }) .toJson(), ], @@ -1506,4 +1495,4 @@ export const getSettings = (data: any) => { wrapperCol: { span: 24 }, }, }; -}; \ No newline at end of file +}; diff --git a/shesha-reactjs/src/designer-components/drawer/utils.ts b/shesha-reactjs/src/designer-components/drawer/utils.ts index 43379a03c8..24b5a9d239 100644 --- a/shesha-reactjs/src/designer-components/drawer/utils.ts +++ b/shesha-reactjs/src/designer-components/drawer/utils.ts @@ -2,6 +2,18 @@ export const defaultStyles = (): any => { return { background: { type: 'color', color: '#fff' }, font: { weight: '400', size: 14, color: '#000', type: 'Segoe UI' }, + border: { + border: { + all: { width: '1px', style: 'solid', color: '#d9d9d9' }, + top: { width: '1px', style: 'solid', color: '#d9d9d9' }, + bottom: { width: '1px', style: 'solid', color: '#d9d9d9' }, + left: { width: '1px', style: 'solid', color: '#d9d9d9' }, + right: { width: '1px', style: 'solid', color: '#d9d9d9' }, + }, + radius: { all: 0, topLeft: 0, topRight: 0, bottomLeft: 0, bottomRight: 0 }, + borderType: 'all', + radiusType: 'all' + }, }; }; From bcef70651fe44f29d27b4391f7f2ed96ca5331dd Mon Sep 17 00:00:00 2001 From: Tshepo Date: Sun, 6 Apr 2025 21:54:29 +0200 Subject: [PATCH 4/6] fix: fixing the caching of the styles between main, footer and header --- .../src/designer-components/drawer/settingsForm.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/shesha-reactjs/src/designer-components/drawer/settingsForm.ts b/shesha-reactjs/src/designer-components/drawer/settingsForm.ts index 1f30445def..dbfb245240 100644 --- a/shesha-reactjs/src/designer-components/drawer/settingsForm.ts +++ b/shesha-reactjs/src/designer-components/drawer/settingsForm.ts @@ -975,7 +975,7 @@ export const getSettings = (data: any) => { id: 'backgroundStyleRow-repeat', label: 'Repeat', hideLabel: true, - propertyName: 'background.repeat', + propertyName: 'headerBackground.repeat', buttonGroupOptions: repeatOptions, }, ], @@ -1215,7 +1215,7 @@ export const getSettings = (data: any) => { { type: 'textField', id: 'backgroundStyle-url', - propertyName: 'headerBackground.url', + propertyName: 'footerBackground.url', jsSetting: false, label: 'URL', }, @@ -1239,7 +1239,7 @@ export const getSettings = (data: any) => { { type: 'imageUploader', id: 'backgroundStyle-image', - propertyName: 'headerBackground.uploadFile', + propertyName: 'footerBackground.uploadFile', label: 'Image', jsSetting: false, }, @@ -1285,7 +1285,7 @@ export const getSettings = (data: any) => { parentId: 'backgroundStyleRow', hidden: { _code: - 'return getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.background?.type) === "color";', + 'return getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.footerBackground?.type) === "color";', _mode: 'code', _value: false, } as any, @@ -1367,7 +1367,7 @@ export const getSettings = (data: any) => { id: 'backgroundStyleRow-repeat', label: 'Repeat', hideLabel: true, - propertyName: 'background.repeat', + propertyName: 'footerBackground.repeat', buttonGroupOptions: repeatOptions, }, ], From 1b8fbb58114298304cebfef75ea9265b0cfeff8f Mon Sep 17 00:00:00 2001 From: Tshepo Date: Tue, 8 Apr 2025 15:25:05 +0200 Subject: [PATCH 5/6] chore: removing background on the text --- shesha-reactjs/src/designer-components/text/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/shesha-reactjs/src/designer-components/text/utils.ts b/shesha-reactjs/src/designer-components/text/utils.ts index 7efce66d69..6f162fc0f0 100644 --- a/shesha-reactjs/src/designer-components/text/utils.ts +++ b/shesha-reactjs/src/designer-components/text/utils.ts @@ -93,7 +93,7 @@ export const defaultStyles = (textType: string): IStyleType => { type: 'Segoe UI', size: textType === 'title' ? undefined : 14 }, - background: { type: 'color', color: '#fff' }, + background: { type: 'color', color: '' }, border: { border: { all: { From be6e990b91e68634026ba683a1aae7bd28eb9edb Mon Sep 17 00:00:00 2001 From: Tshepo Date: Thu, 10 Apr 2025 13:11:23 +0200 Subject: [PATCH 6/6] chore: removing commented out code --- .../src/designer-components/drawer/settingsForm.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/shesha-reactjs/src/designer-components/drawer/settingsForm.ts b/shesha-reactjs/src/designer-components/drawer/settingsForm.ts index dbfb245240..6889ea836e 100644 --- a/shesha-reactjs/src/designer-components/drawer/settingsForm.ts +++ b/shesha-reactjs/src/designer-components/drawer/settingsForm.ts @@ -110,11 +110,6 @@ export const getSettings = (data: any) => { } as any, parentId: 'pnl24bf6-f76d-4139-a850-c99bf06c8b69', components: new DesignerToolbarSettings() - // .addSectionSeparator({ - // id: nanoid(), - // propertyName: 'okButtonSeparator', - // label: 'Ok button', - // }) .addCollapsiblePanel({ id: nanoid(), propertyName: 'okButtonCollapsiblePanel',