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 { Dropdown } from '@douyinfe/semi-ui';
import { Dropdown, Typography } from '@douyinfe/semi-ui';
import styles from './style.module.scss';
const { Text } = Typography;
const colors = [
'rgb(23, 43, 77)',
'rgb(7, 71, 166)',
'rgb(0, 141, 166)',
'rgb(0, 102, 68)',
'rgb(255, 153, 31)',
'rgb(191, 38, 0)',
'rgb(64, 50, 148)',
'rgb(151, 160, 175)',
'rgb(76, 154, 255)',
'rgb(0, 184, 217)',
'rgb(54, 179, 126)',
'rgb(255, 196, 0)',
'rgb(255, 86, 48)',
'rgb(101, 84, 192)',
'rgb(255, 255, 255)',
'rgb(179, 212, 255)',
'rgb(179, 245, 255)',
'rgb(171, 245, 209)',
'rgb(255, 240, 179)',
'rgb(255, 189, 173)',
'rgb(234, 230, 255)',
'#000000',
'#262626',
'#595959',
'#8C8C8C',
'#BFBFBF',
'#D9D9D9',
'#E9E9E9',
'#F5F5F5',
'#FAFAFA',
'#FFFFFF',
'#F5222D',
'#FA541C',
'#FA8C16',
'#FADB14',
'#52C41A',
'#13C2C2',
'#1890FF',
'#2F54EB',
'#722ED1',
'#EB2F96',
'#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<{
@ -38,6 +89,12 @@ export const ColorPicker: React.FC<{
trigger="click"
position={'bottom'}
render={
<div style={{ padding: '8px 0' }}>
<div className={styles.emptyWrap} onClick={() => onSetColor(null)}>
<span></span>
<Text></Text>
</div>
<div className={styles.colorWrap}>
{colors.map((color) => {
return (
@ -47,6 +104,7 @@ export const ColorPicker: React.FC<{
);
})}
</div>
</div>
}
>
<span style={{ display: 'inline-block' }}>{children}</span>

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 {
display: flex;
flex-wrap: wrap;
width: 240px;
width: 256px;
padding: 8px;
.colorItem {
display: flex;
width: 32px;
height: 32px;
width: 24px;
height: 24px;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
justify-content: center;
align-items: center;
&:nth-of-type(n + 8) {
&:nth-of-type(n + 11) {
margin-top: 4px;
}
@ -24,8 +57,8 @@
> span {
display: block;
width: 28px;
height: 28px;
width: 20px;
height: 20px;
border: 1px solid var(--semi-color-border);
border-radius: 2px;
}

View File

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