From a4555fb8d5cd64482dd8431aad03878cb173f688 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 1 Sep 2020 03:58:41 -0400 Subject: fixed following link to a doc that is in a hidden tab to show that tab. fixed linear view to hit content bounds accurately. fixed editing of text in tabs somewhat. fixed place ment of link anchor boxes for topMost views. --- src/client/views/collections/TabDocView.tsx | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) (limited to 'src/client/views/collections/TabDocView.tsx') diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 31e3fbed6..3cb57f086 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -54,21 +54,29 @@ export class TabDocView extends React.Component { tab.contentItem.config.fixed && (tab.contentItem.parent.config.fixed = true); tab.DashDoc = doc; + const titleEle = tab.titleElement[0]; CollectionDockingView.Instance.tabMap.add(tab); - tab.titleElement[0].onchange = (e: any) => { - tab.titleElement[0].size = e.currentTarget.value.length + 1; + titleEle.onchange = (e: any) => { + titleEle.size = e.currentTarget.value.length + 3; Doc.GetProto(doc).title = e.currentTarget.value; }; - tab.titleElement[0].size = StrCast(doc.title).length + 1; - tab.titleElement[0].value = doc.title; - tab.titleElement[0].style["max-width"] = "100px"; + 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) => e.target.className !== "lm_close_tab" && this.view && SelectionManager.SelectDoc(this.view!, false); + 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(); + } + }; // 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()) { @@ -83,7 +91,7 @@ export class TabDocView extends React.Component { }, returnFalse, emptyFunction); }; - tab._disposers.selectionDisposer = reaction(() => SelectionManager.SelectedDocuments().some(v => v.props.Document === doc), + 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"); } -- cgit v1.2.3-70-g09d2 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/client/views/collections/TabDocView.tsx') 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 =