formview better style

packages/web/src/datagrid/ColumnLabel.js

@@ -3,11 +3,17 @@
 import React from 'react';
 import styled from 'styled-components';
 import { FontIcon } from '../icons';
+import useTheme from '../theme/useTheme';
 
 const Label = styled.span`
   font-weight: ${props => (props.notNull ? 'bold' : 'normal')};
   white-space: nowrap;
 `;
+const ExtInfoWrap = styled.span`
+  font-weight: normal;
+  margin-left: 5px;
+  color: ${props => props.theme.left_font3};
+`;
 
 export function getColumnIcon(column, forceIcon = false) {
   if (column.autoIncrement) return 'img autoincrement';
@@ -19,9 +25,11 @@ export function getColumnIcon(column, forceIcon = false) {
 /** @param column {import('dbgate-datalib').DisplayColumn|import('dbgate-types').ColumnInfo} */
 export default function ColumnLabel(column) {
   const icon = getColumnIcon(column, column.forceIcon);
+  const theme = useTheme();
   return (
     <Label {...column}>
       {icon ? <FontIcon icon={icon} /> : null} {column.headerText || column.columnName}
+      {column.extInfo ? <ExtInfoWrap theme={theme}>{column.extInfo}</ExtInfoWrap> : null}
     </Label>
   );
 }

packages/web/src/formview/FormView.js

@@ -490,7 +490,12 @@ export default function FormView(props) {
                 isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2}
                 ref={element => setCellRef(rowIndex, chunkIndex * 2, element)}
               >
-                <ColumnLabelMargin {...col} />
+                <ColumnLabelMargin
+                  {...col}
+                  headerText={col.columnName}
+                  style={{ marginLeft: (col.uniquePath.length - 1) * 20 }}
+                  extInfo={col.foreignKey ? ` -> ${col.foreignKey.refTableName}` : null}
+                />
 
                 {col.foreignKey && (
                   <ShowFormButton