Skip to content

Thulasizwe/en/panel #3133

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Merged
James-Baloyi merged 15 commits into from
Apr 17, 2025
Merged

Thulasizwe/en/panel #3133

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
ab6d23d
default values
czwe-01 Mar 7, 2025
9b4c94c
removed unnesessary fragment
czwe-01 Mar 7, 2025
ffc8e95
input row and defaults
czwe-01 Mar 9, 2025
3170e07
Merge branch 'releases/0.42' into thulasizwe/en/panel
czwe-01 Mar 10, 2025
addf3ad
Merge branch 'releases/0.42' into thulasizwe/en/panel
czwe-01 Mar 10, 2025
c7bcdbe
Merge branch 'releases/0.42' into thulasizwe/en/panel
czwe-01 Mar 28, 2025
86db0b6
Merge branch 'main' into thulasizwe/en/panel
czwe-01 Apr 7, 2025
5d99ba1
en: predefined style - accent
czwe-01 Apr 7, 2025
b071de8
simple panel by default
czwe-01 Apr 7, 2025
d24509d
white header bg
czwe-01 Apr 9, 2025
3c193a4
fix: grid gap
czwe-01 Apr 9, 2025
55fe772
Update shesha-reactjs/src/designer-components/collapsiblePanel/settin…
czwe-01 Apr 10, 2025
644f851
Merge branch 'main' into thulasizwe/en/panel
czwe-01 Apr 11, 2025
f54a59b
Merge branch 'main' into thulasizwe/en/panel
czwe-01 Apr 14, 2025
e087805
Merge branch 'main' into thulasizwe/en/panel
czwe-01 Apr 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions shesha-reactjs/src/components/panel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export interface ICollapsiblePanelProps extends CollapseProps, Omit<IStyleType,
headerStyles?: IStyleType;
bodyStyle?: React.CSSProperties;
headerStyle?: React.CSSProperties;
accentStyle?: boolean;
}

/**
Expand Down Expand Up @@ -60,12 +61,13 @@ export const CollapsiblePanel: FC<Omit<ICollapsiblePanelProps, 'radiusLeft' | 'r
panelHeadType,
noContentPadding,
hideWhenEmpty,
hideCollapseContent
hideCollapseContent,
accentStyle
}) => {
// Prevent the CollapsiblePanel from collapsing every time you click anywhere on the extra and header
const onContainerClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => event?.stopPropagation();

const { styles } = useStyles({ bodyStyle, headerStyle, panelHeadType, ghost, isSimpleDesign, noContentPadding, hideWhenEmpty, hideCollapseContent });
const { styles } = useStyles({ bodyStyle, headerStyle, panelHeadType, ghost, isSimpleDesign, noContentPadding, hideWhenEmpty, hideCollapseContent, accentStyle });
const shaCollapsiblePanelStyle = isSimpleDesign ? styles.shaSimpleDesign : styles.shaCollapsiblePanel;

return (
Expand Down
27 changes: 14 additions & 13 deletions shesha-reactjs/src/components/panel/styles/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls }, {
bodyStyle = {} as CSSProperties,
hideCollapseContent,
isSimpleDesign,
ghost
ghost,
accentStyle
}) => {
const noContentPadding = "no-content-padding";
const hideWhenEmpty = "hide-empty";
Expand Down Expand Up @@ -71,7 +72,7 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls }, {
borderWidth: headerBorderWidth,
borderStyle: headerBorderStyle,
borderColor: headerBorderColor,
borderTopWidth: headerBorderTopWidth = panelHeadType === 'parent' ? '3px' : '',
borderTopWidth: headerBorderTopWidth,
borderTopStyle: headerBorderTopStyle,
borderTopColor: headerBorderTopColor,
borderBottomWidth: headerBorderBottomWidth,
Expand All @@ -80,9 +81,9 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls }, {
borderRightWidth: headerBorderRightWidth,
borderRightStyle: headerBorderRightStyle,
borderRightColor: headerBorderRightColor,
borderLeftWidth: headerBorderLeftWidth = panelHeadType === 'child' ? '3px' : '',
borderLeftWidth: headerBorderLeftWidth,
borderLeftStyle: headerBorderLeftStyle,
borderLeftColor: headerBorderLeftColor = panelHeadType === 'child' ? token.colorPrimary : '',
borderLeftColor: headerBorderLeftColor,
borderRadius: headerBorderRadius,
paddingBottom: headerPaddingBottom = '8px',
paddingTop: headerPaddingTop = '8px',
Expand Down Expand Up @@ -159,9 +160,11 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls }, {
height: ${headerHeight};
min-height: ${headerMinHeight};
max-height: ${headerMaxHeight};
border-top: ${headerBorderWidth || headerBorderTopWidth} ${headerBorderTopStyle || headerBorderStyle} ${headerBorderTopColor || headerBorderColor};
border-top: ${accentStyle && (panelHeadType === 'default' || panelHeadType === 'parent') ?
`3px` : headerBorderTopWidth || headerBorderWidth} ${headerBorderTopStyle || headerBorderStyle} ${accentStyle && (panelHeadType === 'default' || panelHeadType === 'parent') ?
'var(--primary-color)' : headerBorderTopColor || headerBorderColor};
border-right: ${headerBorderRightWidth || headerBorderWidth} ${headerBorderRightStyle || headerBorderStyle} ${headerBorderRightColor || headerBorderColor};
border-left: ${headerBorderLeftWidth || headerBorderWidth} ${headerBorderLeftStyle || headerBorderStyle} ${headerBorderLeftColor || headerBorderColor};
border-left: ${accentStyle && panelHeadType === 'child' ? `3px` : headerBorderLeftWidth || headerBorderWidth} ${headerBorderLeftStyle || headerBorderStyle} ${accentStyle && panelHeadType === 'child' ? 'var(--primary-color)' : headerBorderLeftColor || headerBorderColor};
border-bottom: ${headerBorderBottomWidth || headerBorderWidth} ${headerBorderBottomStyle || headerBorderStyle} ${headerBorderBottomColor || headerBorderColor};
padding-top: ${headerPaddingTop} !important;
padding-right: ${headerPaddingRight} !important;
Expand Down Expand Up @@ -194,9 +197,9 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls }, {
--ant-collapse-header-padding: 5px 0px !important;
border-bottom-left-radius: unset;
border-bottom-right-radius: unset;
border-bottom: 2px solid ${token.colorPrimary};
border-top: ${panelHeadType === 'parent' || panelHeadType === 'default' ? `3px solid var(--primary-color)` : 'none'};
border-left: ${panelHeadType === 'child' ? `3px solid var(--primary-color)` : 'none'};
${accentStyle && `border-bottom: 2px solid ${token.colorPrimary};`}
${accentStyle && (panelHeadType === 'default' || panelHeadType === 'parent') && `border-top: 3px solid var(--primary-color);`}
${accentStyle && panelHeadType === 'child' && `border-left: 3px solid var(--primary-color);`}
font-weight: ${fontWeight || '500'};
}
> .ant-collapse-content {
Expand Down Expand Up @@ -224,8 +227,6 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls }, {
> .ant-collapse-header {
--ant-collapse-header-padding: ${headerStyle?.padding || '12px 16px'} !important;
padding: 12px 16px !important;
border-top: ${panelHeadType === 'parent' ? `3px solid var(--primary-color)` : 'none'};
border-left: ${panelHeadType === 'child' ? `3px solid var(--primary-color)` : 'none'};
font-size: ${panelHeadType === 'parent' ? '13px' : '16px'};
}
}
Expand All @@ -248,8 +249,8 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls }, {

> .ant-collapse-item > .ant-collapse-header {
visibility: ${hideCollapseContent ? 'hidden' : 'visible'};
border-top: ${panelHeadType === 'parent' ? `3px solid var(--primary-color)` : 'none'};
border-left: ${panelHeadType === 'child' ? `3px solid var(--primary-color)` : 'none'};
${accentStyle && (panelHeadType === 'default' || panelHeadType === 'parent') && `border-top: 3px solid var(--primary-color);`}
${accentStyle && panelHeadType === 'child' && `border-left: 3px solid var(--primary-color);`}
font-size: ${panelHeadType === 'parent' ? '13px' : '16px'};
height: ${headerHeight};
min-height: ${headerMinHeight};
Expand Down
1 change: 1 addition & 0 deletions shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
display: flex !important;
justify-content: center !important;
}

.ant-image .anticon {
border-radius: ${borderRadius ?? '8px'} !important;
display: block !important;
Expand Down
16 changes: 13 additions & 3 deletions shesha-reactjs/src/designer-components/collapsiblePanel/collapsiblePanelComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,7 @@ const CollapsiblePanelComponent: IToolboxComponent<ICollapsiblePanelComponentPro
panelHeadType={headType}
hideCollapseContent={hideCollapseContent}
hideWhenEmpty={hideWhenEmpty}
accentStyle={model?.accentStyle}
>
<ComponentsContainer
containerId={content.id}
Expand Down Expand Up @@ -227,13 +228,22 @@ const CollapsiblePanelComponent: IToolboxComponent<ICollapsiblePanelComponentPro
customHeader: { id: nanoid(), components: [] }
}))
.add<ICollapsiblePanelComponentProps>(8, (prev) => {
const accentStyle = prev?.overflow === undefined;

return {
...prev, accentStyle, desktop: { ...prev.desktop, accentStyle },
tablet: { ...prev.tablet, accentStyle },
mobile: { ...prev.mobile, accentStyle }
};
})
.add<ICollapsiblePanelComponentProps>(9, (prev) => {
const newModel = migratePrevStyles(prev, defaultStyles(prev));
const defaultHeaderStyle = defaultHeaderStyles(prev);
const defaultHeaderStyle = { ...defaultHeaderStyles(prev) };

return {
...newModel, desktop: { ...newModel.desktop, overflow: prev.overflow ?? 'auto', headerStyles: defaultHeaderStyle },
tablet: { ...newModel.tablet, overflow: prev.overflow ?? 'auto', headerStyles: defaultHeaderStyle },
mobile: { ...newModel.mobile, overflow: prev.overflow ?? 'auto', headerStyles: defaultHeaderStyle }
tablet: { ...newModel.tablet, overflow: prev.overflow || 'auto', headerStyles: defaultHeaderStyle },
mobile: { ...newModel.mobile, overflow: prev.overflow || 'auto', headerStyles: defaultHeaderStyle }
};
}),
customContainerNames: ['header', 'content', 'customHeader'],
Expand Down
7 changes: 4 additions & 3 deletions shesha-reactjs/src/designer-components/collapsiblePanel/interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export interface ICollapsiblePanelComponentProps extends IConfigurableFormCompon
content?: ICollapsiblePanelContent;
collapsible?: CollapsibleType;
ghost?: boolean;
accentStyle?: boolean;
hideWhenEmpty?: boolean;
className?: string;
marginBottom?: string;
Expand All @@ -29,9 +30,9 @@ export interface ICollapsiblePanelComponentProps extends IConfigurableFormCompon
customHeader?: ICollapsiblePanelContent;
panelHeadType?: headerType;
headerStyles?: IStyleType;
desktop?: IStyleType;
mobile?: IStyleType;
tablet?: IStyleType;
desktop?: any;
mobile?: any;
tablet?: any;
};

export interface ICollapsiblePanelComponentPropsV0 extends IConfigurableFormComponent {
Expand Down
Loading
Loading