Skip to content

Commit 14fa759

Browse files
kamalqureshikamalqureshi
committed
Updated styling of the tags component
1 parent 975b967 commit 14fa759

File tree

3 files changed

+70
-42
lines changed

3 files changed

+70
-42
lines changed

‎client/packages/lowcoder/src/comps/comps/tagsComp/tagsCompView.tsx

Lines changed: 40 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import styled from "styled-components";
22
import React, { useContext } from "react";
3-
import { trans } from "i18n";
43
import { Tag } from "antd";
54
import { EditorContext } from "comps/editorState";
65
import { PresetStatusColorTypes } from "antd/es/_util/colors";
@@ -23,7 +22,9 @@ const colors = PresetStatusColorTypes;
2322
function getTagColor(tagText : any, tagOptions: any[]) {
2423
const foundOption = tagOptions.find((option: { label: any; }) => option.label === tagText);
2524
if (foundOption) {
26-
if (foundOption.colorType === "preset") {
25+
if (foundOption.colorType === "default") {
26+
return undefined;
27+
} else if (foundOption.colorType === "preset") {
2728
return foundOption.presetColor;
2829
} else if (foundOption.colorType === "custom") {
2930
return undefined;
@@ -36,20 +37,32 @@ function getTagColor(tagText : any, tagOptions: any[]) {
3637

3738
const getTagStyle = (tagText: any, tagOptions: any[], baseStyle: any = {}) => {
3839
const foundOption = tagOptions.find((option: { label: any; }) => option.label === tagText);
40+
3941
if (foundOption) {
42+
// If colorType is "default", use ONLY component styles
43+
if (foundOption.colorType === "default") {
44+
const style: any = { ...baseStyle };
45+
if (baseStyle.borderWidth && baseStyle.border && baseStyle.borderStyle) {
46+
style.border = `${baseStyle.borderWidth} ${baseStyle.borderStyle} ${baseStyle.border}`;
47+
}
48+
return style;
49+
}
50+
4051
const style: any = { ...baseStyle };
4152

4253
if (foundOption.colorType === "custom") {
4354
style.backgroundColor = foundOption.color;
4455
style.color = foundOption.textColor;
45-
style.border = `1px solid ${foundOption.color}`;
4656
}
4757

48-
if (foundOption.border) {
49-
style.borderColor = foundOption.border;
50-
if (!foundOption.colorType || foundOption.colorType !== "custom") {
51-
style.border = `1px solid ${foundOption.border}`;
52-
}
58+
let borderStyle = foundOption.borderStyle || "none";
59+
let borderWidth = foundOption.borderWidth || "0px";
60+
let borderColor = foundOption.border || "none";
61+
62+
if (borderStyle !== "none") {
63+
style.border = `${borderWidth} ${borderStyle} ${borderColor}`;
64+
} else {
65+
style.border = "none";
5366
}
5467

5568
if (foundOption.radius) {
@@ -64,33 +77,36 @@ const getTagStyle = (tagText: any, tagOptions: any[], baseStyle: any = {}) => {
6477
style.padding = foundOption.padding;
6578
}
6679

80+
if (foundOption.width) {
81+
style.width = foundOption.width;
82+
}
83+
6784
return style;
6885
}
69-
return baseStyle;
70-
};
7186

72-
function getTagIcon(tagText: any, tagOptions: any[]) {
73-
const foundOption = tagOptions.find(option => option.label === tagText);
74-
return foundOption ? foundOption.icon : undefined;
75-
}
87+
const style: any = { ...baseStyle };
88+
if (baseStyle.borderWidth && baseStyle.border && baseStyle.borderStyle) {
89+
style.border = `${baseStyle.borderWidth} ${baseStyle.borderStyle} ${baseStyle.border}`;
90+
}
91+
return style;
92+
};
7693

7794
const multiTags = (function () {
7895

79-
const StyledTag = styled(Tag)<{ $style: any, $bordered: boolean, $customStyle: any }>`
96+
const StyledTag = styled(Tag)<{ $style: any, $customStyle: any }>`
8097
display: flex;
8198
justify-content: center;
8299
align-items: center;
83-
width: 100%;
100+
min-width: fit-content;
101+
width: ${(props) => props.$customStyle?.width || 'auto'};
102+
max-width: 100px;
84103
background: ${(props) => props.$customStyle?.backgroundColor || props.$style?.background};
85104
color: ${(props) => props.$customStyle?.color || props.$style?.text};
86105
border-radius: ${(props) => props.$customStyle?.borderRadius || props.$style?.borderRadius};
87-
border: ${(props) => {
88-
if (props.$customStyle?.border) return props.$customStyle.border;
89-
return props.$bordered ? `${props.$style?.borderStyle} ${props.$style?.borderWidth} ${props.$style?.border}` : 'none';
90-
}};
106+
border: ${(props) => props.$customStyle?.border || props.$style?.border || '1px solid #d9d9d9'};
91107
padding: ${(props) => props.$customStyle?.padding || props.$style?.padding};
92108
margin: ${(props) => props.$customStyle?.margin || props.$style?.margin};
93-
font-size: ${(props) => props.$style?.textSize};
109+
font-size: ${(props) => props.$style?.textSize || '8px'};
94110
font-weight: ${(props) => props.$style?.fontWeight};
95111
cursor: pointer;
96112
`;
@@ -105,8 +121,6 @@ const multiTags = (function () {
105121
options: TagsCompOptionsControl,
106122
style: styleControl(InputLikeStyle, 'style'),
107123
onEvent: ButtonEventHandlerControl,
108-
borderless: BoolCodeControl,
109-
enableIndividualStyling: BoolCodeControl,
110124
};
111125

112126
return new UICompBuilder(childrenMap, (props) => {
@@ -116,16 +130,14 @@ const multiTags = (function () {
116130
<StyledTagContainer>
117131
{props.options.map((tag, index) => {
118132

119-
// Use individual styling only if enableIndividualStyling is true
120-
const tagColor = props.enableIndividualStyling ? getTagColor(tag.label, props.options) : undefined;
121-
const tagIcon = props.enableIndividualStyling ? getTagIcon(tag.label, props.options) : tag.icon;
122-
const tagStyle = props.enableIndividualStyling ? getTagStyle(tag.label, props.options, props.style) : {};
133+
const tagColor = getTagColor(tag.label, props.options);
134+
const tagIcon = tag.icon;
135+
const tagStyle = getTagStyle(tag.label, props.options, props.style);
123136

124137
return (
125138
<StyledTag
126139
key={`tag-${index}`}
127140
$style={props.style}
128-
$bordered={!props.borderless}
129141
$customStyle={tagStyle}
130142
icon={tagIcon}
131143
color={tagColor}
@@ -157,11 +169,6 @@ const multiTags = (function () {
157169
useContext(EditorContext).editorModeStatus
158170
) && (
159171
<Section name={sectionNames.style}>
160-
{children.enableIndividualStyling.propertyView({
161-
label: trans("style.individualStyling"),
162-
tooltip: trans("style.individualStylingTooltip")
163-
})}
164-
{children.borderless.propertyView({ label: trans("style.borderless") })}
165172
{children.style.getPropertyView()}
166173
</Section>
167174
)}

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

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ import {
2929
IconRadius,
3030
Option,
3131
WidthIcon,
32-
ImageCompIcon,
3332
CloseEyeIcon,
3433
} from "lowcoder-design";
3534
import styled from "styled-components";
@@ -39,8 +38,8 @@ import { JSONObject, JSONValue } from "util/jsonTypes";
3938
import { ButtonEventHandlerControl } from "./eventHandlerControl";
4039
import { ControlItemCompBuilder } from "comps/generators/controlCompBuilder";
4140
import { ColorControl } from "./colorControl";
42-
import { StringStateControl } from "./codeStateControl";
4341
import { reduceInContext } from "../utils/reduceContext";
42+
import { BorderOuterOutlined } from "@ant-design/icons";
4443

4544
// Tag preset color options
4645
const TAG_PRESET_COLORS = [
@@ -786,17 +785,26 @@ let TagsCompOptions = new MultiCompBuilder(
786785
{
787786
label: StringControl,
788787
icon: IconControl,
789-
colorType: withDefault(dropdownControl([
788+
colorType: dropdownControl([
789+
{ label: "Default", value: "default"},
790790
{ label: trans("style.preset"), value: "preset" },
791791
{ label: trans("style.custom"), value: "custom" },
792-
] as const, "preset"), "preset"),
793-
presetColor: withDefault(dropdownControl(TAG_PRESET_COLORS, "blue"), "blue"),
792+
], "default"),
793+
presetColor: dropdownControl(TAG_PRESET_COLORS, "default"),
794794
color: withDefault(ColorControl, "#1890ff"),
795795
textColor: withDefault(ColorControl, "#ffffff"),
796796
border: withDefault(ColorControl, ""),
797+
borderWidth: withDefault(RadiusControl, ""),
798+
borderStyle: withDefault(dropdownControl([
799+
{ label: "Solid", value: "solid" },
800+
{ label: "Dashed", value: "dashed" },
801+
{ label: "Dotted", value: "dotted" },
802+
{ label: "None", value: "none" },
803+
], "solid"), "solid"),
797804
radius: withDefault(RadiusControl, ""),
798805
margin: withDefault(StringControl, ""),
799806
padding: withDefault(StringControl, ""),
807+
width: withDefault(StringControl, ""),
800808
},
801809
(props) => props
802810
).build();
@@ -809,8 +817,7 @@ TagsCompOptions = class extends TagsCompOptions implements OptionCompProperty {
809817
{this.children.label.propertyView({ label: trans("coloredTagOptionControl.tag") })}
810818
{this.children.icon.propertyView({ label: trans("coloredTagOptionControl.icon") })}
811819
{this.children.colorType.propertyView({
812-
label: trans("style.colorType"),
813-
radioButton: true
820+
label: trans("style.styleOptions")
814821
})}
815822
{colorType === "preset" && this.children.presetColor.propertyView({
816823
label: trans("style.presetColor")
@@ -821,9 +828,17 @@ TagsCompOptions = class extends TagsCompOptions implements OptionCompProperty {
821828
{this.children.textColor.propertyView({ label: trans("style.textColor") })}
822829
</>
823830
)}
831+
{this.children.borderStyle.propertyView({
832+
label: trans('style.borderStyle'),
833+
preInputNode: <StyledIcon as={BorderOuterOutlined} title="" />,
834+
})}
824835
{this.children.border.propertyView({
825836
label: trans('style.border')
826837
})}
838+
{this.children.borderWidth.propertyView({
839+
label: trans('style.borderWidth'),
840+
preInputNode: <StyledIcon as={WidthIcon} title="" />,
841+
})}
827842
{this.children.radius.propertyView({
828843
label: trans('style.borderRadius'),
829844
preInputNode: <StyledIcon as={IconRadius} title="" />,
@@ -839,15 +854,20 @@ TagsCompOptions = class extends TagsCompOptions implements OptionCompProperty {
839854
preInputNode: <StyledIcon as={CompressIcon} title="" />,
840855
placeholder: '3px',
841856
})}
857+
{this.children.width.propertyView({
858+
label: trans('splitLayout.width'),
859+
preInputNode: <StyledIcon as={WidthIcon} title="" />,
860+
placeholder: '100px',
861+
})}
842862
</>
843863
);
844864
}
845865
};
846866

847867
export const TagsCompOptionsControl = optionsControl(TagsCompOptions, {
848868
initOptions: [
849-
{ label: "Option 1", colorType: "preset", presetColor: "blue" },
850-
{ label: "Option 2", colorType: "preset", presetColor: "green" }
869+
{ label: "Option 1", colorType: "default"},
870+
{ label: "Option 2", colorType: "default"}
851871
],
852872
uniqField: "label",
853873
});

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -476,6 +476,7 @@ export const en = {
476476
// fourth part
477477

478478
"style": {
479+
"styleOptions": "Style Options",
479480
"boxShadowColor": 'Shadow Color',
480481
"boxShadow": 'Box Shadow',
481482
"opacity": 'Opacity',

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy