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

fix: fix zIndex

This commit is contained in:
fantasticit 2022-03-22 13:52:29 +08:00
parent 9bda18a4e5
commit fda147c492
7 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/client/src/components/document/editor/index.module.scss
View File

@ -5,7 +5,11 @@
flex-direction: column; flex-direction: column;
> header { > header {
position: relative;
z-index: 110;
background-color: var(--semi-color-nav-bg);
height: 60px; height: 60px;
> div { > div {
overflow: auto; overflow: auto;
} }
@ -27,12 +31,13 @@
> header { > header {
position: relative; position: relative;
z-index: 10001; z-index: 110;
height: 50px; height: 50px;
padding: 0 24px; padding: 0 24px;
display: flex; display: flex;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
background-color: var(--semi-color-nav-bg);
border-bottom: 1px solid var(--semi-color-border); border-bottom: 1px solid var(--semi-color-border);
&.isStandardWidth { &.isStandardWidth {

7
packages/client/src/components/template/editor/index.module.scss
View File

@ -5,7 +5,11 @@
flex-direction: column; flex-direction: column;
> header { > header {
position: relative;
z-index: 110;
background-color: var(--semi-color-nav-bg);
height: 60px; height: 60px;
> div { > div {
overflow: auto; overflow: auto;
} }
@ -27,12 +31,13 @@
> header { > header {
position: relative; position: relative;
z-index: 10001; z-index: 110;
height: 50px; height: 50px;
padding: 0 24px; padding: 0 24px;
display: flex; display: flex;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
background-color: var(--semi-color-nav-bg);
border-bottom: 1px solid var(--semi-color-border); border-bottom: 1px solid var(--semi-color-border);
&.isStandardWidth { &.isStandardWidth {

2
packages/client/src/components/tiptap/extensions/tableCell.tsx
View File

@ -27,7 +27,7 @@ export const TableCell = BuiltInTableCell.extend({
new FloatMenuView({ new FloatMenuView({
editor: this.editor, editor: this.editor,
tippyOptions: { tippyOptions: {
zIndex: 10000, zIndex: 100,
offset: [-28, 0], offset: [-28, 0],
}, },
shouldShow: ({ editor }, floatMenuView) => { shouldShow: ({ editor }, floatMenuView) => {

2
packages/client/src/components/tiptap/extensions/tableHeader.tsx
View File

@ -19,7 +19,7 @@ export const TableHeader = BuiltInTableHeader.extend({
new FloatMenuView({ new FloatMenuView({
editor: this.editor, editor: this.editor,
tippyOptions: { tippyOptions: {
zIndex: 10000, zIndex: 100,
}, },
shouldShow: ({ editor }) => { shouldShow: ({ editor }) => {
if (!editor.isEditable) { if (!editor.isEditable) {

4
packages/client/src/components/tiptap/menus/components/bubbleMenu/bubbleMenuPlugin.tsx
View File

@ -84,7 +84,7 @@ export class BubbleMenuView {
this.view.dom.addEventListener('dragstart', this.dragstartHandler); this.view.dom.addEventListener('dragstart', this.dragstartHandler);
this.editor.on('focus', this.focusHandler); this.editor.on('focus', this.focusHandler);
this.editor.on('blur', this.blurHandler); this.editor.on('blur', this.blurHandler);
this.tippyOptions = tippyOptions; this.tippyOptions = tippyOptions || {};
// Detaches menu content from its current parent // Detaches menu content from its current parent
this.element.remove(); this.element.remove();
this.element.style.visibility = 'visible'; this.element.style.visibility = 'visible';
@ -133,7 +133,7 @@ export class BubbleMenuView {
trigger: 'manual', trigger: 'manual',
placement: 'top', placement: 'top',
hideOnClick: 'toggle', hideOnClick: 'toggle',
...this.tippyOptions, ...Object.assign({ zIndex: 99 }, this.tippyOptions),
}); });
// maybe we have to hide tippy on its own blur event as well // maybe we have to hide tippy on its own blur event as well

4
packages/client/src/components/tiptap/views/floatMenuView.tsx
View File

@ -47,7 +47,7 @@ export class FloatMenuView {
constructor(props: FloatMenuViewOptions) { constructor(props: FloatMenuViewOptions) {
this.editor = props.editor; this.editor = props.editor;
this.shouldShow = props.shouldShow; this.shouldShow = props.shouldShow;
this.tippyOptions = props.tippyOptions; this.tippyOptions = props.tippyOptions || {};
if (props.getReferenceClientRect) { if (props.getReferenceClientRect) {
this.getReferenceClientRect = props.getReferenceClientRect; this.getReferenceClientRect = props.getReferenceClientRect;
} }
@ -76,7 +76,7 @@ export class FloatMenuView {
trigger: 'manual', trigger: 'manual',
placement: 'top', placement: 'top',
hideOnClick: 'toggle', hideOnClick: 'toggle',
...(this.tippyOptions ?? {}), ...Object.assign({ zIndex: 99 }, this.tippyOptions),
}); });
} }

6
packages/client/src/styles/prosemirror.scss
View File

@ -284,7 +284,7 @@
.grip-column { .grip-column {
position: absolute; position: absolute;
z-index: 10000; z-index: 10;
display: block; display: block;
width: 100%; width: 100%;
height: 0.7em; height: 0.7em;
@ -302,7 +302,7 @@
.grip-row { .grip-row {
position: absolute; position: absolute;
z-index: 10000; z-index: 10;
display: block; display: block;
height: 100%; height: 100%;
width: 0.7em; width: 0.7em;
@ -320,7 +320,7 @@
.grip-table { .grip-table {
position: absolute; position: absolute;
z-index: 10000; z-index: 10;
display: block; display: block;
width: 0.8em; width: 0.8em;
height: 0.8em; height: 0.8em;