gio
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/client/src/tiptap/styles/mind/context-menu.scss
View File

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

26
packages/client/src/tiptap/styles/mind/toolbar.scss
View File

@ -2,7 +2,7 @@
.toolbar {
position: absolute;
display: flex;
padding: 4px 8px;
padding: 2px 4px;
overflow-x: auto;
color: #fff;
background-color: var(--semi-color-nav-bg);
@ -16,16 +16,30 @@
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;
bottom: 20px;
font-family: iconfont;
}
.rb span + span {
margin-left: 10px;
}
.lt {
top: 20px;
left: 20px;

166
packages/client/src/tiptap/wrappers/mind/mind-elixir/plugin/toolBar.tsx
View File

@ -1,5 +1,7 @@
import ReactDOM from 'react-dom';
import cls from 'classnames';
import { Button, Space, Toast } from '@douyinfe/semi-ui';
import { IconDoubleChevronRight, IconDoubleChevronLeft } from '@douyinfe/semi-icons';
import {
IconMindLeft,
IconMindRight,
@ -10,94 +12,112 @@ import {
IconZoomIn,
} from 'components/icons';
import { Divider } from 'tiptap/divider';
import { useToggle } from 'hooks/use-toggle';
import { useMemo } from 'react';
function Operation({ mind }) {
const [visible, toggleVisible] = useToggle(true);
const CollpaseIcon = useMemo(() => (visible ? IconDoubleChevronRight : IconDoubleChevronLeft), [visible]);
return (
<Space spacing={2}>
<Button
type="tertiary"
theme="borderless"
size="small"
onClick={() => {
if (!mind.container.requestFullscreen) {
Toast.error('当前浏览器不支持全屏');
return;
}
mind.container.requestFullscreen();
}}
icon={<IconMindFull style={{ fontSize: '0.85em' }} />}
/>
<>
<div className={cls('toolbar rb1', visible && 'is-visible')}>
<Space spacing={2}>
{/* <Button
type="tertiary"
theme="borderless"
size="small"
onClick={() => {
if (!mind.container.requestFullscreen) {
Toast.error('当前浏览器不支持全屏');
return;
}
mind.container.requestFullscreen();
}}
icon={<IconMindFull style={{ fontSize: '0.85em' }} />}
/> */}
<Button
type="tertiary"
theme="borderless"
size="small"
onClick={() => {
mind.toCenter();
}}
icon={<IconMindCenter style={{ fontSize: '0.85em' }} />}
/>
<Button
type="tertiary"
theme="borderless"
size="small"
onClick={() => {
mind.toCenter();
}}
icon={<IconMindCenter style={{ fontSize: '0.85em' }} />}
/>
<Button
type="tertiary"
theme="borderless"
size="small"
onClick={() => {
if (mind.scaleVal < 0.6) return;
mind.scale((mind.scaleVal -= 0.2));
}}
icon={<IconZoomOut style={{ fontSize: '0.85em' }} />}
/>
<Button
type="tertiary"
theme="borderless"
size="small"
onClick={() => {
if (mind.scaleVal < 0.6) return;
mind.scale((mind.scaleVal -= 0.2));
}}
icon={<IconZoomOut style={{ fontSize: '0.85em' }} />}
/>
<Button
type="tertiary"
theme="borderless"
size="small"
onClick={() => {
if (mind.scaleVal > 1.6) return;
mind.scale((mind.scaleVal += 0.2));
}}
icon={<IconZoomIn style={{ fontSize: '0.85em' }} />}
/>
<Button
type="tertiary"
theme="borderless"
size="small"
onClick={() => {
if (mind.scaleVal > 1.6) return;
mind.scale((mind.scaleVal += 0.2));
}}
icon={<IconZoomIn style={{ fontSize: '0.85em' }} />}
/>
<Divider />
<Divider />
<Button
type="tertiary"
theme="borderless"
size="small"
onClick={() => {
mind.initLeft();
}}
icon={<IconMindLeft style={{ fontSize: '0.85em' }} />}
/>
<Button
type="tertiary"
theme="borderless"
size="small"
onClick={() => {
mind.initLeft();
}}
icon={<IconMindLeft style={{ fontSize: '0.85em' }} />}
/>
<Button
type="tertiary"
theme="borderless"
size="small"
onClick={() => {
mind.initRight();
}}
icon={<IconMindRight style={{ fontSize: '0.85em' }} />}
/>
<Button
type="tertiary"
theme="borderless"
size="small"
onClick={() => {
mind.initRight();
}}
icon={<IconMindRight style={{ fontSize: '0.85em' }} />}
/>
<Button
type="tertiary"
theme="borderless"
size="small"
onClick={() => {
mind.initSide();
}}
icon={<IconMindSide style={{ fontSize: '0.85em' }} />}
/>
</Space>
<Button
type="tertiary"
theme="borderless"
size="small"
onClick={() => {
mind.initSide();
}}
icon={<IconMindSide style={{ fontSize: '0.85em' }} />}
/>
</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) {
const div = document.createElement('div');
div.className = 'toolbar rb';
// div.className = 'toolbar rb';
ReactDOM.render(<Operation mind={mind} />, div);
mind.container.append(div);
}