From a55c1ef0211cef68bebdb83b7ee8723c7bcf6edc Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 1 Sep 2020 12:25:34 -0400 Subject: fixed tabs to never select/switch on hover unless dragging. fixed display of highlight icons in menu bar. fixed placement of docDecorations level selector. --- src/client/util/DocumentManager.ts | 2 +- src/client/views/DocumentDecorations.scss | 2 +- src/client/views/InkingStroke.tsx | 2 +- src/client/views/MainView.tsx | 18 ++--- .../views/collections/CollectionDockingView.scss | 2 +- src/client/views/collections/CollectionMenu.scss | 4 ++ src/client/views/collections/TabDocView.tsx | 83 +++++++++++----------- src/client/views/nodes/DocumentContentsView.tsx | 3 +- src/client/views/nodes/FontIconBox.scss | 17 ++++- src/client/views/nodes/FontIconBox.tsx | 7 +- src/client/views/nodes/MenuIconBox.scss | 49 ------------- src/client/views/nodes/MenuIconBox.tsx | 33 --------- 12 files changed, 79 insertions(+), 143 deletions(-) delete mode 100644 src/client/views/nodes/MenuIconBox.scss delete mode 100644 src/client/views/nodes/MenuIconBox.tsx (limited to 'src') diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index 9e55c5a44..2c7dcf49b 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -161,7 +161,7 @@ export class DocumentManager { } else { const contView = docContext && getFirstDocView(docContext, originatingDoc); - contView && contView.topMost && contView.select(false); + contView && contView.topMost && contView.select(false); // bcz: change this to a function prop: popTab() that will make sure the tab for the document is topmost; docView.select(false); docView.props.Document.hidden && (docView.props.Document.hidden = undefined); docView.props.focus(docView.props.Document, willZoom, undefined, focusAndFinish); diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 8291d7212..e02408559 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -21,7 +21,7 @@ $linkGap : 3px; background: none; } - .documentDecorations-selector { + .documentDecorations-levelSelector { pointer-events: auto; height: 15px; width: 15px; diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 1a1a3d75c..da98eca73 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -119,7 +119,7 @@ export class InkingStroke extends ViewBoxBaseComponent 5 ? strokeColor : "transparent", strokeWidth, (strokeWidth + 15), StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"), - "none", "none", undefined, scaleX, scaleY, "", this.props.active() ? "visiblepainted" : "none", false, true); + "none", "none", undefined, scaleX, scaleY, "", "visiblepainted", false, true); //points for adding const apoints = InteractionUtils.CreatePoints(data, left, top, strokeColor, strokeWidth, strokeWidth, diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 01df10aa0..7dddd1669 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -285,7 +285,7 @@ export class MainView extends React.Component { setupMoveUpEvents(this, e, action(e => (this._flyoutWidth = Math.max(e.clientX - 58, 0)) ? false : false), () => this._flyoutWidth < 5 && this.closeFlyout(), - this.toggleFlyout); + this.closeFlyout); } flyoutWidthFunc = () => this._flyoutWidth; @@ -382,11 +382,7 @@ export class MainView extends React.Component { SearchBox.Instance.enter(undefined); break; default: - this._sidebarContent.proto = button.target as any; - closed && this.expandFlyout(); - button._backgroundColor = "lightgrey"; - button.color = "black"; - this._lastButton = button; + closed && this.expandFlyout(button); } } return true; @@ -424,8 +420,14 @@ export class MainView extends React.Component { ; } - expandFlyout = action(() => this._flyoutWidth = (this._flyoutWidth || 250)); - toggleFlyout = action(() => this._flyoutWidth < 15 ? this.expandFlyout() : this.closeFlyout()); + expandFlyout = action((button: Doc) => { + this._flyoutWidth = (this._flyoutWidth || 250); + this._sidebarContent.proto = button.target as any; + button._backgroundColor = "lightgrey"; + button.color = "black"; + this._lastButton = button; + }); + closeFlyout = action(() => { this._lastButton && (this._lastButton.color = "white"); this._lastButton && (this._lastButton._backgroundColor = ""); diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index d3be1636d..96f5afcd9 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -70,7 +70,7 @@ margin: auto; } - .collectionDockingView-dragAsDocument { + .collectionDockingView-drag { touch-action: none; position: absolute; padding-left: 5px; diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss index 21312e5f3..e36e5caa7 100644 --- a/src/client/views/collections/CollectionMenu.scss +++ b/src/client/views/collections/CollectionMenu.scss @@ -377,6 +377,7 @@ .antimodeMenu-button { text-align: center; display: block; + position: relative; } .color-previewI { @@ -384,12 +385,15 @@ height: 20%; bottom: 0; position: absolute; + margin-left: 2px; } .color-previewII { width: 80%; height: 80%; margin-left: 10%; + position: absolute; + bottom: 5; } .btn-group { diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 3cb57f086..3c230537c 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -53,67 +53,70 @@ export class TabDocView extends React.Component { tab._disposers = {} as { [name: string]: IReactionDisposer }; tab.contentItem.config.fixed && (tab.contentItem.parent.config.fixed = true); tab.DashDoc = doc; + CollectionDockingView.Instance.tabMap.add(tab); + // setup the title element and set its size according to the # of chars in the title. Show the full title when clicked. const titleEle = tab.titleElement[0]; - CollectionDockingView.Instance.tabMap.add(tab); - titleEle.onchange = (e: any) => { - titleEle.size = e.currentTarget.value.length + 3; - Doc.GetProto(doc).title = e.currentTarget.value; - }; titleEle.size = StrCast(doc.title).length + 3; titleEle.value = doc.title; titleEle.style["max-width"] = "100px"; - const gearSpan = document.createElement("span"); - gearSpan.className = "collectionDockingView-gear"; - gearSpan.style.position = "relative"; - gearSpan.style.paddingLeft = "0px"; - gearSpan.style.paddingRight = "12px"; - const stack = tab.contentItem.parent; - tab.element[0].onclick = (e: any) => { - if (e.target.className !== "lm_close_tab" && this.view) { - SelectionManager.SelectDoc(this.view, false); - if (Date.now() - titleEle.lastClick < 1000) titleEle.select(); - titleEle.lastClick = Date.now(); - (document.activeElement !== titleEle) && titleEle.focus(); - } + titleEle.onchange = (e: any) => { + titleEle.size = e.currentTarget.value.length + 3; + Doc.GetProto(doc).title = e.currentTarget.value; }; // shifts the focus to this tab when another tab is dragged over it tab.element[0].onmouseenter = (e: MouseEvent) => { if (SnappingManager.GetIsDragging() && tab.contentItem !== tab.header.parent.getActiveContentItem()) { tab.header.parent.setActiveContentItem(tab.contentItem); + console.log("Seetting " + titleEle.value); + tab.setActive(true); } - tab.setActive(true); }; - const onDown = (e: React.PointerEvent) => { + const onPointerDown = (e: React.PointerEvent) => { setupMoveUpEvents(this, e, (e) => { - !e.defaultPrevented && DragManager.StartDocumentDrag([gearSpan], new DragManager.DocumentDragData([doc], doc.dropAction as dropActionType), e.clientX, e.clientY); + !e.defaultPrevented && DragManager.StartDocumentDrag([dragHdl], new DragManager.DocumentDragData([doc], doc.dropAction as dropActionType), e.clientX, e.clientY); return !e.defaultPrevented; }, returnFalse, emptyFunction); }; - tab._disposers.selectionDisposer = reaction(() => SelectionManager.SelectedDocuments().some(v => v.topMost && v.props.Document === doc), - (selected) => { - selected && tab.contentItem !== tab.header.parent.getActiveContentItem() && UndoManager.RunInBatch(() => tab.header.parent.setActiveContentItem(tab.contentItem), "tab switch"); + // select the tab document when the tab is directly clicked and activate the tab whenver the tab document is selected + tab.element[0].onclick = (e: any) => { + if (e.target.className !== "lm_close_tab" && this.view) { + SelectionManager.SelectDoc(this.view, false); + if (Date.now() - titleEle.lastClick < 1000) titleEle.select(); + titleEle.lastClick = Date.now(); + (document.activeElement !== titleEle) && titleEle.focus(); } - ); - tab._disposers.buttonDisposer = reaction(() => this.view, - (view) => { - if (view) { - ReactDOM.render( - [view]} Stack={stack} /> - , - gearSpan); - tab._disposers.buttonDisposer?.(); - } - }, { fireImmediately: true }); + }; + tab._disposers.selectionDisposer = reaction(() => SelectionManager.SelectedDocuments().some(v => v.topMost && v.props.Document === doc), + (selected) => selected && tab.contentItem !== tab.header.parent.getActiveContentItem() && + UndoManager.RunInBatch(() => tab.header.parent.setActiveContentItem(tab.contentItem), "tab switch")); - tab.reactComponents = [gearSpan]; - tab.element.append(gearSpan); + //attach the selection doc buttons menu to the drag handle + const stack = tab.contentItem.parent; + const dragHdl = document.createElement("span"); + dragHdl.className = "collectionDockingView-gear"; + dragHdl.style.position = "relative"; + dragHdl.style.paddingLeft = "0px"; + dragHdl.style.paddingRight = "12px"; + tab._disposers.buttonDisposer = reaction(() => this.view, (view) => view && + [ReactDOM.render( + + [view]} Stack={stack} /> + , dragHdl), + tab._disposers.buttonDisposer?.()], + { fireImmediately: true }); + tab.reactComponents = [dragHdl]; + tab.element.append(dragHdl); + + // highlight the tab when the tab document is brushed in any part of the UI tab._disposers.reactionDisposer = reaction(() => ({ title: doc.title, degree: Doc.IsBrushedDegree(doc) }), ({ title, degree }) => { - tab.titleElement[0].value = title; - tab.titleElement[0].style.padding = degree ? 0 : 2; - tab.titleElement[0].style.border = `${["gray", "gray", "gray"][degree]} ${["none", "dashed", "solid"][degree]} 2px`; + titleEle.value = title; + titleEle.style.padding = degree ? 0 : 2; + titleEle.style.border = `${["gray", "gray", "gray"][degree]} ${["none", "dashed", "solid"][degree]} 2px`; }, { fireImmediately: true }); + + // clean up the tab when it is closed tab.closeElement.off('click') //unbind the current click handler .click(function () { Object.values(tab._disposers).forEach((disposer: any) => disposer?.()); diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index dc9b7c98f..5d5a1f7f3 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -18,7 +18,6 @@ import { DocHolderBox } from "./DocHolderBox"; import { DocumentViewProps } from "./DocumentView"; import "./DocumentView.scss"; import { FontIconBox } from "./FontIconBox"; -import { MenuIconBox } from "./MenuIconBox"; import { FieldView, FieldViewProps } from "./FieldView"; import { FormattedTextBox, FormattedTextBoxProps } from "./formattedText/FormattedTextBox"; import { ImageBox } from "./ImageBox"; @@ -190,7 +189,7 @@ export class DocumentContentsView extends React.Component( const backgroundColor = StrCast(this.layoutDoc._backgroundColor, StrCast(this.rootDoc.backgroundColor, this.props.backgroundColor?.(this.rootDoc, this.props.renderDepth))); const shape = StrCast(this.layoutDoc.iconShape, "round"); const icon = StrCast(this.dataDoc.icon, "user") as any; - const presTrailsIcon = ; + const presSize = shape === 'round' ? 25 : 30; + const presTrailsIcon = ; const button =