Skip to content

Fix/padding condition #926

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 3, 2024
Merged

Fix/padding condition #926

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d3a3a89
rotation removed
MenamAfzal Jun 2, 2024
e3a4fb7
function refactored
MenamAfzal Jun 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 2 additions & 5 deletions client/packages/lowcoder/src/comps/comps/carouselComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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, StringControl } from "comps/controls/codeControl";
import { ArrayStringControl } from "comps/controls/codeControl";
import { styleControl } from "comps/controls/styleControl";
import { AnimationStyle, AnimationStyleType, CarouselStyle } from "comps/controls/styleControlConstants";

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

const Container = styled.div<{$bg: string; $rotation: string; $animationStyle:AnimationStyleType}>`
const Container = styled.div<{$bg: string; $animationStyle:AnimationStyleType}>`
&,
.ant-carousel {
height: 100%;
background-color: ${(props) => props.$bg};
rotate: ${(props) => props.$rotation};
${props=>props.$animationStyle}
}
`;
Expand All @@ -47,7 +46,6 @@ let CarouselBasicComp = (function () {
dotPosition: withDefault(PositionControl, "bottom"),
style: styleControl(CarouselStyle),
animationStyle: styleControl(AnimationStyle),
restrictPaddingOnRotation:withDefault(StringControl, 'imageCarousel'),
...formDataChildren,
};
return new UICompBuilder(childrenMap, (props) => {
Expand All @@ -62,7 +60,6 @@ let CarouselBasicComp = (function () {
<Container
ref={containerRef}
$bg={props.style.background}
$rotation={props.style.rotation}
$animationStyle={props.animationStyle}
>
<ReactResizeDetector onResize={onResize}>
Expand Down
4 changes: 1 addition & 3 deletions client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { DocumentViewer } from "react-documents";
import styled, { css } from "styled-components";
import { Section, sectionNames } from "lowcoder-design";
import { StringControl } from "../controls/codeControl";
import { UICompBuilder, withDefault } from "../generators";
import { UICompBuilder } from "../generators";
import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
import { hiddenPropertyView } from "comps/utils/propertyUtils";
import { trans } from "i18n";
Expand All @@ -20,7 +20,6 @@ const getStyle = (style: FileViewerStyleType) => {
height: ${heightCalculator(style.margin)};
margin: ${style.margin};
padding: ${style.padding};
rotate: ${style.rotation};

overflow: hidden;
background-color: ${style.background};
Expand Down Expand Up @@ -70,7 +69,6 @@ let FileViewerBasicComp = (function () {
src: StringControl,
style: styleControl(FileViewerStyle),
animationStyle: styleControl(AnimationStyle),
restrictPaddingOnRotation: withDefault(StringControl, 'fileViewer'),
};
return new UICompBuilder(childrenMap, (props) => {
if (isEmpty(props.src)) {
Expand Down
19 changes: 11 additions & 8 deletions client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,15 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "../../generat
import { RecordConstructorToView } from "lowcoder-core";
import { useRef, useState } from "react";
import { styleControl } from "comps/controls/styleControl";
import { AnimationStyle, AnimationStyleType, AudioStyle, ImageStyle, ImageStyleType } from "comps/controls/styleControlConstants";
import {
AnimationStyle,
AnimationStyleType,
VideoStyle,
} from 'comps/controls/styleControlConstants';
import { BoolControl } from "comps/controls/boolControl";
import { withDefault } from "../../generators/simpleGenerators";
import { playIcon } from "lowcoder-design";
import { RangeControl, StringControl } from "../../controls/codeControl";
import { RangeControl } from "../../controls/codeControl";
import { hiddenPropertyView } from "comps/utils/propertyUtils";
import { trans } from "i18n";
import { Video } from "lowcoder-design";
Expand Down Expand Up @@ -108,19 +112,18 @@ const ContainerVideo = (props: RecordConstructorToView<typeof childrenMap>) => {
};

const childrenMap = {
src: withDefault(StringStateControl, trans("video.defaultSrcUrl")),
poster: withDefault(StringStateControl, trans("video.defaultPosterUrl")),
src: withDefault(StringStateControl, trans('video.defaultSrcUrl')),
poster: withDefault(StringStateControl, trans('video.defaultPosterUrl')),
onEvent: eventHandlerControl(EventOptions),
style: styleControl(AudioStyle),
style: styleControl(VideoStyle),
animationStyle: styleControl(AnimationStyle),
autoPlay: BoolControl,
loop: BoolControl,
controls: BoolControl,
volume: RangeControl.closed(0, 1, 1),
playbackRate: RangeControl.closed(1, 2, 1),
currentTimeStamp: numberExposingStateControl("currentTimeStamp", 0),
duration: numberExposingStateControl("duration"),
restrictPaddingOnRotation:withDefault(StringControl, 'video'),
currentTimeStamp: numberExposingStateControl('currentTimeStamp', 0),
duration: numberExposingStateControl('duration'),
...mediaCommonChildren,
};

Expand Down
6 changes: 4 additions & 2 deletions client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1556,7 +1556,6 @@ export const FileViewerStyle = [
MARGIN,
PADDING,
BORDER_WIDTH,
ROTATION
] as const;

export const IframeStyle = [
Expand Down Expand Up @@ -1691,6 +1690,8 @@ export const AudioStyle = [
ROTATION,
] as const;

export const VideoStyle = [MARGIN, PADDING] as const;

export const IconStyle = [
getStaticBackground("#00000000"),
getStaticBorder("#00000000"),
Expand Down Expand Up @@ -1930,7 +1931,7 @@ export const NavLayoutItemActiveStyle = [
},
] as const;

export const CarouselStyle = [getBackground("canvas"),ROTATION] as const;
export const CarouselStyle = [getBackground("canvas")] as const;

export const RichTextEditorStyle = [
getStaticBorder(),
Expand Down Expand Up @@ -2012,6 +2013,7 @@ export type CircleProgressType = StyleConfigType<typeof CircleProgressStyle>;
export type NavigationStyleType = StyleConfigType<typeof NavigationStyle>;
export type ImageStyleType = StyleConfigType<typeof ImageStyle>;
export type AudioStyleType = StyleConfigType<typeof AudioStyle>;
export type VideoStyleType = StyleConfigType<typeof VideoStyle>;
export type IconStyleType = StyleConfigType<typeof IconStyle>;
export type ListViewStyleType = StyleConfigType<typeof ListViewStyle>;
export type JsonSchemaFormStyleType = StyleConfigType<
Expand Down
92 changes: 58 additions & 34 deletions client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,40 +257,64 @@ function UIView(props: {
boxShadowVal = defaultChildren.style?.children?.boxShadow?.valueAndMsg?.value;
restrictPaddingOnRotationVal = defaultChildren?.restrictPaddingOnRotation?.valueAndMsg?.value;
}
const getPadding = () =>(rotationVal === null ||
rotationVal === undefined ||
restrictPaddingOnRotation) &&
(boxShadowVal === null ||
boxShadowVal === undefined ||
boxShadowVal === '0px')
? restrictPaddingOnRotationVal === 'qrCode'
? rotationVal !== '' && rotationVal !== '0deg'?'35% 0px':'0px'
: restrictPaddingOnRotationVal === 'image'
? rotationVal !== '' && rotationVal !== '0deg'?'10% 0px':'0px'
: restrictPaddingOnRotationVal === 'imageCarousel'
? rotationVal !== '' && rotationVal !== '0deg'?'35% 0px':'0px'
: restrictPaddingOnRotationVal === 'fileViewer'
? rotationVal !== '' && rotationVal !== '0deg'?'65% 0px':'0px'
: restrictPaddingOnRotationVal === 'controlButton'
? rotationVal !== '' && rotationVal !== '0deg'?'10% 0px':'0px'
: restrictPaddingOnRotationVal === 'video'
? rotationVal !== '' && rotationVal !== '0deg'?'26% 0px':'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
const getPadding = () => {
if (
(rotationVal === null ||
rotationVal === undefined ||
restrictPaddingOnRotation) &&
(boxShadowVal === null ||
boxShadowVal === undefined ||
boxShadowVal === '0px')
) {
if (restrictPaddingOnRotationVal === 'qrCode') {
if (rotationVal !== '' && rotationVal !== '0deg') {
return '35% 0px';
} else {
return '0px';
}
} else if (restrictPaddingOnRotationVal === 'image') {
if (rotationVal !== '' && rotationVal !== '0deg') {
return '10% 0px';
} else {
return '0px';
}
} else if (restrictPaddingOnRotationVal === 'controlButton') {
if (rotationVal !== '' && rotationVal !== '0deg') {
return '10% 0px';
} else {
return '0px';
}
} else {
return '0px'; // Both rotation and box-shadow are empty or restricted
}
} else if (rotationVal !== '' && rotationVal !== '0deg') {
// Rotation applied
if (
boxShadowVal === null ||
boxShadowVal === undefined ||
boxShadowVal === '0px'
) {
return `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '')) / 90} * 100%)) 0px`;
} else if (boxShadowVal !== '' && boxShadowVal !== '0px') {
// Both rotation and box-shadow applied
return `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '') + parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`;
} else {
return `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '')) / 90} * 100%)) 0px`; // Only rotation applied
}
} else if (
boxShadowVal === null ||
boxShadowVal === undefined ||
boxShadowVal === '0px'
) {
return '0px';
} else if (boxShadowVal !== '' && boxShadowVal !== '0px') {
// Box-shadow applied
return `calc(min(50%, ${Math.abs(parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`;
} else {
return '0px'; // Default value if neither rotation nor box-shadow is applied
}
};

return (
<div
ref={props.innerRef}
Expand Down
Loading