Skip to content

Commit 6c16141

Browse files
raheeliftikhar5raheeliftikhar5
committed
show theme colors in preset colors for color picker
1 parent 2f0a51a commit 6c16141

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+
export const gradientColors = [
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
export const constantColors = [
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
export const chartColorPalette = [

‎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
import styled, { 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
export const ColorSelect = (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+
const presetColors = useMemo(() => {
34+
let colors = props.presetColors || [];
35+
colors = colors.concat(gradientColors.slice(0, 16 - colors.length));
36+
return colors;
37+
}, [props.presetColors, selectedColor]);
38+
3139
const throttleChange = 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
const StyledColorPicker = 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
import React, { ReactNode, useCallback, useContext, useEffect, useMemo, useState } from "react";
65
import styled from "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
export interface CellProps {

‎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
import styled from "styled-components";
4-
import React, { useEffect, useState } from "react";
4+
import React, { 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
const ColorContainer = styled.div`
910
display: inline-flex;
@@ -93,6 +94,8 @@ function ColorItem(props: {
9394
const [focus, setFocus] = useState(false);
9495
const inputRef = React.createRef<HTMLDivElement>();
9596
const containerRef = React.createRef<HTMLDivElement>();
97+
98+
const currentThemeColors = useThemeColors();
9699

97100
const input = 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
<div style={{ 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
export const ForceViewModeContext = React.createContext<boolean>(false);
2731

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

171-
172175
export function useMergeCompStyles(
173176
props: Record<string, any>,
174177
dispatch: (action: CompAction) => void
@@ -226,3 +229,28 @@ export function useMergeCompStyles(
226229
preventStyleOverwriting,
227230
]);
228231
}
232+
233+
type ColorKey = 'primary' | 'textDark' | 'textLight' | 'canvas' | 'primarySurface' | 'border';
234+
type ColorKeys = ColorKey[];
235+
236+
export function useThemeColors() {
237+
const currentTheme = useContext(ThemeContext)?.theme ?? {} as ThemeDetail;
238+
const colorKeys: ColorKeys = ['primary', 'textDark', 'textLight', 'canvas', 'primarySurface', 'border'];
239+
240+
return useMemo(() => {
241+
let colors: 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+
return uniq(colors);
252+
}, [
253+
currentTheme,
254+
defaultTheme,
255+
]);
256+
}

0 commit comments

Comments
 (0)