From 7ef1f39703a378df3f1116d046f9b57a4427d64d Mon Sep 17 00:00:00 2001 From: ab Date: Thu, 20 Jun 2019 16:54:16 -0400 Subject: div moved, but z-index is fd --- src/client/util/TooltipTextMenu.scss | 12 +++++++----- src/client/util/TooltipTextMenu.tsx | 13 +++++++++---- src/client/views/DocumentDecorations.tsx | 2 +- src/client/views/MainOverlayTextBox.scss | 4 ++++ src/client/views/MainOverlayTextBox.tsx | 8 ++++---- src/client/views/nodes/FormattedTextBox.tsx | 8 ++++++-- 6 files changed, 31 insertions(+), 16 deletions(-) (limited to 'src') diff --git a/src/client/util/TooltipTextMenu.scss b/src/client/util/TooltipTextMenu.scss index 456953fb6..d19ded68f 100644 --- a/src/client/util/TooltipTextMenu.scss +++ b/src/client/util/TooltipTextMenu.scss @@ -18,6 +18,7 @@ .ProseMirror-menuitem { margin-right: 3px; display: inline-block; + z-index: 100000; } .ProseMirror-menuseparator { @@ -67,7 +68,7 @@ } .ProseMirror-menu-dropdown-menu { - z-index: 15; + z-index: 100000; min-width: 6em; background: white; } @@ -80,6 +81,7 @@ cursor: pointer; padding: 2px 8px 2px 4px; width: auto; + z-index: 100000; } .ProseMirror-menu-dropdown-item:hover { @@ -233,8 +235,8 @@ } .tooltipMenu { - position: absolute; - // z-index: 50; + position: relative; + z-index: 2000; background: #121721; border: 1px solid silver; border-radius: 15px; @@ -245,8 +247,8 @@ //transform: translateX(-50%); transform: translateY(-85px); pointer-events: all; - // height: 100; - // width:250; + height: 30px; + width:500px; .ProseMirror-example-setup-style hr { padding: 2px 10px; border: none; diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index 641514af9..06c8bbc1a 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -29,6 +29,7 @@ import { CollectionDockingView } from "../views/collections/CollectionDockingVie import { DocumentManager } from "./DocumentManager"; import { Id } from "../../new_fields/FieldSymbols"; import { Utils } from "../../Utils"; +import { FormattedTextBoxProps } from "../views/nodes/FormattedTextBox"; // import { wrap } from "module"; const SVG = "http://www.w3.org/2000/svg"; @@ -42,7 +43,7 @@ export class TooltipTextMenu { private fontStyles: MarkType[]; private fontSizes: MarkType[]; private listTypes: NodeType[]; - private editorProps: FieldViewProps; + private editorProps: FieldViewProps & FormattedTextBoxProps; private state: EditorState; private fontSizeToNum: Map; private fontStylesToName: Map; @@ -58,7 +59,7 @@ export class TooltipTextMenu { private fontStyleDom?: Node; private listTypeBtnDom?: Node; - constructor(view: EditorView, editorProps: FieldViewProps) { + constructor(view: EditorView, editorProps: FieldViewProps & FormattedTextBoxProps) { this.view = view; this.state = view.state; this.editorProps = editorProps; @@ -139,9 +140,13 @@ export class TooltipTextMenu { this.update(view, undefined); - view.dom.parentNode!.parentNode!.insertBefore(this.tooltip, view.dom.parentNode); + //view.dom.parentNode!.parentNode!.insertBefore(this.tooltip, view.dom.parentNode); - //console.log("hi"); + // quick and dirty null check + const outer_div = this.editorProps.outer_div; + outer_div && outer_div(this.tooltip); + + console.log("hi"); } //label of dropdown will change to given label diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index d8642d675..3d802964a 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -619,7 +619,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> left: bounds.x - this._resizeBorderWidth / 2, top: bounds.y - this._resizeBorderWidth / 2, pointerEvents: this.Interacting ? "none" : "all", - zIndex: SelectionManager.SelectedDocuments().length > 1 ? 1000 : 0, + zIndex: SelectionManager.SelectedDocuments().length > 1 ? 900 : 0, }} onPointerDown={this.onBackgroundDown} onContextMenu={(e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); }} >
private _textHideOnLeave?: boolean; private _textTargetDiv: HTMLDivElement | undefined; private _textProxyDiv: React.RefObject; - private _outerdiv: React.RefObject; + private _outerdiv = (dominus: HTMLElement | null) => this._dominus && dominus && dominus.appendChild(this._dominus); private _textBottom: boolean | undefined; private _textAutoHeight: boolean | undefined; private _textBox: FormattedTextBox | undefined; + private _dominus?: HTMLElement; @observable public TextDoc?: Doc; constructor(props: MainOverlayTextBoxProps) { super(props); this._textProxyDiv = React.createRef(); - this._outerdiv = React.createRef(); MainOverlayTextBox.Instance = this; reaction(() => FormattedTextBox.InputBoxOverlay, (box?: FormattedTextBox) => { @@ -116,14 +116,14 @@ export class MainOverlayTextBox extends React.Component let s = this._textXf().Scale; let location = this._textBottom ? textRect.bottom : textRect.top; let hgt = this._textAutoHeight || this._textBottom ? "auto" : this._textTargetDiv.clientHeight; - return
+ return
+ ScreenToLocalTransform={this._textXf} PanelWidth={returnZero} PanelHeight={returnZero} focus={emptyFunction} addDocTab={this.addDocTab} outer_div={(dominus: HTMLElement) => this._dominus = dominus} />
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 370b24e95..421267b2a 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -45,7 +45,7 @@ export interface FormattedTextBoxProps { hideOnLeave?: boolean; height?: string; color?: string; - outer_div?: React.RefObject; + outer_div?: (domminus: HTMLElement) => void; } const richTextSchema = createSchema({ @@ -61,6 +61,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe return FieldView.LayoutString(FormattedTextBox, fieldStr); } private _ref: React.RefObject; + private _outerdiv?: (dominus: HTMLElement) => void; private _proseRef?: HTMLDivElement; private _editorView: Opt; private _toolTipTextMenu: TooltipTextMenu | undefined = undefined; @@ -98,7 +99,10 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe constructor(props: FieldViewProps) { super(props); - this.props.outer_div ? console.log("smd") : console.log("bye"); + if (this.props.outer_div) { + this._outerdiv = this.props.outer_div; + console.log("yay"); + } this._ref = React.createRef(); if (this.props.isOverlay) { -- cgit v1.2.3-70-g09d2