Skip to content

Commit 345c18a

Browse files
imtananikhwaimtananikhwa
committed
Label style work in progress
1 parent 6e81667 commit 345c18a

File tree

11 files changed

+105
-42
lines changed

11 files changed

+105
-42
lines changed

‎client/packages/lowcoder-design/src/components/Section.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,7 @@ export const sectionNames = {
142142
validation: trans("prop.validation"),
143143
layout: trans("prop.layout"),
144144
style: trans("prop.style"),
145+
labelStyle:trans("prop.labelStyle"),
145146
data: trans("prop.data"),
146147
meetings : trans("prop.meetings"), // added by Falk Wolsky
147148
};

‎client/packages/lowcoder-design/src/i18n/design/locales/en.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export const en = {
2222
advanced: "Advanced",
2323
validation: "Validation",
2424
layout: "Layout",
25+
labelStyle:"Label Style",
2526
style: "Style",
2627
meetings : "Meeting Settings",
2728
data: "Data",

‎client/packages/lowcoder-design/src/i18n/design/locales/zh.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export const zh = {
2222
advanced: "高级",
2323
validation: "验证",
2424
layout: "布局",
25+
labelStyle:"标签样式",
2526
style: "样式",
2627
meetings: "会议",
2728
data: "数据",

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

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Input, Section, sectionNames } from "lowcoder-design";
22
import { BoolControl } from "comps/controls/boolControl";
33
import { styleControl } from "comps/controls/styleControl";
4-
import { InputLikeStyle, InputLikeStyleType } from "comps/controls/styleControlConstants";
4+
import { InputLikeStyle, InputLikeStyleType, LabelStyle, LabelStyleType } from "comps/controls/styleControlConstants";
55
import {
66
NameConfig,
77
NameConfigPlaceHolder,
@@ -38,7 +38,7 @@ import { EditorContext } from "comps/editorState";
3838
* Input Comp
3939
*/
4040

41-
const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>`
41+
const InputStyle = styled(Input) <{ $style: InputLikeStyleType}>`
4242
${(props) => props.$style && getStyle(props.$style)}
4343
`;
4444

@@ -48,6 +48,7 @@ const childrenMap = {
4848
showCount: BoolControl,
4949
allowClear: BoolControl,
5050
style: styleControl(InputLikeStyle),
51+
labelStyle: styleControl(LabelStyle),
5152
prefixIcon: IconControl,
5253
suffixIcon: IconControl,
5354
};
@@ -67,7 +68,7 @@ export const InputComp = new UICompBuilder(childrenMap, (props) => {
6768
suffix={hasIcon(props.suffixIcon) && props.suffixIcon}
6869
/>
6970
),
70-
style: props.style,
71+
style: props.labelStyle,
7172
...validateState,
7273
});
7374
})
@@ -80,22 +81,25 @@ export const InputComp = new UICompBuilder(childrenMap, (props) => {
8081
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
8182
children.label.getPropertyView()
8283
)}
83-
84+
8485
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
8586
<><TextInputInteractionSection {...children} />
86-
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
87-
<Section name={sectionNames.advanced}>
88-
{children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
89-
{children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
90-
{children.showCount.propertyView({ label: trans("prop.showCount") })}
91-
{allowClearPropertyView(children)}
92-
{readOnlyPropertyView(children)}
93-
</Section>
94-
<TextInputValidationSection {...children} />
87+
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
88+
<Section name={sectionNames.advanced}>
89+
{children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
90+
{children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
91+
{children.showCount.propertyView({ label: trans("prop.showCount") })}
92+
{allowClearPropertyView(children)}
93+
{readOnlyPropertyView(children)}
94+
</Section>
95+
<TextInputValidationSection {...children} />
9596
</>
9697
)}
9798
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
98-
<><Section name={sectionNames.style}>{children.style.getPropertyView()}</Section></>
99+
<>
100+
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
101+
<Section name={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
102+
</>
99103
)}
100104
</>
101105
);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
} from "comps/controls/codeControl";
1010
import { stringExposingStateControl } from "comps/controls/codeStateControl";
1111
import { LabelControl } from "comps/controls/labelControl";
12-
import { InputLikeStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
12+
import { InputLikeStyleType, LabelStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
1313
import { Section, sectionNames, ValueFromOption } from "lowcoder-design";
1414
import _ from "lodash";
1515
import { css } from "styled-components";
@@ -217,7 +217,7 @@ export const TextInputValidationSection = (children: TextInputComp) => (
217217
</Section>
218218
);
219219

220-
export function getStyle(style: InputLikeStyleType) {
220+
export function getStyle(style: InputLikeStyleType, labelStyle?: LabelStyleType) {
221221
return css`
222222
border-radius: ${style.radius};
223223
border-width: ${style.borderWidth};

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

Lines changed: 35 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ import { MultiCompBuilder } from "comps/generators/multi";
99
import { labelCss, Section, Tooltip, UnderlineCss } from "lowcoder-design";
1010
import { ValueFromOption } from "lowcoder-design";
1111
import { isEmpty } from "lodash";
12-
import { ReactNode } from "react";
12+
import { Fragment, ReactNode } from "react";
1313
import styled, { css } from "styled-components";
1414
import { AlignLeft } from "lowcoder-design";
1515
import { AlignRight } from "lowcoder-design";
1616
import { StarIcon } from "lowcoder-design";
1717

18-
import { heightCalculator, widthCalculator } from "./styleControlConstants";
18+
import { LabelStyleType, heightCalculator, widthCalculator } from "./styleControlConstants";
1919

2020
type LabelViewProps = Pick<FormItemProps, "required" | "help" | "validateStatus"> & {
2121
children: ReactNode;
@@ -75,10 +75,20 @@ const LabelWrapper = styled.div<{
7575
max-width: ${(props) => (props.$position === "row" ? "80%" : "100%")};
7676
flex-shrink: 0;
7777
`;
78-
79-
const Label = styled.span<{ $border: boolean }>`
78+
// ${(props) => props.$border && UnderlineCss};
79+
const Label = styled.span<{ $border: boolean, $labelStyle: LabelStyleType }>`
8080
${labelCss};
81-
${(props) => props.$border && UnderlineCss};
81+
82+
font-family:${(props) => props.$labelStyle.fontFamily};
83+
font-weight:${(props) => props.$labelStyle.fontWeight};
84+
font-style:${(props) => props.$labelStyle.fontStyle};
85+
text-transform:${(props) => props.$labelStyle.textTransform};
86+
text-decoration:${(props) => props.$labelStyle.textDecoration};
87+
font-size:${(props) => props.$labelStyle.textSize};
88+
color:${(props) => props.$labelStyle.text};
89+
${(props) => props.$border && `border-bottom:${props.$labelStyle.borderWidth} ${props.$labelStyle.borderStyle} ${props.$labelStyle.border};`}
90+
border-radius:${(props) => props.$labelStyle.radius};
91+
padding:${(props) => props.$labelStyle.padding};
8292
width: fit-content;
8393
user-select: text;
8494
white-space: nowrap;
@@ -144,21 +154,22 @@ export const LabelControl = (function () {
144154
position: dropdownControl(PositionOptions, "row"),
145155
align: dropdownControl(AlignOptions, "left"),
146156
};
157+
147158
return new MultiCompBuilder(childrenMap, (props) => (args: LabelViewProps) => (
148159
<LabelViewWrapper $style={args.style}>
149-
<MainWrapper
150-
$position={props.position}
151-
$hasLabel={!!props.text}
152-
style={{
153-
margin: args && args.style ? args?.style?.margin : 0,
160+
<MainWrapper
161+
$position={props.position}
162+
$hasLabel={!!props.text}
163+
style={{
164+
margin: args && args.style ? args?.style?.margin : 0,
154165
// padding: args && args.style ? args?.style?.padding : 0,
155-
width: widthCalculator(
156-
args && args.style ? args?.style?.margin : "0px"
157-
),
158-
height: heightCalculator(
159-
args && args.style ? args?.style?.margin : "0px"
160-
),
161-
}}
166+
width: widthCalculator(
167+
args && args.style ? args?.style?.margin : "0px"
168+
),
169+
height: heightCalculator(
170+
args && args.style ? args?.style?.margin : "0px"
171+
),
172+
}}
162173
>
163174
{!props.hidden && !isEmpty(props.text) && (
164175
<LabelWrapper
@@ -181,7 +192,11 @@ export const LabelControl = (function () {
181192
color="#2c2c2c"
182193
getPopupContainer={(node: any) => node.closest(".react-grid-item")}
183194
>
184-
<Label $border={!!props.tooltip}>{props.text}</Label>
195+
<Label
196+
$border={!!props.tooltip}
197+
$labelStyle={{ ...args.style }}>
198+
{props.text}
199+
</Label>
185200
</Tooltip>
186201
{args.required && <StyledStarIcon />}
187202
</LabelWrapper>
@@ -210,8 +225,8 @@ export const LabelControl = (function () {
210225
args.validateStatus === "error"
211226
? red.primary
212227
: args.validateStatus === "warning"
213-
? yellow.primary
214-
: green.primary
228+
? yellow.primary
229+
: green.primary
215230
}
216231
>
217232
{args.help}

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -550,6 +550,7 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
550550
name === "textTransform" ||
551551
name === "textDecoration" ||
552552
name === "fontFamily" ||
553+
name === "borderStyle" ||
553554
name === "fontStyle" ||
554555
name === "backgroundImage" ||
555556
name === "backgroundImageRepeat" ||
@@ -688,6 +689,13 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
688689
label: config.label,
689690
preInputNode: <BorderIcon title="Border-Width" />,
690691
placeholder: props[name],
692+
}): name === "borderStyle"
693+
? (
694+
children[name] as InstanceType<typeof StringControl>
695+
).propertyView({
696+
label: config.label,
697+
preInputNode: <BorderIcon title="Border-Style" />,
698+
placeholder: props[name],
691699
})
692700
: name === "margin"
693701
? (
@@ -731,6 +739,20 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
731739
label: config.label,
732740
preInputNode: <StyledFontFamilyIcon title="Font Family" />,
733741
placeholder: props[name],
742+
}): name === "textDecoration"
743+
? (
744+
children[name] as InstanceType<typeof StringControl>
745+
).propertyView({
746+
label: config.label,
747+
preInputNode: <StyledFontFamilyIcon title="Text Decoration" />,
748+
placeholder: props[name],
749+
}): name === "textTransform"
750+
? (
751+
children[name] as InstanceType<typeof StringControl>
752+
).propertyView({
753+
label: config.label,
754+
preInputNode: <StyledFontFamilyIcon title="Text Transform" />,
755+
placeholder: props[name],
734756
})
735757
: name === "fontStyle"
736758
? (

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

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,10 @@ export type FontStyleConfig = CommonColorConfig & {
5555
readonly fontStyle: string;
5656
}
5757

58+
export type borderStyleConfig = CommonColorConfig & {
59+
readonly borderStyle: string;
60+
}
61+
5862
export type ContainerHeaderPaddigConfig = CommonColorConfig & {
5963
readonly containerheaderpadding: string;
6064
};
@@ -88,7 +92,7 @@ export type DepColorConfig = CommonColorConfig & {
8892
readonly depType?: DEP_TYPE;
8993
transformer: (color: string, ...rest: string[]) => string;
9094
};
91-
export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | BorderWidthConfig | BackgroundImageConfig | BackgroundImageRepeatConfig | BackgroundImageSizeConfig | BackgroundImagePositionConfig | BackgroundImageOriginConfig | TextSizeConfig | TextWeightConfig | TextTransformConfig | TextDecorationConfig | FontFamilyConfig | FontStyleConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig | HeaderBackgroundImageConfig | HeaderBackgroundImageRepeatConfig | HeaderBackgroundImageSizeConfig | HeaderBackgroundImagePositionConfig | HeaderBackgroundImageOriginConfig | FooterBackgroundImageConfig | FooterBackgroundImageRepeatConfig | FooterBackgroundImageSizeConfig | FooterBackgroundImagePositionConfig | FooterBackgroundImageOriginConfig;
95+
export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | BorderWidthConfig | borderStyleConfig | BackgroundImageConfig | BackgroundImageRepeatConfig | BackgroundImageSizeConfig | BackgroundImagePositionConfig | BackgroundImageOriginConfig | TextSizeConfig | TextWeightConfig | TextTransformConfig | TextDecorationConfig | FontFamilyConfig | FontStyleConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig | HeaderBackgroundImageConfig | HeaderBackgroundImageRepeatConfig | HeaderBackgroundImageSizeConfig | HeaderBackgroundImagePositionConfig | HeaderBackgroundImageOriginConfig | FooterBackgroundImageConfig | FooterBackgroundImageRepeatConfig | FooterBackgroundImageSizeConfig | FooterBackgroundImagePositionConfig | FooterBackgroundImageOriginConfig;
9296

9397
export const defaultTheme: ThemeDetail = {
9498
primary: "#3377FF",
@@ -399,13 +403,19 @@ const TEXT_TRANSFORM = {
399403
name: "textTransform",
400404
label: trans("style.textTransform"),
401405
textTransform: "textTransform"
402-
}
406+
} as const;
403407

404408
const TEXT_DECORATION = {
405409
name: "textDecoration",
406410
label: trans("style.textDecoration"),
407411
textDecoration: "textDecoration"
408-
}
412+
} as const;
413+
414+
const BORDER_STYLE = {
415+
name: "borderStyle",
416+
label: trans("style.borderStyle"),
417+
borderStyle: "borderStyle"
418+
} as const;
409419

410420
const getStaticBorder = (color: string = SECOND_SURFACE_COLOR) =>
411421
({
@@ -432,6 +442,7 @@ const STYLING_FIELDS_SEQUENCE = [
432442
FONT_FAMILY,
433443
FONT_STYLE,
434444
BORDER,
445+
BORDER_STYLE,
435446
MARGIN,
436447
PADDING,
437448
RADIUS,
@@ -716,12 +727,16 @@ export const SliderStyle = [
716727
] as const;
717728

718729
export const InputLikeStyle = [
719-
LABEL,
730+
// LABEL,
720731
getStaticBackground(SURFACE_COLOR),
721732
...STYLING_FIELDS_SEQUENCE,
722733
...ACCENT_VALIDATE,
723734
] as const;
724735

736+
export const LabelStyle = [
737+
...replaceAndMergeMultipleStyles([...InputLikeStyle], 'text', [LABEL]).filter((style) => style.name !== 'radius')
738+
]
739+
725740
export const RatingStyle = [
726741
LABEL,
727742
{
@@ -800,7 +815,7 @@ export const MultiSelectStyle = [
800815

801816
export const TabContainerStyle = [
802817
// Keep background related properties of container as STYLING_FIELDS_SEQUENCE has rest of the properties
803-
...replaceAndMergeMultipleStyles([...ContainerStyle.filter((style)=> ['border','radius','borderWidth','margin','padding'].includes(style.name) === false),...STYLING_FIELDS_SEQUENCE], 'text', [{
818+
...replaceAndMergeMultipleStyles([...ContainerStyle.filter((style) => ['border', 'radius', 'borderWidth', 'margin', 'padding'].includes(style.name) === false), ...STYLING_FIELDS_SEQUENCE], 'text', [{
804819
name: "tabText",
805820
label: trans("style.tabText"),
806821
depName: "headerBackground",
@@ -888,7 +903,7 @@ export const RadioStyle = [
888903

889904
export const SegmentStyle = [
890905
LABEL,
891-
...STYLING_FIELDS_SEQUENCE.filter((style)=> ['border','borderWidth'].includes(style.name) === false),
906+
...STYLING_FIELDS_SEQUENCE.filter((style) => ['border', 'borderWidth'].includes(style.name) === false),
892907
{
893908
name: "indicatorBackground",
894909
label: trans("style.indicatorBackground"),
@@ -1361,6 +1376,7 @@ export const RichTextEditorStyle = [
13611376
BORDER_WIDTH
13621377
] as const;
13631378

1379+
export type LabelStyleType = StyleConfigType<typeof LabelStyle>;
13641380
export type InputLikeStyleType = StyleConfigType<typeof InputLikeStyle>;
13651381
export type ButtonStyleType = StyleConfigType<typeof ButtonStyle>;
13661382
export type ToggleButtonStyleType = StyleConfigType<typeof ToggleButtonStyle>;

‎client/packages/lowcoder/src/i18n/locales/de.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -301,6 +301,7 @@ export const de = {
301301
"border": "Farbe der Umrandung",
302302
"borderRadius": "Radius der Grenze",
303303
"borderWidth": "Breite des Randes",
304+
"borderStyle":"Grenzstil",
304305
"background": "Hintergrund",
305306
"headerBackground": "Kopfzeile Hintergrund",
306307
"footerBackground": "Fußzeilen-Hintergrund",

‎client/packages/lowcoder/src/i18n/locales/en.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -316,6 +316,7 @@ export const en = {
316316
"border": "Border Color",
317317
"borderRadius": "Border Radius",
318318
"borderWidth": "Border Width",
319+
"borderStyle":"Border Style",
319320
"background": "Background",
320321
"headerBackground": "Header Background",
321322
"footerBackground": "Footer Background",

0 commit comments

Comments
 (0)