Skip to content

Commit b395356

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #719 from imtananikhwa/imtanan-task1
Text Decoration and Text Transform property, along with fixes and addition of styles to other components
2 parents a6be0ab + 2f7487b commit b395356

18 files changed

+127
-36
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
2424
font-weight: ${buttonStyle.textWeight};
2525
font-family: ${buttonStyle.fontFamily};
2626
font-style: ${buttonStyle.fontStyle};
27+
text-transform:${buttonStyle.textTransform};
28+
text-decoration:${buttonStyle.textDecoration};
2729
background-color: ${buttonStyle.background};
2830
border-radius: ${buttonStyle.radius};
2931
margin: ${buttonStyle.margin};

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,30 +25,41 @@ import {
2525

2626
const StyledDropdownButton = styled(DropdownButton)`
2727
width: 100%;
28+
2829
.ant-btn-group {
2930
width: 100%;
31+
3032
}
3133
`;
3234

3335
const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
3436
width: calc(100%);
3537
${(props) => `margin: ${props.$buttonStyle.margin};`}
3638
margin-right: 0;
39+
.ant-btn span {
40+
${(props) => `text-decoration: ${props.$buttonStyle.textDecoration};`}
41+
${(props) => `font-family: ${props.$buttonStyle.fontFamily};`}
42+
}
43+
3744
.ant-btn {
3845
${(props) => getButtonStyle(props.$buttonStyle)}
3946
margin: 0 !important;
4047
height: 100%;
4148
&.ant-btn-default {
4249
margin: 0 !important;
4350
${(props) => `border-radius: ${props.$buttonStyle.radius} 0 0 ${props.$buttonStyle.radius};`}
51+
${(props) => `text-transform: ${props.$buttonStyle.textTransform};`}
52+
${(props) => `font-weight: ${props.$buttonStyle.textWeight};`}
4453
}
4554
${(props) => `background-color: ${props.$buttonStyle.background};`}
4655
${(props) => `color: ${props.$buttonStyle.text};`}
4756
${(props) => `padding: ${props.$buttonStyle.padding};`}
4857
${(props) => `font-size: ${props.$buttonStyle.textSize};`}
4958
${(props) => `font-style: ${props.$buttonStyle.fontStyle};`}
59+
5060
width: 100%;
5161
}
62+
5263
`;
5364

5465
const RightButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ const Link = styled(Button) <{ $style: LinkStyleType }>`
3434
font-weight:${props.$style.textWeight};
3535
border: ${props.$style.borderWidth} solid ${props.$style.border};
3636
border-radius:${props.$style.radius ? props.$style.radius:'0px'};
37+
text-transform:${props.$style.textTransform ? props.$style.textTransform:''};
38+
text-decoration:${props.$style.textDecoration ? props.$style.textDecoration:''} !important;
3739
background-color: ${props.$style.background};
3840
&:hover {
3941
color: ${props.$style.hoverText} !important;

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ const StyledDivider = styled(Divider) <IProps>`
3030
font-size: ${(props) => props.$style.textSize};
3131
font-weight: ${(props) => props.$style.textWeight};
3232
font-family: ${(props) => props.$style.fontFamily};
33+
text-transform:${(props)=>props.$style.textTransform};
34+
text-decoration:${(props)=>props.$style.textDecoration};
3335
font-style:${(props) => props.$style.fontStyle}
3436
}
3537
min-width: 0;

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,8 @@ const Item = styled.div<{
5252
$textSize: string;
5353
$margin: string;
5454
$padding: string;
55+
$textTransform:string;
56+
$textDecoration:string;
5557
}>`
5658
height: 30px;
5759
line-height: 30px;
@@ -61,6 +63,8 @@ const Item = styled.div<{
6163
font-family:${(props) => (props.$fontFamily ? props.$fontFamily : 'sans-serif')};
6264
font-style:${(props) => (props.$fontStyle ? props.$fontStyle : 'normal')};
6365
font-size:${(props) => (props.$textSize ? props.$textSize : '14px')};
66+
text-transform:${(props) => (props.$textTransform ? props.$textTransform : '')};
67+
text-decoration:${(props) => (props.$textDecoration ? props.$textDecoration : '')};
6468
margin:${(props) => props.$margin ? props.$margin : '0px'};
6569
6670
&:hover {
@@ -161,6 +165,8 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
161165
$textWeight={props.style.textWeight}
162166
$textSize={props.style.textSize}
163167
$padding={props.style.padding}
168+
$textTransform={props.style.textTransform}
169+
$textDecoration={props.style.textDecoration}
164170
$margin={props.style.margin}
165171
onClick={() => onEvent("click")}
166172
>

‎client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,13 +51,25 @@ export const getStyle = (style: CheckboxStyleType) => {
5151
border-radius: ${style.radius};
5252
}
5353
}
54-
54+
5555
.ant-checkbox-inner {
5656
border-radius: ${style.radius};
5757
background-color: ${style.uncheckedBackground};
5858
border-color: ${style.uncheckedBorder};
5959
border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
6060
}
61+
62+
&:hover .ant-checkbox-inner,
63+
.ant-checkbox:hover .ant-checkbox-inner,
64+
.ant-checkbox-input + ant-checkbox-inner {
65+
background-color:${style.hoverBackground ? style.hoverBackground :'#fff'};
66+
}
67+
68+
&:hover .ant-checkbox-checked .ant-checkbox-inner,
69+
.ant-checkbox:hover .ant-checkbox-inner,
70+
.ant-checkbox-input + ant-checkbox-inner {
71+
background-color:${style.hoverBackground ? style.hoverBackground:'#ffff'};
72+
}
6173
6274
&:hover .ant-checkbox-inner,
6375
.ant-checkbox:hover .ant-checkbox-inner,
@@ -67,11 +79,15 @@ export const getStyle = (style: CheckboxStyleType) => {
6779
}
6880
}
6981
82+
83+
7084
.ant-checkbox-group-item {
7185
font-family:${style.fontFamily};
7286
font-size:${style.textSize};
7387
font-weight:${style.textWeight};
7488
font-style:${style.fontStyle};
89+
text-transform:${style.textTransform};
90+
text-decoration:${style.textDecoration};
7591
}
7692
.ant-checkbox-wrapper {
7793
padding: ${style.padding};

‎client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ const getStyle = (style: RadioStyleType) => {
2525
font-size:${style.textSize};
2626
font-weight:${style.textWeight};
2727
font-style:${style.fontStyle};
28+
text-transform:${style.textTransform};
29+
text-decoration:${style.textDecoration};
2830
}
2931
3032
.ant-radio-checked {
@@ -47,6 +49,12 @@ const getStyle = (style: RadioStyleType) => {
4749
}
4850
}
4951
52+
&:hover .ant-radio-inner,
53+
.ant-radio:hover .ant-radio-inner,
54+
.ant-radio-input + ant-radio-inner {
55+
background-color:${style.hoverBackground ? style.hoverBackground:'#ffff'};
56+
}
57+
5058
&:hover .ant-radio-inner,
5159
.ant-radio:hover .ant-radio-inner,
5260
.ant-radio-input:focus + .ant-radio-inner {

‎client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,14 @@ const getStyle = (style: SegmentStyleType) => {
5252
.ant-segmented-item-selected {
5353
border-radius: ${style.radius};
5454
}
55+
&.ant-segmented, .ant-segmented-item-label {
56+
font-family:${style.fontFamily};
57+
font-style:${style.fontStyle};
58+
font-size:${style.textSize};
59+
font-weight:${style.textWeight};
60+
text-transform:${style.textTransform};
61+
text-decoration:${style.textDecoration};
62+
}
5563
`;
5664
};
5765

‎client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,8 @@ export const getStyle = (
7676
}
7777
.ant-select-selection-search-input {
7878
font-family:${(style as SelectStyleType).fontFamily} !important;
79+
text-transform:${(style as SelectStyleType).textTransform} !important;
80+
text-decoration:${(style as SelectStyleType).textDecoration} !important;
7981
font-size:${(style as SelectStyleType).textSize} !important;
8082
font-weight:${(style as SelectStyleType).textWeight};
8183
color:${(style as SelectStyleType).text} !important;
@@ -268,7 +270,6 @@ export const SelectUIView = (
268270
label={option.label}
269271
disabled={option.disabled}
270272
key={option.value}
271-
style={{fontFamily:"Montserrat"}}
272273
>
273274
<Wrapper className="option-label">
274275
{props.options.findIndex((option) => hasIcon(option.prefixIcon)) >

‎client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,14 @@ const getStyle = (
111111
}
112112
}
113113
114+
.ant-tabs-tab-btn {
115+
font-family:${style.fontFamily};
116+
font-weight:${style.textWeight};
117+
text-transform:${style.textTransform};
118+
text-decoration:${style.textDecoration};
119+
font-style:${style.fontStyle};
120+
}
121+
114122
.ant-tabs-ink-bar {
115123
background-color: ${style.accent};
116124
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ const getStyle = (style: TextStyleType) => {
3030
font-weight: ${style.textWeight} !important;
3131
font-family: ${style.fontFamily} !important;
3232
font-style:${style.fontStyle} !important;
33+
text-transform:${style.textTransform} !important;
34+
text-decoration:${style.textDecoration} !important;
3335
background-color: ${style.background};
3436
.markdown-body a {
3537
color: ${style.links};
@@ -146,7 +148,6 @@ let TextTmpComp = (function () {
146148
.setPropertyViewFn((children) => {
147149
return (
148150
<>
149-
150151
<Section name={sectionNames.basic}>
151152
{children.type.propertyView({
152153
label: trans("value"),

‎client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,14 @@ import { EditorContext } from "comps/editorState";
5858
const Wrapper = styled.div<{
5959
$style: InputLikeStyleType;
6060
}>`
61-
height: 100%;
61+
box-sizing:border-box;
62+
.rc-textarea {
63+
background-color:${(props) => props.$style.background};
64+
padding:${(props) => props.$style.padding};
65+
text-transform:${(props)=>props.$style.textTransform};
66+
text-decoration:${(props)=>props.$style.textDecoration};
67+
margin: 0px 3px 0px 3px !important;
68+
}
6269
6370
.ant-input-clear-icon {
6471
opacity: 0.45;
@@ -196,7 +203,7 @@ let MentionTmpComp = (function () {
196203
height: "100%",
197204
maxHeight: "100%",
198205
resize: "none",
199-
padding: props.style.padding,
206+
// padding: props.style.padding,
200207
fontStyle: props.style.fontStyle,
201208
fontFamily: props.style.fontFamily,
202209
borderWidth: props.style.borderWidth,

‎client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,8 @@ export function getStyle(style: InputLikeStyleType) {
248248
font-weight: ${style.textWeight};
249249
font-family: ${style.fontFamily};
250250
font-style:${style.fontStyle};
251+
text-transform:${style.textTransform};
252+
text-decoration:${style.textDecoration};
251253
background-color: ${style.background};
252254
border-color: ${style.border};
253255

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -547,6 +547,8 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
547547
name === "cardRadius" ||
548548
name === "textSize" ||
549549
name === "textWeight" ||
550+
name === "textTransform" ||
551+
name === "textDecoration" ||
550552
name === "fontFamily" ||
551553
name === "fontStyle" ||
552554
name === "backgroundImage" ||

0 commit comments

Comments
 (0)