Skip to content

Commit 3cedced

Browse files
MenamAfzalMenamAfzal
committed
rotation improved
1 parent 7b1215d commit 3cedced

File tree

7 files changed

+48
-23
lines changed

7 files changed

+48
-23
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ const Wrapper = styled.div<{
7878
border-style: ${props => props.$style?.borderStyle};
7979
border-radius: ${props => props.$style?.radius};
8080
border-width: ${props => props.$style?.borderWidth};
81+
box-shadow: ${props=>`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
8182
${props=>props.$animationStyle}
8283
}
8384
.ant-card-body {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { TriContainer } from "../triContainerComp/triFloatTextContainer";
2020
import { dropdownControl } from "comps/controls/dropdownControl";
2121
import { withDefault } from "comps/generators/simpleGenerators";
2222
import { styleControl } from "comps/controls/styleControl";
23-
import { AnimationStyle, TextStyle } from "comps/controls/styleControlConstants";
23+
import { AnimationStyle, TextContainerStyle } from "comps/controls/styleControlConstants";
2424
import { useContext } from "react";
2525
import { EditorContext } from "comps/editorState";
2626
import { alignWithJustifyControl } from "comps/controls/alignControl";
@@ -62,7 +62,7 @@ export const ContainerBaseComp = (function () {
6262
float: dropdownControl(floatOptions, "left"),
6363
horizontalAlignment: alignWithJustifyControl(),
6464
width: withDefault(StringControl, "40"),
65-
style: styleControl(TextStyle),
65+
style: styleControl(TextContainerStyle),
6666
animationStyle: styleControl(AnimationStyle),
6767
};
6868
return new ContainerCompBuilder(childrenMap, (props, dispatch) => {

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ const childrenMap = {
9191
autoHeight: AutoHeightControl,
9292
rowBreak: withDefault(BoolControl, false),
9393
matchColumnsHeight: withDefault(BoolControl, true),
94-
rowStyle: withDefault(styleControl(ResponsiveLayoutRowStyle), {}),
94+
style: withDefault(styleControl(ResponsiveLayoutRowStyle), {}),
9595
columnStyle: withDefault(styleControl(ResponsiveLayoutColStyle), {}),
9696
animationStyle:styleControl(AnimationStyle),
9797
columnPerRowLG: withDefault(NumberControl, 4),
@@ -127,7 +127,7 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
127127
dispatch,
128128
rowBreak,
129129
matchColumnsHeight,
130-
rowStyle,
130+
style,
131131
columnStyle,
132132
columnPerRowLG,
133133
columnPerRowMD,
@@ -138,11 +138,11 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
138138
} = props;
139139

140140
return (
141-
<BackgroundColorContext.Provider value={props.rowStyle.background}>
141+
<BackgroundColorContext.Provider value={props.style.background}>
142142
<DisabledContext.Provider value={props.disabled}>
143-
<div style={{padding: rowStyle.margin, height: '100%'}}>
143+
<div style={{padding: style.margin, height: '100%'}}>
144144
<RowWrapper
145-
$style={rowStyle}
145+
$style={style}
146146
$animationStyle={animationStyle}
147147
wrap={rowBreak}
148148
gutter={[horizontalSpacing, verticalSpacing]}
@@ -247,7 +247,7 @@ export const ResponsiveLayoutBaseComp = (function () {
247247
})}
248248
</Section>
249249
<Section name={trans("responsiveLayout.rowStyle")}>
250-
{children.rowStyle.getPropertyView()}
250+
{children.style.getPropertyView()}
251251
</Section>
252252
<Section name={trans("responsiveLayout.columnStyle")}>
253253
{children.columnStyle.getPropertyView()}

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { UICompBuilder } from "../generators";
1010
import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
1111
import { markdownCompCss, TacoMarkDown } from "lowcoder-design";
1212
import { styleControl } from "comps/controls/styleControl";
13-
import { AnimationStyle, AnimationStyleType, TextStyle, TextStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
13+
import { AnimationStyle, AnimationStyleType, TextContainerStyle, TextContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
1414
import { hiddenPropertyView } from "comps/utils/propertyUtils";
1515
import { trans } from "i18n";
1616
import { alignWithJustifyControl } from "comps/controls/alignControl";
@@ -21,7 +21,7 @@ import { PaddingControl } from "../controls/paddingControl";
2121
import React, { useContext } from "react";
2222
import { EditorContext } from "comps/editorState";
2323

24-
const getStyle = (style: TextStyleType) => {
24+
const getStyle = (style: TextContainerStyleType) => {
2525
return css`
2626
border-radius: ${(style.radius ? style.radius : "4px")};
2727
border: ${(style.borderWidth ? style.borderWidth : "0px")} solid ${style.border};
@@ -74,7 +74,7 @@ const getStyle = (style: TextStyleType) => {
7474

7575
const TextContainer = styled.div<{
7676
$type: string;
77-
$styleConfig: TextStyleType;
77+
$styleConfig: TextContainerStyleType;
7878
$animationStyle:AnimationStyleType;
7979
}>`
8080
height: 100%;
@@ -130,7 +130,7 @@ let TextTmpComp = (function () {
130130
type: dropdownControl(typeOptions, "markdown"),
131131
horizontalAlignment: alignWithJustifyControl(),
132132
verticalAlignment: dropdownControl(VerticalAlignmentOptions, "center"),
133-
style: styleControl(TextStyle),
133+
style: styleControl(TextContainerStyle),
134134
animationStyle: styleControl(AnimationStyle),
135135
margin: MarginControl,
136136
padding: PaddingControl,
@@ -146,7 +146,6 @@ let TextTmpComp = (function () {
146146
justifyContent: props.horizontalAlignment,
147147
alignItems: props.autoHeight ? "center" : props.verticalAlignment,
148148
textAlign: props.horizontalAlignment,
149-
rotate: props.style.rotation
150149
}}
151150
>
152151
{props.type === "markdown" ? <TacoMarkDown>{value}</TacoMarkDown> : value}

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {
2-
TextStyleType,
2+
TextContainerStyleType,
33
ContainerStyleType,
44
heightCalculator,
55
widthCalculator,
@@ -17,12 +17,11 @@ import {
1717
} from "../containerComp/containerView";
1818
import { TriContainerViewProps } from "../triContainerComp/triContainerCompBuilder";
1919

20-
const getStyle = (style: TextStyleType) => {
20+
const getStyle = (style: TextContainerStyleType) => {
2121
return css`
2222
border-radius: ${(style.radius ? style.radius : "4px")};
2323
border: ${(style.borderWidth ? style.borderWidth : "0px")} solid ${style.border};
2424
color: ${style.text};
25-
rotate: ${style.rotation&&style.rotation};
2625
font-size: ${style.textSize} !important;
2726
font-weight: ${style.textWeight} !important;
2827
font-family: ${style.fontFamily} !important;
@@ -89,7 +88,7 @@ ${props=>props.$animationStyle&&props.$animationStyle}
8988
${(props) => props.$style.backgroundImageOrigin && `background-origin: ${props.$style.backgroundImageOrigin};`}
9089
`;
9190

92-
const FloatTextWrapper = styled.div<{ $style: TextStyleType, $horizontalAlignment : any }>`
91+
const FloatTextWrapper = styled.div<{ $style: TextContainerStyleType, $horizontalAlignment : any }>`
9392
${(props) => props.$style && getStyle(props.$style)}
9493
text-align: ${(props) => props.$horizontalAlignment};
9594
padding: ${(props) => props.$style.padding};
@@ -146,7 +145,7 @@ export type TriContainerProps = TriContainerViewProps & {
146145
type: string;
147146
float: string;
148147
width: string;
149-
style: TextStyleType;
148+
style: TextContainerStyleType;
150149
horizontalAlignment: string;
151150
animationStyle?: AnimationStyleType;
152151
};

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -812,6 +812,24 @@ export const TextStyle = [
812812
},
813813
] as const;
814814

815+
export const TextContainerStyle = [
816+
{
817+
name: "background",
818+
label: trans("style.background"),
819+
depTheme: "canvas",
820+
depType: DEP_TYPE.SELF,
821+
transformer: toSelf,
822+
},
823+
...STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'),
824+
{
825+
name: "links",
826+
label: trans("style.links"),
827+
depTheme: "primary",
828+
depType: DEP_TYPE.SELF,
829+
transformer: toSelf,
830+
},
831+
] as const;
832+
815833
export const MarginStyle = [
816834
{
817835
name: "margin",
@@ -1946,6 +1964,7 @@ export type ColorPickerStyleType = StyleConfigType<typeof ColorPickerStyle>;
19461964
export type ButtonStyleType = StyleConfigType<typeof ButtonStyle>;
19471965
export type ToggleButtonStyleType = StyleConfigType<typeof ToggleButtonStyle>;
19481966
export type TextStyleType = StyleConfigType<typeof TextStyle>;
1967+
export type TextContainerStyleType = StyleConfigType<typeof TextContainerStyle>;
19491968
export type ContainerStyleType = StyleConfigType<typeof ContainerStyle>;
19501969
export type ContainerHeaderStyleType = StyleConfigType<
19511970
typeof ContainerHeaderStyle

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

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -249,8 +249,10 @@ function UIView(props: {
249249
let defaultChildren = comp.children;
250250
const isNotContainer = defaultChildren.hasOwnProperty('style');
251251
let rotationVal = null
252+
let boxShadowVal = null;
252253
if (isNotContainer) {
253-
rotationVal = defaultChildren.style.children.rotation.valueAndMsg.value;
254+
rotationVal = defaultChildren.style.children?.rotation?.valueAndMsg.value;
255+
boxShadowVal = defaultChildren.style?.children?.boxShadow?.valueAndMsg?.value;
254256
}
255257
return (
256258
<div
@@ -262,11 +264,16 @@ function UIView(props: {
262264
height: '100%',
263265
margin: '0px',
264266
padding:
265-
rotationVal === null
267+
rotationVal === null || rotationVal === undefined
266268
? '0px'
267-
: rotationVal === '' || rotationVal === '0deg'
268-
? '0px'
269-
: '50% 0px',
269+
: boxShadowVal === null || boxShadowVal === undefined
270+
? rotationVal === '' || rotationVal === '0deg'
271+
? '0px'
272+
: '50% 0px'
273+
: (rotationVal === '' || rotationVal === '0deg') &&
274+
(boxShadowVal === '' || boxShadowVal === '0px')
275+
? '0px'
276+
: '50% 0px',
270277
}}
271278
>
272279
<HidableView hidden={childrenProps.hidden as boolean}>

0 commit comments

Comments
 (0)