From dbf41b6eaaebe16567289ba4814316b2c79e0b65 Mon Sep 17 00:00:00 2001
From: Fawn <fangrui_tong@brown.edu>
Date: Thu, 10 Oct 2019 10:50:53 -0400
Subject: richtexteditor menuicon styling

---
 src/client/views/nodes/FormattedTextBox.scss | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

(limited to 'src/client/views/nodes/FormattedTextBox.scss')

diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index 29e8b14a8..f92ccf9f5 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -46,17 +46,17 @@
     height: 100%;
 }
 
-.menuicon {
-    display: inline-block;
-    border-right: 1px solid rgba(0, 0, 0, 0.2);
-    color: #888;
-    line-height: 1;
-    padding: 0 7px;
-    margin: 1px;
-    cursor: pointer;
-    text-align: center;
-    min-width: 1.4em;
-}
+// .menuicon {
+//     display: inline-block;
+//     border-right: 1px solid rgba(0, 0, 0, 0.2);
+//     color: #888;
+//     line-height: 1;
+//     padding: 0 7px;
+//     margin: 1px;
+//     cursor: pointer;
+//     text-align: center;
+//     min-width: 1.4em;
+// }
 
 .strong,
 .heading {
-- 
cgit v1.2.3-70-g09d2


From 50fb344cd7c93539f00b3aebc8fa5be4aefc73fd Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 16 Oct 2019 11:07:36 -0400
Subject: small fixes: cursors, pdf, dragging buttons

---
 src/client/views/nodes/ColorBox.scss                   | 9 +++++++++
 src/client/views/nodes/DocumentView.scss               | 1 +
 src/client/views/nodes/DocumentView.tsx                | 2 +-
 src/client/views/nodes/FormattedTextBox.scss           | 1 +
 src/client/views/nodes/KeyValueBox.scss                | 1 +
 src/client/views/nodes/PDFBox.scss                     | 2 +-
 src/client/views/nodes/PDFBox.tsx                      | 6 +++---
 src/server/authentication/models/current_user_utils.ts | 2 +-
 8 files changed, 18 insertions(+), 6 deletions(-)

(limited to 'src/client/views/nodes/FormattedTextBox.scss')

diff --git a/src/client/views/nodes/ColorBox.scss b/src/client/views/nodes/ColorBox.scss
index 32a7891c6..bf334c939 100644
--- a/src/client/views/nodes/ColorBox.scss
+++ b/src/client/views/nodes/ColorBox.scss
@@ -6,6 +6,15 @@
      
     .sketch-picker {
         margin:auto;
+        div {
+            cursor: crosshair;
+        }
+        .flexbox-fix {
+            cursor: pointer;
+            div {
+                cursor:pointer;
+            }
+        }
     }
 }
 .colorBox-container-interactive {
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index b3e7898c1..69eb1a843 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -6,6 +6,7 @@
   left:0;
   border-radius: inherit;
   transition : outline .3s linear;
+  cursor: grab;
                     
  // background: $light-color; //overflow: hidden;
   transform-origin: left top;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 8a320d39b..ebd0ca549 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -176,7 +176,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 handlers: {
                     dragComplete: action((emptyFunction))
                 },
-                hideSource: !dropAction && !this.Document.onDragStart && !this.Document.onClick
+                hideSource: !dropAction && !this.Document.onDragStart
             });
         }
     }
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index 29e8b14a8..0550f9708 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -12,6 +12,7 @@
 
 .formattedTextBox-cont-scroll,
 .formattedTextBox-cont-hidden {
+    cursor: text;
     background: inherit;
     padding: 0;
     border-width: 0px;
diff --git a/src/client/views/nodes/KeyValueBox.scss b/src/client/views/nodes/KeyValueBox.scss
index 87a9565e8..6e8a36c6a 100644
--- a/src/client/views/nodes/KeyValueBox.scss
+++ b/src/client/views/nodes/KeyValueBox.scss
@@ -9,6 +9,7 @@
     box-sizing: border-box;
     display: inline-block;
     pointer-events: all;
+    cursor: default;
     .imageBox-cont img {
         width: auto;
     }
diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index 1c1d6ec95..dd909e09f 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -15,7 +15,7 @@
     width: 100%;
     height: 100%;
     background: lightslategray;
-    .pdfBox-title-cont, .pdfBox-cont-interactive{
+    .pdfBox-cont, .pdfBox-cont-interactive{
         width: 150%;
         height: 100%;
         position: relative;
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 19797400f..f31128356 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -16,7 +16,6 @@ import { panZoomSchema } from '../collections/collectionFreeForm/CollectionFreeF
 import { ContextMenu } from '../ContextMenu';
 import { ContextMenuProps } from '../ContextMenuItem';
 import { DocAnnotatableComponent } from "../DocComponent";
-import { InkingControl } from "../InkingControl";
 import { PDFViewer } from "../pdf/PDFViewer";
 import { documentSchema } from "./DocumentView";
 import { FieldView, FieldViewProps } from './FieldView';
@@ -65,6 +64,7 @@ export class PDFBox extends DocAnnotatableComponent<FieldViewProps, PdfDocument>
                 }
             }, { fireImmediately: true });
     }
+
     loaded = (nw: number, nh: number, np: number) => {
         this.dataDoc.numPages = np;
         this.Document.nativeWidth = nw * 96 / 72;
@@ -133,12 +133,12 @@ export class PDFBox extends DocAnnotatableComponent<FieldViewProps, PdfDocument>
                 <FontAwesomeIcon style={{ color: "white" }} icon={"arrow-right"} size="sm" />
             </button>
         </>;
-        return !this.props.active() ? (null) :
+        return !this.active() ? (null) :
             (<div className="pdfBox-ui" onKeyDown={e => e.keyCode === KeyCodes.BACKSPACE || e.keyCode === KeyCodes.DELETE ? e.stopPropagation() : true}
                 onPointerDown={e => e.stopPropagation()} style={{ display: this.active() ? "flex" : "none", position: "absolute", width: "100%", height: "100%", zIndex: 1, pointerEvents: "none" }}>
                 <div className="pdfBox-overlayCont" key="cont" onPointerDown={(e) => e.stopPropagation()} style={{ left: `${this._searching ? 0 : 100}%` }}>
                     <button className="pdfBox-overlayButton" title="Open Search Bar" />
-                    <input className="pdfBox-searchBar" placeholder="Search" autoFocus={true} ref={this._searchRef} onChange={this.searchStringChanged} onKeyDown={e => {
+                    <input className="pdfBox-searchBar" placeholder="Search" ref={this._searchRef} onChange={this.searchStringChanged} onKeyDown={e => {
                         e.keyCode === KeyCodes.ENTER && this.search(this._searchString, !e.shiftKey);
                     }} />
                     <button title="Search" onClick={e => this.search(this._searchString, !e.shiftKey)}>
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index 0c9f09112..4abf85381 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -56,7 +56,7 @@ export class CurrentUserUtils {
             { title: "import folder", icon: "cloud-upload-alt", drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", width: 400, height: 400 })' },
             { title: "pen", icon: "pen-nib", click: 'activatePen(this.activePen.pen = sameDocs(this.activePen.pen, this) ? undefined : this,2, this.backgroundColor)', backgroundColor: "blue", unchecked: `!sameDocs(this.activePen.pen,  this)`, activePen: doc },
             { title: "highlighter", icon: "pen", click: 'activateBrush(this.activePen.pen = sameDocs(this.activePen.pen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", unchecked: `!sameDocs(this.activePen.pen, this)`, activePen: doc },
-            { title: "eraser", icon: "eraser", click: 'activateEraser(this.activePen.pen = sameDocs(this.activePen.pen, this) ? undefined : this);', unchecked: `!sameDocs(this.activePen.pen, this)`, activePen: doc },
+            { title: "eraser", icon: "eraser", click: 'activateEraser(this.activePen.pen = sameDocs(this.activePen.pen, this) ? undefined : this);', unchecked: `!sameDocs(this.activePen.pen, this)`, backgroundColor: "pink", activePen: doc },
             { title: "none", icon: "pause", click: 'deactivateInk();this.activePen.pen = this;', unchecked: `!sameDocs(this.activePen.pen, this)`, activePen: doc },
         ];
         return docProtoData.map(data => Docs.Create.FontIconDocument({
-- 
cgit v1.2.3-70-g09d2


From e21810a4097e724a378416135c7cc6def7ff022c Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Fri, 18 Oct 2019 11:35:22 -0400
Subject: cleaned up dictation into text notes

---
 src/client/util/DictationManager.ts          |  3 +-
 src/client/views/MainView.tsx                |  3 +-
 src/client/views/nodes/FormattedTextBox.scss | 16 ++++++----
 src/client/views/nodes/FormattedTextBox.tsx  | 46 +++++++++++++++++++++++-----
 4 files changed, 53 insertions(+), 15 deletions(-)

(limited to 'src/client/views/nodes/FormattedTextBox.scss')

diff --git a/src/client/util/DictationManager.ts b/src/client/util/DictationManager.ts
index 182cfb70a..ae991635f 100644
--- a/src/client/util/DictationManager.ts
+++ b/src/client/util/DictationManager.ts
@@ -64,7 +64,7 @@ export namespace DictationManager {
         const intraSession = ". ";
         const interSession = " ... ";
 
-        let isListening = false;
+        export let isListening = false;
         let isManuallyStopped = false;
 
         let current: string | undefined = undefined;
@@ -200,6 +200,7 @@ export namespace DictationManager {
             if (!isListening || !recognizer) {
                 return;
             }
+            isListening = false;
             isManuallyStopped = true;
             salvageSession ? recognizer.stop() : recognizer.abort();
             // let main = MainView.Instance;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 0e15784f7..9304f4bef 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -1,7 +1,7 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
 import {
     faArrowDown, faArrowUp, faBolt, faCaretUp, faCat, faCheck, faChevronRight, faClone, faCloudUploadAlt, faCommentAlt, faCut, faEllipsisV, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faLongArrowAltRight,
-    faMusic, faObjectGroup, faPause, faMousePointer, faPenNib, faPen, faEraser, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faTv, faUndoAlt, faHighlighter
+    faMusic, faObjectGroup, faPause, faMousePointer, faPenNib, faFileAudio, faPen, faEraser, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faTv, faUndoAlt, faHighlighter
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, configure, observable, reaction, runInAction } from 'mobx';
@@ -106,6 +106,7 @@ export class MainView extends React.Component {
         library.add(faPen);
         library.add(faHighlighter);
         library.add(faEraser);
+        library.add(faFileAudio);
         library.add(faPenNib);
         library.add(faFilm);
         library.add(faMusic);
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index 0550f9708..a4acd3b82 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -10,8 +10,7 @@
     outline: none !important;
 }
 
-.formattedTextBox-cont-scroll,
-.formattedTextBox-cont-hidden {
+.formattedTextBox-cont {
     cursor: text;
     background: inherit;
     padding: 0;
@@ -26,10 +25,15 @@
     color: initial;
     height: 100%;
     pointer-events: all;
-}
-
-.formattedTextBox-cont-hidden {
-   // pointer-events: none;
+    overflow-y: auto;
+    max-height: 100%;
+    .formattedTextBox-dictation {
+        height: 20px;
+        width: 20px;
+        top: 0px;
+        left: 0px;
+        position: absolute;
+    }
 }
 
 .formattedTextBox-inner-rounded {
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 045eee3f7..6f4ced7f3 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -1,7 +1,7 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faEdit, faSmile, faTextHeight, faUpload } from '@fortawesome/free-solid-svg-icons';
 import _ from "lodash";
-import { action, computed, IReactionDisposer, Lambda, observable, reaction, runInAction } from "mobx";
+import { action, computed, IReactionDisposer, Lambda, observable, reaction, runInAction, trace } from "mobx";
 import { observer } from "mobx-react";
 import { baseKeymap } from "prosemirror-commands";
 import { history } from "prosemirror-history";
@@ -43,6 +43,8 @@ import { FormattedTextBoxComment, formattedTextBoxCommentPlugin } from './Format
 import React = require("react");
 import { ContextMenuProps } from '../ContextMenuItem';
 import { ContextMenu } from '../ContextMenu';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { siteVerification } from 'googleapis/build/src/apis/siteVerification';
 
 library.add(faEdit);
 library.add(faSmile, faTextHeight, faUpload);
@@ -369,7 +371,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
 
     specificContextMenu = (e: React.MouseEvent): void => {
         let funcs: ContextMenuProps[] = [];
-        funcs.push({ description: "Dictate", event: () => { e.stopPropagation(); this.recordBullet(); }, icon: "expand-arrows-alt" });
+        funcs.push({ description: "Record Bullet", event: () => { e.stopPropagation(); this.recordBullet(); }, icon: "expand-arrows-alt" });
         ["My Text", "Text from Others", "Todo Items", "Important Items", "Ignore Items", "Disagree Items", "By Recent Minute", "By Recent Hour"].forEach(option =>
             funcs.push({
                 description: (FormattedTextBox._highlights.indexOf(option) === -1 ? "Highlight " : "Unhighlight ") + option, event: () => {
@@ -386,6 +388,27 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
         ContextMenu.Instance.addItem({ description: "Text Funcs...", subitems: funcs, icon: "asterisk" });
     }
 
+    @observable _recording = false;
+
+    recordDictation = () => {
+        //this._editorView!.focus();
+        if (this._recording) return;
+        runInAction(() => this._recording = true);
+        DictationManager.Controls.listen({
+            interimHandler: this.setCurrentBulletContent,
+            continuous: { indefinite: false },
+        }).then(results => {
+            if (results && [DictationManager.Controls.Infringed].includes(results)) {
+                DictationManager.Controls.stop();
+            }
+            this._editorView!.focus();
+        });
+    }
+    stopDictation = (abort: boolean) => {
+        runInAction(() => this._recording = false);
+        DictationManager.Controls.stop(!abort);
+    }
+
     recordBullet = async () => {
         let completedCue = "end session";
         let results = await DictationManager.Controls.listen({
@@ -902,6 +925,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
         }
 
         this.hitBulletTargets(e.clientX, e.clientY, e.nativeEvent.offsetX, e.shiftKey);
+        if (this._recording) setTimeout(() => { this.stopDictation(true); setTimeout(() => this.recordDictation(), 500); }, 500);
     }
 
     // this hackiness handles clicking on the list item bullets to do expand/collapse.  the bullets are ::before pseudo elements so there's no real way to hit test against them.
@@ -965,7 +989,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
         });
     }
     onBlur = (e: any) => {
-        DictationManager.Controls.stop(false);
+        //DictationManager.Controls.stop(false);
         if (this._undoTyping) {
             this._undoTyping.end();
             this._undoTyping = undefined;
@@ -986,6 +1010,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
         if (!this._undoTyping) {
             this._undoTyping = UndoManager.StartBatch("undoTyping");
         }
+        if (this._recording) { this.stopDictation(true); setTimeout(() => this.recordDictation(), 250); }
     }
 
     @action
@@ -1001,7 +1026,6 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
     }
 
     render() {
-        let style = "hidden";
         let rounded = StrCast(this.layoutDoc.borderRounding) === "100%" ? "-rounded" : "";
         let interactive: "all" | "none" = InkingControl.Instance.selectedTool || this.layoutDoc.isBackground
             ? "none" : "all";
@@ -1010,10 +1034,8 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
             FormattedTextBox._toolTipTextMenu!.updateFromDash(this._editorView!, undefined, this.props);
         }
         return (
-            <div className={`formattedTextBox-cont-${style}`} ref={this._ref}
+            <div className={`formattedTextBox-cont`} ref={this._ref}
                 style={{
-                    overflowY: "auto",
-                    maxHeight: "100%",
                     height: this.layoutDoc.autoHeight ? "max-content" : this.props.height ? this.props.height : undefined,
                     background: this.props.hideOnLeave ? "rgba(0,0,0 ,0.4)" : undefined,
                     opacity: this.props.hideOnLeave ? (this._entered ? 1 : 0.1) : 1,
@@ -1035,6 +1057,16 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
                 onPointerLeave={action(() => this._entered = false)}
             >
                 <div className={`formattedTextBox-inner${rounded}`} style={{ whiteSpace: "pre-wrap", pointerEvents: ((this.props.Document.isButton || this.props.onClick) && !this.props.isSelected()) ? "none" : undefined }} ref={this.createDropTarget} />
+
+                <div className="formattedTextBox-dictation"
+                    onClick={e => {
+                        this._recording ? this.stopDictation(true) : this.recordDictation();
+                        setTimeout(() => this._editorView!.focus(), 500);
+                        e.stopPropagation();
+                    }} >
+                    <FontAwesomeIcon className="formattedTExtBox-audioFont"
+                        style={{ color: this._recording ? "red" : "blue", opacity: this._recording ? 1 : 0.2 }} icon={"file-audio"} size="sm" />
+                </div>
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From c9fbdb9cfd5fcf35f7a599706cb41d4e7e586e19 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Thu, 14 Nov 2019 16:23:57 -0500
Subject: added optional sidebar for text notes

---
 src/client/views/DocumentDecorations.tsx           | 11 +-----
 src/client/views/nodes/FormattedTextBox.scss       | 12 +++++++
 src/client/views/nodes/FormattedTextBox.tsx        | 39 +++++++++++++++++++---
 src/client/views/nodes/FormattedTextBoxComment.tsx |  5 ++-
 4 files changed, 49 insertions(+), 18 deletions(-)

(limited to 'src/client/views/nodes/FormattedTextBox.scss')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 55c211d1d..49921170f 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -157,22 +157,14 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         this.onBackgroundUp(e);
     }
 
-    @observable _forceUpdate = 0;
-    _lastBox = { x: 0, y: 0, r: 0, b: 0 };
     @computed
     get Bounds(): { x: number, y: number, b: number, r: number } {
-        let x = this._forceUpdate;
-        this._lastBox = SelectionManager.SelectedDocuments().reduce((bounds, documentView) => {
+        return SelectionManager.SelectedDocuments().reduce((bounds, documentView) => {
             if (documentView.props.renderDepth === 0 ||
                 Doc.AreProtosEqual(documentView.props.Document, CurrentUserUtils.UserDocument)) {
                 return bounds;
             }
             let transform = (documentView.props.ScreenToLocalTransform().scale(documentView.props.ContentScaling())).inverse();
-            if (transform.TranslateX === 0 && transform.TranslateY === 0) {
-                setTimeout(action(() => this._forceUpdate++), 0); // bcz: fix CollectionStackingView's getTransform() somehow...without this, resizing things in the library view, for instance, show the wrong bounds
-                return this._lastBox;
-            }
-
             var [sptX, sptY] = transform.transformPoint(0, 0);
             let [bptX, bptY] = transform.transformPoint(documentView.props.PanelWidth(), documentView.props.PanelHeight());
             if (documentView.props.Document.type === DocumentType.LINK) {
@@ -187,7 +179,6 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                 r: Math.max(bptX, bounds.r), b: Math.max(bptY, bounds.b)
             };
         }, { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE });
-        return this._lastBox;
     }
 
     onBackgroundDown = (e: React.PointerEvent): void => {
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index a4acd3b82..98b57bd84 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -36,6 +36,18 @@
     }
 }
 
+.collectionfreeformview-container {
+    position: relative;
+}
+.formattedTextBox-outer {
+    position: relative;
+    overflow: auto;
+    display: inline-block;
+    padding: 10px 10px;
+    width: 100%;
+    height: 100%;
+}
+
 .formattedTextBox-inner-rounded {
     height: 70%;
     width: 85%;
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 6d60e8f77..b7df3fb0e 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -18,7 +18,7 @@ import { RichTextField } from "../../../new_fields/RichTextField";
 import { RichTextUtils } from '../../../new_fields/RichTextUtils';
 import { createSchema, makeInterface } from "../../../new_fields/Schema";
 import { Cast, DateCast, NumCast, StrCast } from "../../../new_fields/Types";
-import { numberRange, Utils, addStyleSheet, addStyleSheetRule, clearStyleSheetRules } from '../../../Utils';
+import { numberRange, Utils, addStyleSheet, addStyleSheetRule, clearStyleSheetRules, emptyFunction, returnOne } from '../../../Utils';
 import { GoogleApiClientUtils, Pulls, Pushes } from '../../apis/google_docs/GoogleApiClientUtils';
 import { DocServer } from "../../DocServer";
 import { Docs, DocUtils } from '../../documents/Documents';
@@ -33,7 +33,7 @@ import { SelectionManager } from "../../util/SelectionManager";
 import { TooltipLinkingMenu } from "../../util/TooltipLinkingMenu";
 import { TooltipTextMenu } from "../../util/TooltipTextMenu";
 import { undoBatch, UndoManager } from "../../util/UndoManager";
-import { DocExtendableComponent } from "../DocComponent";
+import { DocAnnotatableComponent } from "../DocComponent";
 import { DocumentButtonBar } from '../DocumentButtonBar';
 import { DocumentDecorations } from '../DocumentDecorations';
 import { InkingControl } from "../InkingControl";
@@ -46,6 +46,7 @@ import { ContextMenu } from '../ContextMenu';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { documentSchema } from '../../../new_fields/documentSchemas';
 import { AudioBox } from './AudioBox';
+import { CollectionFreeFormView } from '../collections/collectionFreeForm/CollectionFreeFormView';
 
 library.add(faEdit);
 library.add(faSmile, faTextHeight, faUpload);
@@ -70,7 +71,7 @@ const RichTextDocument = makeInterface(richTextSchema, documentSchema);
 type PullHandler = (exportState: Opt<GoogleApiClientUtils.Docs.ImportResult>, dataDoc: Doc) => void;
 
 @observer
-export class FormattedTextBox extends DocExtendableComponent<(FieldViewProps & FormattedTextBoxProps), RichTextDocument>(RichTextDocument) {
+export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps & FormattedTextBoxProps), RichTextDocument>(RichTextDocument) {
     public static LayoutString(fieldStr: string) { return FieldView.LayoutString(FormattedTextBox, fieldStr); }
     public static blankState = () => EditorState.create(FormattedTextBox.Instance.config);
     public static Instance: FormattedTextBox;
@@ -359,6 +360,7 @@ export class FormattedTextBox extends DocExtendableComponent<(FieldViewProps & F
 
     specificContextMenu = (e: React.MouseEvent): void => {
         let funcs: ContextMenuProps[] = [];
+        funcs.push({ description: "Toggle Sidebar", event: () => { e.stopPropagation(); this.props.Document.sidebarWidthPercent = StrCast(this.props.Document.sidebarWidthPercent, "0%") === "0%" ? "25%" : "0%"; }, icon: "expand-arrows-alt" });
         funcs.push({ description: "Record Bullet", event: () => { e.stopPropagation(); this.recordBullet(); }, icon: "expand-arrows-alt" });
         ["My Text", "Text from Others", "Todo Items", "Important Items", "Ignore Items", "Disagree Items", "By Recent Minute", "By Recent Hour"].forEach(option =>
             funcs.push({
@@ -1010,6 +1012,9 @@ export class FormattedTextBox extends DocExtendableComponent<(FieldViewProps & F
         }
     }
 
+    @computed get sidebarWidthPercent() { return StrCast(this.props.Document.sidebarWidth, "0%"); }
+    @computed get sidebarWidth() { return Number(this.sidebarWidthPercent.substring(0, this.sidebarWidthPercent.length - 1)) / 100 * this.props.PanelWidth(); }
+    @computed get annotationsKey() { return "annotations"; }
     render() {
         trace();
         let rounded = StrCast(this.layoutDoc.borderRounding) === "100%" ? "-rounded" : "";
@@ -1042,8 +1047,32 @@ export class FormattedTextBox extends DocExtendableComponent<(FieldViewProps & F
                 onPointerEnter={action(() => this._entered = true)}
                 onPointerLeave={action(() => this._entered = false)}
             >
-                <div className={`formattedTextBox-inner${rounded}`} style={{ whiteSpace: "pre-wrap", pointerEvents: ((this.Document.isButton || this.props.onClick) && !this.props.isSelected()) ? "none" : undefined }} ref={this.createDropTarget} />
-
+                <div className={`formattedTextBox-outer`} style={{ width: `calc(100% - ${this.sidebarWidthPercent})`, }}>
+                    <div className={`formattedTextBox-inner${rounded}`} style={{ whiteSpace: "pre-wrap", pointerEvents: ((this.Document.isButton || this.props.onClick) && !this.props.isSelected()) ? "none" : undefined }} ref={this.createDropTarget} />
+                </div>
+                {this.sidebarWidthPercent === "0%" ? (null) : <div style={{ borderLeft: "solid 1px black", width: `${this.sidebarWidthPercent}`, height: "100%", display: "inline-block" }}>
+                    <CollectionFreeFormView {...this.props}
+                        PanelHeight={() => this.props.PanelHeight()}
+                        PanelWidth={() => this.sidebarWidth}
+                        annotationsKey={this.annotationsKey}
+                        isAnnotationOverlay={true}
+                        focus={this.props.focus}
+                        isSelected={this.props.isSelected}
+                        select={emptyFunction}
+                        active={this.active}
+                        ContentScaling={returnOne}
+                        whenActiveChanged={this.whenActiveChanged}
+                        removeDocument={this.removeDocument}
+                        moveDocument={this.moveDocument}
+                        addDocument={this.addDocument}
+                        CollectionView={undefined}
+                        ScreenToLocalTransform={() => this.props.ScreenToLocalTransform().translate(-(this.props.PanelWidth() - this.sidebarWidth), 0)}
+                        ruleProvider={undefined}
+                        renderDepth={this.props.renderDepth + 1}
+                        ContainingCollectionDoc={this.props.ContainingCollectionDoc}
+                        chromeCollapsed={true}>
+                    </CollectionFreeFormView>
+                </div>}
                 <div className="formattedTextBox-dictation"
                     onClick={e => {
                         this._recording ? this.stopDictation(true) : this.recordDictation();
diff --git a/src/client/views/nodes/FormattedTextBoxComment.tsx b/src/client/views/nodes/FormattedTextBoxComment.tsx
index 04958525c..c076fd34a 100644
--- a/src/client/views/nodes/FormattedTextBoxComment.tsx
+++ b/src/client/views/nodes/FormattedTextBoxComment.tsx
@@ -87,7 +87,7 @@ export class FormattedTextBoxComment {
                     DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, textBox.props.Document,
                         (doc: Doc, maxLocation: string) => textBox.props.addDocTab(doc, undefined, e.ctrlKey ? "inTab" : "onRight"));
                 } else if (textBox && (FormattedTextBoxComment.tooltipText as any).href) {
-                    textBox.props.addDocTab(Docs.Create.WebDocument((FormattedTextBoxComment.tooltipText as any).href, { width: 200, height: 400 }), undefined, "onRight");
+                    textBox.props.addDocTab(Docs.Create.WebDocument((FormattedTextBoxComment.tooltipText as any).href, { title: (FormattedTextBoxComment.tooltipText as any).href, width: 200, height: 400 }), undefined, "onRight");
                 }
                 FormattedTextBoxComment.opened = keep || !FormattedTextBoxComment.opened;
                 textBox && FormattedTextBoxComment.start !== undefined && textBox.setAnnotation(
@@ -97,7 +97,6 @@ export class FormattedTextBoxComment {
             };
             root && root.appendChild(FormattedTextBoxComment.tooltip);
         }
-        //this.update(view, undefined);
     }
 
     public static Hide() {
@@ -223,5 +222,5 @@ export class FormattedTextBoxComment {
         FormattedTextBoxComment.tooltip && (FormattedTextBoxComment.tooltip.style.display = set);
     }
 
-    destroy() { }//FormattedTextBoxComment.tooltip.style.display = "none"; }
+    destroy() { }
 }
-- 
cgit v1.2.3-70-g09d2


From ed918920a83a2aea5adc8c2d6dc00f6bcc62514c Mon Sep 17 00:00:00 2001
From: yipstanley <stanley_yip@brown.edu>
Date: Sat, 16 Nov 2019 16:32:26 -0500
Subject: nvm text documents are no lnger buggy

---
 src/client/views/nodes/FormattedTextBox.scss | 285 +++++++++++++++++++++++----
 1 file changed, 246 insertions(+), 39 deletions(-)

(limited to 'src/client/views/nodes/FormattedTextBox.scss')

diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index b497b12b4..b9f1e9940 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -27,6 +27,7 @@
     pointer-events: all;
     overflow-y: auto;
     max-height: 100%;
+
     .formattedTextBox-dictation {
         height: 20px;
         width: 20px;
@@ -39,6 +40,7 @@
 .collectionfreeformview-container {
     position: relative;
 }
+
 .formattedTextBox-outer {
     position: relative;
     overflow: auto;
@@ -57,8 +59,8 @@
     left: 10%;
 }
 
-.formattedTextBox-inner-rounded ,
-.formattedTextBox-inner  {
+.formattedTextBox-inner-rounded,
+.formattedTextBox-inner {
     padding: 10px 10px;
     height: 100%;
 }
@@ -85,19 +87,20 @@
 }
 
 .userMarkOpen {
-    background:  rgba(255, 255, 0, 0.267);
+    background: rgba(255, 255, 0, 0.267);
     display: inline;
 }
+
 .userMark {
-    background:  rgba(255, 255, 0, 0.267);
+    background: rgba(255, 255, 0, 0.267);
     font-size: 2px;
     display: inline-grid;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    width:10px;
-    min-height:10px;
-    text-align:center;
+    width: 10px;
+    min-height: 10px;
+    text-align: center;
     align-content: center;
 }
 
@@ -105,8 +108,9 @@ footnote {
     display: inline-block;
     position: relative;
     cursor: pointer;
+
     div {
-        padding : 0 !important;
+        padding: 0 !important;
     }
 }
 
@@ -119,7 +123,7 @@ footnote::after {
 
 .ProseMirror {
     counter-reset: prosemirror-footnote;
-  }
+}
 
 .footnote-tooltip {
     cursor: auto;
@@ -138,6 +142,7 @@ footnote::after {
 .prosemirror-attribution {
     font-size: 8px;
 }
+
 .footnote-tooltip::before {
     border: 5px solid silver;
     border-top-width: 0px;
@@ -152,45 +157,247 @@ footnote::after {
 }
 
 .formattedTextBox-summarizer {
-    opacity :0.5;
+    opacity: 0.5;
     position: relative;
-    width:40px;
-    height:20px;
+    width: 40px;
+    height: 20px;
 }
-.formattedTextBox-summarizer::after{
-    content: "←" ;
+
+.formattedTextBox-summarizer::after {
+    content: "←";
 }
 
 .formattedTextBox-summarizer-collapsed {
-    opacity :0.5;
+    opacity: 0.5;
     position: relative;
-    width:40px;
-    height:20px;
+    width: 40px;
+    height: 20px;
 }
+
 .formattedTextBox-summarizer-collapsed::after {
     content: "...";
 }
 
 .ProseMirror {
-ol { counter-reset: deci1 0; padding-left: 0px; }
-.decimal1-ol {counter-reset: deci1; p { display: inline }; font-size: 24 ; ul, ol {  padding-left:30px; } }
-.decimal2-ol {counter-reset: deci2; p { display: inline }; font-size: 18 ; ul, ol {  padding-left:30px; } }
-.decimal3-ol {counter-reset: deci3; p { display: inline }; font-size: 14 ; ul, ol {  padding-left:30px; } }
-.decimal4-ol {counter-reset: deci4; p { display: inline }; font-size: 10 ; ul, ol {  padding-left:30px; } }
-.decimal5-ol {counter-reset: deci5; p { display: inline }; font-size: 10 ; ul, ol {  padding-left:30px; } }
-.decimal6-ol {counter-reset: deci6; p { display: inline }; font-size: 10 ; ul, ol {  padding-left:30px; } }
-.decimal7-ol {counter-reset: deci7; p { display: inline }; font-size: 10 ; ul, ol {  padding-left:30px; } } 
-.upper-alpha-ol {counter-reset: ualph; p { display: inline }; font-size: 18; }
-.lower-roman-ol {counter-reset: lroman;  p { display: inline }; font-size: 14; }
-.lower-alpha-ol {counter-reset: lalpha;  p { display: inline }; font-size: 10; }
-.decimal1:before { content: counter(deci1) ") "; counter-increment: deci1; display:inline-block; min-width: 30;}
-.decimal2:before { content: counter(deci1) "." counter(deci2) ") "; counter-increment: deci2; display:inline-block; min-width: 35}
-.decimal3:before { content: counter(deci1) "." counter(deci2) "." counter(deci3) ") "; counter-increment: deci3; display:inline-block; min-width: 35}
-.decimal4:before { content: counter(deci1) "." counter(deci2) "." counter(deci3) "." counter(deci4) ") "; counter-increment: deci4; display:inline-block; min-width: 40}
-.decimal5:before { content: counter(deci1) "." counter(deci2) "." counter(deci3) "." counter(deci4) "." counter(deci5) ") "; counter-increment: deci5; display:inline-block; min-width: 40}
-.decimal6:before { content: counter(deci1) "." counter(deci2) "." counter(deci3) "." counter(deci4) "." counter(deci5) "." counter(deci6) ") "; counter-increment: deci6; display:inline-block; min-width: 45}
-.decimal7:before { content: counter(deci1) "." counter(deci2) "." counter(deci3) "." counter(deci4) "." counter(deci5) "." counter(deci6) "." counter(deci7) ") "; counter-increment: deci7; display:inline-block; min-width: 50}
-.upper-alpha:before { content: counter(deci1) "." counter(ualph, upper-alpha) ") "; counter-increment: ualph; display:inline-block; min-width: 35 }
-.lower-roman:before { content: counter(deci1) "." counter(ualph, upper-alpha) "." counter(lroman, lower-roman) ") "; counter-increment: lroman;display:inline-block; min-width: 50 }
-.lower-alpha:before { content: counter(deci1) "." counter(ualph, upper-alpha) "." counter(lroman, lower-roman) "." counter(lalpha, lower-alpha) ") "; counter-increment: lalpha; display:inline-block; min-width: 35}
-}
+    touch-action: none;
+
+    ol {
+        counter-reset: deci1 0;
+        padding-left: 0px;
+    }
+
+    .decimal1-ol {
+        counter-reset: deci1;
+
+        p {
+            display: inline
+        }
+
+        ;
+        font-size: 24;
+
+        ul,
+        ol {
+            padding-left: 30px;
+        }
+    }
+
+    .decimal2-ol {
+        counter-reset: deci2;
+
+        p {
+            display: inline
+        }
+
+        ;
+        font-size: 18;
+
+        ul,
+        ol {
+            padding-left: 30px;
+        }
+    }
+
+    .decimal3-ol {
+        counter-reset: deci3;
+
+        p {
+            display: inline
+        }
+
+        ;
+        font-size: 14;
+
+        ul,
+        ol {
+            padding-left: 30px;
+        }
+    }
+
+    .decimal4-ol {
+        counter-reset: deci4;
+
+        p {
+            display: inline
+        }
+
+        ;
+        font-size: 10;
+
+        ul,
+        ol {
+            padding-left: 30px;
+        }
+    }
+
+    .decimal5-ol {
+        counter-reset: deci5;
+
+        p {
+            display: inline
+        }
+
+        ;
+        font-size: 10;
+
+        ul,
+        ol {
+            padding-left: 30px;
+        }
+    }
+
+    .decimal6-ol {
+        counter-reset: deci6;
+
+        p {
+            display: inline
+        }
+
+        ;
+        font-size: 10;
+
+        ul,
+        ol {
+            padding-left: 30px;
+        }
+    }
+
+    .decimal7-ol {
+        counter-reset: deci7;
+
+        p {
+            display: inline
+        }
+
+        ;
+        font-size: 10;
+
+        ul,
+        ol {
+            padding-left: 30px;
+        }
+    }
+
+    .upper-alpha-ol {
+        counter-reset: ualph;
+
+        p {
+            display: inline
+        }
+
+        ;
+        font-size: 18;
+    }
+
+    .lower-roman-ol {
+        counter-reset: lroman;
+
+        p {
+            display: inline
+        }
+
+        ;
+        font-size: 14;
+    }
+
+    .lower-alpha-ol {
+        counter-reset: lalpha;
+
+        p {
+            display: inline
+        }
+
+        ;
+        font-size: 10;
+    }
+
+    .decimal1:before {
+        content: counter(deci1) ") ";
+        counter-increment: deci1;
+        display: inline-block;
+        min-width: 30;
+    }
+
+    .decimal2:before {
+        content: counter(deci1) "."counter(deci2) ") ";
+        counter-increment: deci2;
+        display: inline-block;
+        min-width: 35
+    }
+
+    .decimal3:before {
+        content: counter(deci1) "."counter(deci2) "."counter(deci3) ") ";
+        counter-increment: deci3;
+        display: inline-block;
+        min-width: 35
+    }
+
+    .decimal4:before {
+        content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) ") ";
+        counter-increment: deci4;
+        display: inline-block;
+        min-width: 40
+    }
+
+    .decimal5:before {
+        content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) ") ";
+        counter-increment: deci5;
+        display: inline-block;
+        min-width: 40
+    }
+
+    .decimal6:before {
+        content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) ") ";
+        counter-increment: deci6;
+        display: inline-block;
+        min-width: 45
+    }
+
+    .decimal7:before {
+        content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) "."counter(deci7) ") ";
+        counter-increment: deci7;
+        display: inline-block;
+        min-width: 50
+    }
+
+    .upper-alpha:before {
+        content: counter(deci1) "."counter(ualph, upper-alpha) ") ";
+        counter-increment: ualph;
+        display: inline-block;
+        min-width: 35
+    }
+
+    .lower-roman:before {
+        content: counter(deci1) "."counter(ualph, upper-alpha) "."counter(lroman, lower-roman) ") ";
+        counter-increment: lroman;
+        display: inline-block;
+        min-width: 50
+    }
+
+    .lower-alpha:before {
+        content: counter(deci1) "."counter(ualph, upper-alpha) "."counter(lroman, lower-roman) "."counter(lalpha, lower-alpha) ") ";
+        counter-increment: lalpha;
+        display: inline-block;
+        min-width: 35
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 28763de7e4d90a4ecd9bfd640d1de85338a98f79 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Tue, 19 Nov 2019 13:36:51 -0500
Subject: fixed inking on text sidebar

---
 src/client/views/nodes/FormattedTextBox.scss | 9 +++++++++
 src/client/views/nodes/FormattedTextBox.tsx  | 3 ++-
 2 files changed, 11 insertions(+), 1 deletion(-)

(limited to 'src/client/views/nodes/FormattedTextBox.scss')

diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index b9f1e9940..f7b6e92d9 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -49,6 +49,15 @@
     width: 100%;
     height: 100%;
 }
+.formattedTextBox-sidebar,.formattedTextBox-sidebar-inking {
+    border-left: solid 1px black; 
+    height: 100%; 
+    display: inline-block;
+}
+
+.formattedTextBox-sidebar-inking {
+    pointer-events: all;
+}
 
 .formattedTextBox-inner-rounded {
     height: 70%;
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 4ecdc95ac..31919f192 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -46,6 +46,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { documentSchema } from '../../../new_fields/documentSchemas';
 import { AudioBox } from './AudioBox';
 import { CollectionFreeFormView } from '../collections/collectionFreeForm/CollectionFreeFormView';
+import { InkTool } from '../../../new_fields/InkField';
 
 library.add(faEdit);
 library.add(faSmile, faTextHeight, faUpload);
@@ -1049,7 +1050,7 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps &
                 <div className={`formattedTextBox-outer`} style={{ width: `calc(100% - ${this.sidebarWidthPercent})`, }}>
                     <div className={`formattedTextBox-inner${rounded}`} style={{ whiteSpace: "pre-wrap", pointerEvents: ((this.Document.isButton || this.props.onClick) && !this.props.isSelected()) ? "none" : undefined }} ref={this.createDropTarget} />
                 </div>
-                {this.sidebarWidthPercent === "0%" ? (null) : <div style={{ borderLeft: "solid 1px black", width: `${this.sidebarWidthPercent}`, height: "100%", display: "inline-block" }}>
+                {this.sidebarWidthPercent === "0%" ? (null) : <div className={"formattedTextBox-sidebar" + (InkingControl.Instance.selectedTool !== InkTool.None ? "-inking" : "")} style={{ width: `${this.sidebarWidthPercent}` }}>
                     <CollectionFreeFormView {...this.props}
                         PanelHeight={() => this.props.PanelHeight()}
                         PanelWidth={() => this.sidebarWidth}
-- 
cgit v1.2.3-70-g09d2


From 667d196a2cbc8e237de5be9a6f7ec4ecca9d2bb5 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Tue, 19 Nov 2019 16:05:42 -0500
Subject: tried to simplify button bar menu

---
 src/client/views/DocumentButtonBar.tsx             | 104 +++------------------
 src/client/views/InkSelectDecorations.tsx          |  16 ++--
 src/client/views/TemplateMenu.tsx                  |  49 +++++++++-
 .../views/collections/CollectionStaffView.tsx      |  14 ++-
 src/client/views/collections/CollectionView.tsx    |   4 +-
 .../views/collections/ParentDocumentSelector.scss  |   6 ++
 .../views/collections/ParentDocumentSelector.tsx   |  29 ++++--
 .../collectionFreeForm/MarqueeOptionsMenu.tsx      |   4 +-
 src/client/views/nodes/DocumentView.tsx            |   2 +-
 src/client/views/nodes/FormattedTextBox.scss       |   1 -
 src/client/views/pdf/PDFViewer.tsx                 |   2 +-
 11 files changed, 104 insertions(+), 127 deletions(-)

(limited to 'src/client/views/nodes/FormattedTextBox.scss')

diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 1412316f9..c7ee413c9 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -8,13 +8,12 @@ import { RichTextField } from '../../new_fields/RichTextField';
 import { NumCast, StrCast } from "../../new_fields/Types";
 import { emptyFunction } from "../../Utils";
 import { Pulls, Pushes } from '../apis/google_docs/GoogleApiClientUtils';
-import { DragLinksAsDocuments, DragManager } from "../util/DragManager";
+import { DragManager } from "../util/DragManager";
 import { LinkManager } from '../util/LinkManager';
 import { UndoManager } from "../util/UndoManager";
 import './DocumentButtonBar.scss';
 import './collections/ParentDocumentSelector.scss';
 import { LinkMenu } from "./linking/LinkMenu";
-import { MetadataEntryMenu } from './MetadataEntryMenu';
 import { FormattedTextBox, GoogleRef } from "./nodes/FormattedTextBox";
 import { TemplateMenu } from "./TemplateMenu";
 import { Template, Templates } from "./Templates";
@@ -43,7 +42,6 @@ const fetch: IconProp = "sync-alt";
 @observer
 export class DocumentButtonBar extends React.Component<{ views: DocumentView[], stack?: any }, {}> {
     private _linkButton = React.createRef<HTMLDivElement>();
-    private _linkerButton = React.createRef<HTMLDivElement>();
     private _aliasButton = React.createRef<HTMLDivElement>();
     private _tooltipoff = React.createRef<HTMLDivElement>();
     private _textDoc?: Doc;
@@ -109,14 +107,6 @@ export class DocumentButtonBar extends React.Component<{ views: DocumentView[],
         document.addEventListener("pointerup", this.onLinkerButtonUp);
     }
 
-    onAliasButtonDown = (e: React.PointerEvent): void => {
-        e.stopPropagation();
-        e.preventDefault();
-        document.removeEventListener("pointermove", this.onAliasButtonMoved);
-        document.addEventListener("pointermove", this.onAliasButtonMoved);
-        document.removeEventListener("pointerup", this.onAliasButtonUp);
-        document.addEventListener("pointerup", this.onAliasButtonUp);
-    }
 
     onLinkerButtonUp = (e: PointerEvent): void => {
         document.removeEventListener("pointermove", this.onLinkerButtonMoved);
@@ -124,22 +114,17 @@ export class DocumentButtonBar extends React.Component<{ views: DocumentView[],
         e.stopPropagation();
     }
 
-    onAliasButtonUp = (e: PointerEvent): void => {
-        document.removeEventListener("pointermove", this.onAliasButtonMoved);
-        document.removeEventListener("pointerup", this.onAliasButtonUp);
-        e.stopPropagation();
-    }
 
     @action
     onLinkerButtonMoved = (e: PointerEvent): void => {
-        if (this._linkerButton.current !== null) {
+        if (this._linkButton.current !== null) {
             document.removeEventListener("pointermove", this.onLinkerButtonMoved);
-            document.removeEventListener("pointerup", this.onLinkerButtonUp);
+            document.removeEventListener("pointerup", this.onLinkButtonUp);
             let docView = this.props.views[0];
             let container = docView.props.ContainingCollectionDoc ? docView.props.ContainingCollectionDoc.proto : undefined;
             let dragData = new DragManager.LinkDragData(docView.props.Document, container ? [container] : []);
             let linkDrag = UndoManager.StartBatch("Drag Link");
-            DragManager.StartLinkDrag(this._linkerButton.current, dragData, e.pageX, e.pageY, {
+            DragManager.StartLinkDrag(this._linkButton.current, dragData, e.pageX, e.pageY, {
                 handlers: {
                     dragComplete: () => {
                         let tooltipmenu = FormattedTextBox.ToolTipTextMenu;
@@ -163,62 +148,22 @@ export class DocumentButtonBar extends React.Component<{ views: DocumentView[],
         e.stopPropagation();
     }
 
-    @action
-    onAliasButtonMoved = (e: PointerEvent): void => {
-        if (this._aliasButton.current !== null) {
-            document.removeEventListener("pointermove", this.onAliasButtonMoved);
-            document.removeEventListener("pointerup", this.onAliasButtonUp);
-
-            let dragDocView = this.props.views[0];
-            let dragData = new DragManager.DocumentDragData([dragDocView.props.Document]);
-            const [left, top] = dragDocView.props.ScreenToLocalTransform().scale(dragDocView.props.ContentScaling()).inverse().transformPoint(0, 0);
-            dragData.offset = dragDocView.props.ScreenToLocalTransform().scale(dragDocView.props.ContentScaling()).transformDirection(e.clientX - left, e.clientY - top);
-            dragData.embedDoc = true;
-            dragData.dropAction = "alias";
-            DragManager.StartDocumentDrag([dragDocView.ContentDiv!], dragData, e.x, e.y, {
-                offsetX: dragData.offset[0],
-                offsetY: dragData.offset[1],
-                handlers: {
-                    dragComplete: action(emptyFunction),
-                },
-                hideSource: false
-            });
-        }
-        e.stopPropagation();
-    }
 
     onLinkButtonDown = (e: React.PointerEvent): void => {
         e.stopPropagation();
         e.preventDefault();
-        document.removeEventListener("pointermove", this.onLinkButtonMoved);
-        document.addEventListener("pointermove", this.onLinkButtonMoved);
+        document.removeEventListener("pointermove", this.onLinkerButtonMoved);
+        document.addEventListener("pointermove", this.onLinkerButtonMoved);
         document.removeEventListener("pointerup", this.onLinkButtonUp);
         document.addEventListener("pointerup", this.onLinkButtonUp);
     }
 
     onLinkButtonUp = (e: PointerEvent): void => {
-        document.removeEventListener("pointermove", this.onLinkButtonMoved);
+        document.removeEventListener("pointermove", this.onLinkerButtonMoved);
         document.removeEventListener("pointerup", this.onLinkButtonUp);
         e.stopPropagation();
     }
 
-    onLinkButtonMoved = async (e: PointerEvent) => {
-        if (this._linkButton.current !== null && (e.movementX > 1 || e.movementY > 1)) {
-            document.removeEventListener("pointermove", this.onLinkButtonMoved);
-            document.removeEventListener("pointerup", this.onLinkButtonUp);
-            DragLinksAsDocuments(this._linkButton.current, e.x, e.y, this.props.views[0].props.Document);
-        }
-        e.stopPropagation();
-    }
-
-    aliasDragger = () => {
-        return (<div className="linkButtonWrapper">
-            <div title="Drag Alias" className="linkButton-linker" ref={this._aliasButton} onPointerDown={this.onAliasButtonDown}>
-                <FontAwesomeIcon className="documentdecorations-icon" icon="image" size="sm" />
-            </div>
-        </div>);
-    }
-
     private get targetDoc() {
         return this.props.views[0].props.Document;
     }
@@ -317,30 +262,18 @@ export class DocumentButtonBar extends React.Component<{ views: DocumentView[],
         }
     }
 
-    get metadataMenu() {
-        return (
-            <div className="linkButtonWrapper">
-                <Flyout anchorPoint={anchorPoints.TOP_LEFT}
-                    content={<MetadataEntryMenu docs={() => this.props.views.map(dv => dv.props.Document)} suggestWithFunction />}>{/* tfs: @bcz This might need to be the data document? */}
-                    <div className="docDecs-tagButton" title="Add fields"><FontAwesomeIcon className="documentdecorations-icon" icon="tag" size="sm" /></div>
-                </Flyout>
-            </div>
-        );
-    }
-
     render() {
         let linkButton = null;
         if (this.props.views.length > 0) {
             let selFirst = this.props.views[0];
 
             let linkCount = LinkManager.Instance.getAllRelatedLinks(selFirst.props.Document).length;
-            linkButton = (<Flyout
-                anchorPoint={anchorPoints.RIGHT_TOP}
-                content={<LinkMenu docView={selFirst}
-                    addDocTab={selFirst.props.addDocTab}
-                    changeFlyout={emptyFunction} />}>
-                <div className={"linkButton-" + (linkCount ? "nonempty" : "empty")} onPointerDown={this.onLinkButtonDown} >{linkCount}</div>
-            </Flyout >);
+            linkButton = <Flyout anchorPoint={anchorPoints.RIGHT_TOP}
+                content={<LinkMenu docView={selFirst} addDocTab={selFirst.props.addDocTab} changeFlyout={emptyFunction} />}>
+                <div className={"linkButton-" + (linkCount ? "nonempty" : "empty")} onPointerDown={this.onLinkButtonDown} >
+                    {linkCount ? linkCount : <FontAwesomeIcon className="documentdecorations-icon" icon="link" size="sm" />}
+                </div>
+            </Flyout >;
         }
 
         let templates: Map<Template, boolean> = new Map();
@@ -349,21 +282,14 @@ export class DocumentButtonBar extends React.Component<{ views: DocumentView[],
 
         return (<div className="documentButtonBar">
             <div className="linkButtonWrapper">
-                <div title="View Links" className="linkFlyout" ref={this._linkButton}> {linkButton}  </div>
-            </div>
-            <div className="linkButtonWrapper">
-                <div title="Drag Link" className="linkButton-linker" ref={this._linkerButton} onPointerDown={this.onLinkerButtonDown}>
-                    <FontAwesomeIcon className="documentdecorations-icon" icon="link" size="sm" />
-                </div>
+                <div title="Drag(create link) Tap(view links)" className="linkFlyout" ref={this._linkButton}> {linkButton}  </div>
             </div>
             <div className="linkButtonWrapper">
                 <TemplateMenu docs={this.props.views} templates={templates} />
             </div>
-            {this.metadataMenu}
-            {this.aliasDragger()}
             {this.considerGoogleDocsPush()}
             {this.considerGoogleDocsPull()}
-            <ParentDocSelector Document={this.props.views[0].props.Document} addDocTab={(doc, data, where) => {
+            <ParentDocSelector Views={this.props.views} Document={this.props.views[0].props.Document} addDocTab={(doc, data, where) => {
                 where === "onRight" ? CollectionDockingView.AddRightSplit(doc, data) : this.props.stack ? CollectionDockingView.Instance.AddTab(this.props.stack, doc, data) : this.props.views[0].props.addDocTab(doc, data, "onRight");
                 return true;
             }} />
diff --git a/src/client/views/InkSelectDecorations.tsx b/src/client/views/InkSelectDecorations.tsx
index 95ccc1777..d40df9b75 100644
--- a/src/client/views/InkSelectDecorations.tsx
+++ b/src/client/views/InkSelectDecorations.tsx
@@ -3,7 +3,7 @@ import { Touchable } from "./Touchable";
 import { PointData } from "../../new_fields/InkField";
 import { observer } from "mobx-react";
 import { computed, observable, action, runInAction } from "mobx";
-import "./InkSelectDecorations.scss"
+import "./InkSelectDecorations.scss";
 
 @observer
 export default class InkSelectDecorations extends Touchable {
@@ -46,14 +46,10 @@ export default class InkSelectDecorations extends Touchable {
 
     render() {
         let bounds = this.Bounds;
-        return (
-            <div style={{
-                top: bounds.y, left: bounds.x,
-                height: bounds.b - bounds.y,
-                width: bounds.r - bounds.x
-            }}>
-
-            </div>
-        )
+        return <div style={{
+            top: bounds.y, left: bounds.x,
+            height: bounds.b - bounds.y,
+            width: bounds.r - bounds.x
+        }} />;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx
index 96265385e..1df5f49c4 100644
--- a/src/client/views/TemplateMenu.tsx
+++ b/src/client/views/TemplateMenu.tsx
@@ -10,6 +10,7 @@ import { Template, Templates } from "./Templates";
 import React = require("react");
 import { Doc } from "../../new_fields/Doc";
 import { StrCast } from "../../new_fields/Types";
+import { emptyFunction } from "../../Utils";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -46,10 +47,13 @@ export interface TemplateMenuProps {
     templates: Map<Template, boolean>;
 }
 
+
 @observer
 export class TemplateMenu extends React.Component<TemplateMenuProps> {
     @observable private _hidden: boolean = true;
-    dragRef = React.createRef<HTMLUListElement>();
+    private _downx = 0;
+    private _downy = 0;
+    private _dragRef = React.createRef<HTMLUListElement>();
 
     toggleCustom = (e: React.ChangeEvent<HTMLInputElement>): void => {
         this.props.docs.map(dv => dv.setCustomView(e.target.checked));
@@ -122,6 +126,43 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> {
             layout.chromeStatus = (layout.chromeStatus !== "disabled" ? "disabled" : "enabled");
         });
     }
+    onAliasButtonUp = (e: PointerEvent): void => {
+        document.removeEventListener("pointermove", this.onAliasButtonMoved);
+        document.removeEventListener("pointerup", this.onAliasButtonUp);
+        e.stopPropagation();
+    }
+
+    onAliasButtonDown = (e: React.PointerEvent): void => {
+        this._downx = e.clientX;
+        this._downy = e.clientY;
+        e.stopPropagation();
+        e.preventDefault();
+        document.removeEventListener("pointermove", this.onAliasButtonMoved);
+        document.addEventListener("pointermove", this.onAliasButtonMoved);
+        document.removeEventListener("pointerup", this.onAliasButtonUp);
+        document.addEventListener("pointerup", this.onAliasButtonUp);
+    }
+    onAliasButtonMoved = (e: PointerEvent): void => {
+        if (this._dragRef.current !== null && (Math.abs(e.clientX - this._downx) > 4 || Math.abs(e.clientY - this._downy) > 4)) {
+            document.removeEventListener("pointermove", this.onAliasButtonMoved);
+            document.removeEventListener("pointerup", this.onAliasButtonUp);
+
+            let dragDocView = this.props.docs[0];
+            let dragData = new DragManager.DocumentDragData([dragDocView.props.Document]);
+            const [left, top] = dragDocView.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+            dragData.embedDoc = true;
+            dragData.dropAction = "alias";
+            DragManager.StartDocumentDrag([dragDocView.ContentDiv!], dragData, left, top, {
+                offsetX: dragData.offset[0],
+                offsetY: dragData.offset[1],
+                handlers: {
+                    dragComplete: action(emptyFunction),
+                },
+                hideSource: false
+            });
+        }
+        e.stopPropagation();
+    }
 
     render() {
         let layout = Doc.Layout(this.props.docs[0].Document);
@@ -132,9 +173,9 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> {
         templateMenu.push(<OtherToggle key={"custom"} name={"Custom"} checked={StrCast(this.props.docs[0].Document.layoutKey, "layout") !== "layout"} toggle={this.toggleCustom} />);
         templateMenu.push(<OtherToggle key={"chrome"} name={"Chrome"} checked={layout.chromeStatus !== "disabled"} toggle={this.toggleChrome} />);
         return (
-            <div className="templating-menu" >
-                <div title="Template Options" className="templating-button" onClick={() => this.toggleTemplateActivity()}>+</div>
-                <ul id="template-list" ref={this.dragRef} style={{ display: this._hidden ? "none" : "block" }}>
+            <div className="templating-menu" onPointerDown={this.onAliasButtonDown}>
+                <div title="Drag:(create alias). Tap:(modify layout)." className="templating-button" onClick={() => this.toggleTemplateActivity()}>+</div>
+                <ul id="template-list" ref={this._dragRef} style={{ display: this._hidden ? "none" : "block" }}>
                     {templateMenu}
                     {<button onClick={this.clearTemplates}>Restore Defaults</button>}
                 </ul>
diff --git a/src/client/views/collections/CollectionStaffView.tsx b/src/client/views/collections/CollectionStaffView.tsx
index eea05ea61..40e860b12 100644
--- a/src/client/views/collections/CollectionStaffView.tsx
+++ b/src/client/views/collections/CollectionStaffView.tsx
@@ -1,6 +1,6 @@
 import { CollectionSubView } from "./CollectionSubView";
 import { Transform } from "../../util/Transform";
-import React = require("react")
+import React = require("react");
 import { computed, action, IReactionDisposer, reaction, runInAction, observable } from "mobx";
 import { Doc, HeightSym } from "../../../new_fields/Doc";
 import { NumCast } from "../../../new_fields/Types";
@@ -36,7 +36,7 @@ export class CollectionStaffView extends CollectionSubView(doc => doc) {
         for (let i = 0; i < this._staves; i++) {
             let rows = [];
             for (let j = 0; j < 5; j++) {
-                rows.push(<div key={`staff-${i}-${j}`} className="collectionStaffView-line"></div>)
+                rows.push(<div key={`staff-${i}-${j}`} className="collectionStaffView-line"></div>);
             }
             staves.push(<div key={`staff-${i}`} className="collectionStaffView-staff">
                 {rows}
@@ -51,11 +51,9 @@ export class CollectionStaffView extends CollectionSubView(doc => doc) {
     }
 
     render() {
-        return (
-            <div className="collectionStaffView" ref={this._mainCont}>
-                {this.staves}
-                {this.addStaffButton}
-            </div>
-        )
+        return <div className="collectionStaffView" ref={this._mainCont}>
+            {this.staves}
+            {this.addStaffButton}
+        </div>;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 8f1278670..347fa7d0d 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -168,7 +168,7 @@ export class CollectionView extends Touchable<FieldViewProps> {
             case CollectionViewType.Schema: return (<CollectionSchemaView key="collview" {...props} />);
             case CollectionViewType.Docking: return (<CollectionDockingView key="collview" {...props} />);
             case CollectionViewType.Tree: return (<CollectionTreeView key="collview" {...props} />);
-            case CollectionViewType.Staff: return (<CollectionStaffView chromeCollapsed={true} key="collview" {...props} ChromeHeight={this.chromeHeight} CollectionView={this} />)
+            case CollectionViewType.Staff: return (<CollectionStaffView chromeCollapsed={true} key="collview" {...props} ChromeHeight={this.chromeHeight} CollectionView={this} />);
             case CollectionViewType.Linear: { return (<CollectionLinearView key="collview" {...props} />); }
             case CollectionViewType.Stacking: { this.props.Document.singleColumn = true; return (<CollectionStackingView key="collview" {...props} />); }
             case CollectionViewType.Masonry: { this.props.Document.singleColumn = false; return (<CollectionStackingView key="collview" {...props} />); }
@@ -229,7 +229,7 @@ export class CollectionView extends Touchable<FieldViewProps> {
             let more = ContextMenu.Instance.findByDescription("More...");
             let moreItems = more && "subitems" in more ? more.subitems : [];
             moreItems.push({ description: "Export Image Hierarchy", icon: "columns", event: () => ImageUtils.ExportHierarchyToFileSystem(this.props.Document) });
-            !more && ContextMenu.Instance.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" })
+            !more && ContextMenu.Instance.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" });
         }
     }
 
diff --git a/src/client/views/collections/ParentDocumentSelector.scss b/src/client/views/collections/ParentDocumentSelector.scss
index c186d15f8..aa25a900c 100644
--- a/src/client/views/collections/ParentDocumentSelector.scss
+++ b/src/client/views/collections/ParentDocumentSelector.scss
@@ -23,6 +23,12 @@
 .parentDocumentSelector-button {
     pointer-events: all;
 }
+.parentDocumentSelector-metadata {
+    pointer-events: auto;
+    padding-right: 5px;
+    width: 25px;
+    display: inline-block;
+}
 .buttonSelector {
     position: absolute; 
     display: inline-block; 
diff --git a/src/client/views/collections/ParentDocumentSelector.tsx b/src/client/views/collections/ParentDocumentSelector.tsx
index 8b6fa330c..ba83630a4 100644
--- a/src/client/views/collections/ParentDocumentSelector.tsx
+++ b/src/client/views/collections/ParentDocumentSelector.tsx
@@ -13,10 +13,14 @@ import { DocumentManager } from "../../util/DocumentManager";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEdit } from "@fortawesome/free-solid-svg-icons";
 import { library } from "@fortawesome/fontawesome-svg-core";
+import { MetadataEntryMenu } from "../MetadataEntryMenu";
+const higflyout = require("@hig/flyout");
+export const { anchorPoints } = higflyout;
+export const Flyout = higflyout.default;
 
 library.add(faEdit);
 
-type SelectorProps = { Document: Doc, Stack?: any, addDocTab(doc: Doc, dataDoc: Doc | undefined, location: string): void };
+type SelectorProps = { Document: Doc, Views: DocumentView[], Stack?: any, addDocTab(doc: Doc, dataDoc: Doc | undefined, location: string): void };
 @observer
 export class SelectorContextMenu extends React.Component<SelectorProps> {
     @observable private _docs: { col: Doc, target: Doc }[] = [];
@@ -53,16 +57,23 @@ export class SelectorContextMenu extends React.Component<SelectorProps> {
             this.props.addDocTab(col, undefined, "inTab"); // bcz: dataDoc?
         };
     }
+    get metadataMenu() {
+        return <div className="parentDocumentSelector-metadata">
+            <Flyout anchorPoint={anchorPoints.TOP_LEFT}
+                content={<MetadataEntryMenu docs={() => this.props.Views.map(dv => dv.props.Document)} suggestWithFunction />}>{/* tfs: @bcz This might need to be the data document? */}
+                <div className="docDecs-tagButton" title="Add fields"><FontAwesomeIcon className="documentdecorations-icon" icon="tag" size="sm" /></div>
+            </Flyout>
+        </div>;
+    }
 
     render() {
-        return (
-            <>
-                <p key="contexts">Contexts:</p>
-                {this._docs.map(doc => <p key={doc.col[Id] + doc.target[Id]}><a onClick={this.getOnClick(doc)}>{doc.col.title}</a></p>)}
-                {this._otherDocs.length ? <hr key="hr" /> : null}
-                {this._otherDocs.map(doc => <p key="p"><a onClick={this.getOnClick(doc)}>{doc.col.title}</a></p>)}
-            </>
-        );
+        return <div >
+            <div key="metadata">Metadata: {this.metadataMenu}</div>
+            <p key="contexts">Contexts:</p>
+            {this._docs.map(doc => <p key={doc.col[Id] + doc.target[Id]}><a onClick={this.getOnClick(doc)}>{doc.col.title}</a></p>)}
+            {this._otherDocs.length ? <hr key="hr" /> : null}
+            {this._otherDocs.map(doc => <p key="p"><a onClick={this.getOnClick(doc)}>{doc.col.title}</a></p>)}
+        </div>;
     }
 }
 
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
index 91fcad4be..28ddc19d7 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
@@ -1,4 +1,4 @@
-import React = require("react")
+import React = require("react");
 import AntimodeMenu from "../../AntimodeMenu";
 import { observer } from "mobx-react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -40,7 +40,7 @@ export default class MarqueeOptionsMenu extends AntimodeMenu {
                 onPointerDown={this.delete}>
                 <FontAwesomeIcon icon="trash-alt" size="lg" />
             </button>,
-        ]
+        ];
         return this.getElement(buttons);
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 865ec8d9b..411d6bdea 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -537,7 +537,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         return (showTitle ? 25 : 0) + 1;
     }
 
-    @computed get finalLayoutKey() { return this.props.layoutKey || "layout" }
+    @computed get finalLayoutKey() { return this.props.layoutKey || "layout"; }
     childScaling = () => (this.layoutDoc.fitWidth ? this.props.PanelWidth() / this.nativeWidth : this.props.ContentScaling());
     @computed get contents() {
         trace();
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index f7b6e92d9..269a3ca68 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -45,7 +45,6 @@
     position: relative;
     overflow: auto;
     display: inline-block;
-    padding: 10px 10px;
     width: 100%;
     height: 100%;
 }
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index ec8d8be11..77790a708 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -654,7 +654,7 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
                 ContainingCollectionDoc={this.props.ContainingCollectionView?.props.Document}
                 chromeCollapsed={true}>
             </CollectionFreeFormView>
-        </div>
+        </div>;
     }
     @computed get pdfViewerDiv() {
         return <div className={"pdfViewer-text" + ((!DocumentDecorations.Instance.Interacting && (this.props.isSelected() || this.props.isChildActive())) ? "-selected" : "")} ref={this._viewer} />;
-- 
cgit v1.2.3-70-g09d2