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

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

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

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

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