Skip to content

Commit b3d587c

Browse files
MenamAfzalMenamAfzal
committedSep 5, 2024
pull from dev
2 parents 74d39e4 + b2d7b3a commit b3d587c

File tree

9 files changed

+384
-88
lines changed

9 files changed

+384
-88
lines changed
 

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

+238-61
Large diffs are not rendered by default.

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

+83-20
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";
@@ -362,6 +363,7 @@ export const Wrapper = styled.div<{
362363
// event
363364
.fc-timegrid-event .fc-event-main {
364365
padding: 4px 0 4px 1px;
366+
365367
}
366368
.fc-event {
367369
position: relative;
@@ -652,11 +654,12 @@ export const Remove = styled.div<{ $isList: boolean }>`
652654
`;
653655

654656
export const Event = styled.div<{
655-
$bg: string;
656657
theme: Object;
657658
$isList: boolean;
658659
$allDay: boolean;
659660
$style: CalendarStyleType;
661+
$backgroundColor:string;
662+
$extendedProps: any;
660663
}>`
661664
height: 100%;
662665
width: 100%;
@@ -665,14 +668,17 @@ export const Event = styled.div<{
665668
box-shadow: ${(props) => !props.$isList && "0 0 5px 0 rgba(0, 0, 0, 0.15)"};
666669
border: 1px solid ${(props) => props.$style.border};
667670
display: ${(props) => props.$isList && "flex"};
668-
background-color: ${(props) =>
669-
!props.$isList && lightenColor(props.$style.background, 0.1)};
671+
background-color:${(props) => props?.$backgroundColor || "#ffffff"} ;
670672
overflow: hidden;
671673
font-size: 13px;
672674
line-height: 19px;
673675
padding-right: 20px;
674676
overflow: hidden;
675677
position: relative;
678+
animation: ${(props) => props?.$extendedProps?.animation || ""};
679+
animation-delay: ${(props) => props?.$extendedProps?.animationDelay || ""} ;
680+
animation-duration: ${(props) => props?.$extendedProps?.animationDuration || ""};
681+
animation-iteration-count: ${(props) => props?.$extendedProps?.animationIterationCount || ""};
676682
&::before {
677683
content: "";
678684
position: absolute;
@@ -682,7 +688,7 @@ export const Event = styled.div<{
682688
left: 2px;
683689
top: 2px;
684690
border-radius: 3px;
685-
background-color: ${(props) => props.$bg};
691+
background-color: ${(props) => props.$extendedProps?.color};
686692
}
687693
688694
.event-time {
@@ -696,19 +702,31 @@ export const Event = styled.div<{
696702
margin-top: 2px;
697703
}
698704
.event-title {
699-
color: ${(props) => !props.$isList && props.$style.text};
700-
font-weight: 500;
705+
color: ${(props) => props?.$extendedProps?.titleColor || "#000000"};
706+
font-weight: ${(props) => props?.$extendedProps?.titleFontWeight || "normal"};
707+
font-style: ${(props) => props?.$extendedProps?.titleFontStyle || ""};
708+
margin-left: 15px;
709+
white-space: pre-wrap;
710+
word-break: break-word;
711+
}
712+
.event-detail {
713+
color: ${(props) => props?.$extendedProps?.detailColor || "#000000"};
714+
font-weight: ${(props) => props?.$extendedProps?.detailFontWeight || "normal"};
715+
font-style: ${(props) => props?.$extendedProps?.detailFontStyle || "italic"};
701716
margin-left: 15px;
702717
white-space: pre-wrap;
703718
word-break: break-word;
719+
margin-top: 2px;
704720
}
705721
706722
&.small {
707723
height: 20px;
708724
.event-time {
709725
display: none;
710726
}
711-
.event-title {
727+
.event-title,
728+
.event-detail
729+
{
712730
text-overflow: ellipsis;
713731
overflow: hidden;
714732
white-space: nowrap;
@@ -717,7 +735,9 @@ export const Event = styled.div<{
717735
&.middle {
718736
padding-top: 2px;
719737
.event-time,
720-
.event-title {
738+
.event-title,
739+
.event-detail
740+
{
721741
text-overflow: ellipsis;
722742
overflow: hidden;
723743
white-space: nowrap;
@@ -730,38 +750,63 @@ export const Event = styled.div<{
730750
}
731751
&.past {
732752
background-color: ${(props) =>
733-
isDarkColor(props.$style.background) && props.$style.background};
753+
`rgba(${props?.$extendedProps?.color}, 0.3)`};
734754
&::before {
735-
background-color: ${(props) =>
736-
toHex(props.$style.text) === "#3C3C3C"
737-
? "#8B8FA3"
738-
: isDarkColor(props.$style.text)
739-
? lightenColor(props.$style.text, 0.3)
740-
: props.$style.text};
755+
background-color: ${(props) => props?.$extendedProps?.color};
756+
opacity: 0.3;
741757
}
742758
&::before,
743759
.event-title,
744-
.event-time {
760+
.event-time,
761+
.event-detail
762+
{
745763
opacity: 0.35;
746764
}
747765
}
748766
`;
749767

750-
export const FormWrapper = styled(Form)`
768+
769+
770+
export const FormWrapper = styled(Form)<{
771+
$modalStyle: EventModalStyleType
772+
}>`
751773
.ant-form-item-label {
752-
width: 100px;
774+
width: 125px;
753775
text-align: left;
754776
line-height: 18px;
777+
755778
label:not(.ant-form-item-required) {
756-
margin-left: 11px;
779+
margin-left: 2px;
780+
}
781+
label.ant-form-item-required{
782+
margin-left: 2px;
757783
}
758784
label span {
759785
${UnderlineCss}
786+
760787
}
761788
}
789+
790+
// Setting style for input fields
791+
.ant-input {
792+
background-color: ${(props) => props.$modalStyle.labelBackground };
793+
border-color: ${(props) => props.$modalStyle.border};
794+
border-width: ${(props) => props.$modalStyle.borderWidth};
795+
border-style: ${(props) => props.$modalStyle.borderStyle};
796+
color: ${(props) => props.$modalStyle.text};
797+
}
798+
762799
`;
763800

764801
export type EventType = {
802+
animationIterationCount: any;
803+
animationDuration: any;
804+
animationDelay: any;
805+
animation: any;
806+
titleFontWeight: any;
807+
titleFontStyle: any;
808+
detailFontWeight: any;
809+
detailFontStyle: any;
765810
id?: string;
766811
resourceId?: string;
767812
label?: string;
@@ -770,8 +815,12 @@ export type EventType = {
770815
end?: string;
771816
allDay?: boolean;
772817
color?: string;
818+
backgroundColor?:string;
773819
groupId?: string;
774820
value?: string;
821+
detail?:string;
822+
titleColor?:string;
823+
detailColor?:string;
775824
};
776825

777826
export enum ViewType {
@@ -892,12 +941,25 @@ export const defaultData = [
892941
start: dayjs().hour(10).minute(0).second(0).format(DATE_TIME_FORMAT),
893942
end: dayjs().hour(12).minute(30).second(0).format(DATE_TIME_FORMAT),
894943
color: "#079968",
944+
backgroundColor:"#ffffff",
945+
detail: 'Discuss project milestones and deliverables.',
946+
titleColor:"#000000",
947+
detailColor:"#000000",
948+
titleFontWeight:"normal",
949+
titleFontStyle:"italic",
950+
detailFontWeight:"normal",
951+
detailFontStyle:"italic",
952+
animation:"none",
953+
animationDelay:"0s",
954+
animationDuration:"0s",
955+
animationIterationCount:"0",
895956
},
896957
{
897958
id: "2",
898959
title: "Rest",
899960
start: dayjs().hour(24).format(DATE_FORMAT),
900961
end: dayjs().hour(48).format(DATE_FORMAT),
962+
color: "#079968",
901963
allDay: true,
902964
},
903965
];
@@ -1045,4 +1107,5 @@ export const viewClassNames = (info: ViewContentArg) => {
10451107
}
10461108
}
10471109
return className;
1048-
};
1110+
};
1111+

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

+18-1
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ export const en = {
128128
xAxisName: "X-axis Name",
129129
xAxisType: "X-axis Type",
130130
xAxisTypeTooltip:
131-
"Automatically detected based on X-axis data. For type description, refer to: ",
131+
"Automatically detected based on X-axis data. For type detail, refer to: ",
132132
logBase: "Log Base",
133133
yAxisName: "Y-axis Name",
134134
yAxisType: "Y-axis Type",
@@ -316,6 +316,10 @@ export const en = {
316316
editEvent: "Edit Event",
317317
eventName: "Event Name",
318318
eventColor: "Event Color",
319+
eventBackgroundColor:"Background",
320+
eventdetail:"Detail",
321+
eventTitleColor:"Title Color",
322+
eventdetailColor:"Detail Color",
319323
eventGroupId: "Group ID",
320324
groupIdTooltip: "Group ID groups events for drag and resize together.",
321325
more: "More",
@@ -326,5 +330,18 @@ export const en = {
326330
eventIdTooltip: "Unique ID for each event",
327331
eventIdExist: "ID Exists",
328332
dragDropEventHandlers: "Drag/Drop Event Handlers",
333+
general: "General",
334+
colorStyles:"Color Styles",
335+
fontStyles:"Font Styles",
336+
animations:"Animations",
337+
eventTitleFontWeight:"Title FontWeight",
338+
eventTitleFontStyle:"Title FontStyle",
339+
eventdetailFontWeight:"Detail FontWeight",
340+
eventdetailFontStyle:"Detail FontStyle",
341+
animationType:"Type",
342+
animationDelay:"Delay",
343+
animationDuration:"Duration",
344+
animationIterationCount:"IterationCount"
329345
},
330346
};
347+

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

+10-2
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { modalInstance } from "components/GlobalInstances";
1212

1313
type ModalWrapperProps = {
1414
$width?: string | number;
15+
$customStyles?:any
1516
};
1617

1718
type Model = {
@@ -24,12 +25,16 @@ const ModalWrapper = styled.div<ModalWrapperProps>`
2425
flex-direction: column;
2526
width: ${(props) => (props.$width ? props.$width : "368px")};
2627
height: fit-content;
27-
background: #ffffff;
28+
background:${(props) => props.$customStyles?.backgroundColor}; ;
2829
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
2930
border-radius: 8px;
3031
padding: 0 0 16px;
3132
pointer-events: auto;
3233
will-change: transform;
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};
3338
`;
3439

3540
const ModalHeaderWrapper = styled.div<{ $draggable?: boolean }>`
@@ -205,6 +210,7 @@ export type CustomModalProps = {
205210
children?: JSX.Element | React.ReactNode;
206211
okButtonType?: TacoButtonType;
207212
model?: Model;
213+
customStyles?:any
208214
} & AntdModalProps;
209215

210216
const DEFAULT_PROPS = {
@@ -217,7 +223,7 @@ const DEFAULT_PROPS = {
217223
function CustomModalRender(props: CustomModalProps & ModalFuncProps) {
218224
return (
219225
<Draggable handle=".handle" disabled={!props.draggable}>
220-
<ModalWrapper $width={props.width}>
226+
<ModalWrapper $width={props.width} $customStyles={props?.customStyles}>
221227
<>
222228
<ModalHeaderWrapper className="handle" $draggable={props.draggable}>
223229
<ModalHeader
@@ -276,6 +282,7 @@ CustomModal.confirm = (props: {
276282
footer?: ReactNode;
277283
type?: "info" | "warn" | "error" | "success";
278284
width?: number | string;
285+
customStyles?:React.CSSProperties;
279286
}): any => {
280287

281288
const defaultConfirmProps: ModalFuncProps = {
@@ -333,6 +340,7 @@ CustomModal.confirm = (props: {
333340
}}
334341
footer={props.footer}
335342
width={props.width}
343+
customStyles={props.customStyles}
336344
/>
337345
),
338346
});

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

+1
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

+1
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

+16
Original file line numberDiff line numberDiff line change
@@ -1860,6 +1860,21 @@ 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+
{
1870+
name: "labelBackground",
1871+
label: trans("style.labelBackground"),
1872+
depTheme: "primarySurface",
1873+
depType: DEP_TYPE.SELF,
1874+
transformer: toSelf,
1875+
},
1876+
] as const;
1877+
18631878
// Added by Aqib Mirza
18641879
export const LottieStyle = [
18651880
{
@@ -2054,6 +2069,7 @@ export type TreeSelectStyleType = StyleConfigType<typeof TreeSelectStyle>;
20542069
export type DrawerStyleType = StyleConfigType<typeof DrawerStyle>;
20552070
export type JsonEditorStyleType = StyleConfigType<typeof JsonEditorStyle>;
20562071
export type CalendarStyleType = StyleConfigType<typeof CalendarStyle>;
2072+
export type EventModalStyleType = StyleConfigType<typeof EventModalStyle>;
20572073
export type SignatureStyleType = StyleConfigType<typeof SignatureStyle>;
20582074
export type CarouselStyleType = StyleConfigType<typeof CarouselStyle>;
20592075
export type RichTextEditorStyleType = StyleConfigType<

0 commit comments

Comments
 (0)