From 29936187e801d851caf7a09260f1c801d6d30b59 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Fri, 19 Jun 2020 01:20:17 -0400 Subject: fixed a bunch of minor bugs with pdf ui, text box selection, menus, etc. --- src/client/views/ContextMenu.tsx | 2 +- src/client/views/GlobalKeyHandler.ts | 3 ++- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/client/views/nodes/LabelBox.tsx | 2 +- src/client/views/nodes/PDFBox.tsx | 10 +++++++--- src/client/views/nodes/formattedText/FormattedTextBox.scss | 12 ++++++++++-- src/client/views/nodes/formattedText/FormattedTextBox.tsx | 9 ++++++--- 7 files changed, 28 insertions(+), 12 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index 5b66b63ed..941d7b44a 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -236,7 +236,7 @@ export class ContextMenu extends React.Component { - + {this.menuItems} diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index f5adeeb00..c696625db 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -74,7 +74,7 @@ export default class KeyManager { case "a": DragManager.CanEmbed = true; break; case " ": - MarqueeView.DragMarquee = !MarqueeView.DragMarquee; + // MarqueeView.DragMarquee = !MarqueeView.DragMarquee; // bcz: this needs a better disclosure UI break; case "escape": const main = MainView.Instance; @@ -103,6 +103,7 @@ export default class KeyManager { } UndoManager.RunInBatch(() => SelectionManager.SelectedDocuments().map(dv => dv.props.removeDocument?.(dv.props.Document)), "delete"); + SelectionManager.DeselectAll(); break; case "arrowleft": UndoManager.RunInBatch(() => SelectionManager.SelectedDocuments().map(dv => dv.props.nudge?.(-1, 0)), "nudge left"); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 00260745d..c0c88d540 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1197,7 +1197,7 @@ export class CollectionFreeFormView extends CollectionSubView { if (this.props.annotationsKey) return; - ContextMenu.Instance.addItem({ + !this.props.isAnnotationOverlay && ContextMenu.Instance.addItem({ description: (this._timelineVisible ? "Close" : "Open") + " Animation Timeline", event: action(() => { this._timelineVisible = !this._timelineVisible; }), icon: this._timelineVisible ? faEyeSlash : faEye diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx index ad9e49369..360ead18e 100644 --- a/src/client/views/nodes/LabelBox.tsx +++ b/src/client/views/nodes/LabelBox.tsx @@ -77,7 +77,7 @@ export class LabelBox extends ViewBoxBaseComponent - {StrCast(this.rootDoc.text, StrCast(this.rootDoc.title))} + {StrCast(this.rootDoc[this.fieldKey], StrCast(this.rootDoc.title))}
{!missingParams?.length ? (null) : missingParams.map(m =>
{m}
)} diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index aabaac39e..3f6fc07a1 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -146,11 +146,12 @@ export class PDFBox extends ViewBoxAnnotatableComponent ; + const searchTitle = `${!this._searching ? "Open" : "Close"} Search Bar`; return !this.active() ? (null) : (
e.keyCode === KeyCodes.BACKSPACE || e.keyCode === KeyCodes.DELETE ? e.stopPropagation() : true} onPointerDown={e => e.stopPropagation()} style={{ display: this.active() ? "flex" : "none" }}>
e.stopPropagation()} style={{ left: `${this._searching ? 0 : 100}%` }}> - @@ -161,14 +162,17 @@ export class PDFBox extends ViewBoxAnnotatableComponent
- this.gotoPage(Number(e.currentTarget.value))} - style={{ left: 5, top: 5, height: "20px", width: "20px", position: "absolute", pointerEvents: "all" }} + style={{ left: 5, top: 5, height: "20px", width: "3ch", position: "absolute", pointerEvents: "all" }} onClick={action(() => this._pageControls = !this._pageControls)} /> {this._pageControls ? pageBtns : (null)}
e.stopPropagation()}> diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss index df4a05dd7..06ecc8944 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.scss +++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss @@ -92,8 +92,8 @@ left: 10%; } -.formattedTextBox-inner-rounded, -.formattedTextBox-inner { +.formattedTextBox-inner-rounded, .formattedTextBox-inner-rounded-selected, +.formattedTextBox-inner, .formattedTextBox-inner-selected { height: 100%; white-space: pre-wrap; hr { @@ -276,6 +276,7 @@ footnote::after { } .ProseMirror { + padding: 0px; touch-action: none; span { font-family: inherit; @@ -316,4 +317,11 @@ footnote::after { .multi2:before { transition: 0.5s;counter-increment: multi2; display: inline-block; margin-left: -2em; width: 2em; content: counter(multi1, upper-alpha) "."counter(multi2, decimal) ". "; } .multi3:before { transition: 0.5s;counter-increment: multi3; display: inline-block; margin-left: -2.85em; width:2.85em; content: counter(multi1, upper-alpha) "."counter(multi2, decimal) "."counter(multi3, lower-alpha) ". "; } .multi4:before { transition: 0.5s;counter-increment: multi4; display: inline-block; margin-left: -4.2em; width: 4.2em; content: counter(multi1, upper-alpha) "."counter(multi2, decimal) "."counter(multi3, lower-alpha) "."counter(multi4, lower-roman) ". "; } +} + +.formattedTextBox-inner-rounded-selected, +.formattedTextBox-inner-selected { + .ProseMirror { + padding:10px; + } } \ No newline at end of file diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 96c5ca58f..b06121caf 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1227,6 +1227,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } else if (FormattedTextBoxComment.textBox === this) { setTimeout(() => FormattedTextBoxComment.Hide(), 0); } + const selPad = this.props.isSelected() ? -10 : 0; + const selclass = this.props.isSelected() ? "-selected" : "" return (
-
+ }} + />
{!this.layoutDoc._showSidebar ? (null) : this.sidebarWidthPercent === "0%" ?
: -- cgit v1.2.3-70-g09d2 From c8bec95f09273c9e1f71f454bb0430247a619252 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Fri, 19 Jun 2020 08:24:05 -0400 Subject: fixed LOD for pdfs. fixed linking to collection annotation on pdf/image etc to not create text box. fixed textbox popup to display contents at renderDepth 0 so that PDFs will display --- .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/client/views/nodes/PDFBox.tsx | 2 +- src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index c0c88d540..d9d5c1bb3 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -239,7 +239,7 @@ export class CollectionFreeFormView extends CollectionSubView Math.min(350, NumCast(target._width, 350))} PanelHeight={() => Math.min(250, NumCast(target._height, 250))} focus={emptyFunction} -- cgit v1.2.3-70-g09d2 From 8e8c2b1256b79b8325cc411f9a8c09add8cda39b Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Fri, 19 Jun 2020 08:43:29 -0400 Subject: fixed selecting textboxes to reset the selection instead of potentially triggering a hyperlink preview if that was the last thing selected. --- src/client/views/nodes/formattedText/FormattedTextBox.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'src/client/views') diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index b06121caf..42c2d25ab 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -996,8 +996,13 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp if (!FormattedTextBox._downEvent) return; FormattedTextBox._downEvent = false; if (!(e.nativeEvent as any).formattedHandled) { + const editor = this._editorView!; FormattedTextBoxComment.textBox = this; - FormattedTextBoxComment.update(this._editorView!, undefined, (e.target as any)?.className === "prosemirror-dropdownlink" ? (e.target as any).href : ""); + const pcords = editor.posAtCoords({ left: e.clientX, top: e.clientY }); + const node = pcords && editor.state.doc.nodeAt(pcords.pos); // get what prosemirror thinks the clicked node is (if it's null, then we didn't click on any text) + !this.props.isSelected(true) && editor.dispatch(editor.state.tr.setSelection(node && pcords ? + new NodeSelection(editor.state.doc.resolve(pcords.pos)) : new TextSelection(editor.state.doc.resolve(0)))); + FormattedTextBoxComment.update(editor, undefined, (e.target as any)?.className === "prosemirror-dropdownlink" ? (e.target as any).href : ""); } (e.nativeEvent as any).formattedHandled = true; -- cgit v1.2.3-70-g09d2 From 5221f282cdee70421d4114154a0272595c3254b0 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Fri, 19 Jun 2020 08:55:28 -0400 Subject: made a hover highlight for text boxes to distinguish border from text. --- src/client/views/nodes/formattedText/FormattedTextBox.scss | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'src/client/views') diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss index 06ecc8944..9538cac32 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.scss +++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss @@ -96,6 +96,9 @@ .formattedTextBox-inner, .formattedTextBox-inner-selected { height: 100%; white-space: pre-wrap; + .ProseMirror:hover { + background: rgba(200,200,200,0.8); + } hr { display: block; unicode-bidi: isolate; @@ -324,4 +327,7 @@ footnote::after { .ProseMirror { padding:10px; } + .ProseMirror:hover { + background: unset; + } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 1c6e701796f31064dc1b823341f9f79d83524141 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Fri, 19 Jun 2020 09:14:09 -0400 Subject: fixed textboxes so they don't scroll when not selected and scrolling passes through to outer collection --- src/client/views/nodes/formattedText/FormattedTextBox.scss | 1 + src/client/views/nodes/formattedText/FormattedTextBox.tsx | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss index 9538cac32..17421b1e3 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.scss +++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss @@ -280,6 +280,7 @@ footnote::after { .ProseMirror { padding: 0px; + height: max-content; touch-action: none; span { font-family: inherit; diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 42c2d25ab..cba2f5a02 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1274,11 +1274,11 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } })} > -
+
-- cgit v1.2.3-70-g09d2 From 649951061015b3619a58761f7425f5c8752f109e Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Fri, 19 Jun 2020 10:05:05 -0400 Subject: fixed color palette for masonry/stacking when zoom level != 1 --- .../views/collections/CollectionMasonryViewFieldRow.tsx | 12 ++++++------ src/client/views/collections/CollectionStackingView.scss | 8 ++++++-- .../views/collections/CollectionStackingViewFieldColumn.tsx | 10 +++++----- 3 files changed, 17 insertions(+), 13 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx index cc7a9f5ac..e0b53e762 100644 --- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx +++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx @@ -43,6 +43,7 @@ export class CollectionMasonryViewFieldRow extends React.Component this.props.headingObject && (this.props.headingObject.heading = this.heading = value)); } private set _color(value: string) { runInAction(() => this.props.headingObject && (this.props.headingObject.color = this.color = value)); } private set _collapsed(value: boolean) { runInAction(() => this.props.headingObject && (this.props.headingObject.collapsed = this.collapsed = value)); } @@ -293,11 +294,10 @@ export class CollectionMasonryViewFieldRow extends React.Component} {noChrome || evContents === `NO ${key.toUpperCase()} VALUE` ? (null) :
- - - + + {this._paletteOn ? this.renderColorPicker() : (null)}
} {noChrome ? (null) : diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index 203c51163..3d8ec2fd5 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -240,11 +240,15 @@ } .collectionStackingView-sectionColorButton { - height: 35px; + height: 30px; + display: inherit; } .collectionStackingView-colorPicker { width: 78px; + z-index: 10; + position: relative; + background: white; .colorOptions { display: flex; @@ -278,7 +282,7 @@ } .collectionStackingView-sectionOptionButton { - height: 35px; + height: 30px; } .collectionStackingView-optionPicker { diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index bcd55f0fe..b60ed853b 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -50,6 +50,7 @@ export class CollectionStackingViewFieldColumn extends React.Component = React.createRef(); + @observable _paletteOn = false; @observable _heading = this.props.headingObject ? this.props.headingObject.heading : this.props.heading; @observable _color = this.props.headingObject ? this.props.headingObject.color : "#f1efeb"; _ele: HTMLElement | null = null; @@ -326,11 +327,10 @@ export class CollectionStackingViewFieldColumn extends React.Component {evContents === `NO ${key.toUpperCase()} VALUE` ? (null) :
- - - + + {this._paletteOn ? this.renderColorPicker() : (null)}
} {evContents === `NO ${key.toUpperCase()} VALUE` ? -- cgit v1.2.3-70-g09d2 From 825122ee8c8dc450a64f8bd5582b1cc5026042b4 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Fri, 19 Jun 2020 10:11:54 -0400 Subject: fixed insertion point when selecting text box. --- src/client/views/nodes/formattedText/FormattedTextBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views') diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index cba2f5a02..02f28a4ac 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1001,7 +1001,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp const pcords = editor.posAtCoords({ left: e.clientX, top: e.clientY }); const node = pcords && editor.state.doc.nodeAt(pcords.pos); // get what prosemirror thinks the clicked node is (if it's null, then we didn't click on any text) !this.props.isSelected(true) && editor.dispatch(editor.state.tr.setSelection(node && pcords ? - new NodeSelection(editor.state.doc.resolve(pcords.pos)) : new TextSelection(editor.state.doc.resolve(0)))); + new NodeSelection(editor.state.doc.resolve(pcords.pos)) : new TextSelection(editor.state.doc.resolve(pcords?.pos || 0)))); FormattedTextBoxComment.update(editor, undefined, (e.target as any)?.className === "prosemirror-dropdownlink" ? (e.target as any).href : ""); } (e.nativeEvent as any).formattedHandled = true; -- cgit v1.2.3-70-g09d2 From e0c2836639110d0c7bdea311c722f406850b794d Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Fri, 19 Jun 2020 15:50:40 -0400 Subject: added close back to dcument decorations. moved iconify to the right of doc decs. --- src/client/views/DocumentDecorations.scss | 14 +++++++++++ src/client/views/DocumentDecorations.tsx | 28 ++++++++++++---------- .../views/nodes/formattedText/FormattedTextBox.tsx | 1 - 3 files changed, 30 insertions(+), 13 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 29204569b..11aaaaf8c 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -172,6 +172,20 @@ $linkGap : 3px; } +.documentDecorations-iconifyButton { + opacity: 1; + grid-column-start: 4; + grid-column-end: 6; + pointer-events: all; + text-align: center; + left: -20px; + top: -2px; + cursor: pointer; + position: absolute; + background: transparent; + width: 20px; +} + .documentDecorations-closeButton { opacity: 1; grid-column-start: 4; diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 9b3c16a59..d92fe5203 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -175,7 +175,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> } @undoBatch @action - onCloseClick = async (e: PointerEvent | undefined) => { + onCloseClick = async (e: React.MouseEvent) => { if (!e?.button) { const recent = Cast(Doc.UserDoc().myRecentlyClosed, Doc) as Doc; const selected = SelectionManager.SelectedDocuments().slice(); @@ -460,7 +460,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
) : ( -
+
{/* Currently, this is set to be enabled if there is no ink selected. It might be interesting to think about minimizing ink if it's useful? -syip2*/}
); @@ -469,16 +469,17 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> <> this.titleBlur(true)} onChange={action(e => this._accumulatedTitle = e.target.value)} onKeyPress={this.titleEntered} /> - {minimal ? (null) :
{ - if (!seldoc.props.Document.customTitle) { - seldoc.props.Document.customTitle = true; - StrCast(Doc.GetProto(seldoc.props.Document).title).startsWith("-") && (Doc.GetProto(seldoc.props.Document).title = StrCast(seldoc.props.Document.title).substring(1)); - this._accumulatedTitle = StrCast(seldoc.props.Document.title); - } - DocUtils.Publish(seldoc.props.Document, this._accumulatedTitle, seldoc.props.addDocument, seldoc.props.removeDocument); - })}> - + {minimal ? (null) :
{ + // if (!seldoc.props.Document.customTitle) { + // seldoc.props.Document.customTitle = true; + // StrCast(Doc.GetProto(seldoc.props.Document).title).startsWith("-") && (Doc.GetProto(seldoc.props.Document).title = StrCast(seldoc.props.Document.title).substring(1)); + // this._accumulatedTitle = StrCast(seldoc.props.Document.title); + // } + // DocUtils.Publish(seldoc.props.Document, this._accumulatedTitle, seldoc.props.addDocument, seldoc.props.removeDocument); + // })} + > + {/* */}
} : <> @@ -519,6 +520,9 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> }}> {maximizeIcon} {titleArea} +
+ {"_"} +
{SelectionManager.SelectedDocuments().length === 1 ? DocumentDecorations.DocumentIcon(StrCast(seldoc.props.Document.layout, "...")) : "..."}
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 02f28a4ac..c23ecb8ac 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -57,7 +57,6 @@ import { FieldView, FieldViewProps } from "../FieldView"; import "./FormattedTextBox.scss"; import { FormattedTextBoxComment, formattedTextBoxCommentPlugin } from './FormattedTextBoxComment'; import React = require("react"); -import { InkingStroke } from '../../InkingStroke'; library.add(faEdit); library.add(faSmile, faTextHeight, faUpload); -- cgit v1.2.3-70-g09d2