diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx index cd94dc9b5..b80c8d455 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx @@ -17,6 +17,7 @@ import { EventContentArg, DateSelectArg } from "@fullcalendar/core"; import momentPlugin from "@fullcalendar/moment"; import ErrorBoundary from "./errorBoundary"; +import { default as Tabs } from "antd/es/tabs"; import { isValidColor, @@ -47,6 +48,8 @@ import { Tooltip, EditorContext, CompNameContext, + AnimationStyle, + EventModalStyle } from 'lowcoder-sdk'; import { @@ -92,6 +95,8 @@ let childrenMap: any = { licenseKey: withDefault( StringControl, "" ), currentFreeView: dropdownControl(DefaultWithFreeViewOptions, "timeGridWeek"), currentPremiumView: dropdownControl(DefaultWithPremiumViewOptions, "resourceTimelineDay"), + animationStyle: styleControl(AnimationStyle, 'animationStyle'), + modalStyle: styleControl(EventModalStyle), }; // this should ensure backwards compatibility with older versions of the SDK if (DragEventHandlerControl) { @@ -121,9 +126,12 @@ let CalendarBasicComp = (function () { licensed?: boolean; currentFreeView?: string; currentPremiumView?: string; + animationStyle?:any; + modalStyle?:any + }, dispatch: any) => { - const comp = useContext(EditorContext).getUICompByName( + const comp = useContext(EditorContext)?.getUICompByName( useContext(CompNameContext) ); const onEventVal = comp?.toJsonValue()?.comp?.onEvent; @@ -152,13 +160,26 @@ let CalendarBasicComp = (function () { end: dayjs(item.end, DateParser).format(), allDay: item.allDay, resourceId: item.resourceId ? item.resourceId : null, - color: isValidColor(item.color || "") ? item.color : theme?.theme?.primary, - ...(item.groupId ? { groupId: item.groupId } : {}), - }; + backgroundColor: item.backgroundColor, + extendedProps: { + color: isValidColor(item.color || "") ? item.color : theme?.theme?.primary, + ...(item.groupId ? { groupId: item.groupId } : {}), // Ensure color is in extendedProps + detail: item.detail, + titleColor:item.titleColor, + detailColor:item.detailColor, + titleFontWeight:item.titleFontWeight, + titleFontStyle:item.titleFontStyle, + detailFontWeight:item.detailFontWeight, + detailFontStyle:item.detailFontStyle, + animation:item?.animation, + animationDelay:item?.animationDelay, + animationDuration:item?.animationDuration, + animationIterationCount:item?.animationIterationCount + }} }) : [currentEvents.value]; - const resources = props.resources.value; + const resources = props.resources.value; // list all plugins for Fullcalendar const plugins = [ dayGridPlugin, @@ -233,6 +254,7 @@ let CalendarBasicComp = (function () { editable, licenseKey, resourceName, + modalStyle, } = props; function renderEventContent(eventInfo: EventContentArg) { @@ -258,18 +280,19 @@ let CalendarBasicComp = (function () { (eventInfo.view.type as ViewType) !== ViewType.MONTH ? "past" : ""; - return ( -
{eventInfo.timeText}
-
{eventInfo.event.title}
+
{eventInfo?.timeText}
+
{eventInfo?.event?.title}
+
{eventInfo?.event?.extendedProps?.detail}
); } - const handleDbClick = () => { const event = props.events.value.find( (item: EventType) => item.id === editEvent.current?.id @@ -300,12 +322,35 @@ let CalendarBasicComp = (function () { return; } if (event) { - const { title, groupId, color, id } = event; + const { title, groupId, color, id , backgroundColor,detail,titleColor,detailColor, + titleFontWeight, + titleFontStyle, + detailFontWeight, + detailFontStyle, + animation, + animationDelay, + animationDuration, + animationIterationCount, + + + } = event; const eventInfo = { title, groupId, color, id, + backgroundColor, + titleColor, + detail, + detailColor, + titleFontWeight, + titleFontStyle, + detailFontWeight, + detailFontStyle, + animation, + animationDelay, + animationDuration, + animationIterationCount, }; showModal(eventInfo, true); } else { @@ -348,51 +393,151 @@ let CalendarBasicComp = (function () { : trans("calendar.creatEvent"); form && form.setFieldsValue(event); const eventId = editEvent.current?.id; + CustomModal.confirm({ title: modalTitle, - content: ( - - - {trans("calendar.eventId")} - - } - name="id" - rules={[ - { required: true, message: trans("calendar.eventIdRequire") }, - ]} - > - - - - - - - - - - {trans("calendar.eventGroupId")} - - } - name="groupId" - > - - - + customStyles: { + backgroundColor:props?.modalStyle?.background, + animationStyle:props?.animationStyle, + }, + width: "450px", + content: ( + + + + + {trans("calendar.eventId")} + + } + name="id" + rules={[ + { required: true, message: trans("calendar.eventIdRequire") }, + ]} + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), onConfirm: () => { form.submit(); return form.validateFields().then(() => { - const { id, groupId, color, title = "" } = form.getFieldsValue(); + const { id, groupId, color, title = "", backgroundColor,detail,titleColor,detailColor , titleFontWeight, + titleFontStyle, + detailFontWeight, + detailFontStyle, + animation, + animationDelay, + animationDuration, + animationIterationCount } = form.getFieldsValue(); const idExist = props.events.value.findIndex( (item: EventType) => item.id === id ); @@ -408,9 +553,21 @@ let CalendarBasicComp = (function () { return { ...item, title, + detail, id, ...(groupId !== undefined ? { groupId } : null), ...(color !== undefined ? { color } : null), + ...(backgroundColor !== undefined ? { backgroundColor } : null), + ...(titleColor !== undefined ? { titleColor } : null), + ...(detailColor !== undefined ? { detailColor } : null), + ...(titleFontWeight !== undefined ? { titleFontWeight } : null), + ...(titleFontStyle !== undefined ? { titleFontStyle } : null), + ...(detailFontWeight !== undefined ? { detailFontWeight } : null), + ...(detailFontStyle !== undefined ? { detailFontStyle } : null), + ...(animation !== undefined ? { animation } : null), + ...(animationDelay !== undefined ? { animationDelay } : null), + ...(animationDuration !== undefined ? { animationDuration } : null), + ...(animationIterationCount !== undefined ? { animationIterationCount } : null), }; } else { return item; @@ -424,8 +581,20 @@ let CalendarBasicComp = (function () { end: event.end, id, title, + detail, + titleFontWeight, + titleFontStyle, + detailFontWeight, + detailFontStyle, + animation, + animationDelay, + animationDuration, + animationIterationCount, ...(groupId !== undefined ? { groupId } : null), ...(color !== undefined ? { color } : null), + ...(backgroundColor !== undefined ? { backgroundColor } : null), + ...(titleColor !== undefined ? { titleColor } : null), + ...(detailColor !== undefined ? { detailColor } : null), }; props.events.onChange([...props.events.value, createInfo]); } @@ -438,6 +607,7 @@ let CalendarBasicComp = (function () { }, }); }; + const handleDrop = () => { if (typeof props.onDropEvent === 'function') { @@ -577,6 +747,8 @@ let CalendarBasicComp = (function () { currentFreeView: { propertyView: (arg0: { label: string; tooltip: string; }) => any; }; currentPremiumView: { propertyView: (arg0: { label: string; tooltip: string; }) => any; }; style: { getPropertyView: () => any; }; + animationStyle: { getPropertyView: () => any; }; + modalStyle: { getPropertyView: () => any; }; licenseKey: { getView: () => any; propertyView: (arg0: { label: string; }) => any; }; }) => { @@ -622,6 +794,10 @@ let CalendarBasicComp = (function () {
{children.style.getPropertyView()}
+
{children.animationStyle.getPropertyView()}
+
+ {children.modalStyle.getPropertyView()} +
); }) @@ -647,7 +823,7 @@ let CalendarComp = withMethodExposing(TmpCalendarComp, [ { method: { name: "setCalendarView", - description: "Sets the view of the calendar to a specified type", + detail: "Sets the view of the calendar to a specified type", params: [{ name: "viewType", type: "string" }], }, execute: (comp, values) => { @@ -661,7 +837,7 @@ let CalendarComp = withMethodExposing(TmpCalendarComp, [ { method: { name: "setResourceTimeGridDayView", - description: "Switches the calendar view to 'Resource Time Grid Day', which displays resources along the vertical axis and the hours of a single day along the horizontal axis.", + detail: "Switches the calendar view to 'Resource Time Grid Day', which displays resources along the vertical axis and the hours of a single day along the horizontal axis.", params: [{ name: "viewType", type: "string" }], }, execute: (comp) => { @@ -672,7 +848,7 @@ let CalendarComp = withMethodExposing(TmpCalendarComp, [ { method: { name: "setResourceTimelineDayView", - description: "Switches the calendar view to 'Resource Timeline Day', showing events against a timeline for a single day, segmented by resources.", + detail: "Switches the calendar view to 'Resource Timeline Day', showing events against a timeline for a single day, segmented by resources.", params: [{ name: "viewType", type: "string" }], }, execute: (comp) => { @@ -683,7 +859,7 @@ let CalendarComp = withMethodExposing(TmpCalendarComp, [ { method: { name: "setDayGridWeekView", - description: "Switches the calendar view to 'Day Grid Week', where the days of the week are displayed as columns and events are laid out in grid form.", + detail: "Switches the calendar view to 'Day Grid Week', where the days of the week are displayed as columns and events are laid out in grid form.", params: [{ name: "viewType", type: "string" }], }, execute: (comp) => { @@ -694,7 +870,7 @@ let CalendarComp = withMethodExposing(TmpCalendarComp, [ { method: { name: "setTimeGridWeekView", - description: "Switches the calendar view to 'Day Grid Week', where the days of the week are displayed as columns and events are laid out in grid form.", + detail: "Switches the calendar view to 'Day Grid Week', where the days of the week are displayed as columns and events are laid out in grid form.", params: [{ name: "viewType", type: "string" }], }, execute: (comp) => { @@ -705,7 +881,7 @@ let CalendarComp = withMethodExposing(TmpCalendarComp, [ { method: { name: "setTimeGridDayView", - description: "Switches the calendar view to 'Time Grid Day', which shows a detailed hourly schedule for a single day.", + detail: "Switches the calendar view to 'Time Grid Day', which shows a detailed hourly schedule for a single day.", params: [{ name: "viewType", type: "string" }], }, execute: (comp) => { @@ -716,7 +892,7 @@ let CalendarComp = withMethodExposing(TmpCalendarComp, [ { method: { name: "setDayGridDayView", - description: "Switches the calendar view to 'Day Grid Day', displaying a single day in a grid layout that includes all events for that day.", + detail: "Switches the calendar view to 'Day Grid Day', displaying a single day in a grid layout that includes all events for that day.", params: [{ name: "viewType", type: "string" }], }, execute: (comp) => { @@ -727,7 +903,7 @@ let CalendarComp = withMethodExposing(TmpCalendarComp, [ { method: { name: "setListWeekView", - description: "Switches the calendar view to 'List Week', which provides a list-style overview of all events happening throughout the week.", + detail: "Switches the calendar view to 'List Week', which provides a list-style overview of all events happening throughout the week.", params: [{ name: "viewType", type: "string" }], }, execute: (comp) => { @@ -738,7 +914,7 @@ let CalendarComp = withMethodExposing(TmpCalendarComp, [ { method: { name: "setDayGridMonthView", - description: "Switches the calendar view to 'Day Grid Month', presenting the entire month in a grid with events displayed on their respective days.", + detail: "Switches the calendar view to 'Day Grid Month', presenting the entire month in a grid with events displayed on their respective days.", params: [{ name: "viewType", type: "string" }], }, execute: (comp) => { @@ -749,7 +925,7 @@ let CalendarComp = withMethodExposing(TmpCalendarComp, [ { method: { name: "setMultiMonthYearView", - description: "Switches the calendar view to 'Multi Month Year', showing multiple months at once, allowing for long-term planning and overview.", + detail: "Switches the calendar view to 'Multi Month Year', showing multiple months at once, allowing for long-term planning and overview.", params: [{ name: "viewType", type: "string" }], }, execute: (comp) => { @@ -760,4 +936,5 @@ let CalendarComp = withMethodExposing(TmpCalendarComp, [ ]); -export { CalendarComp }; \ No newline at end of file +export { CalendarComp }; + diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx index 0250b299f..9291121fe 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx @@ -15,6 +15,7 @@ import { lightenColor, toHex, UnderlineCss, + EventModalStyleType } from "lowcoder-sdk"; import styled from "styled-components"; import dayjs from "dayjs"; @@ -362,6 +363,7 @@ export const Wrapper = styled.div<{ // event .fc-timegrid-event .fc-event-main { padding: 4px 0 4px 1px; + } .fc-event { position: relative; @@ -652,11 +654,12 @@ export const Remove = styled.div<{ $isList: boolean }>` `; export const Event = styled.div<{ - $bg: string; theme: Object; $isList: boolean; $allDay: boolean; $style: CalendarStyleType; + $backgroundColor:string; + $extendedProps: any; }>` height: 100%; width: 100%; @@ -665,14 +668,17 @@ export const Event = styled.div<{ box-shadow: ${(props) => !props.$isList && "0 0 5px 0 rgba(0, 0, 0, 0.15)"}; border: 1px solid ${(props) => props.$style.border}; display: ${(props) => props.$isList && "flex"}; - background-color: ${(props) => - !props.$isList && lightenColor(props.$style.background, 0.1)}; + background-color:${(props) => props?.$backgroundColor || "#ffffff"} ; overflow: hidden; font-size: 13px; line-height: 19px; padding-right: 20px; overflow: hidden; position: relative; + animation: ${(props) => props?.$extendedProps?.animation || ""}; + animation-delay: ${(props) => props?.$extendedProps?.animationDelay || ""} ; + animation-duration: ${(props) => props?.$extendedProps?.animationDuration || ""}; + animation-iteration-count: ${(props) => props?.$extendedProps?.animationIterationCount || ""}; &::before { content: ""; position: absolute; @@ -682,7 +688,7 @@ export const Event = styled.div<{ left: 2px; top: 2px; border-radius: 3px; - background-color: ${(props) => props.$bg}; + background-color: ${(props) => props.$extendedProps?.color}; } .event-time { @@ -696,11 +702,21 @@ export const Event = styled.div<{ margin-top: 2px; } .event-title { - color: ${(props) => !props.$isList && props.$style.text}; - font-weight: 500; + color: ${(props) => props?.$extendedProps?.titleColor || "#000000"}; + font-weight: ${(props) => props?.$extendedProps?.titleFontWeight || "normal"}; + font-style: ${(props) => props?.$extendedProps?.titleFontStyle || ""}; + margin-left: 15px; + white-space: pre-wrap; + word-break: break-word; + } + .event-detail { + color: ${(props) => props?.$extendedProps?.detailColor || "#000000"}; + font-weight: ${(props) => props?.$extendedProps?.detailFontWeight || "normal"}; + font-style: ${(props) => props?.$extendedProps?.detailFontStyle || "italic"}; margin-left: 15px; white-space: pre-wrap; word-break: break-word; + margin-top: 2px; } &.small { @@ -708,7 +724,9 @@ export const Event = styled.div<{ .event-time { display: none; } - .event-title { + .event-title, + .event-detail + { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -717,7 +735,9 @@ export const Event = styled.div<{ &.middle { padding-top: 2px; .event-time, - .event-title { + .event-title, + .event-detail + { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -730,38 +750,63 @@ export const Event = styled.div<{ } &.past { background-color: ${(props) => - isDarkColor(props.$style.background) && props.$style.background}; + `rgba(${props?.$extendedProps?.color}, 0.3)`}; &::before { - background-color: ${(props) => - toHex(props.$style.text) === "#3C3C3C" - ? "#8B8FA3" - : isDarkColor(props.$style.text) - ? lightenColor(props.$style.text, 0.3) - : props.$style.text}; + background-color: ${(props) => props?.$extendedProps?.color}; + opacity: 0.3; } &::before, .event-title, - .event-time { + .event-time, + .event-detail + { opacity: 0.35; } } `; -export const FormWrapper = styled(Form)` + + +export const FormWrapper = styled(Form)<{ + $modalStyle: EventModalStyleType +}>` .ant-form-item-label { - width: 100px; + width: 125px; text-align: left; line-height: 18px; + label:not(.ant-form-item-required) { - margin-left: 11px; + margin-left: 2px; + } + label.ant-form-item-required{ + margin-left: 2px; } label span { ${UnderlineCss} + } } + + // Setting style for input fields + .ant-input { + background-color: ${(props) => props.$modalStyle.labelBackground }; + border-color: ${(props) => props.$modalStyle.border}; + border-width: ${(props) => props.$modalStyle.borderWidth}; + border-style: ${(props) => props.$modalStyle.borderStyle}; + color: ${(props) => props.$modalStyle.text}; + } + `; export type EventType = { + animationIterationCount: any; + animationDuration: any; + animationDelay: any; + animation: any; + titleFontWeight: any; + titleFontStyle: any; + detailFontWeight: any; + detailFontStyle: any; id?: string; resourceId?: string; label?: string; @@ -770,8 +815,12 @@ export type EventType = { end?: string; allDay?: boolean; color?: string; + backgroundColor?:string; groupId?: string; value?: string; + detail?:string; + titleColor?:string; + detailColor?:string; }; export enum ViewType { @@ -892,12 +941,25 @@ export const defaultData = [ start: dayjs().hour(10).minute(0).second(0).format(DATE_TIME_FORMAT), end: dayjs().hour(12).minute(30).second(0).format(DATE_TIME_FORMAT), color: "#079968", + backgroundColor:"#ffffff", + detail: 'Discuss project milestones and deliverables.', + titleColor:"#000000", + detailColor:"#000000", + titleFontWeight:"normal", + titleFontStyle:"italic", + detailFontWeight:"normal", + detailFontStyle:"italic", + animation:"none", + animationDelay:"0s", + animationDuration:"0s", + animationIterationCount:"0", }, { id: "2", title: "Rest", start: dayjs().hour(24).format(DATE_FORMAT), end: dayjs().hour(48).format(DATE_FORMAT), + color: "#079968", allDay: true, }, ]; @@ -1045,4 +1107,5 @@ export const viewClassNames = (info: ViewContentArg) => { } } return className; -}; \ No newline at end of file +}; + diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index 65fe5995d..c421bb60e 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -128,7 +128,7 @@ export const en = { xAxisName: "X-axis Name", xAxisType: "X-axis Type", xAxisTypeTooltip: - "Automatically detected based on X-axis data. For type description, refer to: ", + "Automatically detected based on X-axis data. For type detail, refer to: ", logBase: "Log Base", yAxisName: "Y-axis Name", yAxisType: "Y-axis Type", @@ -316,6 +316,10 @@ export const en = { editEvent: "Edit Event", eventName: "Event Name", eventColor: "Event Color", + eventBackgroundColor:"Background", + eventdetail:"Detail", + eventTitleColor:"Title Color", + eventdetailColor:"Detail Color", eventGroupId: "Group ID", groupIdTooltip: "Group ID groups events for drag and resize together.", more: "More", @@ -326,5 +330,18 @@ export const en = { eventIdTooltip: "Unique ID for each event", eventIdExist: "ID Exists", dragDropEventHandlers: "Drag/Drop Event Handlers", + general: "General", + colorStyles:"Color Styles", + fontStyles:"Font Styles", + animations:"Animations", + eventTitleFontWeight:"Title FontWeight", + eventTitleFontStyle:"Title FontStyle", + eventdetailFontWeight:"Detail FontWeight", + eventdetailFontStyle:"Detail FontStyle", + animationType:"Type", + animationDelay:"Delay", + animationDuration:"Duration", + animationIterationCount:"IterationCount" }, }; + diff --git a/client/packages/lowcoder-design/src/components/CustomModal.tsx b/client/packages/lowcoder-design/src/components/CustomModal.tsx index f978fa419..e469794da 100644 --- a/client/packages/lowcoder-design/src/components/CustomModal.tsx +++ b/client/packages/lowcoder-design/src/components/CustomModal.tsx @@ -12,6 +12,7 @@ import { modalInstance } from "components/GlobalInstances"; type ModalWrapperProps = { $width?: string | number; + $customStyles?:any }; type Model = { @@ -24,12 +25,16 @@ const ModalWrapper = styled.div` flex-direction: column; width: ${(props) => (props.$width ? props.$width : "368px")}; height: fit-content; - background: #ffffff; + background:${(props) => props.$customStyles?.backgroundColor}; ; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); border-radius: 8px; padding: 0 0 16px; pointer-events: auto; will-change: transform; + animation: ${(props) => props.$customStyles?.animationStyle?.animation}; + animation-delay: ${(props) => props.$customStyles?.animationStyle?.animationDelay}; + animation-duration: ${(props) => props.$customStyles?.animationStyle?.animationDuration}; + animation-iteration-count: ${(props) => props.$customStyles?.animationStyle?.animationIterationCount}; `; const ModalHeaderWrapper = styled.div<{ $draggable?: boolean }>` @@ -205,6 +210,7 @@ export type CustomModalProps = { children?: JSX.Element | React.ReactNode; okButtonType?: TacoButtonType; model?: Model; + customStyles?:any } & AntdModalProps; const DEFAULT_PROPS = { @@ -217,7 +223,7 @@ const DEFAULT_PROPS = { function CustomModalRender(props: CustomModalProps & ModalFuncProps) { return ( - + <> { const defaultConfirmProps: ModalFuncProps = { @@ -333,6 +340,7 @@ CustomModal.confirm = (props: { }} footer={props.footer} width={props.width} + customStyles={props.customStyles} /> ), }); diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx index 3fa849894..2f02497d0 100644 --- a/client/packages/lowcoder-design/src/components/Section.tsx +++ b/client/packages/lowcoder-design/src/components/Section.tsx @@ -186,4 +186,5 @@ export const sectionNames = { bodyStyle:trans("prop.bodyStyle"), badgeStyle:trans("prop.badgeStyle"), columnStyle:trans("prop.columnStyle"), + modalStyle:trans("prop.modalStyle"), }; diff --git a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts index 0a5631957..6ebd73d92 100644 --- a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts +++ b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts @@ -39,6 +39,7 @@ export const en = { bodyStyle: 'Body Style', badgeStyle: 'Badge Style', columnStyle: 'Column Style', + modalStyle: 'Modal Style', }, passwordInput: { label: "Password:", diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index b9a6d37fa..d8d6d2422 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -1860,6 +1860,21 @@ export const SignatureStyle = [ BORDER_WIDTH, ] as const; +export const EventModalStyle = [ + getBackground("primarySurface"), + BORDER, + BORDER_WIDTH, + BORDER_STYLE, + TEXT, + { + name: "labelBackground", + label: trans("style.labelBackground"), + depTheme: "primarySurface", + depType: DEP_TYPE.SELF, + transformer: toSelf, + }, +] as const; + // Added by Aqib Mirza export const LottieStyle = [ { @@ -2054,6 +2069,7 @@ export type TreeSelectStyleType = StyleConfigType; export type DrawerStyleType = StyleConfigType; export type JsonEditorStyleType = StyleConfigType; export type CalendarStyleType = StyleConfigType; +export type EventModalStyleType = StyleConfigType; export type SignatureStyleType = StyleConfigType; export type CarouselStyleType = StyleConfigType; export type RichTextEditorStyleType = StyleConfigType< diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 8c1069710..41fffef0e 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -558,6 +558,7 @@ export const en = { "siderBackgroundImagePosition": "Sider Background Image Position", "siderBackgroundImageOrigin": "Sider Background Image Origin", "activeBackground": "Active Background Color", + "labelBackground": "Label Background Color", }, "export": {