From 4764c9e142d07f868f4ea6f313dd67b1518e0c7c Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Thu, 29 Aug 2024 18:43:49 +0500 Subject: [PATCH 1/7] animation styles --- .../src/comps/calendarComp/calendarComp.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx index cd94dc9b5..52e9a5849 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx @@ -47,6 +47,7 @@ import { Tooltip, EditorContext, CompNameContext, + AnimationStyle } from 'lowcoder-sdk'; import { @@ -92,6 +93,7 @@ let childrenMap: any = { licenseKey: withDefault( StringControl, "" ), currentFreeView: dropdownControl(DefaultWithFreeViewOptions, "timeGridWeek"), currentPremiumView: dropdownControl(DefaultWithPremiumViewOptions, "resourceTimelineDay"), + animationStyle: styleControl(AnimationStyle, 'animationStyle'), }; // this should ensure backwards compatibility with older versions of the SDK if (DragEventHandlerControl) { @@ -121,9 +123,10 @@ let CalendarBasicComp = (function () { licensed?: boolean; currentFreeView?: string; currentPremiumView?: string; + animationStyle:any; }, dispatch: any) => { - const comp = useContext(EditorContext).getUICompByName( + const comp = useContext(EditorContext)?.getUICompByName( useContext(CompNameContext) ); const onEventVal = comp?.toJsonValue()?.comp?.onEvent; @@ -350,6 +353,12 @@ let CalendarBasicComp = (function () { const eventId = editEvent.current?.id; CustomModal.confirm({ title: modalTitle, + style: { + animation: props.animationStyle?.animation || "none", + animationDelay: props.animationStyle?.animationDelay || "0s", + animationDuration: props.animationStyle?.animationDuration || "0s", + animationIterationCount: props.animationStyle?.animationIterationCount || "1", + }, content: ( any; }; currentPremiumView: { propertyView: (arg0: { label: string; tooltip: string; }) => any; }; style: { getPropertyView: () => any; }; + animationStyle: { getPropertyView: () => any; }; licenseKey: { getView: () => any; propertyView: (arg0: { label: string; }) => any; }; }) => { @@ -622,6 +632,7 @@ let CalendarBasicComp = (function () {
{children.style.getPropertyView()}
+
{children.animationStyle.getPropertyView()}
); }) From 22ca3751e190633749e51daf17659da3ac94ae43 Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Thu, 29 Aug 2024 20:41:31 +0500 Subject: [PATCH 2/7] animation styles in modal --- .../src/comps/calendarComp/calendarComp.tsx | 2 +- .../lowcoder-design/src/components/CustomModal.tsx | 10 +++++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx index 52e9a5849..17f9002b4 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx @@ -353,7 +353,7 @@ let CalendarBasicComp = (function () { const eventId = editEvent.current?.id; CustomModal.confirm({ title: modalTitle, - style: { + animationStyle: { animation: props.animationStyle?.animation || "none", animationDelay: props.animationStyle?.animationDelay || "0s", animationDuration: props.animationStyle?.animationDuration || "0s", diff --git a/client/packages/lowcoder-design/src/components/CustomModal.tsx b/client/packages/lowcoder-design/src/components/CustomModal.tsx index f978fa419..3f0370595 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; + $animationStyle?:any }; type Model = { @@ -30,6 +31,10 @@ const ModalWrapper = styled.div` padding: 0 0 16px; pointer-events: auto; will-change: transform; + animation: ${(props) => props.$animationStyle?.animation}; + animation-delay: ${(props) => props.$animationStyle?.animationDelay}; + animation-duration: ${(props) => props.$animationStyle?.animationDuration}; + animation-iteration-count: ${(props) => props.$animationStyle?.animationIterationCount}; `; const ModalHeaderWrapper = styled.div<{ $draggable?: boolean }>` @@ -205,6 +210,7 @@ export type CustomModalProps = { children?: JSX.Element | React.ReactNode; okButtonType?: TacoButtonType; model?: Model; + animationStyle?: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} + animationStyle={props.animationStyle} /> ), }); From 6eeab11bf9a798ebaa36284df87820bee7e427e0 Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Thu, 29 Aug 2024 23:59:04 +0500 Subject: [PATCH 3/7] label styles in modal --- .../src/comps/calendarComp/calendarComp.tsx | 26 ++++++++++++------- .../comps/calendarComp/calendarConstants.tsx | 23 +++++++++++++++- .../src/components/CustomModal.tsx | 20 +++++++------- .../src/components/Section.tsx | 1 + .../src/i18n/design/locales/en.ts | 1 + .../comps/controls/styleControlConstants.tsx | 17 ++++++++++++ .../packages/lowcoder/src/i18n/locales/en.ts | 1 + 7 files changed, 69 insertions(+), 20 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx index 17f9002b4..e47bd37b5 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx @@ -47,7 +47,8 @@ import { Tooltip, EditorContext, CompNameContext, - AnimationStyle + AnimationStyle, + EventModalStyle } from 'lowcoder-sdk'; import { @@ -94,6 +95,7 @@ let childrenMap: any = { 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) { @@ -123,7 +125,9 @@ let CalendarBasicComp = (function () { licensed?: boolean; currentFreeView?: string; currentPremiumView?: string; - animationStyle:any; + animationStyle?:any; + modalStyle?:any + }, dispatch: any) => { const comp = useContext(EditorContext)?.getUICompByName( @@ -236,6 +240,7 @@ let CalendarBasicComp = (function () { editable, licenseKey, resourceName, + modalStyle, } = props; function renderEventContent(eventInfo: EventContentArg) { @@ -353,14 +358,13 @@ let CalendarBasicComp = (function () { const eventId = editEvent.current?.id; CustomModal.confirm({ title: modalTitle, - animationStyle: { - animation: props.animationStyle?.animation || "none", - animationDelay: props.animationStyle?.animationDelay || "0s", - animationDuration: props.animationStyle?.animationDuration || "0s", - animationIterationCount: props.animationStyle?.animationIterationCount || "1", - }, + customStyles: { + backgroundColor:props?.modalStyle?.background, + animationStyle:props?.animationStyle + }, content: ( - + @@ -587,6 +591,7 @@ let CalendarBasicComp = (function () { 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; }; }) => { @@ -633,6 +638,9 @@ let CalendarBasicComp = (function () { {children.style.getPropertyView()}
{children.animationStyle.getPropertyView()}
+
+ {children.modalStyle.getPropertyView()} +
); }) diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx index 0250b299f..e664092c4 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"; @@ -747,18 +748,38 @@ export const Event = styled.div<{ } `; -export const FormWrapper = styled(Form)` +export const FormWrapper = styled(Form)<{ + $modaltyle: EventModalStyleType +}>` .ant-form-item-label { width: 100px; text-align: left; line-height: 18px; + + label.ant-form-item-required { + font-size: ${(props) => props.$modaltyle.textSize}; + } + label:not(.ant-form-item-required) { margin-left: 11px; + font-size: ${(props) => props.$modaltyle.textSize}; } label span { ${UnderlineCss} + } } + + // Setting style for input fields + .ant-input { + background-color: ${(props) => props.$modaltyle.labelBackground }; + border-color: ${(props) => props.$modaltyle.border}; + border-width: ${(props) => props.$modaltyle.borderWidth}; + border-style: ${(props) => props.$modaltyle.borderStyle}; + color: ${(props) => props.$modaltyle.text}; + font-size: ${(props) => props.$modaltyle.textSize}; + } + `; export type EventType = { diff --git a/client/packages/lowcoder-design/src/components/CustomModal.tsx b/client/packages/lowcoder-design/src/components/CustomModal.tsx index 3f0370595..e469794da 100644 --- a/client/packages/lowcoder-design/src/components/CustomModal.tsx +++ b/client/packages/lowcoder-design/src/components/CustomModal.tsx @@ -12,7 +12,7 @@ import { modalInstance } from "components/GlobalInstances"; type ModalWrapperProps = { $width?: string | number; - $animationStyle?:any + $customStyles?:any }; type Model = { @@ -25,16 +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.$animationStyle?.animation}; - animation-delay: ${(props) => props.$animationStyle?.animationDelay}; - animation-duration: ${(props) => props.$animationStyle?.animationDuration}; - animation-iteration-count: ${(props) => props.$animationStyle?.animationIterationCount}; + 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 }>` @@ -210,7 +210,7 @@ export type CustomModalProps = { children?: JSX.Element | React.ReactNode; okButtonType?: TacoButtonType; model?: Model; - animationStyle?:any + customStyles?:any } & AntdModalProps; const DEFAULT_PROPS = { @@ -223,7 +223,7 @@ const DEFAULT_PROPS = { function CustomModalRender(props: CustomModalProps & ModalFuncProps) { return ( - + <> { const defaultConfirmProps: ModalFuncProps = { @@ -340,7 +340,7 @@ CustomModal.confirm = (props: { }} footer={props.footer} width={props.width} - animationStyle={props.animationStyle} + 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..54f786720 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -1860,6 +1860,22 @@ export const SignatureStyle = [ BORDER_WIDTH, ] as const; +export const EventModalStyle = [ + getBackground("primarySurface"), + BORDER, + BORDER_WIDTH, + BORDER_STYLE, + TEXT, + TEXT_SIZE, + { + 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 +2070,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 6ebd3bb38..846e91400 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": { From 83987aed3a2bbc7610b5cd2b2d8bbdfea0bb923d Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Fri, 30 Aug 2024 00:02:15 +0500 Subject: [PATCH 4/7] label styles in modal --- .../src/comps/calendarComp/calendarConstants.tsx | 6 ------ .../lowcoder/src/comps/controls/styleControlConstants.tsx | 1 - 2 files changed, 7 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx index e664092c4..1b0c3087c 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx @@ -756,13 +756,8 @@ export const FormWrapper = styled(Form)<{ text-align: left; line-height: 18px; - label.ant-form-item-required { - font-size: ${(props) => props.$modaltyle.textSize}; - } - label:not(.ant-form-item-required) { margin-left: 11px; - font-size: ${(props) => props.$modaltyle.textSize}; } label span { ${UnderlineCss} @@ -777,7 +772,6 @@ export const FormWrapper = styled(Form)<{ border-width: ${(props) => props.$modaltyle.borderWidth}; border-style: ${(props) => props.$modaltyle.borderStyle}; color: ${(props) => props.$modaltyle.text}; - font-size: ${(props) => props.$modaltyle.textSize}; } `; diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 54f786720..d8d6d2422 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -1866,7 +1866,6 @@ export const EventModalStyle = [ BORDER_WIDTH, BORDER_STYLE, TEXT, - TEXT_SIZE, { name: "labelBackground", label: trans("style.labelBackground"), From f02edcd78d20695f127dbd8c0194c8e19630a7ce Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Tue, 3 Sep 2024 17:38:53 +0500 Subject: [PATCH 5/7] style properties added --- .../src/comps/calendarComp/calendarComp.tsx | 60 ++++++++++++++++--- .../comps/calendarComp/calendarConstants.tsx | 43 ++++++++++--- .../src/i18n/comps/locales/en.ts | 5 ++ 3 files changed, 93 insertions(+), 15 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx index e47bd37b5..4e7e58b90 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx @@ -159,13 +159,19 @@ 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 + description: item.description, + titleColor:item.titleColor, + descriptionColor:item.descriptionColor + }, }; }) : [currentEvents.value]; - const resources = props.resources.value; + const resources = props.resources.value; // list all plugins for Fullcalendar const plugins = [ dayGridPlugin, @@ -266,18 +272,23 @@ let CalendarBasicComp = (function () { (eventInfo.view.type as ViewType) !== ViewType.MONTH ? "past" : ""; - return (
{eventInfo.timeText}
{eventInfo.event.title}
+
{eventInfo.event.extendedProps.description}
 + + + + + + + + + + + + @@ -405,7 +441,7 @@ let CalendarBasicComp = (function () { onConfirm: () => { form.submit(); return form.validateFields().then(() => { - const { id, groupId, color, title = "" } = form.getFieldsValue(); + const { id, groupId, color, title = "", backgroundColor,description,titleColor,descriptionColor } = form.getFieldsValue(); const idExist = props.events.value.findIndex( (item: EventType) => item.id === id ); @@ -421,9 +457,13 @@ let CalendarBasicComp = (function () { return { ...item, title, + description, id, ...(groupId !== undefined ? { groupId } : null), ...(color !== undefined ? { color } : null), + ...(backgroundColor !== undefined ? { backgroundColor } : null), + ...(titleColor !== undefined ? { titleColor } : null), + ...(descriptionColor !== undefined ? { descriptionColor } : null), }; } else { return item; @@ -437,8 +477,12 @@ let CalendarBasicComp = (function () { end: event.end, id, title, + description, ...(groupId !== undefined ? { groupId } : null), ...(color !== undefined ? { color } : null), + ...(backgroundColor !== undefined ? { backgroundColor } : null), + ...(titleColor !== undefined ? { titleColor } : null), + ...(descriptionColor !== undefined ? { descriptionColor } : null), }; props.events.onChange([...props.events.value, createInfo]); } @@ -779,4 +823,4 @@ 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 772758da8..6b6d2feb0 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx @@ -363,6 +363,7 @@ export const Wrapper = styled.div<{ // event .fc-timegrid-event .fc-event-main { padding: 4px 0 4px 1px; + } .fc-event { position: relative; @@ -658,6 +659,10 @@ export const Event = styled.div<{ $isList: boolean; $allDay: boolean; $style: CalendarStyleType; + $backgroundColor:string; + $description:string; + $titleColor:string; + $descriptionColor:string; }>` height: 100%; width: 100%; @@ -666,8 +671,7 @@ 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}; overflow: hidden; font-size: 13px; line-height: 19px; @@ -697,19 +701,29 @@ export const Event = styled.div<{ margin-top: 2px; } .event-title { - color: ${(props) => !props.$isList && props.$style.text}; + color: ${(props) => props.$titleColor}; font-weight: 500; margin-left: 15px; white-space: pre-wrap; word-break: break-word; } + .event-description { + color: ${(props) => props.$descriptionColor}; + font-weight: 500; + 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-description + { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -718,7 +732,9 @@ export const Event = styled.div<{ &.middle { padding-top: 2px; .event-time, - .event-title { + .event-title, + .event-description + { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -738,7 +754,9 @@ export const Event = styled.div<{ } &::before, .event-title, - .event-time { + .event-time, + .event-description + { opacity: 0.35; } } @@ -781,8 +799,12 @@ export type EventType = { end?: string; allDay?: boolean; color?: string; + backgroundColor?:string; groupId?: string; value?: string; + description?:string; + titleColor?:string; + descriptionColor?:string; }; export enum ViewType { @@ -903,12 +925,19 @@ 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:"purple", + description: 'Discuss project milestones and deliverables.', + titleColor:"black", + descriptionColor:"black", }, { id: "2", title: "Rest", start: dayjs().hour(24).format(DATE_FORMAT), end: dayjs().hour(48).format(DATE_FORMAT), + backgroundColor:"purple", + color: "#079968", + titleColor:"white", allDay: true, }, ]; @@ -1056,4 +1085,4 @@ 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..36eec353d 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -316,6 +316,10 @@ export const en = { editEvent: "Edit Event", eventName: "Event Name", eventColor: "Event Color", + eventBackgroundColor:"Background", + eventDescription:"Description", + eventTitleColor:"Title Color", + eventDescriptionColor:"Description Color", eventGroupId: "Group ID", groupIdTooltip: "Group ID groups events for drag and resize together.", more: "More", @@ -328,3 +332,4 @@ export const en = { dragDropEventHandlers: "Drag/Drop Event Handlers", }, }; + From da482f360cd9e4c87d2ab66f0808974265e65dd8 Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Wed, 4 Sep 2024 15:06:14 +0500 Subject: [PATCH 6/7] modal tabs added --- .../src/comps/calendarComp/calendarComp.tsx | 296 +++++++++++++----- .../comps/calendarComp/calendarConstants.tsx | 58 +++- .../src/i18n/comps/locales/en.ts | 18 +- 3 files changed, 270 insertions(+), 102 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx index 4e7e58b90..6024c88e8 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, @@ -163,9 +164,18 @@ let CalendarBasicComp = (function () { extendedProps: { color: isValidColor(item.color || "") ? item.color : theme?.theme?.primary, ...(item.groupId ? { groupId: item.groupId } : {}), // Ensure color is in extendedProps - description: item.description, + detail: item.detail, titleColor:item.titleColor, - descriptionColor:item.descriptionColor + 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]; @@ -281,14 +291,22 @@ let CalendarBasicComp = (function () { $allDay={Boolean(showAllDay)} $style={props.style} $backgroundColor={eventInfo.backgroundColor} - $description={eventInfo.event.extendedProps.description} + $detail={eventInfo.event.extendedProps.detail} $titleColor={eventInfo.event.extendedProps.titleColor} - $descriptionColor={eventInfo.event.extendedProps.descriptionColor} + $detailColor={eventInfo.event.extendedProps.detailColor} + $titleFontWeight={eventInfo.event.extendedProps.titleFontWeight} + $titleFontStyle={eventInfo.event.extendedProps.titleFontStyle} + $detailFontWeight={eventInfo.event.extendedProps.detailFontWeight} + $detailFontStyle={eventInfo.event.extendedProps.detailFontStyle} + $animation={eventInfo.event.extendedProps?.animation} + $animationDelay={eventInfo.event.extendedProps?.animationDelay} + $animationDuration={eventInfo.event.extendedProps?.animationDuration} + $animationIterationCount={eventInfo.event.extendedProps?.animationIterationCount} >
{eventInfo.timeText}
{eventInfo.event.title}
-
{eventInfo.event.extendedProps.description}
+
{eventInfo.event.extendedProps.detail}
- - {trans("calendar.eventId")} - - } - name="id" - rules={[ - { required: true, message: trans("calendar.eventIdRequire") }, - ]} - > - - - - - - - - - - - - - - - - - - - - - - {trans("calendar.eventGroupId")} - - } - name="groupId" - > - - - + 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 = "", backgroundColor,description,titleColor,descriptionColor } = 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 ); @@ -457,13 +568,21 @@ let CalendarBasicComp = (function () { return { ...item, title, - description, + detail, id, ...(groupId !== undefined ? { groupId } : null), ...(color !== undefined ? { color } : null), ...(backgroundColor !== undefined ? { backgroundColor } : null), ...(titleColor !== undefined ? { titleColor } : null), - ...(descriptionColor !== undefined ? { descriptionColor } : 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; @@ -477,12 +596,20 @@ let CalendarBasicComp = (function () { end: event.end, id, title, - description, + 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), - ...(descriptionColor !== undefined ? { descriptionColor } : null), + ...(detailColor !== undefined ? { detailColor } : null), }; props.events.onChange([...props.events.value, createInfo]); } @@ -495,6 +622,7 @@ let CalendarBasicComp = (function () { }, }); }; + const handleDrop = () => { if (typeof props.onDropEvent === 'function') { @@ -710,7 +838,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) => { @@ -724,7 +852,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) => { @@ -735,7 +863,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) => { @@ -746,7 +874,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) => { @@ -757,7 +885,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) => { @@ -768,7 +896,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) => { @@ -779,7 +907,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) => { @@ -790,7 +918,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) => { @@ -801,7 +929,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) => { @@ -812,7 +940,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) => { diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx index 6b6d2feb0..2ba0cf18e 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx @@ -660,9 +660,18 @@ export const Event = styled.div<{ $allDay: boolean; $style: CalendarStyleType; $backgroundColor:string; - $description:string; + $detail:string; $titleColor:string; - $descriptionColor:string; + $detailColor:string; + $titleFontWeight:string; + $titleFontStyle:string; + $detailFontWeight:string; + $detailFontStyle:string; + $animation?: any; + $animationDelay?: any; + $animationDuration?: any; + $animationIterationCount?: any; + }>` height: 100%; width: 100%; @@ -678,6 +687,10 @@ export const Event = styled.div<{ padding-right: 20px; overflow: hidden; position: relative; + animation: ${(props) => props?.$animation}; + animation-delay: ${(props) => props?.$animationDelay}; + animation-duration: ${(props) => props?.$animationDuration}; + animation-iteration-count: ${(props) => props?.$animationIterationCount}; &::before { content: ""; position: absolute; @@ -702,14 +715,16 @@ export const Event = styled.div<{ } .event-title { color: ${(props) => props.$titleColor}; - font-weight: 500; + font-weight: ${(props) => props.$titleFontWeight}; + font-style: ${(props) => props.$titleFontStyle}; margin-left: 15px; white-space: pre-wrap; word-break: break-word; } - .event-description { - color: ${(props) => props.$descriptionColor}; - font-weight: 500; + .event-detail { + color: ${(props) => props.$detailColor}; + font-weight: ${(props) => props.$detailFontWeight}; + font-style: ${(props) => props.$detailFontStyle}; margin-left: 15px; white-space: pre-wrap; word-break: break-word; @@ -722,7 +737,7 @@ export const Event = styled.div<{ display: none; } .event-title, - .event-description + .event-detail { text-overflow: ellipsis; overflow: hidden; @@ -733,7 +748,7 @@ export const Event = styled.div<{ padding-top: 2px; .event-time, .event-title, - .event-description + .event-detail { text-overflow: ellipsis; overflow: hidden; @@ -755,23 +770,28 @@ export const Event = styled.div<{ &::before, .event-title, .event-time, - .event-description + .event-detail { opacity: 0.35; } } `; + + export const FormWrapper = styled(Form)<{ $modaltyle: EventModalStyleType }>` .ant-form-item-label { - width: 100px; + width: 120px; 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} @@ -791,6 +811,14 @@ export const FormWrapper = styled(Form)<{ `; 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; @@ -802,9 +830,9 @@ export type EventType = { backgroundColor?:string; groupId?: string; value?: string; - description?:string; + detail?:string; titleColor?:string; - descriptionColor?:string; + detailColor?:string; }; export enum ViewType { @@ -926,9 +954,9 @@ export const defaultData = [ end: dayjs().hour(12).minute(30).second(0).format(DATE_TIME_FORMAT), color: "#079968", backgroundColor:"purple", - description: 'Discuss project milestones and deliverables.', + detail: 'Discuss project milestones and deliverables.', titleColor:"black", - descriptionColor:"black", + detailColor:"black", }, { id: "2", 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 36eec353d..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", @@ -317,9 +317,9 @@ export const en = { eventName: "Event Name", eventColor: "Event Color", eventBackgroundColor:"Background", - eventDescription:"Description", + eventdetail:"Detail", eventTitleColor:"Title Color", - eventDescriptionColor:"Description Color", + eventdetailColor:"Detail Color", eventGroupId: "Group ID", groupIdTooltip: "Group ID groups events for drag and resize together.", more: "More", @@ -330,6 +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" }, }; From d5d844e4a814129256330488a95a0c614c27ec02 Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Wed, 4 Sep 2024 20:13:49 +0500 Subject: [PATCH 7/7] final changes --- .../src/comps/calendarComp/calendarComp.tsx | 36 +++------ .../comps/calendarComp/calendarConstants.tsx | 73 +++++++++---------- 2 files changed, 45 insertions(+), 64 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx index 6024c88e8..b80c8d455 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx @@ -174,10 +174,8 @@ let CalendarBasicComp = (function () { animation:item?.animation, animationDelay:item?.animationDelay, animationDuration:item?.animationDuration, - animationIterationCount:item.animationIterationCount - - }, - }; + animationIterationCount:item?.animationIterationCount + }} }) : [currentEvents.value]; @@ -285,28 +283,16 @@ let CalendarBasicComp = (function () { return ( -
{eventInfo.timeText}
-
{eventInfo.event.title}
-
{eventInfo.event.extendedProps.detail}
+
{eventInfo?.timeText}
+
{eventInfo?.event?.title}
+
{eventInfo?.event?.extendedProps?.detail}
); } - const handleDbClick = () => { const event = props.events.value.find( (item: EventType) => item.id === editEvent.current?.id @@ -419,7 +404,7 @@ let CalendarBasicComp = (function () { content: ( - + @@ -457,7 +442,7 @@ let CalendarBasicComp = (function () { - + - + - + ` `; export const Event = styled.div<{ - $bg: string; theme: Object; $isList: boolean; $allDay: boolean; $style: CalendarStyleType; $backgroundColor:string; - $detail:string; - $titleColor:string; - $detailColor:string; - $titleFontWeight:string; - $titleFontStyle:string; - $detailFontWeight:string; - $detailFontStyle:string; - $animation?: any; - $animationDelay?: any; - $animationDuration?: any; - $animationIterationCount?: any; - + $extendedProps: any; }>` height: 100%; width: 100%; @@ -680,17 +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.$backgroundColor}; + background-color:${(props) => props?.$backgroundColor || "#ffffff"} ; overflow: hidden; font-size: 13px; line-height: 19px; padding-right: 20px; overflow: hidden; position: relative; - animation: ${(props) => props?.$animation}; - animation-delay: ${(props) => props?.$animationDelay}; - animation-duration: ${(props) => props?.$animationDuration}; - animation-iteration-count: ${(props) => props?.$animationIterationCount}; + 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; @@ -700,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 { @@ -714,17 +702,17 @@ export const Event = styled.div<{ margin-top: 2px; } .event-title { - color: ${(props) => props.$titleColor}; - font-weight: ${(props) => props.$titleFontWeight}; - font-style: ${(props) => props.$titleFontStyle}; + 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.$detailColor}; - font-weight: ${(props) => props.$detailFontWeight}; - font-style: ${(props) => props.$detailFontStyle}; + 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; @@ -762,9 +750,9 @@ export const Event = styled.div<{ } &.past { background-color: ${(props) => - `rgba(${props.$style.bg}, 0.3)`}; + `rgba(${props?.$extendedProps?.color}, 0.3)`}; &::before { - background-color: ${(props) => props.$style.bg}; + background-color: ${(props) => props?.$extendedProps?.color}; opacity: 0.3; } &::before, @@ -780,10 +768,10 @@ export const Event = styled.div<{ export const FormWrapper = styled(Form)<{ - $modaltyle: EventModalStyleType + $modalStyle: EventModalStyleType }>` .ant-form-item-label { - width: 120px; + width: 125px; text-align: left; line-height: 18px; @@ -801,11 +789,11 @@ export const FormWrapper = styled(Form)<{ // Setting style for input fields .ant-input { - background-color: ${(props) => props.$modaltyle.labelBackground }; - border-color: ${(props) => props.$modaltyle.border}; - border-width: ${(props) => props.$modaltyle.borderWidth}; - border-style: ${(props) => props.$modaltyle.borderStyle}; - color: ${(props) => props.$modaltyle.text}; + 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}; } `; @@ -953,19 +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:"purple", + backgroundColor:"#ffffff", detail: 'Discuss project milestones and deliverables.', - titleColor:"black", - detailColor:"black", + 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), - backgroundColor:"purple", color: "#079968", - titleColor:"white", allDay: true, }, ]; @@ -1114,3 +1108,4 @@ export const viewClassNames = (info: ViewContentArg) => { } return className; }; +