feat: emphasize editable cells

neherlab · Mar 18, 2020 · 00a3b2f · 00a3b2f
1 parent bdd4e7e
commit 00a3b2f
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 17 deletions.
diff --git a/src/components/Main/Scenario/SeverityTable.scss b/src/components/Main/Scenario/SeverityTable.scss
@@ -1,3 +1,5 @@
+@import '../../../styles/variables';
+
 // HACK: find a way to override these styles without `!important`
 .dx-g-bs4-header-cell {
   padding: 0 !important;
@@ -18,7 +20,21 @@
   min-width: 100px !important;
 }
 
-.table-cell-input {
-  border: none;
+.table-cell-editable {
+  border: 1px solid $gray-300;
+  width: 75%;
+  min-width: 50px;
+  max-width: unset !important;
+
+  &:focus {
+    border: 1px solid $info;
+  }
+}
+
+.table-cell-editable-input {
+  padding: auto 1px;
   outline: none;
+  border: 1px solid $gray-300;
+  width: 75%;
+  min-width: 50px;
 }
diff --git a/src/components/Main/Scenario/SeverityTable.tsx b/src/components/Main/Scenario/SeverityTable.tsx
@@ -43,6 +43,9 @@ export function HeaderCell({ column, ...restProps }: HeaderCellProps) {
   )
 }
 
+const readOnlyColumns = ['ageGroup', 'totalFatal']
+const columnColors = {}
+
 export interface EditableCellProps extends TableInlineCellEditing.CellProps {
   onClick?(): void
 }
@@ -61,25 +64,22 @@ export function EditableCell({
   onKeyDown,
   ...restProps
 }: EditableCellProps) {
-  const readOnlyColumns = ['ageGroup', 'totalFatal']
-
-  if (readOnlyColumns.includes(column.name)) {
-    return <Cell value={value} column={column} row={row} tableColumn={tableColumn} tableRow={tableRow} {...restProps} />
-  }
+  const isReadOnly = readOnlyColumns.includes(column.name)
 
   return (
-    <td className="dx-g-bs4-table-cell text-nowrap text-right" {...restProps}>
+    <td className="dx-g-bs4-table-cell text-nowrap" {...restProps}>
       <input
-        type="text"
-        className="dx-g-bs4-table-cell w-100 align-right table-cell-input"
+        type="number"
+        className="table-cell-editable-input text-center"
         // readOnly={!editingEnabled}
         value={value}
-        onChange={e => onValueChange(e.target.value)}
+        onChange={e => onValueChange && onValueChange(e.target.value)}
         // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus={autoFocus}
         onBlur={onBlur}
         onFocus={onFocus}
         onKeyDown={onKeyDown}
+        readOnly={isReadOnly}
       />
     </td>
   )
@@ -90,8 +90,7 @@ export interface CellProps extends TableBase.DataCellProps {
 }
 
 export function Cell({ value, children, column, row, tableColumn, tableRow, onClick, ...restProps }: CellProps) {
-  const nonNumericColumns = ['ageGroup']
-  const textRight = nonNumericColumns.includes(column.name) ? 'text-left' : 'text-right'
+  const isReadOnly = readOnlyColumns.includes(column.name)
 
   // Computed values may sometimes have way too many decimal digits
   // so we format them here in order to display something more reasonable
@@ -101,9 +100,10 @@ export function Cell({ value, children, column, row, tableColumn, tableRow, onCl
     formattedValue = d3format('.2')(parseFloat(value))
   }
 
+  const editableClass = isReadOnly ? '' : 'table-cell-editable'
   return (
-    <td className={`dx-g-bs4-table-cell text-nowrap ${textRight}`} {...restProps} onClick={onClick}>
-      {children ?? formattedValue}
+    <td className="dx-g-bs4-table-cell text-nowrap text-center" {...restProps} onClick={onClick}>
+      <div className={`mx-auto align-center ${editableClass}`}>{children ?? formattedValue}</div>
     </td>
   )
 }
@@ -175,9 +175,9 @@ function SeverityTable({ severity, setSeverity }: SeverityTableProps) {
 
             <Table cellComponent={Cell} />
 
-            <TableHeaderRow cellComponent={HeaderCell} />
-
             <TableInlineCellEditing startEditAction={'click'} selectTextOnEditStart cellComponent={EditableCell} />
+
+            <TableHeaderRow cellComponent={HeaderCell} />
           </Grid>
         </Col>
       </Row>