From a9ec444d00a02a5e04f3c022fd4d0bea08efe196 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Fri, 7 Jun 2024 02:36:18 -0400
Subject: lots of UI improvements

---
 src/client/views/EditableView.tsx                  | 16 +++++++------
 .../collectionSchema/CollectionSchemaView.scss     |  4 ----
 .../collectionSchema/CollectionSchemaView.tsx      |  2 ++
 .../collectionSchema/SchemaColumnHeader.tsx        | 19 ++++++++-------
 .../collections/collectionSchema/SchemaRowBox.tsx  |  3 ++-
 .../collectionSchema/SchemaTableCell.tsx           | 27 ++++++++++++++++++----
 6 files changed, 46 insertions(+), 25 deletions(-)

(limited to 'src')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index c79cabd6a..5b690bf33 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -55,7 +55,7 @@ export interface EditableProps {
     placeholder?: string;
     wrap?: string; // nowrap, pre-wrap, etc
 
-    showKeyNotVal?: boolean;
+    schemaHeader?: boolean;
     updateAlt?: (newAlt: string) => void;
     updateSearch?: (value: string) => void;
 }
@@ -77,6 +77,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
         super(props);
         makeObservable(this);
         this._editing = !!this._props.editing;
+        if (this._props.schemaHeader) this._editing = true;
     }
 
     componentDidMount(): void {
@@ -184,9 +185,9 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
     };
 
     @action
-    onClick = (e: React.MouseEvent) => {
+    onClick = (e?: React.MouseEvent) => {
         if (this._props.editing !== false) {
-            e.nativeEvent.stopPropagation();
+            e?.nativeEvent.stopPropagation();
             if (this._ref.current && this._props.showMenuOnLoad) {
                 this._props.menuCallback?.(this._ref.current.getBoundingClientRect().x, this._ref.current.getBoundingClientRect().y);
             } else {
@@ -280,12 +281,13 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
         );
     }
 
-    display = () => {
+    staticDisplay = () => {
         let toDisplay;
         const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
-        if (this._props.showKeyNotVal){
+        if (this._props.schemaHeader){
             toDisplay = <input className="editableView-input"
-            value={this._props.GetValue()}
+            value={gval}
+            placeholder='Add key'
             readOnly
             style={{ display: this._props.display, overflow: 'auto', pointerEvents: 'none', fontSize: this._props.fontSize, width: '100%', margin: 0, background: this._props.background}}
             // eslint-disable-next-line jsx-a11y/no-autofocus
@@ -335,7 +337,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
                     fontSize: this._props.fontSize,
                 }}
                 onClick={this.onClick}>
-                {this.display()}
+                {this.staticDisplay()}
             </div>
         );
     }
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index 3d89a479a..ceffc7e44 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -302,7 +302,3 @@
     }
 }
 
-.header-dropdown-container {
-    height: 0px;
-    width: 60px;
-}
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 39bde7d37..ec1341b14 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -758,6 +758,8 @@ const       filteredChildDocs = sortedDocs.filter((doc: Doc) => !this._lentDocs.
 
     @action
     openColumnMenu = (index: number, newCol: boolean) => {
+        this.closeFilterMenu();
+        
         this._makeNewColumn = false;
         this._columnMenuIndex = index;
         this._menuValue = '';
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 03cf64fc8..bda9fc9b7 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -57,6 +57,11 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
     @computed get fieldKey() {
         return this._props.columnKeys[this._props.columnIndex];
     }
+
+    constructor(props: SchemaColumnHeaderProps){
+        super(props);
+        this._props.schemaView.openColumnMenu(0, false)
+    }
     
     getFinfo = computedFn((fieldKey: string) => this._props.schemaView?.fieldInfos.get(fieldKey));
     setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);}
@@ -77,10 +82,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
     };
 
     openKeyDropdown = () => {
-        if (this.isDefaultTitle(this.fieldKey)){
-            this._props.schemaView.openColumnMenu(this._props.columnIndex, false)
-            this._displayKeysDropdown = true;
-        }
+        this._props.schemaView.openColumnMenu(this._props.columnIndex, false)
     }
 
     @action
@@ -125,7 +127,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
     @computed get editableView() {
         const { color, fieldProps, pointerEvents } = this.renderProps(this._props); 
 
-        return <div className='schema-column-edit-wrapper' onPointerUp={() => this.openKeyDropdown()}
+        return <div className='schema-column-edit-wrapper' onPointerUp={() => {SchemaColumnHeader.isDefaultField(this.fieldKey) && this.openKeyDropdown()}}
         style={{
             color,
             width: '100%',
@@ -138,11 +140,12 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                 contents={undefined}
                 fieldContents={fieldProps}
                 editing={undefined}  
+                placeholder={'Add key'}
                 updateAlt={this.updateAlt} // alternate title to display
                 updateSearch={this.updateKeyDropdown}
-                showKeyNotVal={true} // tells the EditableView to display the fieldKey itself, and not its value
+                schemaHeader={true} 
                 GetValue={() => {
-                    if (this.isDefaultTitle(this.fieldKey)) return '';
+                    if (SchemaColumnHeader.isDefaultField(this.fieldKey)) return '';
                     else if (this._altTitle) return this._altTitle;
                     else return this.fieldKey;
                 }}
@@ -160,7 +163,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
             </div>
     }
 
-    isDefaultTitle = (key: string) => {
+    public static isDefaultField = (key: string) => {
         const defaultPattern = /EmptyColumnKey/;
         let isDefault: boolean = (defaultPattern.exec(key) != null);
         return isDefault;
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 8ac2c0314..8cac302ce 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -113,7 +113,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                     }}>
                     <IconButton
                         tooltip="Open actions menu"
-                        icon={ <CgMenu size="12px" /> }
+                        icon={ <CgMenu size="16px" /> }
                         size={Size.XSMALL}
                         onPointerDown={e =>
                             setupMoveUpEvents(
@@ -133,6 +133,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                     {this.schemaView?.columnKeys?.map((key, index) => (
                         <SchemaTableCell
                             key={key}
+                            rowSelected={this._props.isSelected}
                             Document={this.Document}
                             col={index}
                             fieldKey={key}
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index c3a58b505..dc060218c 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -32,6 +32,7 @@ import { FieldViewProps } from '../../nodes/FieldView';
 import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
 import { CollectionSchemaView, FInfotoColType } from './CollectionSchemaView';
 import './CollectionSchemaView.scss';
+import { SchemaColumnHeader } from './SchemaColumnHeader';
 
 export interface SchemaTableCellProps {
     Document: Doc;
@@ -57,12 +58,13 @@ export interface SchemaTableCellProps {
     autoFocus?: boolean; // whether to set focus on creation, othwerise wait for a click
     rootSelected?: () => boolean;
     cleanupField: (field: string) => string;
+    rowSelected: () => boolean;
 }
 
 function selectedCell(props: SchemaTableCellProps) {
     return (
         props.isRowActive() &&
-        props.selectedCol() === props.col && //
+        props.selectedCol() === props.col && 
         props.selectedCells()?.filter(d => d === props.Document)?.length
     );
 }
@@ -74,6 +76,10 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         makeObservable(this);
     }
 
+    get defaultKey(){
+        return SchemaColumnHeader.isDefaultField(this._props.fieldKey)
+    }
+
     static addFieldDoc = (docs: Doc | Doc[] /* , where: OpenWhere */) => {
         DocumentView.FocusOrOpen(toList(docs)[0]);
         return true;
@@ -89,9 +95,8 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
             protoCount++;
             doc = DocCast(doc.proto);
         }
-        const parenCount = Math.max(0, protoCount - 1);
         const color = protoCount === 0 || (fieldKey.startsWith('_') && Document[fieldKey] === undefined) ? 'black' : 'blue'; // color of text in cells
-        const textDecoration = color !== 'black' && parenCount ? 'underline' : '';
+        const textDecoration = '';
         const fieldProps: FieldViewProps = {
             childFilters: returnEmptyFilter,
             childFiltersByRanges: returnEmptyFilter,
@@ -185,6 +190,14 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         }
     }
 
+    get backgroundColor(){
+        if (this.defaultKey){
+            if (this._props.rowSelected()) return '#B0D1E7'
+            else return '#F5F5F5'
+        }   
+        return ''
+    }
+
     render() {
         return (
             <div
@@ -200,8 +213,12 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                         } else !selectedCell(this._props) && this._props.selectCell(this._props.Document, this._props.col, shift, ctrl);
                     }
                 })}
-                style={{ padding: this._props.padding, maxWidth: this._props.maxWidth?.(), width: this._props.columnWidth() || undefined, border: selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined }}>
-                {this.content}
+                style={{ padding: this._props.padding, 
+                maxWidth: this._props.maxWidth?.(), 
+                width: this._props.columnWidth() || undefined, 
+                border: selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined,
+                backgroundColor: this.backgroundColor}}>
+                {this.defaultKey ? '' : this.content}
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2