fixed keyvalue pane inputting new key values. made collection chromes shrink a little when window shrinks.

5 files changed, 34 insertions, 48 deletions

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 4a09f9ff3..fcaa349cd 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -201,9 +201,9 @@ export class MainView extends React.Component {
 
         const toggleTheme = ScriptField.MakeScript(`self.darkScheme = !self.darkScheme`);
         const toggleComic = ScriptField.MakeScript(`toggleComicMode()`);
-        const cloneWorkspace = ScriptField.MakeScript(`cloneWorkspace()`);
-        workspaceDoc.contextMenuScripts = new List<ScriptField>([toggleTheme!, toggleComic!, cloneWorkspace!]);
-        workspaceDoc.contextMenuLabels = new List<string>(["Toggle Theme Colors", "Toggle Comic Mode", "New Workspace Layout"]);
+        const copyWorkspace = ScriptField.MakeScript(`copyWorkspace()`);
+        workspaceDoc.contextMenuScripts = new List<ScriptField>([toggleTheme!, toggleComic!, copyWorkspace!]);
+        workspaceDoc.contextMenuLabels = new List<string>(["Toggle Theme Colors", "Toggle Comic Mode", "Snapshot Workspace"]);
 
         Doc.AddDocToList(workspaces, "data", workspaceDoc);
         // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container)
@@ -582,7 +582,7 @@ export class MainView extends React.Component {
 }
 Scripting.addGlobal(function freezeSidebar() { MainView.expandFlyout(); });
 Scripting.addGlobal(function toggleComicMode() { Doc.UserDoc().fontFamily = "Comic Sans MS"; Doc.UserDoc().renderStyle = Doc.UserDoc().renderStyle === "comic" ? undefined : "comic"; });
-Scripting.addGlobal(function cloneWorkspace() {
+Scripting.addGlobal(function copyWorkspace() {
     const copiedWorkspace = Doc.MakeCopy(Cast(Doc.UserDoc().activeWorkspace, Doc, null), true);
     const workspaces = Cast(Doc.UserDoc().myWorkspaces, Doc, null);
     Doc.AddDocToList(workspaces, "data", copiedWorkspace);
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 33615cc68..508b9e5e7 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -516,13 +516,10 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
             ChildLayoutTemplate: this.childLayoutTemplate,
             ChildLayoutString: this.childLayoutString,
         };
-        return (<div className={"collectionView"}
-            style={{
-                pointerEvents: this.props.Document.isBackground ? "none" : undefined,
-                boxShadow: Doc.UserDoc().renderStyle === "comic" || this.props.Document.isBackground || this.collectionViewType === CollectionViewType.Linear ? undefined :
-                    `${Cast(Doc.UserDoc().activeWorkspace, Doc, null)?.darkScheme ? "rgb(30, 32, 31)" : "#9c9396"} ${StrCast(this.props.Document.boxShadow, "0.2vw 0.2vw 0.8vw")}`
-            }}
-            onContextMenu={this.onContextMenu}>
+        const boxShadow = Doc.UserDoc().renderStyle === "comic" || this.props.Document.isBackground || this.collectionViewType === CollectionViewType.Linear ? undefined :
+            `${Cast(Doc.UserDoc().activeWorkspace, Doc, null)?.darkScheme ? "rgb(30, 32, 31) " : "#9c9396 "} ${StrCast(this.props.Document.boxShadow, "0.2vw 0.2vw 0.8vw")}`;
+        return (<div className={"collectionView"} onContextMenu={this.onContextMenu}
+            style={{ pointerEvents: this.props.Document.isBackground ? "none" : undefined, boxShadow }}>
             {this.showIsTagged()}
             <div className="collectionView-facetCont" style={{ width: `calc(100% - ${this.facetWidth()}px)` }}>
                 {this.collectionViewType !== undefined ? this.SubView(this.collectionViewType, props) : (null)}
diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss
index f85cbfee2..77a12ed37 100644
--- a/src/client/views/collections/CollectionViewChromes.scss
+++ b/src/client/views/collections/CollectionViewChromes.scss
@@ -15,7 +15,7 @@
         padding-bottom: 1px;
         height: 32px;
         border-bottom: .5px solid rgb(180, 180, 180);
-        overflow: hidden;
+        overflow: visible;
 
         .collectionViewBaseChrome {
             display: flex;
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index 48810f1e9..52fb63386 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -259,10 +259,8 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro
                     <FontAwesomeIcon icon="bullseye" size="2x" />
                 </div>
                 <select
-                    className="collectionViewBaseChrome-cmdPicker"
-                    onPointerDown={stopPropagation}
-                    onChange={this.commandChanged}
-                    value={this._currentKey}>
+                    className="collectionViewBaseChrome-cmdPicker" onPointerDown={stopPropagation} onChange={this.commandChanged} value={this._currentKey}
+                    style={{ width: this.props.PanelWidth() < 300 ? 15 : undefined }}>
                     <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} key={"empty"} value={""} />
                     {this._buttonizableCommands.map(cmd =>
                         <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} key={cmd.title} value={cmd.title}>{cmd.title}</option>
@@ -280,7 +278,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro
                     <FontAwesomeIcon icon="bullseye" size="2x" />
                 </div>
                 <select
-                    className="collectionViewBaseChrome-viewPicker"
+                    className="collectionViewBaseChrome-viewPicker" style={{ width: this.props.PanelWidth() < 300 ? 15 : undefined }}
                     onPointerDown={stopPropagation}
                     onChange={this.viewChanged}
                     value={StrCast(this.props.CollectionView.props.Document._viewType)}>
@@ -713,7 +711,7 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
                 </span>
 
                 <select className="collectionGridViewChrome-viewPicker"
-                    style={{ marginRight: 5 }}
+                    style={{ marginRight: 5, width: this.props.PanelWidth() < 300 ? 25 : undefined }}
                     onPointerDown={stopPropagation}
                     onChange={this.changeCompactType}
                     value={StrCast(this.props.CollectionView.props.Document.gridStartCompaction, StrCast(this.props.CollectionView.props.Document.gridCompaction))}>
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index e983852ea..4442ee2eb 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -18,6 +18,7 @@ import { KeyValuePair } from "./KeyValuePair";
 import React = require("react");
 import { ContextMenu } from "../ContextMenu";
 import { ContextMenuProps } from "../ContextMenuItem";
+import e = require("express");
 
 export type KVPScript = {
     script: CompiledScript;
@@ -31,10 +32,11 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
 
     private _mainCont = React.createRef<HTMLDivElement>();
     private _keyHeader = React.createRef<HTMLTableHeaderCellElement>();
+    private _keyInput = React.createRef<HTMLInputElement>();
+    private _valInput = React.createRef<HTMLInputElement>();
 
     @observable private rows: KeyValuePair[] = [];
-    @observable private _keyInput: string = "";
-    @observable private _valueInput: string = "";
+
     @computed get splitPercentage() { return NumCast(this.props.Document.schemaSplitPercentage, 50); }
     get fieldDocToLayout() { return this.props.fieldKey ? Cast(this.props.Document[this.props.fieldKey], Doc, null) : this.props.Document; }
 
@@ -42,10 +44,11 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
     onEnterKey = (e: React.KeyboardEvent): void => {
         if (e.key === 'Enter') {
             e.stopPropagation();
-            if (this._keyInput && this._valueInput && this.fieldDocToLayout) {
-                if (KeyValueBox.SetField(this.fieldDocToLayout, this._keyInput, this._valueInput)) {
-                    this._keyInput = "";
-                    this._valueInput = "";
+            if (this._keyInput.current?.value && this._valInput.current?.value && this.fieldDocToLayout) {
+                if (KeyValueBox.SetField(this.fieldDocToLayout, this._keyInput.current.value, this._valInput.current.value)) {
+                    this._keyInput.current.value = "";
+                    this._valInput.current.value = "";
+                    document.body.focus();
                 }
             }
         }
@@ -103,7 +106,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
 
     rowHeight = () => 30;
 
-    createTable = () => {
+    @computed get createTable() {
         const doc = this.fieldDocToLayout;
         if (!doc) {
             return <tr><td>Loading...</td></tr>;
@@ -136,30 +139,18 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
         }
         return rows;
     }
-
-    @action
-    keyChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
-        this._keyInput = e.currentTarget.value;
+    @computed get newKeyValue() {
+        return <tr className="keyValueBox-valueRow">
+            <td className="keyValueBox-td-key" onClick={(e) => { this._keyInput.current!.select(); e.stopPropagation(); }} style={{ width: `${100 - this.splitPercentage}%` }}>
+                <input style={{ width: "100%" }} ref={this._keyInput} type="text" placeholder="Key" />
+            </td>
+            <td className="keyValueBox-td-value" onClick={(e) => { this._valInput.current!.select(); e.stopPropagation(); }} style={{ width: `${this.splitPercentage}%` }}>
+                <input style={{ width: "100%" }} ref={this._valInput} type="text" placeholder="Value" onKeyDown={this.onEnterKey} />
+            </td>
+        </tr>
     }
 
     @action
-    valueChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
-        this._valueInput = e.currentTarget.value;
-    }
-
-    newKeyValue = () =>
-        (
-            <tr className="keyValueBox-valueRow">
-                <td className="keyValueBox-td-key" style={{ width: `${100 - this.splitPercentage}%` }}>
-                    <input style={{ width: "100%" }} type="text" value={this._keyInput} placeholder="Key" onChange={this.keyChanged} />
-                </td>
-                <td className="keyValueBox-td-value" style={{ width: `${this.splitPercentage}%` }}>
-                    <input style={{ width: "100%" }} type="text" value={this._valueInput} placeholder="Value" onChange={this.valueChanged} onKeyDown={this.onEnterKey} />
-                </td>
-            </tr>
-        )
-
-    @action
     onDividerMove = (e: PointerEvent): void => {
         const nativeWidth = this._mainCont.current!.getBoundingClientRect();
         this.props.Document.schemaSplitPercentage = Math.max(0, 100 - Math.round((e.clientX - nativeWidth.left) / nativeWidth.width * 100));
@@ -260,8 +251,8 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
                         >Key</th>
                         <th className="keyValueBox-fields" style={{ width: `${this.splitPercentage}%` }}>Fields</th>
                     </tr>
-                    {this.createTable()}
-                    {this.newKeyValue()}
+                    {this.createTable}
+                    {this.newKeyValue}
                 </tbody>
             </table>
             {dividerDragger}