diff --git a/client/packages/lowcoder/src/assets/icons/icon-lottie.svg b/client/packages/lowcoder-design/src/icons/icon-lottie.svg similarity index 100% rename from client/packages/lowcoder/src/assets/icons/icon-lottie.svg rename to client/packages/lowcoder-design/src/icons/icon-lottie.svg diff --git a/client/packages/lowcoder-design/src/icons/index.ts b/client/packages/lowcoder-design/src/icons/index.ts index 4d7591df3..a84c01278 100644 --- a/client/packages/lowcoder-design/src/icons/index.ts +++ b/client/packages/lowcoder-design/src/icons/index.ts @@ -285,5 +285,6 @@ export { ReactComponent as TableCheckedIcon } from "icons/icon-table-checked.svg export { ReactComponent as TableUnCheckedIcon } from "icons/icon-table-boolean-false.svg"; export { ReactComponent as FileFolderIcon } from "icons/icon-editor-folder.svg"; export { ReactComponent as ExpandIcon } from "icons/icon-expand.svg"; -export { ReactComponent as CompressIcon } from "icons/icon-compress.svg" -export { ReactComponent as TableCellsIcon } from "icons/icon-table-cells.svg" // Added By Aqib Mirza +export { ReactComponent as CompressIcon } from "icons/icon-compress.svg"; +export { ReactComponent as TableCellsIcon } from "icons/icon-table-cells.svg"; // Added By Aqib Mirza +export { ReactComponent as LottieIcon } from "icons/icon-lottie.svg"; \ No newline at end of file diff --git a/client/packages/lowcoder/src/assets/icons/index.ts b/client/packages/lowcoder/src/assets/icons/index.ts index df7c3d2bb..409292ab7 100644 --- a/client/packages/lowcoder/src/assets/icons/index.ts +++ b/client/packages/lowcoder/src/assets/icons/index.ts @@ -10,6 +10,4 @@ export { ReactComponent as DocIcon } from "./view-doc.svg"; export { ReactComponent as TutorialIcon } from "./tutorial.svg"; export { ReactComponent as ShortcutIcon } from "./icon-help-shortcut.svg"; -export { ReactComponent as LottieIcon } from "./icon-lottie.svg"; //Added By Aqib Mirza - export { GoogleLoginIcon, GithubLoginIcon, GeneralLoginIcon, EmailLoginIcon }; diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx index 7e03d89ba..1eb4da69a 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx @@ -5,6 +5,7 @@ import { NumberControl, } from "comps/controls/codeControl"; import { dropdownControl } from "comps/controls/dropdownControl"; +import { BoolControl } from "comps/controls/boolControl"; import { styleControl } from "comps/controls/styleControl"; import { LottieStyle } from "comps/controls/styleControlConstants"; import { trans } from "i18n"; @@ -22,27 +23,35 @@ import { defaultLottie } from "./jsonConstants"; */ const animationStartOptions = [ { - label: "Auto", + label: trans("jsonLottie.auto"), value: "auto", }, { - label: "On Hover", + label: trans("jsonLottie.onHover"), value: "on hover", }, ] as const; const loopOptions = [ { - label: "Single play", + label: trans("jsonLottie.singlePlay"), value: "single", }, { - label: "Endless loop", + label: trans("jsonLottie.endlessLoop"), value: "endless", }, ] as const; const speedOptions = [ + { + label: "0.5x", + value: "0.5", + }, + { + label: "0.75x", + value: "0.75", + }, { label: "1x", value: "1", @@ -81,8 +90,8 @@ let JsonLottieTmpComp = (function () { backgroundColor: styleControl(LottieStyle), animationStart: dropdownControl(animationStartOptions, "auto"), loop: dropdownControl(loopOptions, "single"), + keepLastFrame: BoolControl.DEFAULT_TRUE, }; - return new UICompBuilder(childrenMap, (props) => { return (
{children.value.propertyView({ - label: trans("lottieJson"), + label: trans("jsonLottie.lottieJson"), })} {children.speed.propertyView({ label: trans("jsonLottie.speed"), @@ -128,6 +138,9 @@ let JsonLottieTmpComp = (function () { {children.animationStart.propertyView({ label: trans("jsonLottie.animationStart"), })} + {children.keepLastFrame.propertyView({ + label: trans("jsonLottie.keepLastFrame"), + })}
{children.backgroundColor.getPropertyView()} diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 24937f44c..67b36bdef 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -875,18 +875,15 @@ export const LottieStyle = [ name: "background", label: trans("style.background"), depTheme: "canvas", - depType: DEP_TYPE.CONTRAST_TEXT, - transformer: contrastText, + depType: DEP_TYPE.SELF, + transformer: toSelf, }, - MARGIN, - PADDING, ] as const; ///////////////////// export const CarouselStyle = [getBackground("canvas")] as const; export const RichTextEditorStyle = [getStaticBorder(), RADIUS] as const; - export type InputLikeStyleType = StyleConfigType; export type ButtonStyleType = StyleConfigType; export type ToggleButtonStyleType = StyleConfigType; diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx index 5cdd37145..baf2d4b96 100644 --- a/client/packages/lowcoder/src/comps/index.tsx +++ b/client/packages/lowcoder/src/comps/index.tsx @@ -91,6 +91,7 @@ import { TreeSelectIcon, UploadCompIcon, VideoCompIcon, + LottieIcon, } from "lowcoder-design"; import { defaultFormData, FormComp } from "./comps/formComp/formComp"; @@ -119,7 +120,6 @@ import { SignatureComp } from "./comps/signatureComp"; //Added by Aqib Mirza import { JsonLottieComp } from "./comps/jsonComp/jsonLottieComp"; -import { LottieIcon } from "../assets/icons"; type Registry = { [key in UICompType]?: UICompManifest; diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index d7753eabb..29fd3b3c5 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -44,7 +44,6 @@ export const en = { accessControl: " Access Control", copySuccess: "Copied", copyError: "Copy error", - lottieJson: "Lottie JSON", //Added By Aqib Mirza api: { publishSuccess: "Published", recoverFailed: "Recover failed", @@ -2423,6 +2422,7 @@ export const en = { }, //Added By Aqib Mirza jsonLottie: { + lottieJson: "Lottie JSON", speed: "Speed", width: "Width", height: "Height", @@ -2430,6 +2430,11 @@ export const en = { animationStart: "Animation Start", valueDesc: "Current json Data", loop: "Loop", + auto: 'auto', + onHover: "On hover", + singlePlay: "Single Play", + endlessLoop: "Endless Loop", + keepLastFrame: "Keep Last Frame", }, ///////////////////// }; diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts index d0b479a0c..bf1e1fe28 100644 --- a/client/packages/lowcoder/src/i18n/locales/zh.ts +++ b/client/packages/lowcoder/src/i18n/locales/zh.ts @@ -2412,5 +2412,20 @@ idSource: { slotControl: { configSlotView: "配置槽视图", }, + jsonLottie: { + lottieJson: "JSON数据", + speed: "播放速度", + width: "宽度", + height: "高度", + backgroundColor: "背景颜色", + animationStart: "播放方式", + valueDesc: "JSON数据", + loop: "循环方式", + auto: "自动", + onHover: "鼠标悬停时", + singlePlay: "播放一次", + endlessLoop: "循环播放", + keepLastFrame: "冻结最后一帧", + }, };