Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitb2d7b3a

Browse files
authored
Merge pull request#1133 from MenamAfzal/fix/minorBugs
Fix/minor bugs
2 parents1a24bef +d72c032 commitb2d7b3a

File tree

8 files changed

+368
-84
lines changed

8 files changed

+368
-84
lines changed

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

Lines changed: 238 additions & 61 deletions
Large diffs are not rendered by default.

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

Lines changed: 83 additions & 20 deletions
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
importstyledfrom"styled-components";
2021
importdayjsfrom"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
exportconstEvent=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-
exportconstFormWrapper=styled(Form)`
768+
769+
770+
exportconstFormWrapper=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
exporttypeEventType={
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
exportenumViewType{
@@ -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
returnclassName;
1048-
};
1110+
};
1111+

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

Lines changed: 18 additions & 1 deletion
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 typedescription, refer to: ",
131+
"Automatically detected based on X-axis data. For typedetail, 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‎

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

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

1718
typeModel={
@@ -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
constModalHeaderWrapper=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
constDEFAULT_PROPS={
@@ -217,7 +223,7 @@ const DEFAULT_PROPS = {
217223
functionCustomModalRender(props:CustomModalProps&ModalFuncProps){
218224
return(
219225
<Draggablehandle=".handle"disabled={!props.draggable}>
220-
<ModalWrapper$width={props.width}>
226+
<ModalWrapper$width={props.width}$customStyles={props?.customStyles}>
221227
<>
222228
<ModalHeaderWrapperclassName="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
constdefaultConfirmProps: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‎

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

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

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

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

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

1863+
exportconstEventModalStyle=[
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+
]asconst;
1877+
18631878
// Added by Aqib Mirza
18641879
exportconstLottieStyle=[
18651880
{
@@ -2054,6 +2069,7 @@ export type TreeSelectStyleType = StyleConfigType<typeof TreeSelectStyle>;
20542069
exporttypeDrawerStyleType=StyleConfigType<typeofDrawerStyle>;
20552070
exporttypeJsonEditorStyleType=StyleConfigType<typeofJsonEditorStyle>;
20562071
exporttypeCalendarStyleType=StyleConfigType<typeofCalendarStyle>;
2072+
exporttypeEventModalStyleType=StyleConfigType<typeofEventModalStyle>;
20572073
exporttypeSignatureStyleType=StyleConfigType<typeofSignatureStyle>;
20582074
exporttypeCarouselStyleType=StyleConfigType<typeofCarouselStyle>;
20592075
exporttypeRichTextEditorStyleType=StyleConfigType<

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

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

562563
},
563564
"export":{

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp