feat: improve color

This commit is contained in:
fantasticit 2022-04-01 21:33:06 +08:00
parent 9b47b81374
commit bf2c55b0fb
3 changed files with 131 additions and 38 deletions

View File

@ -1,29 +1,80 @@
import React from 'react'; import React from 'react';
import { Dropdown } from '@douyinfe/semi-ui'; import { Dropdown, Typography } from '@douyinfe/semi-ui';
import styles from './style.module.scss'; import styles from './style.module.scss';
const { Text } = Typography;
const colors = [ const colors = [
'rgb(23, 43, 77)', '#000000',
'rgb(7, 71, 166)', '#262626',
'rgb(0, 141, 166)', '#595959',
'rgb(0, 102, 68)', '#8C8C8C',
'rgb(255, 153, 31)', '#BFBFBF',
'rgb(191, 38, 0)', '#D9D9D9',
'rgb(64, 50, 148)', '#E9E9E9',
'rgb(151, 160, 175)', '#F5F5F5',
'rgb(76, 154, 255)', '#FAFAFA',
'rgb(0, 184, 217)', '#FFFFFF',
'rgb(54, 179, 126)', '#F5222D',
'rgb(255, 196, 0)', '#FA541C',
'rgb(255, 86, 48)', '#FA8C16',
'rgb(101, 84, 192)', '#FADB14',
'rgb(255, 255, 255)', '#52C41A',
'rgb(179, 212, 255)', '#13C2C2',
'rgb(179, 245, 255)', '#1890FF',
'rgb(171, 245, 209)', '#2F54EB',
'rgb(255, 240, 179)', '#722ED1',
'rgb(255, 189, 173)', '#EB2F96',
'rgb(234, 230, 255)', '#FFE8E6',
'#FFECE0',
'#FFEFD1',
'#FCFCCA',
'#E4F7D2',
'#D3F5F0',
'#D4EEFC',
'#DEE8FC',
'#EFE1FA',
'#FAE1EB',
'#FFA39E',
'#FFBB96',
'#FFD591',
'#FFFB8F',
'#B7EB8F',
'#87E8DE',
'#91D5FF',
'#ADC6FF',
'#D3ADF7',
'#FFADD2',
'#FF4D4F',
'#FF7A45',
'#FFA940',
'#FFEC3D',
'#73D13D',
'#36CFC9',
'#40A9FF',
'#597EF7',
'#9254DE',
'#F759AB',
'#CF1322',
'#D4380D',
'#D46B08',
'#D4B106',
'#389E0D',
'#08979C',
'#096DD9',
'#1D39C4',
'#531DAB',
'#C41D7F',
'#820014',
'#871400',
'#873800',
'#614700',
'#135200',
'#00474F',
'#003A8C',
'#061178',
'#22075E',
'#780650',
]; ];
export const ColorPicker: React.FC<{ export const ColorPicker: React.FC<{
@ -38,14 +89,21 @@ export const ColorPicker: React.FC<{
trigger="click" trigger="click"
position={'bottom'} position={'bottom'}
render={ render={
<div className={styles.colorWrap}> <div style={{ padding: '8px 0' }}>
{colors.map((color) => { <div className={styles.emptyWrap} onClick={() => onSetColor(null)}>
return ( <span></span>
<div key={color} className={styles.colorItem} onClick={() => onSetColor(color)}> <Text></Text>
<span style={{ backgroundColor: color }}></span> </div>
</div>
); <div className={styles.colorWrap}>
})} {colors.map((color) => {
return (
<div key={color} className={styles.colorItem} onClick={() => onSetColor(color)}>
<span style={{ backgroundColor: color }}></span>
</div>
);
})}
</div>
</div> </div>
} }
> >

View File

@ -1,20 +1,53 @@
.emptyWrap {
display: flex;
flex-wrap: nowrap;
padding: 8px 10px;
cursor: pointer;
&:hover {
background-color: var(--semi-color-fill-1);
}
> span:first-child {
position: relative;
width: 18px;
height: 18px;
display: block;
border-radius: 2px 2px;
border: 1px solid #e8e8e8;
margin-right: 8px;
&::after {
content: '';
display: block;
position: absolute;
top: 8px;
left: 0px;
width: 17px;
height: 0;
border-bottom: 2px solid #ff5151;
transform: rotate(45deg);
}
}
}
.colorWrap { .colorWrap {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
width: 240px; width: 256px;
padding: 8px; padding: 8px;
.colorItem { .colorItem {
display: flex; display: flex;
width: 32px; width: 24px;
height: 32px; height: 24px;
cursor: pointer; cursor: pointer;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 4px; border-radius: 4px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
&:nth-of-type(n + 8) { &:nth-of-type(n + 11) {
margin-top: 4px; margin-top: 4px;
} }
@ -24,8 +57,8 @@
> span { > span {
display: block; display: block;
width: 28px; width: 20px;
height: 28px; height: 20px;
border: 1px solid var(--semi-color-border); border: 1px solid var(--semi-color-border);
border-radius: 2px; border-radius: 2px;
} }

View File

@ -16,7 +16,7 @@ export const ColorMenu: React.FC<{ editor: any }> = ({ editor }) => {
<> <>
<ColorPicker <ColorPicker
onSetColor={(color) => { onSetColor={(color) => {
editor.chain().focus().setColor(color).run(); color ? editor.chain().focus().setColor(color).run() : editor.chain().focus().unsetColor(color).run();
}} }}
disabled={isTitleActive(editor)} disabled={isTitleActive(editor)}
> >
@ -49,7 +49,9 @@ export const ColorMenu: React.FC<{ editor: any }> = ({ editor }) => {
<ColorPicker <ColorPicker
onSetColor={(color) => { onSetColor={(color) => {
editor.chain().focus().setBackgroundColor(color).run(); color
? editor.chain().focus().setBackgroundColor(color).run()
: editor.chain().focus().unsetBackgroundColor().run();
}} }}
disabled={isTitleActive(editor)} disabled={isTitleActive(editor)}
> >