May 20, 2024 · May 13, 2024 · May 13, 2024 · May 14, 2024 · May 14, 2024 · May 14, 2024
diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx
  layout: trans("prop.layout"),
  style: trans("prop.style"),
  labelStyle:trans("prop.labelStyle"),
  animationStyle:trans("prop.animationStyle"),
  data: trans("prop.data"),
  meetings: trans("prop.meetings"), // added by Falk Wolsky
  field: trans("prop.field"),
diff --git a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts
    advanced: "Advanced",
    validation: "Validation",
    layout: "Layout",
    animationStyle:"Animation Style",
    labelStyle: "Label Style",
    style: "Style",
    meetings: "Meeting Settings",
diff --git a/client/packages/lowcoder-design/src/icons/index.ts b/client/packages/lowcoder-design/src/icons/index.ts
 export { ReactComponent as EditIcon } from "./icon-edit.svg";
 export { ReactComponent as EditableIcon } from "./icon-editable.svg";
 export { ReactComponent as LeftStateIcon } from "./remix/node-tree.svg";
 export {ReactComponent as StarSmileIcon} from "./remix/star-smile-line.svg";
 export {ReactComponent as Timer2Icon} from "./remix/timer-2-line.svg";
 export {ReactComponent as TimerFlashIcon} from "./remix/timer-flash-line.svg";
 export {ReactComponent as RefreshLineIcon} from "./remix/refresh-line.svg";
 export { ReactComponent as LeftSettingIcon } from "./remix/tools-fill.svg";
 export { ReactComponent as LeftLayersIcon } from "./remix/stack-line.svg";
 export { ReactComponent as LeftHelpIcon } from "./icon-left-help.svg";
diff --git a/client/packages/lowcoder/package.json b/client/packages/lowcoder/package.json
    "@types/react-signature-canvas": "^1.0.2",
    "@types/react-test-renderer": "^18.0.0",
    "@types/react-virtualized": "^9.21.21",
    "animate.css": "^4.1.1",
    "antd": "5.13.2",
    "axios": "^1.6.2",
    "buffer": "^6.0.3",
diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts
  primarySurface: string; // comp bg-color
  borderRadius: string;
  chart?: string;
  margin?: string;
  margin?: string;
  padding?: string;
  gridColumns?: string; //Added By Aqib Mirza
  textSize?: string;
  animation?: string;
  animationDelay?: string;
  animationDuration?: string;
  opacity?: string;
  boxShadow?: string;
  boxShadowColor?: string;
  animationIterationCount?: string;
 }

 export function getThemeDetailName(key: keyof ThemeDetail) {
diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
 import { BoolControl } from "comps/controls/boolControl";
 import { styleControl } from "comps/controls/styleControl";
 import {
  AnimationStyle,
  InputFieldStyle,
  InputLikeStyle,
  InputLikeStyleType,
    ${getStyle(props.$style)}
    input {
      padding: ${props.style?.padding};
      rotate: ${props?.$style?.rotation};
    }
    .ant-select-single {
      width: 100% !important;
  componentSize: dropdownControl(componentSize, "small"),
  valueInItems: booleanExposingStateControl("valueInItems"),
  inputFieldStyle: styleControl(InputLikeStyle),
  animationStyle: styleControl(AnimationStyle),
 };

 const getValidate = (value: any): "" | "warning" | "error" | undefined => {
      style: props.style,
      labelStyle: props.labelStyle,
      inputFieldStyle:props.inputFieldStyle,
      animationStyle: props.animationStyle,
      ...validateState,
    });
  })
          <Section name={sectionNames.inputFieldStyle}>
            {children.inputFieldStyle.getPropertyView()}
          </Section>
          <Section name={sectionNames.animationStyle}>
            {children.animationStyle.getPropertyView()}
          </Section>
        </>
      );
    })
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { styleControl } from "comps/controls/styleControl";
 import { LinkStyle, LinkStyleType } from "comps/controls/styleControlConstants";
 import {AnimationStyle, AnimationStyleType,LinkStyle, LinkStyleType } from "comps/controls/styleControlConstants";
 import { withDefault } from "comps/generators";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { EditorContext } from "comps/editorState";
 import React, { useContext } from "react";

 const Link = styled(Button) <{ $style: LinkStyleType }>`
 const Link = styled(Button)<{
  $style: LinkStyleType;
  $animationStyle: AnimationStyleType;
 }>`
  ${(props) => props.$animationStyle}
  ${(props) => `
    color: ${props.$style.text};
    margin: ${props.$style.margin};
    disabled: BoolCodeControl,
    loading: BoolCodeControl,
    style: migrateOldData(styleControl(LinkStyle), fixOldData),
    animationStyle:styleControl(AnimationStyle),
    prefixIcon: IconControl,
    suffixIcon: IconControl,
    viewRef: RefControl<HTMLElement>,
    return (
      <ButtonCompWrapper disabled={props.disabled}>
        <Link
          $animationStyle={props.animationStyle}
          ref={props.viewRef}
          $style={props.style}
          loading={props.loading}
          )}

          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
            <><Section name={sectionNames.style}>{children.style.getPropertyView()}</Section></>
            <>
              <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
              <Section name={sectionNames.animationStyle}>{children.animationStyle.getPropertyView()}</Section>
            </>
          )}
        </>
      );
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
 import { IconControl } from "comps/controls/iconControl";
 import { AlignWithStretchControl, LeftRightControl } from "comps/controls/dropdownControl";
 import { booleanExposingStateControl } from "comps/controls/codeStateControl";
 import { ToggleButtonStyle } from "comps/controls/styleControlConstants";
 import {
  AnimationStyle,
  AnimationStyleType,
  ToggleButtonStyle,
 } from "comps/controls/styleControlConstants";
 import { styleControl } from "comps/controls/styleControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { RefControl } from "comps/controls/refControl";
 const ButtonCompWrapperStyled = styled(ButtonCompWrapper)<{
  $align: "left" | "center" | "right" | "stretch";
  $showBorder: boolean;
  $animationStyle: AnimationStyleType;
 }>`
  ${(props) => props.$animationStyle}
  width: 100%;
  display: flex;
  justify-content: ${(props) => props.$align};
    iconPosition: LeftRightControl,
    alignment: AlignWithStretchControl,
    style: styleControl(ToggleButtonStyle),
    showBorder: withDefault(BoolControl, true),
    animationStyle: styleControl(AnimationStyle),
    showBorder: withDefault(BoolControl, true),
    viewRef: RefControl<HTMLElement>,
  };
  return new UICompBuilder(childrenMap, (props) => {
        disabled={props.disabled}
        $align={props.alignment}
        $showBorder={props.showBorder}
        $animationStyle={props.animationStyle}
      >
        <Button100
          ref={props.viewRef}
          </>
        )}

        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
          <><Section name={sectionNames.style}>
            {children.showBorder.propertyView({ label: trans("toggleButton.showBorder") })}
            {children.style.getPropertyView()}
          </Section></>
        )}

        {(useContext(EditorContext).editorModeStatus === "layout" ||
          useContext(EditorContext).editorModeStatus === "both") && (
          <>
            <Section name={sectionNames.style}>
              {children.showBorder.propertyView({
                label: trans("toggleButton.showBorder"),
              })}
              {children.style.getPropertyView()}
            </Section>
            <Section name={sectionNames.animationStyle}>
              {children.animationStyle.getPropertyView()}
            </Section>
          </>
          )}

      </>
    ))
    .setExposeMethodConfigs(buttonRefMethods)
diff --git a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx

 // Introducing styles
 import {
  AnimationStyle,
  CommentStyle,
  heightCalculator,
  widthCalculator,
  }),
  onEvent: eventHandlerControl(EventOptions),
  style: styleControl(CommentStyle),
  animationStyle: styleControl(AnimationStyle),
  commentList: jsonValueExposingStateControl("commentList", []),
  deletedItem: jsonValueExposingStateControl("deletedItem", []),
  submitedItem: jsonValueExposingStateControl("submitedItem", []),
    userInfo,
    placeholder,
    deleteAble,
    animationStyle,
  } = props;
  type PrefixType = "@" | keyof typeof mentionList;
  // Used to save the consolidated list of mentions
        width: widthCalculator(style.margin ?? "3px"),
        height: heightCalculator(style.margin ?? "3px"),
        background: style.background,
        borderRadius: style.radius,
      borderRadius: style.radius,
      animation: animationStyle.animation,
      animationDelay: animationStyle.animationDelay,
      animationDuration: animationStyle.animationDuration,
        animationIterationCount:animationStyle.animationIterationCount
      }}>
      <div
        style={{
            {children.placeholder.propertyView({
              label: trans("comment.placeholderDec"),
            })}
          </Section><Section name={sectionNames.style}>
          </Section>
            <Section name={sectionNames.style}>
              {children.style.getPropertyView()}
            </Section>
            <Section name={sectionNames.animationStyle}>
              {children.animationStyle.getPropertyView()}
            </Section></>
        )}

diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
 import { EditorContext } from "comps/editorState";
 import { Card } from "antd";
 import styled from "styled-components";
 import { CardHeaderStyle, CardHeaderStyleType, CardStyle, CardStyleType } from "comps/controls/styleControlConstants";
 import {AnimationStyle, AnimationStyleType,CardHeaderStyle, CardHeaderStyleType, CardStyle, CardStyleType } from "comps/controls/styleControlConstants";
 import { MultiCompBuilder, withDefault } from "comps/generators";
 import { IconControl } from "comps/controls/iconControl";
 import { ButtonEventHandlerControl, CardEventHandlerControl, clickEvent, refreshEvent } from "comps/controls/eventHandlerControl";
 import { styleControl } from "comps/controls/styleControl";
 const { Meta } = Card;

 const Warpper = styled.div<{ $style: CardStyleType | undefined, $showMate: boolean, $cardType: string, $headerStyle:CardHeaderStyleType, $bodyStyle:CardHeaderStyleType }>`
 const Warpper = styled.div<{
  $style: CardStyleType | undefined;
  $showMate: boolean;
  $cardType: string;
  $headerStyle: CardHeaderStyleType;
  $bodyStyle: CardHeaderStyleType;
  $animationStyle:AnimationStyleType;
 }>`
  height: 100%;
  width: 100%;
  .ant-card-small >.ant-card-head {
    border-style: ${props => props.$style?.borderStyle};
    border-radius: ${props => props.$style?.radius};
    border-width: ${props => props.$style?.borderWidth};
    ${props=>props.$animationStyle}
  }
  .ant-card-body {
    display: ${props => props.$showMate ? '' : 'none'};
    style: styleControl(CardStyle),
    headerStyle: styleControl(CardHeaderStyle),
    bodyStyle: styleControl(CardHeaderStyle),
    animationStyle: styleControl(AnimationStyle),
  };

  return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
        <Warpper
          ref={conRef}
          $style={props.style}
          $animationStyle={props.animationStyle}
          $headerStyle={props.headerStyle}
          $bodyStyle={props.bodyStyle}
          $showMate={props.showMeta || props.cardType == 'custom'}
              <Section name={sectionNames.bodyStyle}>
                {children.bodyStyle.getPropertyView()}
              </Section>
              <Section name={sectionNames.animationStyle}>
                {children.animationStyle.getPropertyView()}
              </Section>
            </>
          )}
        </>
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx
 import { DisabledContext } from "comps/generators/uiCompBuilder";
 import React, { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk";

 export const ContainerBaseComp = (function () {
  const childrenMap = {
    disabled: BoolCodeControl,
    animationStyle: styleControl(AnimationStyle),
  };
  return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
    return (
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx
  ContainerCompBuilder,
 } from "../pageLayoutComp/pageLayoutCompBuilder";
 import { PageLayout } from "../pageLayoutComp/pageLayout";

 import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk";

 export const ContainerBaseComp = (function () {
  const childrenMap = {
    disabled: BoolCodeControl
  const childrenMap = {
    disabled: BoolCodeControl,
    animationStyle: styleControl(AnimationStyle),
  };

  return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
            </Section>
            <Section name={sectionNames.style}>
              { children.container.stylePropertyView() }
            </Section>
              </Section>
              <Section name={sectionNames.animationStyle}>
                {children.animationStyle.getPropertyView()}
              </Section>
            {children.container.children.showHeader.getView() && (
              <Section name={"Header Style"}>
                { children.container.headerStylePropertyView() }
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { withDefault } from "comps/generators/simpleGenerators";
 import { styleControl } from "comps/controls/styleControl";
 import { TextStyle } from "comps/controls/styleControlConstants";
 import {AnimationStyle,TextStyle } from "comps/controls/styleControlConstants";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { alignWithJustifyControl } from "comps/controls/alignControl";
    horizontalAlignment: alignWithJustifyControl(),
    width: withDefault(StringControl, "40"),
    style: styleControl(TextStyle),
    animationStyle: styleControl(AnimationStyle),
  };
  return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
    return <TriContainer {...props} />;
              <Section name={"Floating Text Style"}>
                {children.style.getPropertyView()}
              </Section>
              <Section name={sectionNames.animationStyle}>
                {children.animationStyle.getPropertyView()}
              </Section>
              <Section name={"Container Style"}>
                {children.container.stylePropertyView()}
              </Section>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -146,6 +146,7 @@ export const sectionNames = {
		layout: trans("prop.layout"),
		style: trans("prop.style"),
		labelStyle:trans("prop.labelStyle"),
		animationStyle:trans("prop.animationStyle"),
		data: trans("prop.data"),
		meetings: trans("prop.meetings"), // added by Falk Wolsky
		field: trans("prop.field"),
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -23,6 +23,7 @@ export const en = {
		advanced: "Advanced",
		validation: "Validation",
		layout: "Layout",
		animationStyle:"Animation Style",
		labelStyle: "Label Style",
		style: "Style",
		meetings: "Meeting Settings",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -161,6 +161,10 @@ export { ReactComponent as ResetIcon } from "./icon-style-reset.svg";
		export { ReactComponent as EditIcon } from "./icon-edit.svg";
		export { ReactComponent as EditableIcon } from "./icon-editable.svg";
		export { ReactComponent as LeftStateIcon } from "./remix/node-tree.svg";
		export {ReactComponent as StarSmileIcon} from "./remix/star-smile-line.svg";
		export {ReactComponent as Timer2Icon} from "./remix/timer-2-line.svg";
		export {ReactComponent as TimerFlashIcon} from "./remix/timer-flash-line.svg";
		export {ReactComponent as RefreshLineIcon} from "./remix/refresh-line.svg";
		export { ReactComponent as LeftSettingIcon } from "./remix/tools-fill.svg";
		export { ReactComponent as LeftLayersIcon } from "./remix/stack-line.svg";
		export { ReactComponent as LeftHelpIcon } from "./icon-left-help.svg";
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -36,6 +36,7 @@
		"@types/react-signature-canvas": "^1.0.2",
		"@types/react-test-renderer": "^18.0.0",
		"@types/react-virtualized": "^9.21.21",
		"animate.css": "^4.1.1",
		"antd": "5.13.2",
		"axios": "^1.6.2",
		"buffer": "^6.0.3",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -44,10 +44,17 @@ export interface ThemeDetail {
		primarySurface: string; // comp bg-color
		borderRadius: string;
		chart?: string;
		margin?: string;
		margin?: string;
		padding?: string;
		gridColumns?: string; //Added By Aqib Mirza
		textSize?: string;
		animation?: string;
		animationDelay?: string;
		animationDuration?: string;
		opacity?: string;
		boxShadow?: string;
		boxShadowColor?: string;
		animationIterationCount?: string;
		}

		export function getThemeDetailName(key: keyof ThemeDetail) {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,6 +3,7 @@ import { Input, Section, sectionNames } from "lowcoder-design";
		import { BoolControl } from "comps/controls/boolControl";
		import { styleControl } from "comps/controls/styleControl";
		import {
		AnimationStyle,
		InputFieldStyle,
		InputLikeStyle,
		InputLikeStyleType,
Expand DownExpand Up		@@ -62,6 +63,7 @@ const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>`
		${getStyle(props.$style)}
		input {
		padding: ${props.style?.padding};
		rotate: ${props?.$style?.rotation};
		}
		.ant-select-single {
		width: 100% !important;
Expand DownExpand Up		@@ -89,6 +91,7 @@ const childrenMap = {
		componentSize: dropdownControl(componentSize, "small"),
		valueInItems: booleanExposingStateControl("valueInItems"),
		inputFieldStyle: styleControl(InputLikeStyle),
		animationStyle: styleControl(AnimationStyle),
		};

		const getValidate = (value: any): "" \| "warning" \| "error" \| undefined => {
Expand DownExpand Up		@@ -283,6 +286,7 @@ let AutoCompleteCompBase = (function () {
		style: props.style,
		labelStyle: props.labelStyle,
		inputFieldStyle:props.inputFieldStyle,
		animationStyle: props.animationStyle,
		...validateState,
		});
		})
Expand DownExpand Up		@@ -347,6 +351,9 @@ let AutoCompleteCompBase = (function () {
		<Section name={sectionNames.inputFieldStyle}>
		{children.inputFieldStyle.getPropertyView()}
		</Section>
		<Section name={sectionNames.animationStyle}>
		{children.animationStyle.getPropertyView()}
		</Section>
		</>
		);
		})
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,7 +3,7 @@ import { ButtonCompWrapper, buttonRefMethods } from "comps/comps/buttonComp/butt
		import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
		import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
		import { styleControl } from "comps/controls/styleControl";
		import { LinkStyle, LinkStyleType } from "comps/controls/styleControlConstants";
		import {AnimationStyle, AnimationStyleType,LinkStyle, LinkStyleType } from "comps/controls/styleControlConstants";
		import { withDefault } from "comps/generators";
		import { migrateOldData } from "comps/generators/simpleGenerators";
		import { UICompBuilder } from "comps/generators/uiCompBuilder";
Expand All		@@ -23,7 +23,11 @@ import { RefControl } from "comps/controls/refControl";
		import { EditorContext } from "comps/editorState";
		import React, { useContext } from "react";

		const Link = styled(Button) <{ $style: LinkStyleType }>`
		const Link = styled(Button)<{
		$style: LinkStyleType;
		$animationStyle: AnimationStyleType;
		}>`
		${(props) => props.$animationStyle}
		${(props) => `
		color: ${props.$style.text};
		margin: ${props.$style.margin};
Expand DownExpand Up		@@ -81,6 +85,7 @@ const LinkTmpComp = (function () {
		disabled: BoolCodeControl,
		loading: BoolCodeControl,
		style: migrateOldData(styleControl(LinkStyle), fixOldData),
		animationStyle:styleControl(AnimationStyle),
		prefixIcon: IconControl,
		suffixIcon: IconControl,
		viewRef: RefControl<HTMLElement>,
Expand All		@@ -91,6 +96,7 @@ const LinkTmpComp = (function () {
		return (
		<ButtonCompWrapper disabled={props.disabled}>
		<Link
		$animationStyle={props.animationStyle}
		ref={props.viewRef}
		$style={props.style}
		loading={props.loading}
Expand DownExpand Up		@@ -130,7 +136,10 @@ const LinkTmpComp = (function () {
		)}

		{(useContext(EditorContext).editorModeStatus === "layout" \|\| useContext(EditorContext).editorModeStatus === "both") && (
		<><Section name={sectionNames.style}>{children.style.getPropertyView()}</Section></>
		<>
		<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
		<Section name={sectionNames.animationStyle}>{children.animationStyle.getPropertyView()}</Section>
		</>
		)}
		</>
		);
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,7 +15,11 @@ import { Button100, ButtonCompWrapper, buttonRefMethods } from "./buttonCompCons
		import { IconControl } from "comps/controls/iconControl";
		import { AlignWithStretchControl, LeftRightControl } from "comps/controls/dropdownControl";
		import { booleanExposingStateControl } from "comps/controls/codeStateControl";
		import { ToggleButtonStyle } from "comps/controls/styleControlConstants";
		import {
		AnimationStyle,
		AnimationStyleType,
		ToggleButtonStyle,
		} from "comps/controls/styleControlConstants";
		import { styleControl } from "comps/controls/styleControl";
		import { BoolControl } from "comps/controls/boolControl";
		import { RefControl } from "comps/controls/refControl";
Expand All		@@ -29,7 +33,9 @@ const IconWrapper = styled.div`
		const ButtonCompWrapperStyled = styled(ButtonCompWrapper)<{
		$align: "left" \| "center" \| "right" \| "stretch";
		$showBorder: boolean;
		$animationStyle: AnimationStyleType;
		}>`
		${(props) => props.$animationStyle}
		width: 100%;
		display: flex;
		justify-content: ${(props) => props.$align};
Expand All		@@ -55,7 +61,8 @@ const ToggleTmpComp = (function () {
		iconPosition: LeftRightControl,
		alignment: AlignWithStretchControl,
		style: styleControl(ToggleButtonStyle),
		showBorder: withDefault(BoolControl, true),
		animationStyle: styleControl(AnimationStyle),
		showBorder: withDefault(BoolControl, true),
		viewRef: RefControl<HTMLElement>,
		};
		return new UICompBuilder(childrenMap, (props) => {
Expand All		@@ -67,6 +74,7 @@ const ToggleTmpComp = (function () {
		disabled={props.disabled}
		$align={props.alignment}
		$showBorder={props.showBorder}
		$animationStyle={props.animationStyle}
		>
		<Button100
		ref={props.viewRef}
Expand DownExpand Up		@@ -122,13 +130,21 @@ const ToggleTmpComp = (function () {
		</>
		)}

		{(useContext(EditorContext).editorModeStatus === "layout" \|\| useContext(EditorContext).editorModeStatus === "both") && (
		<><Section name={sectionNames.style}>
		{children.showBorder.propertyView({ label: trans("toggleButton.showBorder") })}
		{children.style.getPropertyView()}
		</Section></>
		)}

		{(useContext(EditorContext).editorModeStatus === "layout" \|\|
		useContext(EditorContext).editorModeStatus === "both") && (
		<>
		<Section name={sectionNames.style}>
		{children.showBorder.propertyView({
		label: trans("toggleButton.showBorder"),
		})}
		{children.style.getPropertyView()}
		</Section>
		<Section name={sectionNames.animationStyle}>
		{children.animationStyle.getPropertyView()}
		</Section>
		</>
		)}

		</>
		))
		.setExposeMethodConfigs(buttonRefMethods)
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -31,6 +31,7 @@ import { EditorContext } from "comps/editorState";

		// Introducing styles
		import {
		AnimationStyle,
		CommentStyle,
		heightCalculator,
		widthCalculator,
Expand DownExpand Up		@@ -100,6 +101,7 @@ const childrenMap = {
		}),
		onEvent: eventHandlerControl(EventOptions),
		style: styleControl(CommentStyle),
		animationStyle: styleControl(AnimationStyle),
		commentList: jsonValueExposingStateControl("commentList", []),
		deletedItem: jsonValueExposingStateControl("deletedItem", []),
		submitedItem: jsonValueExposingStateControl("submitedItem", []),
Expand All		@@ -125,6 +127,7 @@ const CommentCompBase = (
		userInfo,
		placeholder,
		deleteAble,
		animationStyle,
		} = props;
		type PrefixType = "@" \| keyof typeof mentionList;
		// Used to save the consolidated list of mentions
Expand DownExpand Up		@@ -233,7 +236,11 @@ const CommentCompBase = (
		width: widthCalculator(style.margin ?? "3px"),
		height: heightCalculator(style.margin ?? "3px"),
		background: style.background,
		borderRadius: style.radius,
		borderRadius: style.radius,
		animation: animationStyle.animation,
		animationDelay: animationStyle.animationDelay,
		animationDuration: animationStyle.animationDuration,
		animationIterationCount:animationStyle.animationIterationCount
		}}>
		<div
		style={{
Expand DownExpand Up		@@ -413,8 +420,12 @@ let CommentBasicComp = (function () {
		{children.placeholder.propertyView({
		label: trans("comment.placeholderDec"),
		})}
		</Section><Section name={sectionNames.style}>
		</Section>
		<Section name={sectionNames.style}>
		{children.style.getPropertyView()}
		</Section>
		<Section name={sectionNames.animationStyle}>
		{children.animationStyle.getPropertyView()}
		</Section></>
		)}

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -13,7 +13,7 @@ import { useContext, useEffect, useRef, useState } from "react";
		import { EditorContext } from "comps/editorState";
		import { Card } from "antd";
		import styled from "styled-components";
		import { CardHeaderStyle, CardHeaderStyleType, CardStyle, CardStyleType } from "comps/controls/styleControlConstants";
		import {AnimationStyle, AnimationStyleType,CardHeaderStyle, CardHeaderStyleType, CardStyle, CardStyleType } from "comps/controls/styleControlConstants";
		import { MultiCompBuilder, withDefault } from "comps/generators";
		import { IconControl } from "comps/controls/iconControl";
		import { ButtonEventHandlerControl, CardEventHandlerControl, clickEvent, refreshEvent } from "comps/controls/eventHandlerControl";
Expand All		@@ -22,7 +22,14 @@ import { dropdownControl } from "comps/controls/dropdownControl";
		import { styleControl } from "comps/controls/styleControl";
		const { Meta } = Card;

		const Warpper = styled.div<{ $style: CardStyleType \| undefined, $showMate: boolean, $cardType: string, $headerStyle:CardHeaderStyleType, $bodyStyle:CardHeaderStyleType }>`
		const Warpper = styled.div<{
		$style: CardStyleType \| undefined;
		$showMate: boolean;
		$cardType: string;
		$headerStyle: CardHeaderStyleType;
		$bodyStyle: CardHeaderStyleType;
		$animationStyle:AnimationStyleType;
		}>`
		height: 100%;
		width: 100%;
		.ant-card-small >.ant-card-head {
Expand DownExpand Up		@@ -70,6 +77,7 @@ const Warpper = styled.div<{ $style: CardStyleType \| undefined, $showMate: boole
		border-style: ${props => props.$style?.borderStyle};
		border-radius: ${props => props.$style?.radius};
		border-width: ${props => props.$style?.borderWidth};
		${props=>props.$animationStyle}
		}
		.ant-card-body {
		display: ${props => props.$showMate ? '' : 'none'};
Expand DownExpand Up		@@ -173,6 +181,7 @@ export const ContainerBaseComp = (function () {
		style: styleControl(CardStyle),
		headerStyle: styleControl(CardHeaderStyle),
		bodyStyle: styleControl(CardHeaderStyle),
		animationStyle: styleControl(AnimationStyle),
		};

		return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
Expand DownExpand Up		@@ -202,6 +211,7 @@ export const ContainerBaseComp = (function () {
		<Warpper
		ref={conRef}
		$style={props.style}
		$animationStyle={props.animationStyle}
		$headerStyle={props.headerStyle}
		$bodyStyle={props.bodyStyle}
		$showMate={props.showMeta \|\| props.cardType == 'custom'}
Expand DownExpand Up		@@ -321,6 +331,9 @@ export const ContainerBaseComp = (function () {
		<Section name={sectionNames.bodyStyle}>
		{children.bodyStyle.getPropertyView()}
		</Section>
		<Section name={sectionNames.animationStyle}>
		{children.animationStyle.getPropertyView()}
		</Section>
		</>
		)}
		</>
Expand Down