rotation improved

Author: MenamAfzal

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

@@ -78,6 +78,7 @@ const Wrapper = styled.div<{
     border-style: ${props => props.$style?.borderStyle};
     border-radius: ${props => props.$style?.radius};
     border-width: ${props => props.$style?.borderWidth};
+    box-shadow: ${props=>`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
     ${props=>props.$animationStyle}
   }
   .ant-card-body {

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

@@ -20,7 +20,7 @@ import { TriContainer } from "../triContainerComp/triFloatTextContainer";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { withDefault } from "comps/generators/simpleGenerators";
 import { styleControl } from "comps/controls/styleControl";
-import { AnimationStyle, TextStyle } from "comps/controls/styleControlConstants";
+import { AnimationStyle, TextContainerStyle } from "comps/controls/styleControlConstants";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { alignWithJustifyControl } from "comps/controls/alignControl";
@@ -62,7 +62,7 @@ export const ContainerBaseComp = (function () {
     float: dropdownControl(floatOptions, "left"),
     horizontalAlignment: alignWithJustifyControl(),
     width: withDefault(StringControl, "40"),
-    style: styleControl(TextStyle),
+    style: styleControl(TextContainerStyle),
     animationStyle: styleControl(AnimationStyle),
   };
   return new ContainerCompBuilder(childrenMap, (props, dispatch) => {

client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx

@@ -91,7 +91,7 @@ const childrenMap = {
   autoHeight: AutoHeightControl,
   rowBreak: withDefault(BoolControl, false),
   matchColumnsHeight: withDefault(BoolControl, true),
-  rowStyle: withDefault(styleControl(ResponsiveLayoutRowStyle), {}),
+  style: withDefault(styleControl(ResponsiveLayoutRowStyle), {}),
   columnStyle: withDefault(styleControl(ResponsiveLayoutColStyle), {}),
   animationStyle:styleControl(AnimationStyle),
   columnPerRowLG: withDefault(NumberControl, 4),
@@ -127,7 +127,7 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
     dispatch,
     rowBreak,
     matchColumnsHeight,
-    rowStyle,
+    style,
     columnStyle,
     columnPerRowLG,
     columnPerRowMD,
@@ -138,11 +138,11 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
   } = props;
 
   return (
-    <BackgroundColorContext.Provider value={props.rowStyle.background}>
+    <BackgroundColorContext.Provider value={props.style.background}>
       <DisabledContext.Provider value={props.disabled}>
-        <div style={{padding: rowStyle.margin, height: '100%'}}>
+        <div style={{padding: style.margin, height: '100%'}}>
           <RowWrapper
-            $style={rowStyle}
+            $style={style}
             $animationStyle={animationStyle}
             wrap={rowBreak}
             gutter={[horizontalSpacing, verticalSpacing]}
@@ -247,7 +247,7 @@ export const ResponsiveLayoutBaseComp = (function () {
               })}
             </Section>
             <Section name={trans("responsiveLayout.rowStyle")}>
-              {children.rowStyle.getPropertyView()}
+              {children.style.getPropertyView()}
             </Section>
             <Section name={trans("responsiveLayout.columnStyle")}>
               {children.columnStyle.getPropertyView()}

client/packages/lowcoder/src/comps/comps/textComp.tsx

@@ -10,7 +10,7 @@ import { UICompBuilder } from "../generators";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
 import { markdownCompCss, TacoMarkDown } from "lowcoder-design";
 import { styleControl } from "comps/controls/styleControl";
-import { AnimationStyle, AnimationStyleType, TextStyle, TextStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import { AnimationStyle, AnimationStyleType, TextContainerStyle, TextContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { alignWithJustifyControl } from "comps/controls/alignControl";
@@ -21,7 +21,7 @@ import { PaddingControl } from "../controls/paddingControl";
 import React, { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 
-const getStyle = (style: TextStyleType) => {
+const getStyle = (style: TextContainerStyleType) => {
   return css`
     border-radius: ${(style.radius ? style.radius : "4px")};
     border: ${(style.borderWidth ? style.borderWidth : "0px")} solid ${style.border};
@@ -74,7 +74,7 @@ const getStyle = (style: TextStyleType) => {
 
 const TextContainer = styled.div<{
   $type: string;
-  $styleConfig: TextStyleType;
+  $styleConfig: TextContainerStyleType;
   $animationStyle:AnimationStyleType;
 }>`
   height: 100%;
@@ -130,7 +130,7 @@ let TextTmpComp = (function () {
     type: dropdownControl(typeOptions, "markdown"),
     horizontalAlignment: alignWithJustifyControl(),
     verticalAlignment: dropdownControl(VerticalAlignmentOptions, "center"),
-    style: styleControl(TextStyle),
+    style: styleControl(TextContainerStyle),
     animationStyle: styleControl(AnimationStyle),
     margin: MarginControl,
     padding: PaddingControl,
@@ -146,7 +146,6 @@ let TextTmpComp = (function () {
           justifyContent: props.horizontalAlignment,
           alignItems: props.autoHeight ? "center" : props.verticalAlignment,
           textAlign: props.horizontalAlignment,
-          rotate: props.style.rotation
         }}
       >
         {props.type === "markdown" ? <TacoMarkDown>{value}</TacoMarkDown> : value}

client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx

@@ -1,5 +1,5 @@
 import {
-  TextStyleType,
+  TextContainerStyleType,
   ContainerStyleType,
   heightCalculator,
   widthCalculator,
@@ -17,12 +17,11 @@ import {
 } from "../containerComp/containerView";
 import { TriContainerViewProps } from "../triContainerComp/triContainerCompBuilder";
 
-const getStyle = (style: TextStyleType) => {
+const getStyle = (style: TextContainerStyleType) => {
   return css`
     border-radius: ${(style.radius ? style.radius : "4px")};
     border: ${(style.borderWidth ? style.borderWidth : "0px")} solid ${style.border};
     color: ${style.text};
-    rotate: ${style.rotation&&style.rotation};
     font-size: ${style.textSize} !important;
     font-weight: ${style.textWeight} !important;
     font-family: ${style.fontFamily} !important;
@@ -89,7 +88,7 @@ ${props=>props.$animationStyle&&props.$animationStyle}
   ${(props) => props.$style.backgroundImageOrigin && `background-origin: ${props.$style.backgroundImageOrigin};`}
 `;
 
-const FloatTextWrapper = styled.div<{ $style: TextStyleType, $horizontalAlignment : any }>`
+const FloatTextWrapper = styled.div<{ $style: TextContainerStyleType, $horizontalAlignment : any }>`
   ${(props) => props.$style && getStyle(props.$style)}
   text-align: ${(props) => props.$horizontalAlignment};
   padding: ${(props) => props.$style.padding};
@@ -146,7 +145,7 @@ export type TriContainerProps = TriContainerViewProps & {
   type: string;
   float: string;
   width: string;
-  style: TextStyleType;
+  style: TextContainerStyleType;
   horizontalAlignment: string;
   animationStyle?: AnimationStyleType;
 };

client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

@@ -812,6 +812,24 @@ export const TextStyle = [
   },
 ] as const;
 
+export const TextContainerStyle = [
+  {
+    name: "background",
+    label: trans("style.background"),
+    depTheme: "canvas",
+    depType: DEP_TYPE.SELF,
+    transformer: toSelf,
+  },
+  ...STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'),
+  {
+    name: "links",
+    label: trans("style.links"),
+    depTheme: "primary",
+    depType: DEP_TYPE.SELF,
+    transformer: toSelf,
+  },
+] as const;
+
 export const MarginStyle = [
   {
     name: "margin",
@@ -1946,6 +1964,7 @@ export type ColorPickerStyleType = StyleConfigType<typeof ColorPickerStyle>;
 export type ButtonStyleType = StyleConfigType<typeof ButtonStyle>;
 export type ToggleButtonStyleType = StyleConfigType<typeof ToggleButtonStyle>;
 export type TextStyleType = StyleConfigType<typeof TextStyle>;
+export type TextContainerStyleType = StyleConfigType<typeof TextContainerStyle>;
 export type ContainerStyleType = StyleConfigType<typeof ContainerStyle>;
 export type ContainerHeaderStyleType = StyleConfigType<
   typeof ContainerHeaderStyle

client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx

@@ -249,8 +249,10 @@ function UIView(props: {
   let defaultChildren = comp.children;
   const isNotContainer = defaultChildren.hasOwnProperty('style');
   let rotationVal = null
+  let boxShadowVal = null;
   if (isNotContainer) {
-    rotationVal = defaultChildren.style.children.rotation.valueAndMsg.value;
+    rotationVal = defaultChildren.style.children?.rotation?.valueAndMsg.value;
+    boxShadowVal = defaultChildren.style?.children?.boxShadow?.valueAndMsg?.value;
   }
   return (
     <div
@@ -262,11 +264,16 @@ function UIView(props: {
         height: '100%',
         margin: '0px',
         padding:
-          rotationVal === null
+          rotationVal === null || rotationVal === undefined
             ? '0px'
-            : rotationVal === '' || rotationVal === '0deg'
-              ? '0px'
-              : '50% 0px',
+            : boxShadowVal === null || boxShadowVal === undefined
+              ? rotationVal === '' || rotationVal === '0deg'
+                ? '0px'
+                : '50% 0px'
+              : (rotationVal === '' || rotationVal === '0deg') &&
+                  (boxShadowVal === '' || boxShadowVal === '0px')
+                ? '0px'
+                : '50% 0px',
       }}
     >
       <HidableView hidden={childrenProps.hidden as boolean}>