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
Show Stats 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 { FlexColorStand } from '../components/FlexColorStand';
import { HSegmentedControl } from '../components/HSegmentedControl'; import { HSegmentedControl } from '../components/HSegmentedControl';
import { LabeledPicker } from '../components/LabeledPicker'; import { LabeledPicker } from '../components/LabeledPicker';
import { ScrollArea } from '../components/ScrollArea';
import { currentPickedColor } from '../stores/colors'; import { currentPickedColor } from '../stores/colors';
import styles from './Tones.module.css'; import styles from './Tones.module.css';
@ -42,66 +43,68 @@ export function Tones() {
<h3>Color Tones</h3> <h3>Color Tones</h3>
<p>By regularly changing the color hue to generate a series of light and dark colors.</p> <p>By regularly changing the color hue to generate a series of light and dark colors.</p>
</header> </header>
<section className={styles.explore_section}> <ScrollArea enableY>
<aside className={styles.function_side}> <section className={styles.explore_section}>
<div> <aside className={styles.function_side}>
<h5>Basic color</h5> <div>
<ColorPicker color={selectedColor} onSelect={(color) => setSelectedColor(color)} /> <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>
<div> </section>
<h5>Series Setting</h5> </ScrollArea>
<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>
</div> </div>
); );
} }