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

Harmony功能中增加向Scheme选择颜色的功能。

Browse Source
This commit is contained in:
徐涛 2025-03-31 22:25:43 +08:00
parent 25a3cf0fce
commit ba8991d1b5
2 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/page-components/harmonies/HarmonyPreview.module.css
View File

@ -1,6 +1,7 @@
@layer pages {
.preview {
width: 100%;
height: 100%;
padding: 0 var(--spacing-m);
display: flex;
flex-direction: column;
@ -9,6 +10,7 @@
font-size: var(--font-size-m);
}
.color_blocks {
flex: 1;
display: flex;
flex-direction: row;
justify-content: flex-start;
@ -16,6 +18,7 @@
flex-wrap: nowrap;
gap: var(--spacing-s);
.color_block {
max-height: 23em;
display: flex;
flex-direction: column;
align-items: stretch;
@ -42,14 +45,25 @@
padding-inline: var(--spacing-s);
font-size: var(--font-size-s);
}
.color_code {
.color_code_row {
height: 1.5em;
padding-inline: var(--spacing-s);
font-size: var(--font-size-s);
text-transform: uppercase;
text-align: right;
> span {
cursor: pointer;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: var(--spacing-xs);
overflow: visible;
.color_code {
height: 1.5em;
padding-inline: var(--spacing-s);
font-size: var(--font-size-s);
text-transform: uppercase;
text-align: right;
> span {
cursor: pointer;
}
}
}
}

8
src/page-components/harmonies/HarmonyPreview.tsx
View File

@ -1,6 +1,7 @@
import cx from 'clsx';
import { constant, flatten, isEqual, take, times } from 'lodash-es';
import { useMemo } from 'react';
import ContextMenu from '../../components/ContextMenu';
import { useCopyColor } from '../../hooks/useCopyColor';
import { HarmonyColor } from '../../models';
import styles from './HarmonyPreview.module.css';
@ -33,8 +34,11 @@ export function HarmonyPreview({ colors = [] }: HarmonyPreviewProps) {
style={{ flexGrow: ratio }}>
<div className={styles.color_ratio}>{ratio > 0 && `Ratio: ${ratio}`}</div>
<div className={styles.color_square} style={{ backgroundColor: `#${color}` }}></div>
<div className={styles.color_code}>
{ratio > 0 && <span onClick={() => copyColor(color)}>#{color}</span>}
<div className={styles.color_code_row}>
<div className={styles.color_code}>
{ratio > 0 && <span onClick={() => copyColor(color)}>#{color}</span>}
</div>
<ContextMenu color={color} />
</div>
</div>
))}