Skip to content

Commit 6eeab11

Browse files
MenamAfzalMenamAfzal
committed
label styles in modal
1 parent 22ca375 commit 6eeab11

File tree

7 files changed

+69
-20
lines changed

7 files changed

+69
-20
lines changed

‎client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,8 @@ import {
4747
Tooltip,
4848
EditorContext,
4949
CompNameContext,
50-
AnimationStyle
50+
AnimationStyle,
51+
EventModalStyle
5152
} from 'lowcoder-sdk';
5253

5354
import {
@@ -94,6 +95,7 @@ let childrenMap: any = {
9495
currentFreeView: dropdownControl(DefaultWithFreeViewOptions, "timeGridWeek"),
9596
currentPremiumView: dropdownControl(DefaultWithPremiumViewOptions, "resourceTimelineDay"),
9697
animationStyle: styleControl(AnimationStyle, 'animationStyle'),
98+
modalStyle: styleControl(EventModalStyle),
9799
};
98100
// this should ensure backwards compatibility with older versions of the SDK
99101
if (DragEventHandlerControl) {
@@ -123,7 +125,9 @@ let CalendarBasicComp = (function () {
123125
licensed?: boolean;
124126
currentFreeView?: string;
125127
currentPremiumView?: string;
126-
animationStyle:any;
128+
animationStyle?:any;
129+
modalStyle?:any
130+
127131
}, dispatch: any) => {
128132

129133
const comp = useContext(EditorContext)?.getUICompByName(
@@ -236,6 +240,7 @@ let CalendarBasicComp = (function () {
236240
editable,
237241
licenseKey,
238242
resourceName,
243+
modalStyle,
239244
} = props;
240245

241246
function renderEventContent(eventInfo: EventContentArg) {
@@ -353,14 +358,13 @@ let CalendarBasicComp = (function () {
353358
const eventId = editEvent.current?.id;
354359
CustomModal.confirm({
355360
title: modalTitle,
356-
animationStyle: {
357-
animation: props.animationStyle?.animation || "none",
358-
animationDelay: props.animationStyle?.animationDelay || "0s",
359-
animationDuration: props.animationStyle?.animationDuration || "0s",
360-
animationIterationCount: props.animationStyle?.animationIterationCount || "1",
361-
},
361+
customStyles: {
362+
backgroundColor:props?.modalStyle?.background,
363+
animationStyle:props?.animationStyle
364+
},
362365
content: (
363-
<FormWrapper form={form}>
366+
<FormWrapper form={form}
367+
$modaltyle={modalStyle}>
364368
<Form.Item
365369
label={
366370
<Tooltip title={trans("calendar.eventIdTooltip")}>
@@ -587,6 +591,7 @@ let CalendarBasicComp = (function () {
587591
currentPremiumView: { propertyView: (arg0: { label: string; tooltip: string; }) => any; };
588592
style: { getPropertyView: () => any; };
589593
animationStyle: { getPropertyView: () => any; };
594+
modalStyle: { getPropertyView: () => any; };
590595
licenseKey: { getView: () => any; propertyView: (arg0: { label: string; }) => any; };
591596
}) => {
592597

@@ -633,6 +638,9 @@ let CalendarBasicComp = (function () {
633638
{children.style.getPropertyView()}
634639
</Section>
635640
<Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
641+
<Section name={sectionNames.modalStyle}>
642+
{children.modalStyle.getPropertyView()}
643+
</Section>
636644
</>
637645
);
638646
})

‎client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
lightenColor,
1616
toHex,
1717
UnderlineCss,
18+
EventModalStyleType
1819
} from "lowcoder-sdk";
1920
import styled from "styled-components";
2021
import dayjs from "dayjs";
@@ -747,18 +748,38 @@ export const Event = styled.div<{
747748
}
748749
`;
749750

750-
export const FormWrapper = styled(Form)`
751+
export const FormWrapper = styled(Form)<{
752+
$modaltyle: EventModalStyleType
753+
}>`
751754
.ant-form-item-label {
752755
width: 100px;
753756
text-align: left;
754757
line-height: 18px;
758+
759+
label.ant-form-item-required {
760+
font-size: ${(props) => props.$modaltyle.textSize};
761+
}
762+
755763
label:not(.ant-form-item-required) {
756764
margin-left: 11px;
765+
font-size: ${(props) => props.$modaltyle.textSize};
757766
}
758767
label span {
759768
${UnderlineCss}
769+
760770
}
761771
}
772+
773+
// Setting style for input fields
774+
.ant-input {
775+
background-color: ${(props) => props.$modaltyle.labelBackground };
776+
border-color: ${(props) => props.$modaltyle.border};
777+
border-width: ${(props) => props.$modaltyle.borderWidth};
778+
border-style: ${(props) => props.$modaltyle.borderStyle};
779+
color: ${(props) => props.$modaltyle.text};
780+
font-size: ${(props) => props.$modaltyle.textSize};
781+
}
782+
762783
`;
763784

764785
export type EventType = {

‎client/packages/lowcoder-design/src/components/CustomModal.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { modalInstance } from "components/GlobalInstances";
1212

1313
type ModalWrapperProps = {
1414
$width?: string | number;
15-
$animationStyle?:any
15+
$customStyles?:any
1616
};
1717

1818
type Model = {
@@ -25,16 +25,16 @@ const ModalWrapper = styled.div<ModalWrapperProps>`
2525
flex-direction: column;
2626
width: ${(props) => (props.$width ? props.$width : "368px")};
2727
height: fit-content;
28-
background: #ffffff;
28+
background:${(props) => props.$customStyles?.backgroundColor}; ;
2929
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
3030
border-radius: 8px;
3131
padding: 0 0 16px;
3232
pointer-events: auto;
3333
will-change: transform;
34-
animation: ${(props) => props.$animationStyle?.animation};
35-
animation-delay: ${(props) => props.$animationStyle?.animationDelay};
36-
animation-duration: ${(props) => props.$animationStyle?.animationDuration};
37-
animation-iteration-count: ${(props) => props.$animationStyle?.animationIterationCount};
34+
animation: ${(props) => props.$customStyles?.animationStyle?.animation};
35+
animation-delay: ${(props) => props.$customStyles?.animationStyle?.animationDelay};
36+
animation-duration: ${(props) => props.$customStyles?.animationStyle?.animationDuration};
37+
animation-iteration-count: ${(props) => props.$customStyles?.animationStyle?.animationIterationCount};
3838
`;
3939

4040
const ModalHeaderWrapper = styled.div<{ $draggable?: boolean }>`
@@ -210,7 +210,7 @@ export type CustomModalProps = {
210210
children?: JSX.Element | React.ReactNode;
211211
okButtonType?: TacoButtonType;
212212
model?: Model;
213-
animationStyle?:any
213+
customStyles?:any
214214
} & AntdModalProps;
215215

216216
const DEFAULT_PROPS = {
@@ -223,7 +223,7 @@ const DEFAULT_PROPS = {
223223
function CustomModalRender(props: CustomModalProps & ModalFuncProps) {
224224
return (
225225
<Draggable handle=".handle" disabled={!props.draggable}>
226-
<ModalWrapper $width={props.width} $animationStyle={props?.animationStyle}>
226+
<ModalWrapper $width={props.width} $customStyles={props?.customStyles}>
227227
<>
228228
<ModalHeaderWrapper className="handle" $draggable={props.draggable}>
229229
<ModalHeader
@@ -282,7 +282,7 @@ CustomModal.confirm = (props: {
282282
footer?: ReactNode;
283283
type?: "info" | "warn" | "error" | "success";
284284
width?: number | string;
285-
animationStyle?:React.CSSProperties;
285+
customStyles?:React.CSSProperties;
286286
}): any => {
287287

288288
const defaultConfirmProps: ModalFuncProps = {
@@ -340,7 +340,7 @@ CustomModal.confirm = (props: {
340340
}}
341341
footer={props.footer}
342342
width={props.width}
343-
animationStyle={props.animationStyle}
343+
customStyles={props.customStyles}
344344
/>
345345
),
346346
});

‎client/packages/lowcoder-design/src/components/Section.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,4 +186,5 @@ export const sectionNames = {
186186
bodyStyle:trans("prop.bodyStyle"),
187187
badgeStyle:trans("prop.badgeStyle"),
188188
columnStyle:trans("prop.columnStyle"),
189+
modalStyle:trans("prop.modalStyle"),
189190
};

‎client/packages/lowcoder-design/src/i18n/design/locales/en.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export const en = {
3939
bodyStyle: 'Body Style',
4040
badgeStyle: 'Badge Style',
4141
columnStyle: 'Column Style',
42+
modalStyle: 'Modal Style',
4243
},
4344
passwordInput: {
4445
label: "Password:",

‎client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1860,6 +1860,22 @@ export const SignatureStyle = [
18601860
BORDER_WIDTH,
18611861
] as const;
18621862

1863+
export const EventModalStyle = [
1864+
getBackground("primarySurface"),
1865+
BORDER,
1866+
BORDER_WIDTH,
1867+
BORDER_STYLE,
1868+
TEXT,
1869+
TEXT_SIZE,
1870+
{
1871+
name: "labelBackground",
1872+
label: trans("style.labelBackground"),
1873+
depTheme: "primarySurface",
1874+
depType: DEP_TYPE.SELF,
1875+
transformer: toSelf,
1876+
},
1877+
] as const;
1878+
18631879
// Added by Aqib Mirza
18641880
export const LottieStyle = [
18651881
{
@@ -2054,6 +2070,7 @@ export type TreeSelectStyleType = StyleConfigType<typeof TreeSelectStyle>;
20542070
export type DrawerStyleType = StyleConfigType<typeof DrawerStyle>;
20552071
export type JsonEditorStyleType = StyleConfigType<typeof JsonEditorStyle>;
20562072
export type CalendarStyleType = StyleConfigType<typeof CalendarStyle>;
2073+
export type EventModalStyleType = StyleConfigType<typeof EventModalStyle>;
20572074
export type SignatureStyleType = StyleConfigType<typeof SignatureStyle>;
20582075
export type CarouselStyleType = StyleConfigType<typeof CarouselStyle>;
20592076
export type RichTextEditorStyleType = StyleConfigType<

‎client/packages/lowcoder/src/i18n/locales/en.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -558,6 +558,7 @@ export const en = {
558558
"siderBackgroundImagePosition": "Sider Background Image Position",
559559
"siderBackgroundImageOrigin": "Sider Background Image Origin",
560560
"activeBackground": "Active Background Color",
561+
"labelBackground": "Label Background Color",
561562

562563
},
563564
"export": {

0 commit comments

Comments
 (0)