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-06 15:37:37 +08:00
parent d4d821c53c
commit fc9a486087
1 changed files with 62 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/pages/Tones.tsx
View File

@@ -7,6 +7,7 @@ import { ColorPicker } from '../components/ColorPicker';
import { FlexColorStand } from '../components/FlexColorStand';
import { HSegmentedControl } from '../components/HSegmentedControl';
import { LabeledPicker } from '../components/LabeledPicker';
import { ScrollArea } from '../components/ScrollArea';
import { currentPickedColor } from '../stores/colors';
import styles from './Tones.module.css';
@@ -42,66 +43,68 @@ export function Tones() {
<h3>Color Tones</h3>
<p>By regularly changing the color hue to generate a series of light and dark colors.</p>
</header>
<section className={styles.explore_section}>
<aside className={styles.function_side}>
<div>
<h5>Basic color</h5>
<ColorPicker color={selectedColor} onSelect={(color) => setSelectedColor(color)} />
<ScrollArea enableY>
<section className={styles.explore_section}>
<aside className={styles.function_side}>
<div>
<h5>Basic color</h5>
<ColorPicker color={selectedColor} onSelect={(color) => setSelectedColor(color)} />
</div>
<div>
<h5>Series Setting</h5>
<LabeledPicker
title="Expand Tones"
min={1}
max={5}
step={1}
value={tones}
onChange={(value) => {
setTones(toInteger(value));
setSeedBias(0);
}}
/>
<LabeledPicker
title="Basic Bias"
min={-(tones - 1)}
max={tones - 1}
value={seedBias}
onChange={(value) => setSeedBias(toInteger(value))}
/>
<LabeledPicker
title="Tone Step"
min={10}
max={25}
step={1}
unit="%"
value={steps}
onChange={setSteps}
/>
</div>
</aside>
<div className={styles.tones_content}>
<h5>Color Tones</h5>
<div className={styles.color_value_mode}>
<label>Copy color value in</label>
<HSegmentedControl
options={[
{ label: 'HEX', value: 'hex' },
{ label: 'RGB', value: 'rgb' },
{ label: 'HSL', value: 'hsl' },
{ label: 'LAB', value: 'lab' },
{ label: 'OKLCH', value: 'oklch' },
]}
valu={mode}
onChange={setMode}
/>
</div>
<div className={styles.colors_booth}>
{colors.map((c, index) => (
<FlexColorStand key={`${c}-${index}`} color={c} valueMode={mode} />
))}
</div>
</div>
<div>
<h5>Series Setting</h5>
<LabeledPicker
title="Expand Tones"
min={1}
max={5}
step={1}
value={tones}
onChange={(value) => {
setTones(toInteger(value));
setSeedBias(0);
}}
/>
<LabeledPicker
title="Basic Bias"
min={-(tones - 1)}
max={tones - 1}
value={seedBias}
onChange={(value) => setSeedBias(toInteger(value))}
/>
<LabeledPicker
title="Tone Step"
min={10}
max={25}
step={1}
unit="%"
value={steps}
onChange={setSteps}
/>
</div>
</aside>
<div className={styles.tones_content}>
<h5>Color Tones</h5>
<div className={styles.color_value_mode}>
<label>Copy color value in</label>
<HSegmentedControl
options={[
{ label: 'HEX', value: 'hex' },
{ label: 'RGB', value: 'rgb' },
{ label: 'HSL', value: 'hsl' },
{ label: 'LAB', value: 'lab' },
{ label: 'OKLCH', value: 'oklch' },
]}
valu={mode}
onChange={setMode}
/>
</div>
<div className={styles.colors_booth}>
{colors.map((c, index) => (
<FlexColorStand key={`${c}-${index}`} color={c} valueMode={mode} />
))}
</div>
</div>
</section>
</section>
</ScrollArea>
</div>
);
}