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

Theme canvas settings#1247

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
FalkWolsky merged 24 commits intodevfromtheme_canvas_settings
Oct 25, 2024
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
Show all changes
24 commits
Select commitHold shift + click to select a range
1616232
theme canvas settings
raheeliftikhar5Oct 8, 2024
420c56f
set default values for canvas settings
raheeliftikhar5Oct 8, 2024
dba9097
theme canvas settings
raheeliftikhar5Oct 10, 2024
e76ef90
canvas setting in theme and app
raheeliftikhar5Oct 10, 2024
81a55be
small fix
raheeliftikhar5Oct 10, 2024
21ced62
add rowCount in readonly view
raheeliftikhar5Oct 11, 2024
9c11938
replaced color picker to allow gradient selection
raheeliftikhar5Oct 15, 2024
c459d56
Timeline: added gradient
raheeliftikhar5Oct 16, 2024
1c33fd0
added canvas bg color option in app Settings
raheeliftikhar5Oct 16, 2024
4f19e7b
added background style utility
raheeliftikhar5Oct 16, 2024
419c11c
ShapeComp: added gradient
raheeliftikhar5Oct 16, 2024
aba86a6
Containers: added gradient
raheeliftikhar5Oct 16, 2024
91d8e3a
List/GridView: added gradient
raheeliftikhar5Oct 16, 2024
f462970
Modal/Drawer: added gradients
raheeliftikhar5Oct 16, 2024
92292c3
added gradient
raheeliftikhar5Oct 16, 2024
0d4b64d
Table: added gradient
raheeliftikhar5Oct 17, 2024
f560a9a
Table: added gradients
raheeliftikhar5Oct 18, 2024
557407f
fixed canvas settings
raheeliftikhar5Oct 18, 2024
2f0a51a
set app default canvas settings
raheeliftikhar5Oct 18, 2024
6c16141
show theme colors in preset colors for color picker
raheeliftikhar5Oct 21, 2024
b09e024
separate app settings, canvas settings and js settings
raheeliftikhar5Oct 21, 2024
89aa5d0
move theme selection in color settings
raheeliftikhar5Oct 22, 2024
bd028f3
fix opacity not working
raheeliftikhar5Oct 25, 2024
dd50f07
hide gradient selection in color picker for text/border colors
raheeliftikhar5Oct 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,18 +4,36 @@ import { generate } from "@ant-design/colors/es";

extend([namesPlugin]);

export const gradientColors = [
"linear-gradient(90deg, #1CB5E0 0%, #000851 100%)",
"linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%)",
"linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%)",
"linear-gradient(90deg, #3F2B96 0%, #A8C0FF 100%)",
"linear-gradient(90deg, #FDBB2D 0%, #22C1C3 100%)",
"linear-gradient(90deg, #FDBB2D 0%, #3A1C71 100%)",
"linear-gradient(90deg, #e3ffe7 0%, #d9e7ff 100%)",
"linear-gradient(90deg, #4b6cb7 0%, #182848 100%)",
"linear-gradient(90deg, #9ebd13 0%, #008552 100%)",
"linear-gradient(90deg, #0700b8 0%, #00ff88 100%)",
"linear-gradient(90deg, #d53369 0%, #daae51 100%)",
"linear-gradient(90deg, #efd5ff 0%, #515ada 100%)",
"linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%)",
"linear-gradient(90deg, #f8ff00 0%, #3ad59f 100%)",
"linear-gradient(90deg, #fcff9e 0%, #c67700 100%)",
];

// Color Palette
export const constantColors = [
{ id: 1, color:"#6D83F2" },
{ id: 2, color:"#5589F2" },
{ id: 3, color:"#36B389" },
{ id: 4, color:"#E68E50" },
{ id: 5, color:"#E67373" },
{ id: 6, color:"#F5FFF7" },
{ id: 7, color:"#F3FAFF" },
{ id: 8, color:"#FFF6E6" },
{ id: 9, color:"#F5F5F6" },
{ id: 10, color:"#FFFFFF" },
"#6D83F2",
"#5589F2",
"#36B389",
"#E68E50",
"#E67373",
"#F5FFF7",
"#F3FAFF",
"#FFF6E6",
"#F5F5F6",
"#FFFFFF",
];

export const chartColorPalette = [
Expand All@@ -40,7 +58,17 @@ const alphaOfRgba = (rgba: string) => {
return colord(rgba).alpha().toString();
};

const isValidColor = (str: string) => {
const isValidGradient = (color?: string) => {
if (!color) return false;

const linearGradientRegex = /^linear-gradient\((\d+deg|to\s+(top|right|bottom|left)(\s+(top|right|bottom|left))?)\s*,\s*((#[0-9a-fA-F]{3,6}|rgba?\(\d+,\s*\d+,\s*\d+(,\s*\d+(\.\d+)?)?\)|[a-zA-Z]+)(\s+\d+%?)?,?\s*)+\)$/i;
const radialGradientRegex = /^radial-gradient\(\s*(circle|ellipse)?\s*,\s*((#[0-9a-fA-F]{3,6}|rgba?\(\d+,\s*\d+,\s*\d+(,\s*\d+(\.\d+)?)?\)|[a-zA-Z]+)(\s+\d+%?)?,?\s*)+\)$/i;

return linearGradientRegex.test(color) || radialGradientRegex.test(color);
}

const isValidColor = (str?: string) => {
if (!str) return false;
return colord(str).isValid();
};

Expand DownExpand Up@@ -91,4 +119,4 @@ export const darkenColor = (colorStr: string, intensity: number) => {
return color.darken(intensity).toHex().toUpperCase();
};

export { toRGBA, toHex, alphaOfRgba, isValidColor };
export { toRGBA, toHex, alphaOfRgba, isValidColor, isValidGradient };
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
import { RgbaStringColorPicker } from "react-colorful";
import { default as Popover } from "antd/es/popover";
import ColorPicker, {useColorPicker} from 'react-best-gradient-color-picker';
import { ActionType } from '@rc-component/trigger/lib/interface';
import {
alphaOfRgba,
toRGBA,
toHex,
constantColors,
isValidColor,
isValidGradient,
gradientColors,
} from "components/colorSelect/colorUtils";
import styled, { css } from "styled-components";
import { useCallback, useRef, useState } from "react";
import { useCallback, useRef, useState, useEffect, useMemo, } from "react";
import { throttle } from "lodash";
import { changeValueAction } from "lowcoder-core";

Expand All@@ -18,54 +20,65 @@ interface ColorSelectProps {
trigger?: ActionType;
dispatch?: (value: any) => void;
changeColor?: (value: any) => void;
presetColors?: string[];
allowGradient?: boolean;
}

export const ColorSelect = (props: ColorSelectProps) => {
const { color, trigger = "click", dispatch, changeColor } = props;
let pickerColor = useRef(toRGBA(color));
const [visible, setVisible] = useState(false);
const [ selectedColor, setSelectedColor ] = useState(color);
const { getGradientObject } = useColorPicker(selectedColor, setSelectedColor);

const presetColors = useMemo(() => {
let colors = props.presetColors || [];
if (props.allowGradient) {
colors = colors.concat(gradientColors.slice(0, 16 - colors.length));
}
return colors;
}, [props.presetColors, selectedColor, props.allowGradient]);

const throttleChange = useCallback(
throttle((rgbaColor: string) => {
dispatch && dispatch(changeValueAction(toHex(rgbaColor), true));
changeColor && changeColor(toHex(rgbaColor));
dispatch && dispatch(changeValueAction(rgbaColor, true));
changeColor && changeColor(rgbaColor);
}, 200),
[dispatch,changeColor]
);

useEffect(() => {
if (color !== selectedColor) {
const value = getGradientObject();
if (!value?.isGradient) {
return throttleChange(toHex(selectedColor));
}
throttleChange(selectedColor);
}
}, [selectedColor])

return (
<Popover
trigger={trigger}
placement="left"
destroyTooltipOnHide={true}
onOpenChange={(value) => {
pickerColor.current = toRGBA(color);
setVisible(value);
}}
content={
<PopoverContainer>
<div style={{ position: "relative" }}>
<RgbaStringColorPicker color={pickerColor.current} onChange={throttleChange} />
<AlphaDiv color={color?.substring(0, 7)}>
<BackDiv $color={alphaOfRgba(toRGBA(color))}></BackDiv>
</AlphaDiv>
</div>
<ConstantDiv>
{constantColors.map((item) => {
return (
<ConstantBlock
color={item.color}
key={item.id}
onClick={() => {
throttleChange(item.color);
pickerColor.current = toRGBA(item.color);
}}
/>
);
})}
</ConstantDiv>
<StyledColorPicker
disableDarkMode
value={color}
onChange={setSelectedColor}
width={250}
height={160}
presets={presetColors}
$allowGradient={props.allowGradient}
/>
</PopoverContainer>
}
>
<ColorBlock $color={color?.substring(0, 7)}>
<BackDiv $color={alphaOfRgba(toRGBA(color))}></BackDiv>
<ColorBlock $color={color}>
</ColorBlock>
</Popover>
);
Expand DownExpand Up@@ -139,7 +152,6 @@ const PopoverContainer = styled.div`
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
`;
// contrast block
const AlphaDiv = styled.div.attrs((props) => ({
Expand DownExpand Up@@ -169,12 +181,30 @@ const BackDiv = styled.div.attrs<{ $color: string }>((props: { $color: string })
`;
// main block
const ColorBlock = styled.div<{ $color: string }>`
background-color: ${(props) => (isValidColor(props.$color) ? props.$color : "#FFFFFF")};
background: ${(props) => (
isValidColor(props.$color) || isValidGradient(props.$color)
? props.$color
: "#FFFFFF"
)};
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 4px;
height: 24px;
width: 24px;
cursor: pointer;
background-clip: content-box;
overflow: hidden;
`;

const StyledColorPicker = styled(ColorPicker)<{$allowGradient?: boolean}>`
#rbgcp-wrapper > div:nth-child(2) > div:first-child > div:first-child {
${props => !props.$allowGradient && `visibility: hidden`};
}
#rbgcp-wrapper > div:last-child > div:last-child {
justify-content: flex-start !important;
gap: 3px;

> div {
border: 1px solid lightgray;
}
}
`;
2 changes: 2 additions & 0 deletionsclient/packages/lowcoder-design/src/icons/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -172,6 +172,8 @@ export { ReactComponent as LeftSettingIcon } from "./remix/tools-fill.svg";
export { ReactComponent as LeftLayersIcon } from "./remix/stack-line.svg";
export { ReactComponent as LeftHelpIcon } from "./v1/icon-left-help.svg";
export { ReactComponent as LeftPreloadIcon } from "./v1/icon-left-preload.svg";
export { ReactComponent as LeftColorPaletteIcon } from "./remix/palette-line.svg";
export { ReactComponent as LeftJSSettingIcon } from "./remix/javascript-line.svg";


export { ReactComponent as HomeSettingsIcon } from "./v1/icon-home-settings.svg";
Expand Down
1 change: 1 addition & 0 deletionsclient/packages/lowcoder/package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -64,6 +64,7 @@
"qrcode.react": "^3.1.0",
"rc-trigger": "^5.3.1",
"react": "^18.2.0",
"react-best-gradient-color-picker": "^3.0.10",
"react-colorful": "^5.5.1",
"react-documents": "^1.2.1",
"react-dom": "^18.2.0",
Expand Down
11 changes: 10 additions & 1 deletionclient/packages/lowcoder/src/api/commonSettingApi.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -53,7 +53,16 @@ export interface ThemeDetail {
chart?: string;
margin?: string;
padding?: string;
gridColumns?: string; //Added By Aqib Mirza
gridPaddingX?: number;
gridPaddingY?: number;
gridColumns?: string;
gridRowHeight?: string;
gridRowCount?: number;
gridBgImage?: string;
gridBgImageRepeat?: string;
gridBgImageSize?: string;
gridBgImagePosition?: string;
gridBgImageOrigin?: string;
text?: string;
textSize?: string;
fontFamily?: string;
Expand Down
Loading
Loading
[8]ページ先頭
©2009-2025 Movatter.jp