Skip to content

Commit a4922bd

Browse files
author
Aqib Mirza
committed
feat: margin padding and select box options
1 parent cf3a59e commit a4922bd

30 files changed

+337
-72
lines changed

‎client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,17 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
1212
const activeColor = genActiveColor(buttonStyle.background);
1313
return css`
1414
border-radius: ${buttonStyle.radius};
15+
margin: ${buttonStyle.margin};
16+
padding: ${buttonStyle.padding};
1517
&:not(:disabled) {
1618
// click animation color
1719
--antd-wave-shadow-color: ${buttonStyle.border};
1820
border-color: ${buttonStyle.border};
1921
color: ${buttonStyle.text};
2022
background-color: ${buttonStyle.background};
2123
border-radius: ${buttonStyle.radius};
24+
margin: ${buttonStyle.margin};
25+
padding: ${buttonStyle.padding};
2226
2327
:hover,
2428
:focus {
@@ -37,12 +41,14 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
3741
: buttonStyle.border};
3842
}
3943
}
44+
4045
`;
4146
}
4247

4348
export const Button100 = styled(Button)<{ $buttonStyle?: ButtonStyleType }>`
4449
${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle)}
45-
width: 100%;
50+
width: -webkit-fill-available;
51+
height: auto;
4652
display: inline-flex;
4753
justify-content: center;
4854
align-items: center;

‎client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,23 +29,30 @@ const DropdownButton = styled(Dropdown.Button)`
2929

3030
const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
3131
width: calc(100% - 32px);
32-
32+
${(props) => `margin: ${props.$buttonStyle.margin};`}
33+
margin-right: 0;
3334
.ant-btn {
3435
${(props) => getButtonStyle(props.$buttonStyle)}
36+
margin: 0 !important;
37+
height: 100%;
3538
&.ant-btn-default {
39+
margin: 0 !important;
3640
${(props) => `border-radius: ${props.$buttonStyle.radius} 0 0 ${props.$buttonStyle.radius};`}
3741
}
3842
width: 100%;
3943
}
4044
`;
4145

4246
const RightButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
43-
width: 32px;
47+
// width: 32px;
48+
${(props) => `margin: ${props.$buttonStyle.margin};`}
4449
margin-left: -1px;
45-
4650
.ant-btn {
4751
${(props) => getButtonStyle(props.$buttonStyle)}
52+
margin: 0 !important;
53+
height: 100%;
4854
&.ant-btn-default {
55+
margin: 0 !important;
4956
${(props) => `border-radius: 0 ${props.$buttonStyle.radius} ${props.$buttonStyle.radius} 0;`}
5057
}
5158
width: 100%;
@@ -69,6 +76,7 @@ const DropdownTmpComp = (function () {
6976
.map((option, index) => ({
7077
title: option.label,
7178
label: option.label,
79+
style: {padding: props.style.padding},
7280
key: option.label + " - " + index,
7381
disabled: option.disabled,
7482
icon: hasIcon && <span>{option.prefixIcon}</span>,
@@ -83,6 +91,7 @@ const DropdownTmpComp = (function () {
8391

8492
return (
8593
<ButtonCompWrapper disabled={props.disabled}>
94+
{console.log("props,", props)}
8695
{props.onlyMenu ? (
8796
<Dropdown disabled={props.disabled} overlay={menu}>
8897
<Button100 $buttonStyle={props.style} disabled={props.disabled}>

‎client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { hasIcon } from "comps/utils";
2121
import { RefControl } from "comps/controls/refControl";
2222

2323
const Link = styled(Button)<{ $style: LinkStyleType }>`
24-
${(props) => `color: ${props.$style.text};`}
24+
${(props) => `color: ${props.$style.text};margin: ${props.$style.margin}; padding: ${props.$style.padding};`}
2525
&.ant-btn {
2626
display: inline-flex;
2727
align-items: center;

‎client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export const disabledTime = (min: string, max: string) => {
6363
export const getStyle = (style: DateTimeStyleType) => {
6464
return css`
6565
border-radius: ${style.radius};
66-
66+
padding: ${style.padding};
6767
&:not(.ant-picker-disabled) {
6868
border-color: ${style.border};
6969
background-color: ${style.background};

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { Section, sectionNames } from "lowcoder-design";
88
import _ from "lodash";
99
import styled from "styled-components";
1010
import { styleControl } from "comps/controls/styleControl";
11-
import { DividerStyle, DividerStyleType } from "comps/controls/styleControlConstants";
11+
import { DividerStyle, DividerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
1212
import { migrateOldData } from "comps/generators/simpleGenerators";
1313
import { hiddenPropertyView } from "comps/utils/propertyUtils";
1414
import { trans } from "i18n";
@@ -22,6 +22,17 @@ const StyledDivider = styled(Divider)<IProps>`
2222
display: flex;
2323
align-items: center;
2424
}
25+
min-width: 0;
26+
width: ${(props) => {
27+
return widthCalculator(props.$style.margin);
28+
}};
29+
min-height: ${(props) => {
30+
return heightCalculator(props.$style.margin);
31+
}};
32+
margin: ${(props) => {
33+
return props.$style.margin;
34+
}};
35+
padding: ${(props) => props.$style.padding};
2536
border-top: 1px ${(props) => (props.dashed ? "dashed" : "solid")} ${(props) => props.$style.color};
2637
2738
&.ant-divider-horizontal.ant-divider-with-text {

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { darkenColor } from "components/colorSelect/colorUtils";
66
import { Section, sectionNames } from "components/Section";
77
import { IconControl } from "comps/controls/iconControl";
88
import { styleControl } from "comps/controls/styleControl";
9-
import { FileStyle, FileStyleType } from "comps/controls/styleControlConstants";
9+
import { FileStyle, FileStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
1010
import { withMethodExposing } from "comps/generators/withMethodExposing";
1111
import { hasIcon } from "comps/utils";
1212
import { getComponentDocUrl } from "comps/utils/compDocUtil";
@@ -133,6 +133,10 @@ const getStyle = (style: FileStyleType) => {
133133
return css`
134134
.ant-btn {
135135
border-radius: ${style.radius};
136+
margin: ${style.margin};
137+
padding: ${style.padding};
138+
width: ${widthCalculator(style.margin)};
139+
height: ${heightCalculator(style.margin)};
136140
}
137141
138142
.ant-btn:not(:disabled) {

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { styleControl } from "comps/controls/styleControl";
2-
import { FileViewerStyle, FileViewerStyleType } from "comps/controls/styleControlConstants";
2+
import { FileViewerStyle, FileViewerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
33
import { isEmpty } from "lodash";
44
import { useState } from "react";
55
import { DocumentViewer } from "react-documents";
@@ -13,6 +13,11 @@ import { trans } from "i18n";
1313

1414
const getStyle = (style: FileViewerStyleType) => {
1515
return css`
16+
width: ${widthCalculator(style.margin)};
17+
height: ${heightCalculator(style.margin)};
18+
margin: ${style.margin};
19+
padding: ${style.padding};
20+
1621
overflow: hidden;
1722
background-color: ${style.background};
1823
border: 1px solid ${style.border};

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { useEffect, useRef, useState } from "react";
99
import _ from "lodash";
1010
import ReactResizeDetector from "react-resize-detector";
1111
import { styleControl } from "comps/controls/styleControl";
12-
import { ImageStyle, ImageStyleType } from "comps/controls/styleControlConstants";
12+
import { ImageStyle, ImageStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
1313
import { hiddenPropertyView } from "comps/utils/propertyUtils";
1414
import { trans } from "i18n";
1515
import { AutoHeightControl } from "comps/controls/autoHeightControl";
@@ -23,7 +23,6 @@ const Container = styled.div<{ $style: ImageStyleType | undefined }>`
2323
display: flex;
2424
align-items: center;
2525
justify-content: center;
26-
2726
.ant-image,
2827
img {
2928
width: 100%;
@@ -43,6 +42,10 @@ const getStyle = (style: ImageStyleType) => {
4342
img {
4443
border: 1px solid ${style.border};
4544
border-radius: ${style.radius};
45+
margin: ${style.margin};
46+
padding: ${style.padding};
47+
max-width: ${widthCalculator(style.margin)};
48+
max-height: ${heightCalculator(style.margin)};
4649
}
4750
4851
.ant-image-mask {

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

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import { formDataChildren, FormDataPropertyView } from "../formComp/formDataCons
3030
import { withMethodExposing, refMethods } from "../../generators/withMethodExposing";
3131
import { RefControl } from "../../controls/refControl";
3232
import { styleControl } from "comps/controls/styleControl";
33-
import { InputLikeStyle, InputLikeStyleType } from "comps/controls/styleControlConstants";
33+
import { InputLikeStyle, InputLikeStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
3434
import {
3535
disabledPropertyView,
3636
hiddenPropertyView,
@@ -58,7 +58,9 @@ const getStyle = (style: InputLikeStyleType) => {
5858
color: ${style.text};
5959
background-color: ${style.background};
6060
border-color: ${style.border};
61-
61+
//margin: ${style.margin};
62+
padding: 0;
63+
width: ${widthCalculator(style.margin)};
6264
&.ant-input-number-focused {
6365
border-color: ${style.accent};
6466
}
@@ -71,6 +73,14 @@ const getStyle = (style: InputLikeStyleType) => {
7173
color: ${style.text};
7274
opacity: 0.4;
7375
}
76+
.ant-input-number {
77+
margin: 0;
78+
}
79+
.ant-input-number input {
80+
margin: 0;
81+
padding: ${style.padding};
82+
height: ${heightCalculator(style.margin)};
83+
}
7484
7585
.ant-input-number-handler-wrap {
7686
background-color: ${style.background};

‎client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const RangeSliderBasicComp = (function () {
2828
range={true}
2929
value={[props.start.value, props.end.value]}
3030
$style={props.style}
31+
style={{margin: 0}}
3132
onChange={([start, end]) => {
3233
props.start.onChange(start);
3334
props.end.onChange(end);

0 commit comments

Comments
 (0)