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

---
 .../collectionSchema/CollectionSchemaView.scss     |  4 ----
 .../collectionSchema/CollectionSchemaView.tsx      |  2 ++
 .../collectionSchema/SchemaColumnHeader.tsx        | 19 ++++++++-------
 .../collections/collectionSchema/SchemaRowBox.tsx  |  3 ++-
 .../collectionSchema/SchemaTableCell.tsx           | 27 ++++++++++++++++++----
 5 files changed, 37 insertions(+), 18 deletions(-)

(limited to 'src/client/views/collections')

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