xt/color-q
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提取用来录入自定义颜色的公共ColorEntry组件。

Browse Source
This commit is contained in:
徐涛 2025-02-08 10:11:02 +08:00
parent 71feeb4efc
commit 5d3fc2903b
3 changed files with 52 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/page-components/scheme/ColorEntry.module.css Normal file
View File

@ -0,0 +1,13 @@
@layer components {
.delete_btn {
font-size: var(--font-size-xs);
color: var(--color-yuebai);
background-color: oklch(from var(--color-danger) l c h / 0.25);
&:hover {
background-color: oklch(from var(--color-danger-hover) l c h / 0.65);
}
&:active {
background-color: oklch(from var(--color-danger-active) l c h / 0.65);
}
}
}

38
src/page-components/scheme/ColorEntry.tsx Normal file
View File

@ -0,0 +1,38 @@
import { isEmpty } from 'lodash-es';
import { ActionIcon } from '../../components/ActionIcon';
import { FloatColorPicker } from '../../components/FloatcolorPicker';
import styles from './colorEntry.module.css';
export type IdenticalColorEntry = {
id: string;
name: string;
color: string;
};
type ColorEntryProps = {
entry: IdenticalColorEntry;
onDelete?: (index: string) => void;
};
export function ColorEntry({ entry, onDelete }: ColorEntryProps) {
return (
<>
<div className="input_wrapper">
<input type="text" name={`name_${entry.id}`} defaultValue={entry.name} />
</div>
<div>
<FloatColorPicker
name={`color_${entry.id}`}
color={isEmpty(entry.color) ? undefined : entry.color}
/>
</div>
<div>
<ActionIcon
icon="tabler:trash"
extendClassName={styles.delete_btn}
onClick={() => onDelete?.(entry.id)}
/>
</div>
</>
);
}

37
src/page-components/scheme/swatch-scheme/Builder.tsx
View File

@ -6,50 +6,15 @@ import {
SwatchSchemeSetting, SwatchSchemeSetting,
} from '../../../color_functions/color_module'; } from '../../../color_functions/color_module';
import { useColorFunction } from '../../../ColorFunctionContext'; import { useColorFunction } from '../../../ColorFunctionContext';
import { ActionIcon } from '../../../components/ActionIcon';
import { FloatColorPicker } from '../../../components/FloatColorPicker';
import { ScrollArea } from '../../../components/ScrollArea'; import { ScrollArea } from '../../../components/ScrollArea';
import { Switch } from '../../../components/Switch'; import { Switch } from '../../../components/Switch';
import { SchemeContent } from '../../../models'; import { SchemeContent } from '../../../models';
import { useUpdateScheme } from '../../../stores/schemes'; import { useUpdateScheme } from '../../../stores/schemes';
import { QSwatchEntry, QSwatchSchemeSetting, SwatchSchemeStorage } from '../../../swatch_scheme'; import { QSwatchEntry, QSwatchSchemeSetting, SwatchSchemeStorage } from '../../../swatch_scheme';
import { mapToObject } from '../../../utls'; import { mapToObject } from '../../../utls';
import { ColorEntry, IdenticalColorEntry } from '../ColorEntry';
import styles from './Builder.module.css'; import styles from './Builder.module.css';
type IdenticalColorEntry = {
id: string;
name: string;
color: string;
};
type ColorEntryProps = {
entry: IdenticalColorEntry;
onDelete?: (index: string) => void;
};
function ColorEntry({ entry, onDelete }: ColorEntryProps) {
return (
<>
<div className="input_wrapper">
<input type="text" name={`name_${entry.id}`} defaultValue={entry.name} />
</div>
<div>
<FloatColorPicker
name={`color_${entry.id}`}
color={isEmpty(entry.color) ? undefined : entry.color}
/>
</div>
<div>
<ActionIcon
icon="tabler:trash"
extendClassName={styles.delete_btn}
onClick={() => onDelete?.(entry.id)}
/>
</div>
</>
);
}
type SwatchSchemeBuilderProps = { type SwatchSchemeBuilderProps = {
scheme: SchemeContent<SwatchSchemeStorage>; scheme: SchemeContent<SwatchSchemeStorage>;
onBuildCompleted?: () => void; onBuildCompleted?: () => void;