Added field view & edit table layout

frontend/src/metabase/components/Item.jsx

@@ -46,7 +46,7 @@ Item.propTypes = {
     placeholder:        PropTypes.string,
     icon:               PropTypes.string,
     isEditing:          PropTypes.bool,
-    field:          PropTypes.object
+    field:              PropTypes.object
 };
 
 export default pure(Item);

frontend/src/metabase/components/List.css

@@ -68,6 +68,11 @@
     font-size: 18px;
 }
 
+:local(.itemTitleTextInput) {
+    composes: headerTextInput;
+    font-size: 14px;
+}
+
 :local(.itemName) {
     composes: mr1 from "style";
     composes: inline-block from "style";

frontend/src/metabase/css/core/flex.css

@@ -8,7 +8,7 @@
     flex: 1;
 }
 
-.flex-half {
+.flex-half, :local(.flex-half) {
     flex: 0.5;
 }
 

frontend/src/metabase/reference/components/Field.css

+:local(.field) {
+    composes: flex from "style";
+}
+
+:local(.fieldName) {
+    composes: flex-full from "style";
+}
+
+:local(.fieldType) {
+    composes: flex-half from "style";
+}
+
+:local(.fieldDataType) {
+    composes: flex-half from "style";
+}

frontend/src/metabase/reference/components/Field.jsx

+/* eslint "react/prop-types": "warn" */
+import React, { Component, PropTypes } from "react";
+import { Link } from "react-router";
+
+import S from "metabase/components/List.css";
+import F from "./Field.css";
+
+import Urls from "metabase/lib/urls";
+import Icon from "metabase/components/Icon.jsx";
+
+import cx from "classnames";
+import pure from "recompose/pure";
+
+const Field = ({
+    field: { id, name, display_name },
+    url,
+    icon,
+    isEditing,
+    formField
+}) =>
+    <div className={cx(S.item)}>
+        <div className={S.leftIcons}>
+        </div>
+        <div className={S.itemBody}>
+            <div className={F.field}>
+                <div className={cx(S.itemTitle, F.fieldName)}>
+                    { isEditing ?
+                        <input
+                            className={S.itemTitleTextInput}
+                            type="text"
+                            placeholder={display_name}
+                            defaultValue={display_name}
+                        /> :
+                        <Link to={url} className={S.itemName}>{display_name}</Link>
+                    }
+                </div>
+                <div className={F.fieldType}>
+test
+                </div>
+                <div className={F.fieldDataType}>
+test
+                </div>
+            </div>
+            <div className={cx(S.itemSubtitle, { "mt1" : true })}>
+                { name }
+            </div>
+        </div>
+    </div>
+
+Field.propTypes = {
+    field: PropTypes.object.isRequired,
+    url: PropTypes.string.isRequired,
+    placeholder:        PropTypes.string,
+    icon:               PropTypes.string,
+    isEditing:          PropTypes.bool,
+    formField:              PropTypes.object
+};
+
+export default pure(Field);

frontend/src/metabase/reference/containers/ReferenceEntity.jsx

@@ -135,7 +135,7 @@ export default class EntityItem extends Component {
                                     <input
                                         className={S.headerTextInput}
                                         type="text"
-                                        placeholder={entity.name}
+                                        placeholder={entity.display_name}
                                         {...display_name}
                                         defaultValue={entity.display_name}
                                     /> :

frontend/src/metabase/reference/containers/ReferenceFieldsList.jsx

@@ -6,9 +6,9 @@ import { connect } from "react-redux";
 import S from "metabase/components/List.css";
 import R from "metabase/reference/Reference.css";
 
+import Field from "metabase/reference/components/Field.jsx";
 import List from "metabase/components/List.jsx";
 import Icon from "metabase/components/Icon.jsx";
-import Item from "metabase/components/Item.jsx";
 import EmptyState from "metabase/components/EmptyState.jsx";
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
 
@@ -128,12 +128,11 @@ export default class ReferenceEntityList extends Component {
                             { Object.values(fields).map(field =>
                                 field && field.id && field.name &&
                                     <li className="relative" key={field.id}>
-                                        <Item
-                                            id={field.id}
-                                            name={field.display_name || field.name}
-                                            description={field.name}
+                                        <Field
+                                            field={field}
                                             url={`${section.id}/${field.id}`}
                                             icon="star"
+                                            isEditing={isEditing}
                                         />
                                     </li>
                             )}