Skip to content

Commit 00b88ef

Browse files
raheeliftikhar5raheeliftikhar5
authored
Merge pull request #926 from MenamAfzal/fix/padding-condition
Fix/padding condition
2 parents b9c42b5 + e3a4fb7 commit 00b88ef

File tree

5 files changed

+76
-52
lines changed

5 files changed

+76
-52
lines changed

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConst
1111
import { PositionControl } from "comps/controls/dropdownControl";
1212
import { useRef, useState } from "react";
1313
import ReactResizeDetector from "react-resize-detector";
14-
import { ArrayStringControl, StringControl } from "comps/controls/codeControl";
14+
import { ArrayStringControl } from "comps/controls/codeControl";
1515
import { styleControl } from "comps/controls/styleControl";
1616
import { AnimationStyle, AnimationStyleType, CarouselStyle } from "comps/controls/styleControlConstants";
1717

@@ -25,12 +25,11 @@ const CarouselItem = styled.div<{ $src: string }>`
2525
background-size: contain;
2626
`;
2727

28-
const Container = styled.div<{$bg: string; $rotation: string; $animationStyle:AnimationStyleType}>`
28+
const Container = styled.div<{$bg: string; $animationStyle:AnimationStyleType}>`
2929
&,
3030
.ant-carousel {
3131
height: 100%;
3232
background-color: ${(props) => props.$bg};
33-
rotate: ${(props) => props.$rotation};
3433
${props=>props.$animationStyle}
3534
}
3635
`;
@@ -47,7 +46,6 @@ let CarouselBasicComp = (function () {
4746
dotPosition: withDefault(PositionControl, "bottom"),
4847
style: styleControl(CarouselStyle),
4948
animationStyle: styleControl(AnimationStyle),
50-
restrictPaddingOnRotation:withDefault(StringControl, 'imageCarousel'),
5149
...formDataChildren,
5250
};
5351
return new UICompBuilder(childrenMap, (props) => {
@@ -62,7 +60,6 @@ let CarouselBasicComp = (function () {
6260
<Container
6361
ref={containerRef}
6462
$bg={props.style.background}
65-
$rotation={props.style.rotation}
6663
$animationStyle={props.animationStyle}
6764
>
6865
<ReactResizeDetector onResize={onResize}>

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { DocumentViewer } from "react-documents";
66
import styled, { css } from "styled-components";
77
import { Section, sectionNames } from "lowcoder-design";
88
import { StringControl } from "../controls/codeControl";
9-
import { UICompBuilder, withDefault } from "../generators";
9+
import { UICompBuilder } from "../generators";
1010
import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
1111
import { hiddenPropertyView } from "comps/utils/propertyUtils";
1212
import { trans } from "i18n";
@@ -20,7 +20,6 @@ const getStyle = (style: FileViewerStyleType) => {
2020
height: ${heightCalculator(style.margin)};
2121
margin: ${style.margin};
2222
padding: ${style.padding};
23-
rotate: ${style.rotation};
2423
2524
overflow: hidden;
2625
background-color: ${style.background};
@@ -70,7 +69,6 @@ let FileViewerBasicComp = (function () {
7069
src: StringControl,
7170
style: styleControl(FileViewerStyle),
7271
animationStyle: styleControl(AnimationStyle),
73-
restrictPaddingOnRotation: withDefault(StringControl, 'fileViewer'),
7472
};
7573
return new UICompBuilder(childrenMap, (props) => {
7674
if (isEmpty(props.src)) {

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

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,15 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "../../generat
66
import { RecordConstructorToView } from "lowcoder-core";
77
import { useRef, useState } from "react";
88
import { styleControl } from "comps/controls/styleControl";
9-
import { AnimationStyle, AnimationStyleType, AudioStyle, ImageStyle, ImageStyleType } from "comps/controls/styleControlConstants";
9+
import {
10+
AnimationStyle,
11+
AnimationStyleType,
12+
VideoStyle,
13+
} from 'comps/controls/styleControlConstants';
1014
import { BoolControl } from "comps/controls/boolControl";
1115
import { withDefault } from "../../generators/simpleGenerators";
1216
import { playIcon } from "lowcoder-design";
13-
import { RangeControl, StringControl } from "../../controls/codeControl";
17+
import { RangeControl } from "../../controls/codeControl";
1418
import { hiddenPropertyView } from "comps/utils/propertyUtils";
1519
import { trans } from "i18n";
1620
import { Video } from "lowcoder-design";
@@ -108,19 +112,18 @@ const ContainerVideo = (props: RecordConstructorToView<typeof childrenMap>) => {
108112
};
109113

110114
const childrenMap = {
111-
src: withDefault(StringStateControl, trans("video.defaultSrcUrl")),
112-
poster: withDefault(StringStateControl, trans("video.defaultPosterUrl")),
115+
src: withDefault(StringStateControl, trans('video.defaultSrcUrl')),
116+
poster: withDefault(StringStateControl, trans('video.defaultPosterUrl')),
113117
onEvent: eventHandlerControl(EventOptions),
114-
style: styleControl(AudioStyle),
118+
style: styleControl(VideoStyle),
115119
animationStyle: styleControl(AnimationStyle),
116120
autoPlay: BoolControl,
117121
loop: BoolControl,
118122
controls: BoolControl,
119123
volume: RangeControl.closed(0, 1, 1),
120124
playbackRate: RangeControl.closed(1, 2, 1),
121-
currentTimeStamp: numberExposingStateControl("currentTimeStamp", 0),
122-
duration: numberExposingStateControl("duration"),
123-
restrictPaddingOnRotation:withDefault(StringControl, 'video'),
125+
currentTimeStamp: numberExposingStateControl('currentTimeStamp', 0),
126+
duration: numberExposingStateControl('duration'),
124127
...mediaCommonChildren,
125128
};
126129

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1556,7 +1556,6 @@ export const FileViewerStyle = [
15561556
MARGIN,
15571557
PADDING,
15581558
BORDER_WIDTH,
1559-
ROTATION
15601559
] as const;
15611560

15621561
export const IframeStyle = [
@@ -1691,6 +1690,8 @@ export const AudioStyle = [
16911690
ROTATION,
16921691
] as const;
16931692

1693+
export const VideoStyle = [MARGIN, PADDING] as const;
1694+
16941695
export const IconStyle = [
16951696
getStaticBackground("#00000000"),
16961697
getStaticBorder("#00000000"),
@@ -1930,7 +1931,7 @@ export const NavLayoutItemActiveStyle = [
19301931
},
19311932
] as const;
19321933

1933-
export const CarouselStyle = [getBackground("canvas"),ROTATION] as const;
1934+
export const CarouselStyle = [getBackground("canvas")] as const;
19341935

19351936
export const RichTextEditorStyle = [
19361937
getStaticBorder(),
@@ -2012,6 +2013,7 @@ export type CircleProgressType = StyleConfigType<typeof CircleProgressStyle>;
20122013
export type NavigationStyleType = StyleConfigType<typeof NavigationStyle>;
20132014
export type ImageStyleType = StyleConfigType<typeof ImageStyle>;
20142015
export type AudioStyleType = StyleConfigType<typeof AudioStyle>;
2016+
export type VideoStyleType = StyleConfigType<typeof VideoStyle>;
20152017
export type IconStyleType = StyleConfigType<typeof IconStyle>;
20162018
export type ListViewStyleType = StyleConfigType<typeof ListViewStyle>;
20172019
export type JsonSchemaFormStyleType = StyleConfigType<

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

Lines changed: 58 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -257,40 +257,64 @@ function UIView(props: {
257257
boxShadowVal = defaultChildren.style?.children?.boxShadow?.valueAndMsg?.value;
258258
restrictPaddingOnRotationVal = defaultChildren?.restrictPaddingOnRotation?.valueAndMsg?.value;
259259
}
260-
const getPadding = () =>(rotationVal === null ||
261-
rotationVal === undefined ||
262-
restrictPaddingOnRotation) &&
263-
(boxShadowVal === null ||
264-
boxShadowVal === undefined ||
265-
boxShadowVal === '0px')
266-
? restrictPaddingOnRotationVal === 'qrCode'
267-
? rotationVal !== '' && rotationVal !== '0deg'?'35% 0px':'0px'
268-
: restrictPaddingOnRotationVal === 'image'
269-
? rotationVal !== '' && rotationVal !== '0deg'?'10% 0px':'0px'
270-
: restrictPaddingOnRotationVal === 'imageCarousel'
271-
? rotationVal !== '' && rotationVal !== '0deg'?'35% 0px':'0px'
272-
: restrictPaddingOnRotationVal === 'fileViewer'
273-
? rotationVal !== '' && rotationVal !== '0deg'?'65% 0px':'0px'
274-
: restrictPaddingOnRotationVal === 'controlButton'
275-
? rotationVal !== '' && rotationVal !== '0deg'?'10% 0px':'0px'
276-
: restrictPaddingOnRotationVal === 'video'
277-
? rotationVal !== '' && rotationVal !== '0deg'?'26% 0px':'0px'
278-
: '0px' // Both rotation and box-shadow are empty or restricted
279-
: rotationVal !== '' && rotationVal !== '0deg' // Rotation applied
280-
? boxShadowVal === null ||
281-
boxShadowVal === undefined ||
282-
boxShadowVal === '0px'
283-
? `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '')) / 90} * 100%)) 0px`
284-
: boxShadowVal !== '' && boxShadowVal !== '0px' // Both rotation and box-shadow applied
285-
? `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '') + parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`
286-
: `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '')) / 90} * 100%)) 0px` // Only rotation applied
287-
: boxShadowVal === null ||
288-
boxShadowVal === undefined ||
289-
boxShadowVal === '0px'
290-
? '0px'
291-
: boxShadowVal !== '' && boxShadowVal !== '0px' // Box-shadow applied
292-
? `calc(min(50%, ${Math.abs(parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`
293-
: '0px' // Default value if neither rotation nor box-shadow is applied
260+
const getPadding = () => {
261+
if (
262+
(rotationVal === null ||
263+
rotationVal === undefined ||
264+
restrictPaddingOnRotation) &&
265+
(boxShadowVal === null ||
266+
boxShadowVal === undefined ||
267+
boxShadowVal === '0px')
268+
) {
269+
if (restrictPaddingOnRotationVal === 'qrCode') {
270+
if (rotationVal !== '' && rotationVal !== '0deg') {
271+
return '35% 0px';
272+
} else {
273+
return '0px';
274+
}
275+
} else if (restrictPaddingOnRotationVal === 'image') {
276+
if (rotationVal !== '' && rotationVal !== '0deg') {
277+
return '10% 0px';
278+
} else {
279+
return '0px';
280+
}
281+
} else if (restrictPaddingOnRotationVal === 'controlButton') {
282+
if (rotationVal !== '' && rotationVal !== '0deg') {
283+
return '10% 0px';
284+
} else {
285+
return '0px';
286+
}
287+
} else {
288+
return '0px'; // Both rotation and box-shadow are empty or restricted
289+
}
290+
} else if (rotationVal !== '' && rotationVal !== '0deg') {
291+
// Rotation applied
292+
if (
293+
boxShadowVal === null ||
294+
boxShadowVal === undefined ||
295+
boxShadowVal === '0px'
296+
) {
297+
return `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '')) / 90} * 100%)) 0px`;
298+
} else if (boxShadowVal !== '' && boxShadowVal !== '0px') {
299+
// Both rotation and box-shadow applied
300+
return `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '') + parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`;
301+
} else {
302+
return `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '')) / 90} * 100%)) 0px`; // Only rotation applied
303+
}
304+
} else if (
305+
boxShadowVal === null ||
306+
boxShadowVal === undefined ||
307+
boxShadowVal === '0px'
308+
) {
309+
return '0px';
310+
} else if (boxShadowVal !== '' && boxShadowVal !== '0px') {
311+
// Box-shadow applied
312+
return `calc(min(50%, ${Math.abs(parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`;
313+
} else {
314+
return '0px'; // Default value if neither rotation nor box-shadow is applied
315+
}
316+
};
317+
294318
return (
295319
<div
296320
ref={props.innerRef}

0 commit comments

Comments
 (0)