Fix/minor bugs

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,19 +702,31 @@ 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 {
     height: 20px;
     .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;
-};
+};
+

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"
   },
 };
+

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<ModalWrapperProps>`
   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 (
     <Draggable handle=".handle" disabled={!props.draggable}>
-      <ModalWrapper $width={props.width}>
+      <ModalWrapper $width={props.width} $customStyles={props?.customStyles}>
         <>
           <ModalHeaderWrapper className="handle" $draggable={props.draggable}>
             <ModalHeader
@@ -276,6 +282,7 @@ CustomModal.confirm = (props: {
   footer?: ReactNode;
   type?: "info" | "warn" | "error" | "success";
   width?: number | string;
+  customStyles?:React.CSSProperties;
 }): any => {
 
   const defaultConfirmProps: ModalFuncProps = {
@@ -333,6 +340,7 @@ CustomModal.confirm = (props: {
         }}
         footer={props.footer}
         width={props.width}
+        customStyles={props.customStyles}
       />
     ),
   });

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"),
 };

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:",

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<typeof TreeSelectStyle>;
 export type DrawerStyleType = StyleConfigType<typeof DrawerStyle>;
 export type JsonEditorStyleType = StyleConfigType<typeof JsonEditorStyle>;
 export type CalendarStyleType = StyleConfigType<typeof CalendarStyle>;
+export type EventModalStyleType = StyleConfigType<typeof EventModalStyle>;
 export type SignatureStyleType = StyleConfigType<typeof SignatureStyle>;
 export type CarouselStyleType = StyleConfigType<typeof CarouselStyle>;
 export type RichTextEditorStyleType = StyleConfigType<

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": {