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

调整色轮界面内容顺序。

Browse Source
This commit is contained in:
徐涛
2025-01-07 11:19:27 +08:00
parent f3eceda560
commit 6fbe9c70d7
2 changed files with 19 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/page-components/wheels/ColorColumn.tsx
View File

@@ -15,7 +15,9 @@ function ColorBlock({ dimmed, color, isRoot = false }: ColorBlockProps) {
const copyColor = useCopyColor();
return (
<div className={styles.color_block} onClick={() => copyColor(color)}>
<div
className={styles.color_block}
onClick={() => copyColor(color.startsWith('#') ? color : `#${color}`)}>
<div className={styles.bg} style={{ backgroundColor: `#${color}` }} />
<div className={cx(styles.dim_overlay, dimmed && styles.show_overlay)} />
<div className={cx(isRoot && styles.active)} />

32
src/pages/Wheels.tsx
View File

@@ -28,6 +28,22 @@ export function Wheels() {
<h5>Basic color</h5>
<ColorPicker color={selectedColor} onSelect={(color) => setSelectedColor(color)} />
</div>
<div className={styles.mode_navigation}>
<h5>Color selection method</h5>
<VSegmentedControl
onChange={setSelectedMode}
options={[
{ label: 'Complementary', value: 'complementary' },
{ label: 'Analogous', value: 'analogous' },
{ label: 'Analogous with Complementary', value: 'analogous_with_complementary' },
{ label: 'Triadic', value: 'triadic' },
{ label: 'Split Complementary', value: 'split_complementary' },
{ label: 'Tetradic', value: 'tetradic' },
{ label: 'Flip Tetradic', value: 'flip_tetradic' },
{ label: 'Square', value: 'square' },
]}
/>
</div>
<div>
<h5>Series Setting</h5>
<LabeledPicker
@@ -48,22 +64,6 @@ export function Wheels() {
onChange={setSteps}
/>
</div>
<div className={styles.mode_navigation}>
<h5>Color selection method</h5>
<VSegmentedControl
onChange={setSelectedMode}
options={[
{ label: 'Complementary', value: 'complementary' },
{ label: 'Analogous', value: 'analogous' },
{ label: 'Analogous with Complementary', value: 'analogous_with_complementary' },
{ label: 'Triadic', value: 'triadic' },
{ label: 'Split Complementary', value: 'split_complementary' },
{ label: 'Tetradic', value: 'tetradic' },
{ label: 'Flip Tetradic', value: 'flip_tetradic' },
{ label: 'Square', value: 'square' },
]}
/>
</div>
</aside>
<div className={styles.wheel_side}>
<ColorWheel