mirror of https://github.com/fantasticit/think.git
tiptap: fix mind context menu dark style, add collapse button in toolbar
This commit is contained in:
parent
fd6e57e6a7
commit
e934abf0b7
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue