Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Fix/component wrapper on rotation#919

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.

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

Already on GitHub?Sign in to your account

Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
Show all changes
22 commits
Select commitHold shift + click to select a range
38311f7
container padding updated
MenamAfzalMay 25, 2024
7b1215d
Merge branch 'dev' into fix/component-wrapper-on-rotation
MenamAfzalMay 27, 2024
3cedced
rotation improved
MenamAfzalMay 28, 2024
d766a34
designed formula to calculate padding dynamically
MenamAfzaalMay 29, 2024
a9070fa
childrenMap updated
MenamAfzalMay 29, 2024
d4997ee
pull from dev
MenamAfzaalMay 29, 2024
ce81b47
rotation edited
MenamAfzalMay 29, 2024
6b75817
Merge branch 'fix/component-wrapper-on-rotation' of https://github.co…
MenamAfzalMay 29, 2024
790d04d
formatting removed
MenamAfzalMay 29, 2024
36d4f06
formatting removed -1
MenamAfzalMay 29, 2024
c8ba492
formatting removed -2
MenamAfzalMay 29, 2024
17ed925
unused variable removed
MenamAfzalMay 29, 2024
0edac5c
rotation fixed
MenamAfzalMay 29, 2024
e3f2144
rotation and boxshadow conflict resolved
MenamAfzalMay 29, 2024
1facfbc
condition updated
MenamAfzalMay 30, 2024
c7ed2c3
condition updated
MenamAfzalMay 31, 2024
c984e21
condition updated
MenamAfzalMay 31, 2024
af215e7
padding on rotation
MenamAfzalMay 31, 2024
380b47e
padding updated
MenamAfzalMay 31, 2024
3d0daee
function created
MenamAfzalMay 31, 2024
15b4b84
types added
MenamAfzalMay 31, 2024
f1ef6f5
padding updated
MenamAfzalMay 31, 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
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -63,7 +63,6 @@ const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>`
${getStyle(props.$style)}
input {
padding: ${props.style?.padding};
rotate: ${props?.$style?.rotation};
}
.ant-select-single {
width: 100% !important;
Expand Down
4 changes: 2 additions & 2 deletionsclient/packages/lowcoder/src/comps/comps/carouselComp.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff 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 } 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";

Expand DownExpand Up@@ -47,7 +47,7 @@ let CarouselBasicComp = (function () {
dotPosition: withDefault(PositionControl, "bottom"),
style: styleControl(CarouselStyle),
animationStyle: styleControl(AnimationStyle),

restrictPaddingOnRotation:withDefault(StringControl, 'imageCarousel'),
...formDataChildren,
};
return new UICompBuilder(childrenMap, (props) => {
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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 {
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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";
Expand DownExpand Up@@ -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) => {
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff 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 } from "../generators";
import { UICompBuilder, withDefault } from "../generators";
import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
import { hiddenPropertyView } from "comps/utils/propertyUtils";
import { trans } from "i18n";
Expand DownExpand Up@@ -69,7 +69,8 @@ let FileViewerBasicComp = (function () {
const childrenMap = {
src: StringControl,
style: styleControl(FileViewerStyle),
animationStyle:styleControl(AnimationStyle)
animationStyle: styleControl(AnimationStyle),
restrictPaddingOnRotation: withDefault(StringControl, 'fileViewer'),
};
return new UICompBuilder(childrenMap, (props) => {
if (isEmpty(props.src)) {
Expand Down
2 changes: 2 additions & 0 deletionsclient/packages/lowcoder/src/comps/comps/imageComp.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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%;
Expand DownExpand Up@@ -169,6 +170,7 @@ const childrenMap = {
animationStyle: styleControl(AnimationStyle),
autoHeight: withDefault(AutoHeightControl, "fixed"),
supportPreview: BoolControl,
restrictPaddingOnRotation:withDefault(StringControl, 'image')
};

let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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";
Expand DownExpand Up@@ -120,6 +120,7 @@ const childrenMap = {
playbackRate: RangeControl.closed(1, 2, 1),
currentTimeStamp: numberExposingStateControl("currentTimeStamp", 0),
duration: numberExposingStateControl("duration"),
restrictPaddingOnRotation:withDefault(StringControl, 'video'),
...mediaCommonChildren,
};

Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -39,6 +39,7 @@ import { useEffect, useRef, useState } from "react";
import ReactResizeDetector from "react-resize-detector";

import { useContext } from "react";
import { BoolControl } from "@lowcoder-ee/index.sdk";

const Container = styled.div<{ $style: any }>`
height: 100%;
Expand DownExpand Up@@ -186,6 +187,7 @@ const childrenMap = {
prefixIcon: IconControl,
style: ButtonStyleControl,
viewRef: RefControl<HTMLElement>,
restrictPaddingOnRotation:withDefault(StringControl, 'controlButton')
};

let ButtonTmpComp = (function () {
Expand Down
6 changes: 4 additions & 2 deletionsclient/packages/lowcoder/src/comps/comps/qrCodeComp.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -14,6 +14,7 @@ import { StringControl } from "comps/controls/codeControl";

import { useContext } from "react";
import { EditorContext } from "comps/editorState";
import { withDefault } from "../generators";

// TODO: add styling for image (size)
// TODO: add styling for bouding box (individual backround)
Expand All@@ -26,12 +27,13 @@ const levelOptions = [
] as const;

const childrenMap = {
value: stringExposingStateControl("value"),
level: dropdownControl(levelOptions,"L"),
value: stringExposingStateControl('value'),
level: dropdownControl(levelOptions,'L'),
includeMargin: BoolControl.DEFAULT_TRUE,
image: StringControl,
style: styleControl(QRCodeStyle),
animationStyle: styleControl(AnimationStyle),
restrictPaddingOnRotation: withDefault(StringControl, 'qrCode'),
};

const QRCodeView = (props: RecordConstructorToView<typeof childrenMap>) => {
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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),
Expand DownExpand Up@@ -127,7 +127,7 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
dispatch,
rowBreak,
matchColumnsHeight,
rowStyle,
style,
columnStyle,
columnPerRowLG,
columnPerRowMD,
Expand All@@ -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]}
Expand DownExpand Up@@ -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()}
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
import {
TextStyleType,
TextContainerStyleType,
ContainerStyleType,
heightCalculator,
widthCalculator,
Expand All@@ -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;
Expand DownExpand Up@@ -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};
Expand DownExpand Up@@ -146,7 +145,7 @@ export type TriContainerProps = TriContainerViewProps & {
type: string;
float: string;
width: string;
style:TextStyleType;
style:TextContainerStyleType;
horizontalAlignment: string;
animationStyle?: AnimationStyleType;
};
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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",
Expand DownExpand Up@@ -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
Expand Down
70 changes: 57 additions & 13 deletionsclient/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -221,14 +221,14 @@ function UIView(props: {
const comp = props.comp;
const childrenProps = childrenToProps(comp.children);
const parentDisabled = useContext(DisabledContext);
const disabled = childrenProps["disabled"];
if (disabled !== undefined && typeof disabled ==="boolean") {
childrenProps["disabled"] = disabled || parentDisabled;
const disabled = childrenProps['disabled'];
if (disabled !== undefined && typeof disabled ==='boolean') {
childrenProps['disabled'] = disabled || parentDisabled;
}

//ADDED BY FRED
if (childrenProps.events) {
const events = childrenProps.events as {value?: any[]};
const events = childrenProps.events as {value?: any[]};
if (!events.value || events.value.length === 0) {
events.value = [];
}
Expand All@@ -246,22 +246,66 @@ function UIView(props: {
);
}

let defaultChildren = comp.children;
const isNotContainer = defaultChildren.hasOwnProperty('style');
const restrictPaddingOnRotation = defaultChildren.hasOwnProperty('restrictPaddingOnRotation');
let rotationVal:any = null
let boxShadowVal:any = null;
let restrictPaddingOnRotationVal:any=null;
if (isNotContainer) {
rotationVal = defaultChildren.style.children?.rotation?.valueAndMsg.value;
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
return (
<div
ref={props.innerRef}
className={childrenProps.className as string}
data-testid={childrenProps.dataTestId as string}
style={{
width: "100%",
height: "100%",
margin: "0px",
padding: "0px",
}}>
width: '100%',
height: '100%',
margin: '0px',
padding:getPadding()

}}
>
<HidableView hidden={childrenProps.hidden as boolean}>
{props.viewFn(
childrenProps,
comp.dispatch
)}
{props.viewFn(childrenProps, comp.dispatch)}
</HidableView>
</div>
);
Expand Down
[8]ページ先頭
©2009-2025 Movatter.jp