tiptap: fix mind context menu dark style, add collapse button in toolbar

This commit is contained in:
fantasticit 2022-05-01 20:28:33 +08:00
parent fd6e57e6a7
commit e934abf0b7
3 changed files with 116 additions and 85 deletions

View File

@ -13,9 +13,10 @@ cmenu .menu-list {
padding: 0; padding: 0;
margin: 0; margin: 0;
font: 300 15px Roboto, sans-serif; font: 300 15px Roboto, sans-serif;
color: #333; color: var(--semi-color-text-0);
list-style: none; list-style: none;
box-shadow: 0 12px 15px 0 rgb(0 0 0 / 20%); box-shadow: 0 12px 15px 0 rgb(0 0 0 / 20%);
background-color: var(--semi-color-nav-bg);
} }
cmenu .menu-list * { cmenu .menu-list * {
@ -27,8 +28,7 @@ cmenu .menu-list li {
padding: 6px 10px; padding: 6px 10px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
background-color: #fff; border-bottom: 1px solid var(--semi-color-border);
border-bottom: 1px solid #ecf0f1;
} }
cmenu .menu-list li a { cmenu .menu-list li a {
@ -38,17 +38,14 @@ cmenu .menu-list li a {
cmenu .menu-list li.disabled { cmenu .menu-list li.disabled {
color: #5e5e5e; color: #5e5e5e;
background-color: #f7f7f7;
} }
cmenu .menu-list li.disabled:hover { cmenu .menu-list li.disabled:hover {
cursor: default; cursor: default;
background-color: #f7f7f7;
} }
cmenu .menu-list li:hover { cmenu .menu-list li:hover {
cursor: pointer; cursor: pointer;
background-color: #ecf0f1;
} }
cmenu .menu-list li:first-child { cmenu .menu-list li:first-child {

View File

@ -2,7 +2,7 @@
.toolbar { .toolbar {
position: absolute; position: absolute;
display: flex; display: flex;
padding: 4px 8px; padding: 2px 4px;
overflow-x: auto; overflow-x: auto;
color: #fff; color: #fff;
background-color: var(--semi-color-nav-bg); background-color: var(--semi-color-nav-bg);
@ -16,16 +16,30 @@
opacity: 0.5; opacity: 0.5;
} }
.rb { .rb1 {
right: 70px;
bottom: 20px;
font-family: iconfont;
width: 0;
padding: 0;
&.is-visible {
width: auto;
padding: 2px 4px;
}
}
.rb1 span + span {
margin-left: 10px;
}
.rb2 {
right: 20px; right: 20px;
bottom: 20px; bottom: 20px;
font-family: iconfont; font-family: iconfont;
} }
.rb span + span {
margin-left: 10px;
}
.lt { .lt {
top: 20px; top: 20px;
left: 20px; left: 20px;

View File

@ -1,5 +1,7 @@
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import cls from 'classnames';
import { Button, Space, Toast } from '@douyinfe/semi-ui'; import { Button, Space, Toast } from '@douyinfe/semi-ui';
import { IconDoubleChevronRight, IconDoubleChevronLeft } from '@douyinfe/semi-icons';
import { import {
IconMindLeft, IconMindLeft,
IconMindRight, IconMindRight,
@ -10,11 +12,18 @@ import {
IconZoomIn, IconZoomIn,
} from 'components/icons'; } from 'components/icons';
import { Divider } from 'tiptap/divider'; import { Divider } from 'tiptap/divider';
import { useToggle } from 'hooks/use-toggle';
import { useMemo } from 'react';
function Operation({ mind }) { function Operation({ mind }) {
const [visible, toggleVisible] = useToggle(true);
const CollpaseIcon = useMemo(() => (visible ? IconDoubleChevronRight : IconDoubleChevronLeft), [visible]);
return ( return (
<>
<div className={cls('toolbar rb1', visible && 'is-visible')}>
<Space spacing={2}> <Space spacing={2}>
<Button {/* <Button
type="tertiary" type="tertiary"
theme="borderless" theme="borderless"
size="small" size="small"
@ -26,7 +35,7 @@ function Operation({ mind }) {
mind.container.requestFullscreen(); mind.container.requestFullscreen();
}} }}
icon={<IconMindFull style={{ fontSize: '0.85em' }} />} icon={<IconMindFull style={{ fontSize: '0.85em' }} />}
/> /> */}
<Button <Button
type="tertiary" type="tertiary"
@ -92,12 +101,23 @@ function Operation({ mind }) {
icon={<IconMindSide style={{ fontSize: '0.85em' }} />} icon={<IconMindSide style={{ fontSize: '0.85em' }} />}
/> />
</Space> </Space>
</div>
<div className="toolbar rb2">
<Button
type="tertiary"
theme="borderless"
size="small"
onClick={toggleVisible}
icon={<CollpaseIcon style={{ fontSize: '0.85em' }} />}
/>
</div>
</>
); );
} }
export default function (mind) { export default function (mind) {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'toolbar rb'; // div.className = 'toolbar rb';
ReactDOM.render(<Operation mind={mind} />, div); ReactDOM.render(<Operation mind={mind} />, div);
mind.container.append(div); mind.container.append(div);
} }