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

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.

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

Already on GitHub?Sign in to your account

Merged
FalkWolsky merged 12 commits intolowcoder-org:devfromMenamAfzal:fix/minorBugs
Sep 4, 2024
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
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
View file
Open in desktop

Large diffs are not rendered by default.

View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,6 +15,7 @@ import {
lightenColor,
toHex,
UnderlineCss,
EventModalStyleType
} from "lowcoder-sdk";
import styled from "styled-components";
import dayjs from "dayjs";
Expand DownExpand Up@@ -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;
Expand DownExpand Up@@ -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%;
Expand All@@ -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;
Expand All@@ -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 {
Expand All@@ -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;
Expand All@@ -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;
Expand All@@ -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;
Expand All@@ -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 {
Expand DownExpand Up@@ -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,
},
];
Expand DownExpand Up@@ -1045,4 +1107,5 @@ export const viewClassNames = (info: ViewContentArg) => {
}
}
return className;
};
};

19 changes: 18 additions & 1 deletionclient/packages/lowcoder-comps/src/i18n/comps/locales/en.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -128,7 +128,7 @@ export const en = {
xAxisName: "X-axis Name",
xAxisType: "X-axis Type",
xAxisTypeTooltip:
"Automatically detected based on X-axis data. For typedescription, refer to: ",
"Automatically detected based on X-axis data. For typedetail, refer to: ",
logBase: "Log Base",
yAxisName: "Y-axis Name",
yAxisType: "Y-axis Type",
Expand DownExpand Up@@ -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",
Expand All@@ -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"
},
};

View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -12,6 +12,7 @@ import { modalInstance } from "components/GlobalInstances";

type ModalWrapperProps = {
$width?: string | number;
$customStyles?:any
};

type Model = {
Expand All@@ -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 }>`
Expand DownExpand Up@@ -205,6 +210,7 @@ export type CustomModalProps = {
children?: JSX.Element | React.ReactNode;
okButtonType?: TacoButtonType;
model?: Model;
customStyles?:any
} & AntdModalProps;

const DEFAULT_PROPS = {
Expand All@@ -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
Expand DownExpand Up@@ -276,6 +282,7 @@ CustomModal.confirm = (props: {
footer?: ReactNode;
type?: "info" | "warn" | "error" | "success";
width?: number | string;
customStyles?:React.CSSProperties;
}): any => {

const defaultConfirmProps: ModalFuncProps = {
Expand DownExpand Up@@ -333,6 +340,7 @@ CustomModal.confirm = (props: {
}}
footer={props.footer}
width={props.width}
customStyles={props.customStyles}
/>
),
});
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -186,4 +186,5 @@ export const sectionNames = {
bodyStyle:trans("prop.bodyStyle"),
badgeStyle:trans("prop.badgeStyle"),
columnStyle:trans("prop.columnStyle"),
modalStyle:trans("prop.modalStyle"),
};
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -39,6 +39,7 @@ export const en = {
bodyStyle: 'Body Style',
badgeStyle: 'Badge Style',
columnStyle: 'Column Style',
modalStyle: 'Modal Style',
},
passwordInput: {
label: "Password:",
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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 = [
{
Expand DownExpand Up@@ -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<
Expand Down
1 change: 1 addition & 0 deletionsclient/packages/lowcoder/src/i18n/locales/en.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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":{
Expand Down
Loading
[8]ページ先頭
©2009-2025 Movatter.jp