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

Commit6c16141

Browse files
show theme colors in preset colors for color picker
1 parent2f0a51a commit6c16141

File tree

5 files changed

+81
-22
lines changed

5 files changed

+81
-22
lines changed

‎client/packages/lowcoder-design/src/components/colorSelect/colorUtils.ts

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,36 @@ import { generate } from "@ant-design/colors/es";
44

55
extend([namesPlugin]);
66

7+
exportconstgradientColors=[
8+
"linear-gradient(90deg, #1CB5E0 0%, #000851 100%)",
9+
"linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%)",
10+
"linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%)",
11+
"linear-gradient(90deg, #3F2B96 0%, #A8C0FF 100%)",
12+
"linear-gradient(90deg, #FDBB2D 0%, #22C1C3 100%)",
13+
"linear-gradient(90deg, #FDBB2D 0%, #3A1C71 100%)",
14+
"linear-gradient(90deg, #e3ffe7 0%, #d9e7ff 100%)",
15+
"linear-gradient(90deg, #4b6cb7 0%, #182848 100%)",
16+
"linear-gradient(90deg, #9ebd13 0%, #008552 100%)",
17+
"linear-gradient(90deg, #0700b8 0%, #00ff88 100%)",
18+
"linear-gradient(90deg, #d53369 0%, #daae51 100%)",
19+
"linear-gradient(90deg, #efd5ff 0%, #515ada 100%)",
20+
"linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%)",
21+
"linear-gradient(90deg, #f8ff00 0%, #3ad59f 100%)",
22+
"linear-gradient(90deg, #fcff9e 0%, #c67700 100%)",
23+
];
24+
725
// Color Palette
826
exportconstconstantColors=[
9-
{id:1,color:"#6D83F2"},
10-
{id:2,color:"#5589F2"},
11-
{id:3,color:"#36B389"},
12-
{id:4,color:"#E68E50"},
13-
{id:5,color:"#E67373"},
14-
{id:6,color:"#F5FFF7"},
15-
{id:7,color:"#F3FAFF"},
16-
{id:8,color:"#FFF6E6"},
17-
{id:9,color:"#F5F5F6"},
18-
{id:10,color:"#FFFFFF"},
27+
"#6D83F2",
28+
"#5589F2",
29+
"#36B389",
30+
"#E68E50",
31+
"#E67373",
32+
"#F5FFF7",
33+
"#F3FAFF",
34+
"#FFF6E6",
35+
"#F5F5F6",
36+
"#FFFFFF",
1937
];
2038

2139
exportconstchartColorPalette=[

‎client/packages/lowcoder-design/src/components/colorSelect/index.tsx

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@ import {
88
constantColors,
99
isValidColor,
1010
isValidGradient,
11+
gradientColors,
1112
}from"components/colorSelect/colorUtils";
1213
importstyled,{css}from"styled-components";
13-
import{useCallback,useRef,useState,useEffect}from"react";
14+
import{useCallback,useRef,useState,useEffect,useMemo,}from"react";
1415
import{throttle}from"lodash";
1516
import{changeValueAction}from"lowcoder-core";
1617

@@ -19,6 +20,7 @@ interface ColorSelectProps {
1920
trigger?:ActionType;
2021
dispatch?:(value:any)=>void;
2122
changeColor?:(value:any)=>void;
23+
presetColors?:string[];
2224
}
2325

2426
exportconstColorSelect=(props:ColorSelectProps)=>{
@@ -28,6 +30,12 @@ export const ColorSelect = (props: ColorSelectProps) => {
2830
const[selectedColor,setSelectedColor]=useState(color);
2931
const{ getGradientObject, valueToHex}=useColorPicker(selectedColor,setSelectedColor);
3032

33+
constpresetColors=useMemo(()=>{
34+
letcolors=props.presetColors||[];
35+
colors=colors.concat(gradientColors.slice(0,16-colors.length));
36+
returncolors;
37+
},[props.presetColors,selectedColor]);
38+
3139
constthrottleChange=useCallback(
3240
throttle((rgbaColor:string)=>{
3341
dispatch&&dispatch(changeValueAction(rgbaColor,true));
@@ -62,10 +70,7 @@ export const ColorSelect = (props: ColorSelectProps) => {
6270
onChange={setSelectedColor}
6371
width={250}
6472
height={160}
65-
hideInputs
66-
hideAdvancedSliders
67-
hideColorGuide
68-
hideInputType
73+
presets={presetColors}
6974
/>
7075
</PopoverContainer>
7176
}
@@ -188,7 +193,12 @@ const ColorBlock = styled.div<{ $color: string }>`
188193
`;
189194

190195
constStyledColorPicker=styled(ColorPicker)`
191-
#rbgcp-advanced-btn, #rbgcp-comparibles-btn, #rbgcp-color-model-btn {
192-
display: none !important;
196+
#rbgcp-wrapper > div:last-child > div:last-child {
197+
justify-content: flex-start !important;
198+
gap: 3px;
199+
200+
> div {
201+
border: 1px solid lightgray;
202+
}
193203
}
194204
`;

‎client/packages/lowcoder/src/components/table/EditableCell.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import{PresetStatusColorType}from"antd/es/_util/colors";
22
import_from"lodash";
33
import{changeChildAction,DispatchType}from"lowcoder-core";
4-
import{constantColors}from"lowcoder-design/src/components/colorSelect/colorUtils";
54
importReact,{ReactNode,useCallback,useContext,useEffect,useMemo,useState}from"react";
65
importstyledfrom"styled-components";
76
import{JSONValue}from"util/jsonTypes";
@@ -26,8 +25,8 @@ const EditableChip = styled.div`
2625
height: 0px;
2726
border: 4.5px solid transparent;
2827
border-radius: 2px;
29-
border-top-color:${constantColors[1].color};
30-
border-right-color:${constantColors[1].color};
28+
border-top-color:#5589F2;
29+
border-right-color:#5589F2;
3130
`;
3231

3332
exportinterfaceCellProps{

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import{ColorCodeControl}from"./codeControl";
22
import{ColorSelect,controlItem,ControlPropertyViewWrapper,IconDep}from"lowcoder-design";
33
importstyledfrom"styled-components";
4-
importReact,{useEffect,useState}from"react";
4+
importReact,{useContext,useEffect,useState}from"react";
55
import{ControlParams}from"./controlParams";
66
import{trans}from"i18n";
7+
import{useThemeColors}from"@lowcoder-ee/util/hooks";
78

89
constColorContainer=styled.div`
910
display: inline-flex;
@@ -93,6 +94,8 @@ function ColorItem(props: {
9394
const[focus,setFocus]=useState(false);
9495
constinputRef=React.createRef<HTMLDivElement>();
9596
constcontainerRef=React.createRef<HTMLDivElement>();
97+
98+
constcurrentThemeColors=useThemeColors();
9699

97100
constinput=propertyView.call(controlThis,{
98101
placeholder:param.panelDefaultColor,
@@ -135,6 +138,7 @@ function ColorItem(props: {
135138
<ColorSelect
136139
dispatch={controlThis.dispatch}
137140
color={param.panelDefaultColor||color||DEFAULT_COLOR}
141+
presetColors={currentThemeColors}
138142
/>
139143
<divstyle={{display:"flex"}}>
140144
<DepStyle

‎client/packages/lowcoder/src/util/hooks.ts

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,13 @@ import { getDataSourceStructures } from "redux/selectors/datasourceSelectors";
1919
import{DatasourceStructure}from"api/datasourceApi";
2020
import{loadAuthSearchParams}from"pages/userAuth/authUtils";
2121
import{ThemeContext}from"@lowcoder-ee/comps/utils/themeContext";
22+
import{defaultTheme}from"constants/themeConstants";
2223
import{CompTypeContext}from"@lowcoder-ee/comps/utils/compTypeContext";
2324
import{setInitialCompStyles}from"@lowcoder-ee/comps/utils/themeUtil";
2425
import{CompAction,changeChildAction}from"lowcoder-core";
26+
import{ThemeDetail}from"@lowcoder-ee/api/commonSettingApi";
27+
import{uniq}from"lodash";
28+
import{constantColors}from"components/colorSelect/colorUtils";
2529

2630
exportconstForceViewModeContext=React.createContext<boolean>(false);
2731

@@ -168,7 +172,6 @@ export function useMetaData(datasourceId: string) {
168172
);
169173
}
170174

171-
172175
exportfunctionuseMergeCompStyles(
173176
props:Record<string,any>,
174177
dispatch:(action:CompAction)=>void
@@ -226,3 +229,28 @@ export function useMergeCompStyles(
226229
preventStyleOverwriting,
227230
]);
228231
}
232+
233+
typeColorKey='primary'|'textDark'|'textLight'|'canvas'|'primarySurface'|'border';
234+
typeColorKeys=ColorKey[];
235+
236+
exportfunctionuseThemeColors(){
237+
constcurrentTheme=useContext(ThemeContext)?.theme??{}asThemeDetail;
238+
constcolorKeys:ColorKeys=['primary','textDark','textLight','canvas','primarySurface','border'];
239+
240+
returnuseMemo(()=>{
241+
letcolors:string[]=[];
242+
243+
colorKeys.forEach(colorKey=>{
244+
if(Boolean(defaultTheme[colorKey])){
245+
colors.push(defaultTheme[colorKey]??'');
246+
}
247+
if(Boolean(currentTheme[colorKey])){
248+
colors.push(currentTheme[colorKey]??'');
249+
}
250+
})
251+
returnuniq(colors);
252+
},[
253+
currentTheme,
254+
defaultTheme,
255+
]);
256+
}

0 commit comments

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