mirror of https://github.com/fantasticit/think.git
feat: improve color
This commit is contained in:
parent
9b47b81374
commit
bf2c55b0fb
|
@ -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>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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)}
|
||||||
>
|
>
|
||||||
|
|
Loading…
Reference in New Issue