mirror of https://github.com/fantasticit/think.git
feat: improve color
fantasticit
parent
9b47b81374
commit
bf2c55b0fb
|
|
@ -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,14 +89,21 @@ export const ColorPicker: React.FC<{
|
|||
trigger="click"
|
||||
position={'bottom'}
|
||||
render={
|
||||
<div className={styles.colorWrap}>
|
||||
{colors.map((color) => {
|
||||
return (
|
||||
<div key={color} className={styles.colorItem} onClick={() => onSetColor(color)}>
|
||||
<span style={{ backgroundColor: color }}></span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<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 (
|
||||
<div key={color} className={styles.colorItem} onClick={() => onSetColor(color)}>
|
||||
<span style={{ backgroundColor: color }}></span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in New Issue