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

Commit14fa759

Browse files
committed
Updated styling of the tags component
1 parent975b967 commit14fa759

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
importstyledfrom"styled-components";
22
importReact,{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
functiongetTagColor(tagText :any,tagOptions:any[]){
2423
constfoundOption=tagOptions.find((option:{label:any;})=>option.label===tagText);
2524
if(foundOption){
26-
if(foundOption.colorType==="preset"){
25+
if(foundOption.colorType==="default"){
26+
returnundefined;
27+
}elseif(foundOption.colorType==="preset"){
2728
returnfoundOption.presetColor;
2829
}elseif(foundOption.colorType==="custom"){
2930
returnundefined;
@@ -36,20 +37,32 @@ function getTagColor(tagText : any, tagOptions: any[]) {
3637

3738
constgetTagStyle=(tagText:any,tagOptions:any[],baseStyle:any={})=>{
3839
constfoundOption=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+
conststyle:any={ ...baseStyle};
45+
if(baseStyle.borderWidth&&baseStyle.border&&baseStyle.borderStyle){
46+
style.border=`${baseStyle.borderWidth}${baseStyle.borderStyle}${baseStyle.border}`;
47+
}
48+
returnstyle;
49+
}
50+
4051
conststyle: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+
letborderStyle=foundOption.borderStyle||"none";
59+
letborderWidth=foundOption.borderWidth||"0px";
60+
letborderColor=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
returnstyle;
6885
}
69-
returnbaseStyle;
70-
};
7186

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

7794
constmultiTags=(function(){
7895

79-
constStyledTag=styled(Tag)<{$style:any,$bordered:boolean,$customStyle:any}>`
96+
constStyledTag=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)returnprops.$customStyle.border;
89-
returnprops.$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
returnnewUICompBuilder(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-
consttagColor=props.enableIndividualStyling ?getTagColor(tag.label,props.options) :undefined;
121-
consttagIcon=props.enableIndividualStyling ?getTagIcon(tag.label,props.options) :tag.icon;
122-
consttagStyle=props.enableIndividualStyling ?getTagStyle(tag.label,props.options,props.style) :{};
133+
consttagColor=getTagColor(tag.label,props.options);
134+
consttagIcon=tag.icon;
135+
consttagStyle=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
<Sectionname={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
importstyledfrom"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
constTAG_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-
]asconst,"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:<StyledIconas={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:<StyledIconas={WidthIcon}title=""/>,
841+
})}
827842
{this.children.radius.propertyView({
828843
label:trans('style.borderRadius'),
829844
preInputNode:<StyledIconas={IconRadius}title=""/>,
@@ -839,15 +854,20 @@ TagsCompOptions = class extends TagsCompOptions implements OptionCompProperty {
839854
preInputNode:<StyledIconas={CompressIcon}title=""/>,
840855
placeholder:'3px',
841856
})}
857+
{this.children.width.propertyView({
858+
label:trans('splitLayout.width'),
859+
preInputNode:<StyledIconas={WidthIcon}title=""/>,
860+
placeholder:'100px',
861+
})}
842862
</>
843863
);
844864
}
845865
};
846866

847867
exportconstTagsCompOptionsControl=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)
[8]ページ先頭
©2009-2025 Movatter.jp