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

Commit1053d19

Browse files
fixed color picker input styles
1 parenta3ce205 commit1053d19

File tree

2 files changed

+44
-11
lines changed

2 files changed

+44
-11
lines changed

‎client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx‎

Lines changed: 43 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import{Section,sectionNames}from"lowcoder-design";
22
import{BoolControl}from"comps/controls/boolControl";
33
import{styleControl}from"comps/controls/styleControl";
4-
import{ColorPickerStyle,ColorPickerStyleType}from"comps/controls/styleControlConstants";
4+
import{AnimationStyle,ColorPickerStyle,ColorPickerStyleType,DisabledInputStyle,DisabledInputStyleType,InputFieldStyle,InputLikeStyle,InputLikeStyleType,LabelStyle}from"comps/controls/styleControlConstants";
55
import{NameConfig}from"comps/generators/withExposing";
66
importstyled,{css}from"styled-components";
77
import{UICompBuilder,withDefault}from"../../generators";
@@ -16,18 +16,22 @@ import { changeEvent, eventHandlerControl } from "comps/controls/eventHandlerCon
1616
import{jsonObjectExposingStateControl,stringExposingStateControl}from"comps/controls/codeStateControl";
1717
import{dropdownControl}from"comps/controls/dropdownControl";
1818
import{ArrayOrJSONObjectControl}from"comps/controls/codeControl";
19-
import{JSONObject}from"@lowcoder-ee/util/jsonTypes";
2019

21-
exportfunctiongetStyle(style:ColorPickerStyleType){
20+
exportfunctiongetStyle(style:InputLikeStyleType){
2221
returncss`
2322
border-radius:${style.radius};
2423
&:not(.ant-input-disabled, .ant-input-affix-wrapper-disabled),
25-
input {
24+
.ant-color-picker-trigger {
25+
color:${style.text};
26+
font-weight:${style.textWeight};
27+
font-family:${style.fontFamily};
28+
font-style:${style.fontStyle};
29+
text-transform:${style.textTransform};
30+
text-decoration:${style.textDecoration};
2631
background-color:${style.background};
27-
color:${style.text};
28-
font-weight:${style.textWeight};
29-
font-family:${style.fontFamily};
3032
border-color:${style.border};
33+
padding:${style.padding};
34+
margin:${style.margin};
3135
&:focus,
3236
&.ant-input-affix-wrapper-focused {
3337
border-color:${style.accent};
@@ -38,15 +42,31 @@ export function getStyle(style: ColorPickerStyleType) {
3842
.ant-input-clear-iconsvg:hover {
3943
opacity:0.65;
4044
}
45+
.ant-color-picker-trigger-text {
46+
font-size:${style.textSize};
47+
}
4148
}
4249
`;
4350
}
4451

45-
constColorPickerWrapper=styled(ColorPicker)<{$style:ColorPickerStyleType}>`
46-
width: 100%;
52+
constColorPickerWrapper=styled(ColorPicker)<{
53+
$style:InputLikeStyleType;
54+
$disabledStyle?:DisabledInputStyleType;
55+
}>`
4756
display: flex;
4857
justify-content: flex-start;
58+
box-shadow:${(props)=>
59+
`${props.$style?.boxShadow}${props.$style?.boxShadowColor}`};
4960
${(props)=>props.$style&&getStyle(props.$style)}
61+
62+
/* Disabled state styling */
63+
&:disabled,
64+
&.ant-input-disabled {
65+
color:${(props)=>props.$disabledStyle?.disabledText};
66+
background:${(props)=>props.$disabledStyle?.disabledBackground};
67+
border-color:${(props)=>props.$disabledStyle?.disabledBorder};
68+
cursor: not-allowed;
69+
}
5070
`;
5171

5272
constcolorPickerTriggerOption=[
@@ -61,20 +81,25 @@ export const colorPickerEvent = eventHandlerControl([
6181
constchildrenMap={
6282
...textInputChildren,
6383
value:stringExposingStateControl('value','#3377ff'),
64-
style:styleControl(ColorPickerStyle,'style'),
6584
color:jsonObjectExposingStateControl('color',{}),
6685
trigger:dropdownControl(colorPickerTriggerOption,'click'),
6786
disabledAlpha:BoolControl,
6887
showPresets:BoolControl,
6988
onEvent:colorPickerEvent,
7089
presets:withDefault(ArrayOrJSONObjectControl,JSON.stringify(presets,null,2)),
90+
style:styleControl(InputFieldStyle,'style'),
91+
labelStyle:styleControl(LabelStyle,'labelStyle'),
92+
inputFieldStyle:styleControl(InputLikeStyle,'inputFieldStyle'),
93+
animationStyle:styleControl(AnimationStyle,'animationStyle'),
94+
disabledStyle:styleControl(DisabledInputStyle,'disabledStyle'),
7195
};
7296

7397
exportconstColorPickerComp=newUICompBuilder(childrenMap,(props)=>{
7498
returnprops.label({
7599
children:(
76100
<ColorPickerWrapper
77-
$style={props.style}
101+
$style={props.inputFieldStyle}
102+
$disabledStyle={props.disabledStyle}
78103
value={props?.value?.value}
79104
disabledAlpha={props.disabledAlpha}
80105
showText={value=>value.toHexString().toUpperCase()}
@@ -94,6 +119,9 @@ export const ColorPickerComp = new UICompBuilder(childrenMap, (props) => {
94119
/>
95120
),
96121
style:props.style,
122+
labelStyle:props.labelStyle,
123+
inputFieldStyle:props.inputFieldStyle,
124+
animationStyle:props.animationStyle,
97125
});
98126
})
99127
.setPropertyViewFn((children)=>{
@@ -121,6 +149,10 @@ export const ColorPickerComp = new UICompBuilder(childrenMap, (props) => {
121149
<Sectionname={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
122150

123151
<Sectionname={sectionNames.style}>{children.style.getPropertyView()}</Section>
152+
<Sectionname={sectionNames.labelStyle}>{children.labelStyle.getPropertyView()}</Section>
153+
<Sectionname={sectionNames.inputFieldStyle}>{children.inputFieldStyle.getPropertyView()}</Section>
154+
<Sectionname={trans("prop.disabledStyle")}>{children.disabledStyle.getPropertyView()}</Section>
155+
<Sectionname={sectionNames.animationStyle}hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
124156
</>
125157
);
126158
})

‎client/packages/lowcoder/src/constants/themeConstants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,7 @@ export const defaultTheme: ThemeDetail = {
219219
dateRange:input,
220220
time:input,
221221
timeRange:input,
222+
colorPicker:input,
222223
rangeSlider:slider,
223224
segmentedControl,
224225
select:select,

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp