fixed schema column selection from key press. add 'b' for creating backgrounds. added unlock for isBackground documents.

4 files changed, 42 insertions, 14 deletions

diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx
index c585506b3..507ee89e4 100644
--- a/src/client/views/collections/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/CollectionSchemaHeaders.tsx
@@ -291,13 +291,11 @@ class KeysDropdown extends React.Component<KeysDropdownProps> {
     onKeyDown = (e: React.KeyboardEvent): void => {
         if (e.key === "Enter") {
             const keyOptions = this._searchTerm === "" ? this.props.possibleKeys : this.props.possibleKeys.filter(key => key.toUpperCase().indexOf(this._searchTerm.toUpperCase()) > -1);
-            const exactFound = keyOptions.findIndex(key => key.toUpperCase() === this._searchTerm.toUpperCase()) > -1 ||
-                this.props.existingKeys.findIndex(key => key.toUpperCase() === this._searchTerm.toUpperCase()) > -1;
-
-            if (!exactFound && this._searchTerm !== "" && this.props.canAddNew) {
+            if (keyOptions.length) {
+                this.onSelect(keyOptions[0]);
+            } else if (this._searchTerm !== "" && this.props.canAddNew) {
+                this.setSearchTerm(this._searchTerm || this._key);
                 this.onSelect(this._searchTerm);
-            } else {
-                this.setSearchTerm(this._key);
             }
         }
     }
@@ -338,7 +336,7 @@ class KeysDropdown extends React.Component<KeysDropdownProps> {
             this.props.existingKeys.findIndex(key => key.toUpperCase() === this._searchTerm.toUpperCase()) > -1;
 
         const options = keyOptions.map(key => {
-            return <div key={key} className="key-option" onClick={() => { this.onSelect(key); this.setSearchTerm(""); }}>{key}</div>;
+            return <div key={key} className="key-option" onPointerDown={e => e.stopPropagation()} onClick={() => { this.onSelect(key); this.setSearchTerm(""); }}>{key}</div>;
         });
 
         // if search term does not already exist as a group type, give option to create new group type
@@ -356,7 +354,7 @@ class KeysDropdown extends React.Component<KeysDropdownProps> {
             <div className="keys-dropdown">
                 <input className="keys-search" ref={this._inputRef} type="text" value={this._searchTerm} placeholder="Column key" onKeyDown={this.onKeyDown}
                     onChange={e => this.onChange(e.target.value)} onFocus={this.onFocus} onBlur={this.onBlur}></input>
-                <div className="keys-options-wrapper" onPointerEnter={this.onPointerEnter} onPointerOut={this.onPointerOut}>
+                <div className="keys-options-wrapper" onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerOut}>
                     {this.renderOptions()}
                 </div>
             </div >
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 3cfefc25e..b1cca027d 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -302,7 +302,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
         this.hideMarquee();
     }
 
-    getCollection = (selected: Doc[], asTemplate: boolean) => {
+    getCollection = (selected: Doc[], asTemplate: boolean, isBackground: boolean = false) => {
         const bounds = this.Bounds;
         // const inkData = this.ink ? this.ink.inkData : undefined;
         const creator = asTemplate ? Docs.Create.StackingDocument : Docs.Create.FreeformDocument;
@@ -311,7 +311,8 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
             y: bounds.top,
             _panX: 0,
             _panY: 0,
-            backgroundColor: this.props.isAnnotationOverlay ? "#00000015" : undefined,
+            isBackground,
+            backgroundColor: this.props.isAnnotationOverlay ? "#00000015" : isBackground ? "cyan" : undefined,
             _width: bounds.width,
             _height: bounds.height,
             _LODdisable: true,
@@ -366,6 +367,14 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
         this.props.addLiveTextDocument(summary);
         MarqueeOptionsMenu.Instance.fadeOut(true);
     }
+    @action
+    background = (e: KeyboardEvent | React.PointerEvent | undefined) => {
+        const newCollection = this.getCollection([], false, true);
+        this.props.addDocument(newCollection);
+        MarqueeOptionsMenu.Instance.fadeOut(true);
+        this.hideMarquee();
+        setTimeout(() => this.props.selectDocuments([newCollection], []), 0);
+    }
 
     @undoBatch
     @action
@@ -380,7 +389,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
             this.delete();
             e.stopPropagation();
         }
-        if (e.key === "c" || e.key === "t" || e.key === "s" || e.key === "S") {
+        if (e.key === "c" || e.key === "b" || e.key === "t" || e.key === "s" || e.key === "S") {
             this._commandExecuted = true;
             e.stopPropagation();
             e.preventDefault();
@@ -388,10 +397,12 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
             if (e.key === "c" || e.key === "t") {
                 this.collection(e);
             }
-
             if (e.key === "s" || e.key === "S") {
                 this.summary(e);
             }
+            if (e.key === "b") {
+                this.background(e);
+            }
             this.cleanupInteractions(false);
         }
     }
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index b121c6c18..c8efadba4 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -42,6 +42,23 @@
         z-index: 1;
     }
 
+    .documentView-lock {
+        width: 20; 
+        height: 20; 
+        position: absolute; 
+        right: -5; 
+        top: -5;
+        background: black;
+        pointer-events: all;
+        opacity: 0.05;
+        display: flex;
+        border-radius: 3px;
+        justify-content: center;
+    }
+    .documentView-lock:hover {
+        opacity:1;
+    }
+
     .documentView-contentBlocker {
         pointer-events: all;
         position: absolute;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 3660c327a..06ca9b5f4 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -43,6 +43,7 @@ import { DocumentContentsView } from "./DocumentContentsView";
 import "./DocumentView.scss";
 import { FormattedTextBox } from './FormattedTextBox';
 import React = require("react");
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 
 library.add(fa.faEdit, fa.faTrash, fa.faShare, fa.faDownload, fa.faExpandArrowsAlt, fa.faCompressArrowsAlt, fa.faLayerGroup, fa.faExternalLinkAlt, fa.faAlignCenter, fa.faCaretSquareRight,
@@ -844,8 +845,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             </div>);
         const captionView = (!showCaption ? (null) :
             <div className="documentView-captionWrapper">
-                <FormattedTextBox {...this.props}  onClick={this.onClickHandler}
-                     DataDoc={this._dataDoc} active={returnTrue} Document={this._layoutDoc || this.props.Document}
+                <FormattedTextBox {...this.props} onClick={this.onClickHandler}
+                    DataDoc={this._dataDoc} active={returnTrue} Document={this._layoutDoc || this.props.Document}
                     isSelected={this.isSelected} focus={emptyFunction} select={this.select}
                     hideOnLeave={true} fieldKey={showCaption}
                 />
@@ -935,6 +936,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 height: "100%",
                 opacity: this.Document.opacity
             }}>
+            {this.Document.isBackground ? <div className="documentView-lock"> <FontAwesomeIcon icon="unlock" size="lg" /> </div> : (null)}
             {this.onClickHandler && this.props.ContainingCollectionView?.props.Document._viewType === CollectionViewType.Time ? <>
                 {this.innards}
                 <div className="documentView-contentBlocker" />