condition updated

Author: MenamAfzal

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

@@ -11,7 +11,7 @@ import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConst
 import { PositionControl } from "comps/controls/dropdownControl";
 import { useRef, useState } from "react";
 import ReactResizeDetector from "react-resize-detector";
-import { ArrayStringControl } from "comps/controls/codeControl";
+import { ArrayStringControl, StringControl } from "comps/controls/codeControl";
 import { styleControl } from "comps/controls/styleControl";
 import { AnimationStyle, AnimationStyleType, CarouselStyle } from "comps/controls/styleControlConstants";
 
@@ -47,7 +47,7 @@ let CarouselBasicComp = (function () {
     dotPosition: withDefault(PositionControl, "bottom"),
     style: styleControl(CarouselStyle),
     animationStyle: styleControl(AnimationStyle),
-    restrictPaddingOnRotation:withDefault(BoolControl, true),
+    restrictPaddingOnRotation:withDefault(StringControl, 'imageCarousel'),
     ...formDataChildren,
   };
   return new UICompBuilder(childrenMap, (props) => {

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

@@ -13,7 +13,6 @@ import { trans } from "i18n";
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
-import { BoolControl } from "../controls/boolControl";
 
 const getStyle = (style: FileViewerStyleType) => {
   return css`
@@ -71,7 +70,7 @@ let FileViewerBasicComp = (function () {
     src: StringControl,
     style: styleControl(FileViewerStyle),
     animationStyle: styleControl(AnimationStyle),
-    restrictPaddingOnRotation: withDefault(BoolControl, true),
+    restrictPaddingOnRotation: withDefault(StringControl, 'fileViewer'),
   };
   return new UICompBuilder(childrenMap, (props) => {
     if (isEmpty(props.src)) {

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

@@ -33,6 +33,7 @@ import { DEFAULT_IMG_URL } from "util/stringUtils";
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
+import { StringControl } from "../controls/codeControl";
 
 const Container = styled.div<{ $style: ImageStyleType | undefined,$animationStyle:AnimationStyleType }>`
   height: 100%;
@@ -169,7 +170,7 @@ const childrenMap = {
   animationStyle: styleControl(AnimationStyle),
   autoHeight: withDefault(AutoHeightControl, "fixed"),
   supportPreview: BoolControl,
-  restrictPaddingOnRotation:withDefault(BoolControl, true)
+  restrictPaddingOnRotation:withDefault(StringControl, 'image')
 };
 
 let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {

client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx

@@ -10,7 +10,7 @@ import { AnimationStyle, AnimationStyleType, AudioStyle, ImageStyle, ImageStyleT
 import { BoolControl } from "comps/controls/boolControl";
 import { withDefault } from "../../generators/simpleGenerators";
 import { playIcon } from "lowcoder-design";
-import { RangeControl } from "../../controls/codeControl";
+import { RangeControl, StringControl } from "../../controls/codeControl";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { Video } from "lowcoder-design";
@@ -120,7 +120,7 @@ const childrenMap = {
   playbackRate: RangeControl.closed(1, 2, 1),
   currentTimeStamp: numberExposingStateControl("currentTimeStamp", 0),
   duration: numberExposingStateControl("duration"),
-  restrictPaddingOnRotation:withDefault(BoolControl, true),
+  restrictPaddingOnRotation:withDefault(StringControl, 'video'),
   ...mediaCommonChildren,
 };
 

client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx

@@ -187,7 +187,7 @@ const childrenMap = {
   prefixIcon: IconControl,
   style: ButtonStyleControl,
   viewRef: RefControl<HTMLElement>,
-  restrictPaddingOnRotation:withDefault(BoolControl, true)
+  restrictPaddingOnRotation:withDefault(StringControl, 'controlButton')
 };
 
 let ButtonTmpComp = (function () {

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

@@ -33,7 +33,7 @@ const childrenMap = {
   image: StringControl,
   style: styleControl(QRCodeStyle),
   animationStyle: styleControl(AnimationStyle),
-  restrictPaddingOnRotation: withDefault(BoolControl, true),
+  restrictPaddingOnRotation: withDefault(StringControl, 'qrCode'),
 };
 
 const QRCodeView = (props: RecordConstructorToView<typeof childrenMap>) => {

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

@@ -251,9 +251,11 @@ function UIView(props: {
   const restrictPaddingOnRotation = defaultChildren.hasOwnProperty('restrictPaddingOnRotation');
   let rotationVal = null
   let boxShadowVal = null;
+  let restrictPaddingOnRotationVal=null;
   if (isNotContainer) {
     rotationVal = defaultChildren.style.children?.rotation?.valueAndMsg.value;
     boxShadowVal = defaultChildren.style?.children?.boxShadow?.valueAndMsg?.value;
+    restrictPaddingOnRotationVal = defaultChildren?.restrictPaddingOnRotation?.valueAndMsg?.value;
   }
   return (
     <div
@@ -264,17 +266,41 @@ function UIView(props: {
         width: '100%',
         height: '100%',
         margin: '0px',
-        padding: (
-          (rotationVal === null || rotationVal === undefined || restrictPaddingOnRotation) &&
-          (boxShadowVal === null || boxShadowVal === undefined || boxShadowVal === '0px')
-        ) ? '0px' // Both rotation and box-shadow are empty or restricted
-          : rotationVal !== '' && rotationVal !== '0deg' // Rotation applied
-            ? (boxShadowVal === null || boxShadowVal === undefined || boxShadowVal === '0px')?`calc(min(50%, ${Math.abs(rotationVal.replace('deg', '')) / 90} * 100%)) 0px`:(boxShadowVal !== '' && boxShadowVal !== '0px') // Both rotation and box-shadow applied
-              ? `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '') + parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`
-            : `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '')) / 90} * 100%)) 0px` // Only rotation applied
-          : (boxShadowVal === null || boxShadowVal === undefined || boxShadowVal === '0px')?'0px':(boxShadowVal !== '' && boxShadowVal !== '0px') // Box-shadow applied
-          ? `calc(min(50%, ${Math.abs(parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`
-          : '0px' // Default value if neither rotation nor box-shadow is applied
+        padding:
+          (rotationVal === null ||
+            rotationVal === undefined ||
+            restrictPaddingOnRotation) &&
+          (boxShadowVal === null ||
+            boxShadowVal === undefined ||
+            boxShadowVal === '0px')
+            ? restrictPaddingOnRotationVal === 'qrCode'
+              ? '50% 0px'
+              : restrictPaddingOnRotationVal === 'image'
+                ? '10% 0px'
+                : restrictPaddingOnRotationVal === 'imageCarousel'
+                  ? '35% 0px'
+                  : restrictPaddingOnRotationVal === 'fileViewer'
+                    ? '65% 0px'
+                    : restrictPaddingOnRotationVal === 'controlButton'
+                      ? '50% 0px'
+                      : restrictPaddingOnRotationVal === 'video'
+                        ? '26% 0px'
+                        : '0px' // Both rotation and box-shadow are empty or restricted
+            : rotationVal !== '' && rotationVal !== '0deg' // Rotation applied
+              ? boxShadowVal === null ||
+                boxShadowVal === undefined ||
+                boxShadowVal === '0px'
+                ? `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '')) / 90} * 100%)) 0px`
+                : boxShadowVal !== '' && boxShadowVal !== '0px' // Both rotation and box-shadow applied
+                  ? `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '') + parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`
+                  : `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '')) / 90} * 100%)) 0px` // Only rotation applied
+              : boxShadowVal === null ||
+                  boxShadowVal === undefined ||
+                  boxShadowVal === '0px'
+                ? '0px'
+                : boxShadowVal !== '' && boxShadowVal !== '0px' // Box-shadow applied
+                  ? `calc(min(50%, ${Math.abs(parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`
+                  : '0px', // Default value if neither rotation nor box-shadow is applied
       }}
     >
       <HidableView hidden={childrenProps.hidden as boolean}>