Skip to content

Commit 6e3c639

Browse files
MenamAfzalMenamAfzal
committed
conflicts resolved
2 parents 2459677 + aee0d43 commit 6e3c639

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+1407
-418
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@ export const sectionNames = {
146146
layout: trans("prop.layout"),
147147
style: trans("prop.style"),
148148
labelStyle:trans("prop.labelStyle"),
149+
animationStyle:trans("prop.animationStyle"),
149150
data: trans("prop.data"),
150151
meetings: trans("prop.meetings"), // added by Falk Wolsky
151152
field: trans("prop.field"),

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export const en = {
2323
advanced: "Advanced",
2424
validation: "Validation",
2525
layout: "Layout",
26+
animationStyle:"Animation Style",
2627
labelStyle: "Label Style",
2728
style: "Style",
2829
meetings: "Meeting Settings",

‎client/packages/lowcoder-design/src/icons/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,10 @@ export { ReactComponent as ResetIcon } from "./icon-style-reset.svg";
161161
export { ReactComponent as EditIcon } from "./icon-edit.svg";
162162
export { ReactComponent as EditableIcon } from "./icon-editable.svg";
163163
export { ReactComponent as LeftStateIcon } from "./remix/node-tree.svg";
164+
export {ReactComponent as StarSmileIcon} from "./remix/star-smile-line.svg";
165+
export {ReactComponent as Timer2Icon} from "./remix/timer-2-line.svg";
166+
export {ReactComponent as TimerFlashIcon} from "./remix/timer-flash-line.svg";
167+
export {ReactComponent as RefreshLineIcon} from "./remix/refresh-line.svg";
164168
export { ReactComponent as LeftSettingIcon } from "./remix/tools-fill.svg";
165169
export { ReactComponent as LeftLayersIcon } from "./remix/stack-line.svg";
166170
export { ReactComponent as LeftHelpIcon } from "./icon-left-help.svg";

‎client/packages/lowcoder/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"@types/react-signature-canvas": "^1.0.2",
3737
"@types/react-test-renderer": "^18.0.0",
3838
"@types/react-virtualized": "^9.21.21",
39+
"animate.css": "^4.1.1",
3940
"antd": "5.13.2",
4041
"axios": "^1.6.2",
4142
"buffer": "^6.0.3",

‎client/packages/lowcoder/src/api/commonSettingApi.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,17 @@ export interface ThemeDetail {
4444
primarySurface: string; // comp bg-color
4545
borderRadius: string;
4646
chart?: string;
47-
margin?: string;
47+
margin?: string;
4848
padding?: string;
4949
gridColumns?: string; //Added By Aqib Mirza
5050
textSize?: string;
51+
animation?: string;
52+
animationDelay?: string;
53+
animationDuration?: string;
54+
opacity?: string;
55+
boxShadow?: string;
56+
boxShadowColor?: string;
57+
animationIterationCount?: string;
5158
}
5259

5360
export function getThemeDetailName(key: keyof ThemeDetail) {

‎client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Input, Section, sectionNames } from "lowcoder-design";
33
import { BoolControl } from "comps/controls/boolControl";
44
import { styleControl } from "comps/controls/styleControl";
55
import {
6+
AnimationStyle,
67
InputFieldStyle,
78
InputLikeStyle,
89
InputLikeStyleType,
@@ -62,6 +63,7 @@ const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>`
6263
${getStyle(props.$style)}
6364
input {
6465
padding: ${props.style?.padding};
66+
rotate: ${props?.$style?.rotation};
6567
}
6668
.ant-select-single {
6769
width: 100% !important;
@@ -89,6 +91,7 @@ const childrenMap = {
8991
componentSize: dropdownControl(componentSize, "small"),
9092
valueInItems: booleanExposingStateControl("valueInItems"),
9193
inputFieldStyle: styleControl(InputLikeStyle),
94+
animationStyle: styleControl(AnimationStyle),
9295
};
9396

9497
const getValidate = (value: any): "" | "warning" | "error" | undefined => {
@@ -283,6 +286,7 @@ let AutoCompleteCompBase = (function () {
283286
style: props.style,
284287
labelStyle: props.labelStyle,
285288
inputFieldStyle:props.inputFieldStyle,
289+
animationStyle: props.animationStyle,
286290
...validateState,
287291
});
288292
})
@@ -347,6 +351,9 @@ let AutoCompleteCompBase = (function () {
347351
<Section name={sectionNames.inputFieldStyle}>
348352
{children.inputFieldStyle.getPropertyView()}
349353
</Section>
354+
<Section name={sectionNames.animationStyle}>
355+
{children.animationStyle.getPropertyView()}
356+
</Section>
350357
</>
351358
);
352359
})

‎client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ButtonCompWrapper, buttonRefMethods } from "comps/comps/buttonComp/butt
33
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
44
import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
55
import { styleControl } from "comps/controls/styleControl";
6-
import { LinkStyle, LinkStyleType } from "comps/controls/styleControlConstants";
6+
import { AnimationStyle, AnimationStyleType, LinkStyle, LinkStyleType } from "comps/controls/styleControlConstants";
77
import { withDefault } from "comps/generators";
88
import { migrateOldData } from "comps/generators/simpleGenerators";
99
import { UICompBuilder } from "comps/generators/uiCompBuilder";
@@ -23,7 +23,11 @@ import { RefControl } from "comps/controls/refControl";
2323
import { EditorContext } from "comps/editorState";
2424
import React, { useContext } from "react";
2525

26-
const Link = styled(Button) <{ $style: LinkStyleType }>`
26+
const Link = styled(Button)<{
27+
$style: LinkStyleType;
28+
$animationStyle: AnimationStyleType;
29+
}>`
30+
${(props) => props.$animationStyle}
2731
${(props) => `
2832
color: ${props.$style.text};
2933
margin: ${props.$style.margin};
@@ -81,6 +85,7 @@ const LinkTmpComp = (function () {
8185
disabled: BoolCodeControl,
8286
loading: BoolCodeControl,
8387
style: migrateOldData(styleControl(LinkStyle), fixOldData),
88+
animationStyle:styleControl(AnimationStyle),
8489
prefixIcon: IconControl,
8590
suffixIcon: IconControl,
8691
viewRef: RefControl<HTMLElement>,
@@ -91,6 +96,7 @@ const LinkTmpComp = (function () {
9196
return (
9297
<ButtonCompWrapper disabled={props.disabled}>
9398
<Link
99+
$animationStyle={props.animationStyle}
94100
ref={props.viewRef}
95101
$style={props.style}
96102
loading={props.loading}
@@ -130,7 +136,10 @@ const LinkTmpComp = (function () {
130136
)}
131137

132138
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
133-
<><Section name={sectionNames.style}>{children.style.getPropertyView()}</Section></>
139+
<>
140+
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
141+
<Section name={sectionNames.animationStyle}>{children.animationStyle.getPropertyView()}</Section>
142+
</>
134143
)}
135144
</>
136145
);

‎client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,11 @@ import { Button100, ButtonCompWrapper, buttonRefMethods } from "./buttonCompCons
1515
import { IconControl } from "comps/controls/iconControl";
1616
import { AlignWithStretchControl, LeftRightControl } from "comps/controls/dropdownControl";
1717
import { booleanExposingStateControl } from "comps/controls/codeStateControl";
18-
import { ToggleButtonStyle } from "comps/controls/styleControlConstants";
18+
import {
19+
AnimationStyle,
20+
AnimationStyleType,
21+
ToggleButtonStyle,
22+
} from "comps/controls/styleControlConstants";
1923
import { styleControl } from "comps/controls/styleControl";
2024
import { BoolControl } from "comps/controls/boolControl";
2125
import { RefControl } from "comps/controls/refControl";
@@ -29,7 +33,9 @@ const IconWrapper = styled.div`
2933
const ButtonCompWrapperStyled = styled(ButtonCompWrapper)<{
3034
$align: "left" | "center" | "right" | "stretch";
3135
$showBorder: boolean;
36+
$animationStyle: AnimationStyleType;
3237
}>`
38+
${(props) => props.$animationStyle}
3339
width: 100%;
3440
display: flex;
3541
justify-content: ${(props) => props.$align};
@@ -55,7 +61,8 @@ const ToggleTmpComp = (function () {
5561
iconPosition: LeftRightControl,
5662
alignment: AlignWithStretchControl,
5763
style: styleControl(ToggleButtonStyle),
58-
showBorder: withDefault(BoolControl, true),
64+
animationStyle: styleControl(AnimationStyle),
65+
showBorder: withDefault(BoolControl, true),
5966
viewRef: RefControl<HTMLElement>,
6067
};
6168
return new UICompBuilder(childrenMap, (props) => {
@@ -67,6 +74,7 @@ const ToggleTmpComp = (function () {
6774
disabled={props.disabled}
6875
$align={props.alignment}
6976
$showBorder={props.showBorder}
77+
$animationStyle={props.animationStyle}
7078
>
7179
<Button100
7280
ref={props.viewRef}
@@ -122,13 +130,21 @@ const ToggleTmpComp = (function () {
122130
</>
123131
)}
124132

125-
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
126-
<><Section name={sectionNames.style}>
127-
{children.showBorder.propertyView({ label: trans("toggleButton.showBorder") })}
128-
{children.style.getPropertyView()}
129-
</Section></>
130-
)}
131-
133+
{(useContext(EditorContext).editorModeStatus === "layout" ||
134+
useContext(EditorContext).editorModeStatus === "both") && (
135+
<>
136+
<Section name={sectionNames.style}>
137+
{children.showBorder.propertyView({
138+
label: trans("toggleButton.showBorder"),
139+
})}
140+
{children.style.getPropertyView()}
141+
</Section>
142+
<Section name={sectionNames.animationStyle}>
143+
{children.animationStyle.getPropertyView()}
144+
</Section>
145+
</>
146+
)}
147+
132148
</>
133149
))
134150
.setExposeMethodConfigs(buttonRefMethods)

‎client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import { EditorContext } from "comps/editorState";
3131

3232
// Introducing styles
3333
import {
34+
AnimationStyle,
3435
CommentStyle,
3536
heightCalculator,
3637
widthCalculator,
@@ -100,6 +101,7 @@ const childrenMap = {
100101
}),
101102
onEvent: eventHandlerControl(EventOptions),
102103
style: styleControl(CommentStyle),
104+
animationStyle: styleControl(AnimationStyle),
103105
commentList: jsonValueExposingStateControl("commentList", []),
104106
deletedItem: jsonValueExposingStateControl("deletedItem", []),
105107
submitedItem: jsonValueExposingStateControl("submitedItem", []),
@@ -125,6 +127,7 @@ const CommentCompBase = (
125127
userInfo,
126128
placeholder,
127129
deleteAble,
130+
animationStyle,
128131
} = props;
129132
type PrefixType = "@" | keyof typeof mentionList;
130133
// Used to save the consolidated list of mentions
@@ -233,7 +236,11 @@ const CommentCompBase = (
233236
width: widthCalculator(style.margin ?? "3px"),
234237
height: heightCalculator(style.margin ?? "3px"),
235238
background: style.background,
236-
borderRadius: style.radius,
239+
borderRadius: style.radius,
240+
animation: animationStyle.animation,
241+
animationDelay: animationStyle.animationDelay,
242+
animationDuration: animationStyle.animationDuration,
243+
animationIterationCount:animationStyle.animationIterationCount
237244
}}>
238245
<div
239246
style={{
@@ -413,8 +420,12 @@ let CommentBasicComp = (function () {
413420
{children.placeholder.propertyView({
414421
label: trans("comment.placeholderDec"),
415422
})}
416-
</Section><Section name={sectionNames.style}>
423+
</Section>
424+
<Section name={sectionNames.style}>
417425
{children.style.getPropertyView()}
426+
</Section>
427+
<Section name={sectionNames.animationStyle}>
428+
{children.animationStyle.getPropertyView()}
418429
</Section></>
419430
)}
420431

‎client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { useContext, useEffect, useRef, useState } from "react";
1313
import { EditorContext } from "comps/editorState";
1414
import { Card } from "antd";
1515
import styled from "styled-components";
16-
import { CardHeaderStyle, CardHeaderStyleType, CardStyle, CardStyleType } from "comps/controls/styleControlConstants";
16+
import { AnimationStyle, AnimationStyleType, CardHeaderStyle, CardHeaderStyleType, CardStyle, CardStyleType } from "comps/controls/styleControlConstants";
1717
import { MultiCompBuilder, withDefault } from "comps/generators";
1818
import { IconControl } from "comps/controls/iconControl";
1919
import { ButtonEventHandlerControl, CardEventHandlerControl, clickEvent, refreshEvent } from "comps/controls/eventHandlerControl";
@@ -22,7 +22,14 @@ import { dropdownControl } from "comps/controls/dropdownControl";
2222
import { styleControl } from "comps/controls/styleControl";
2323
const { Meta } = Card;
2424

25-
const Warpper = styled.div<{ $style: CardStyleType | undefined, $showMate: boolean, $cardType: string, $headerStyle:CardHeaderStyleType, $bodyStyle:CardHeaderStyleType }>`
25+
const Warpper = styled.div<{
26+
$style: CardStyleType | undefined;
27+
$showMate: boolean;
28+
$cardType: string;
29+
$headerStyle: CardHeaderStyleType;
30+
$bodyStyle: CardHeaderStyleType;
31+
$animationStyle:AnimationStyleType;
32+
}>`
2633
height: 100%;
2734
width: 100%;
2835
.ant-card-small >.ant-card-head {
@@ -70,6 +77,7 @@ const Warpper = styled.div<{ $style: CardStyleType | undefined, $showMate: boole
7077
border-style: ${props => props.$style?.borderStyle};
7178
border-radius: ${props => props.$style?.radius};
7279
border-width: ${props => props.$style?.borderWidth};
80+
${props=>props.$animationStyle}
7381
}
7482
.ant-card-body {
7583
display: ${props => props.$showMate ? '' : 'none'};
@@ -173,6 +181,7 @@ export const ContainerBaseComp = (function () {
173181
style: styleControl(CardStyle),
174182
headerStyle: styleControl(CardHeaderStyle),
175183
bodyStyle: styleControl(CardHeaderStyle),
184+
animationStyle: styleControl(AnimationStyle),
176185
};
177186

178187
return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
@@ -202,6 +211,7 @@ export const ContainerBaseComp = (function () {
202211
<Warpper
203212
ref={conRef}
204213
$style={props.style}
214+
$animationStyle={props.animationStyle}
205215
$headerStyle={props.headerStyle}
206216
$bodyStyle={props.bodyStyle}
207217
$showMate={props.showMeta || props.cardType == 'custom'}
@@ -321,6 +331,9 @@ export const ContainerBaseComp = (function () {
321331
<Section name={sectionNames.bodyStyle}>
322332
{children.bodyStyle.getPropertyView()}
323333
</Section>
334+
<Section name={sectionNames.animationStyle}>
335+
{children.animationStyle.getPropertyView()}
336+
</Section>
324337
</>
325338
)}
326339
</>

‎client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,12 @@ import { BoolCodeControl } from "comps/controls/codeControl";
1616
import { DisabledContext } from "comps/generators/uiCompBuilder";
1717
import React, { useContext } from "react";
1818
import { EditorContext } from "comps/editorState";
19+
import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk";
1920

2021
export const ContainerBaseComp = (function () {
2122
const childrenMap = {
2223
disabled: BoolCodeControl,
24+
animationStyle: styleControl(AnimationStyle),
2325
};
2426
return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
2527
return (

‎client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,12 @@ import {
1818
ContainerCompBuilder,
1919
} from "../pageLayoutComp/pageLayoutCompBuilder";
2020
import { PageLayout } from "../pageLayoutComp/pageLayout";
21-
21+
import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk";
2222

2323
export const ContainerBaseComp = (function () {
24-
const childrenMap = {
25-
disabled: BoolCodeControl
24+
const childrenMap = {
25+
disabled: BoolCodeControl,
26+
animationStyle: styleControl(AnimationStyle),
2627
};
2728

2829
return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
@@ -52,7 +53,10 @@ export const ContainerBaseComp = (function () {
5253
</Section>
5354
<Section name={sectionNames.style}>
5455
{ children.container.stylePropertyView() }
55-
</Section>
56+
</Section>
57+
<Section name={sectionNames.animationStyle}>
58+
{children.animationStyle.getPropertyView()}
59+
</Section>
5660
{children.container.children.showHeader.getView() && (
5761
<Section name={"Header Style"}>
5862
{ children.container.headerStylePropertyView() }

‎client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { TriContainer } from "../triContainerComp/triFloatTextContainer";
2020
import { dropdownControl } from "comps/controls/dropdownControl";
2121
import { withDefault } from "comps/generators/simpleGenerators";
2222
import { styleControl } from "comps/controls/styleControl";
23-
import { TextStyle } from "comps/controls/styleControlConstants";
23+
import { AnimationStyle, TextStyle } from "comps/controls/styleControlConstants";
2424
import { useContext } from "react";
2525
import { EditorContext } from "comps/editorState";
2626
import { alignWithJustifyControl } from "comps/controls/alignControl";
@@ -63,6 +63,7 @@ export const ContainerBaseComp = (function () {
6363
horizontalAlignment: alignWithJustifyControl(),
6464
width: withDefault(StringControl, "40"),
6565
style: styleControl(TextStyle),
66+
animationStyle: styleControl(AnimationStyle),
6667
};
6768
return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
6869
return <TriContainer {...props} />;
@@ -95,6 +96,9 @@ export const ContainerBaseComp = (function () {
9596
<Section name={"Floating Text Style"}>
9697
{children.style.getPropertyView()}
9798
</Section>
99+
<Section name={sectionNames.animationStyle}>
100+
{children.animationStyle.getPropertyView()}
101+
</Section>
98102
<Section name={"Container Style"}>
99103
{children.container.stylePropertyView()}
100104
</Section>

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy