lots of UI improvements

1 files changed, 22 insertions, 5 deletions

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>
         );
     }