Skip to content

Fix/minor bugs #1133

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Sep 4, 2024
Merged

Fix/minor bugs #1133

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
4764c9e
animation styles
MenamAfzal Aug 29, 2024
22ca375
animation styles in modal
MenamAfzal Aug 29, 2024
6eeab11
label styles in modal
MenamAfzal Aug 29, 2024
83987ae
label styles in modal
MenamAfzal Aug 29, 2024
e1940df
pull from dev
MenamAfzal Aug 30, 2024
f74dfbc
Merge branch 'dev' into fix/minorBugs
FalkWolsky Sep 2, 2024
66ac429
pull from origin
MenamAfzal Sep 3, 2024
f02edcd
style properties added
MenamAfzal Sep 3, 2024
da482f3
modal tabs added
MenamAfzal Sep 4, 2024
96f824e
modal tabs added
MenamAfzal Sep 4, 2024
d5d844e
final changes
MenamAfzal Sep 4, 2024
d72c032
Merge branch 'dev' into fix/minorBugs
MenamAfzal Sep 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
style properties added
  • Loading branch information
@MenamAfzal
MenamAfzal committed Sep 3, 2024
commit f02edcd78d20695f127dbd8c0194c8e19630a7ce
60 changes: 52 additions & 8 deletions client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -266,18 +272,23 @@ let CalendarBasicComp = (function () {
(eventInfo.view.type as ViewType) !== ViewType.MONTH
? "past"
: "";

return (
<Event
className={`event ${sizeClass} ${stateClass}`}
$bg={eventInfo.backgroundColor}
$bg={eventInfo.event.extendedProps.color}
theme={theme?.theme}
$isList={isList}
$allDay={Boolean(showAllDay)}
$style={props.style}
$backgroundColor={eventInfo.backgroundColor}
$description={eventInfo.event.extendedProps.description}
$titleColor={eventInfo.event.extendedProps.titleColor}
$descriptionColor={eventInfo.event.extendedProps.descriptionColor}

>
<div className="event-time">{eventInfo.timeText}</div>
<div className="event-title">{eventInfo.event.title}</div>
<div className="event-description">{eventInfo.event.extendedProps.description}</div>
<Remove
$isList={isList}
className="event-remove"
Expand Down Expand Up @@ -308,12 +319,16 @@ let CalendarBasicComp = (function () {
return;
}
if (event) {
const { title, groupId, color, id } = event;
const { title, groupId, color, id , backgroundColor,description,titleColor,descriptionColor} = event;
const eventInfo = {
title,
groupId,
color,
id,
backgroundColor,
titleColor,
description,
descriptionColor,
};
showModal(eventInfo, true);
} else {
Expand Down Expand Up @@ -387,9 +402,30 @@ let CalendarBasicComp = (function () {
>
<Input />
</Form.Item>
<Form.Item
label={trans("calendar.eventDescription")}
name="description"
>
<Input />
</Form.Item>
<Form.Item
label={trans("calendar.eventTitleColor")}
name="titleColor"
>
<Input />
</Form.Item>
<Form.Item
label={trans("calendar.eventDescriptionColor")}
name="descriptionColor"
>
<Input />
</Form.Item>
<Form.Item label={trans("calendar.eventColor")} name="color">
<Input />
</Form.Item>
<Form.Item label={trans("calendar.eventBackgroundColor")} name="backgroundColor">
<Input />
</Form.Item>
<Form.Item
label={
<Tooltip title={trans("calendar.groupIdTooltip")}>
Expand All @@ -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
);
Expand All @@ -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;
Expand All @@ -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]);
}
Expand Down Expand Up @@ -779,4 +823,4 @@ let CalendarComp = withMethodExposing(TmpCalendarComp, [
]);


export { CalendarComp };
export { CalendarComp };
43 changes: 36 additions & 7 deletions client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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%;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -738,7 +754,9 @@ export const Event = styled.div<{
}
&::before,
.event-title,
.event-time {
.event-time,
.event-description
{
opacity: 0.35;
}
}
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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,
},
];
Expand Down Expand Up @@ -1056,4 +1085,4 @@ export const viewClassNames = (info: ViewContentArg) => {
}
}
return className;
};
};
5 changes: 5 additions & 0 deletions client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -328,3 +332,4 @@ export const en = {
dragDropEventHandlers: "Drag/Drop Event Handlers",
},
};