From 3033e4d5f26bbdb808c1a88d1ecabb57b2acade4 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Wed, 13 Feb 2019 03:33:56 -0500
Subject: messing with css, not very productively.

---
 src/client/views/EditableView.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'src/client/views/EditableView.tsx')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 2e784d3f9..1176edce1 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -29,9 +29,10 @@ export class EditableView extends React.Component<EditableProps> {
                 style={{ width: "100%" }}></input>
         } else {
             return (
-                <div>
-                    {this.props.contents}
-                    <button onClick={action(() => this.editing = true)}>Edit</button>
+                <div style={{ alignItems: "center", display: "flex", height: "100%", maxHeight: "35px" }} >
+                    <button style={{ width: "100%" }} onClick={action(() => this.editing = true)}>
+                        {this.props.contents}
+                    </button>
                 </div>
             )
         }
-- 
cgit v1.2.3-70-g09d2


From c1b556748df727e9c4d92db74adddf51adea637e Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 13 Feb 2019 12:18:43 -0500
Subject: conquering my fears of css

---
 src/client/views/EditableView.tsx                  |  9 +++--
 .../views/collections/CollectionSchemaView.scss    | 24 ++++++++++++
 .../views/collections/CollectionSchemaView.tsx     | 44 +++++++++++-----------
 3 files changed, 50 insertions(+), 27 deletions(-)

(limited to 'src/client/views/EditableView.tsx')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 1176edce1..3d1c2ebf4 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -6,6 +6,7 @@ export interface EditableProps {
     GetValue(): string;
     SetValue(value: string): boolean;
     contents: any;
+    height: number
 }
 
 @observer
@@ -29,10 +30,10 @@ export class EditableView extends React.Component<EditableProps> {
                 style={{ width: "100%" }}></input>
         } else {
             return (
-                <div style={{ alignItems: "center", display: "flex", height: "100%", maxHeight: "35px" }} >
-                    <button style={{ width: "100%" }} onClick={action(() => this.editing = true)}>
-                        {this.props.contents}
-                    </button>
+                <div style={{ alignItems: "center", display: "flex", height: "100%", maxHeight: `${this.props.height}` }}
+                    onClick={action(() => this.editing = true)}
+                >
+                    {this.props.contents}
                 </div>
             )
         }
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 08b1e9790..37efc6b6c 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -2,6 +2,9 @@
 .collectionSchemaView-container {
     border-style: solid;
     box-sizing: border-box;
+    position: absolute;
+    width: 100%;
+    height: 100%;
     .collectionfreeformview-container {
         border-width: 0px !important
     }
@@ -13,10 +16,30 @@
         position: absolute;
         display: inline-block;
         width: 100%;
+        overflow: auto;
+        height: 100%;
+        background: white;
+        box-sizing: border-box;
     }
+    .ReactTable .rt-thead.-header {
+            background:grey;
+        }
     .ReactTable .rt-th, .ReactTable .rt-td {
         max-height: 75px;
     }
+    .ReactTable .rt-tbody .rt-tr-group:last-child {
+        border-bottom: grey;
+        border-bottom-style: solid;
+        border-bottom-width: 1;
+    }
+    .ReactTable .rt-td {
+        border-width: 1;
+        border-right-color: #aaa
+    }
+    .ReactTable .rt-tr-group {
+        border-width: 1;
+        border-bottom-color: #aaa
+    }
     .imageBox-cont img {
         object-fit: contain;
         height: 100%
@@ -24,6 +47,7 @@
     .documentView-node {
         width:100% !important;
         height:100% !important;
+        background: grey;
         .imageBox-cont img {
             object-fit: contain;
             max-width: 100%;
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 302c0c8aa..a2d6444b6 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -33,7 +33,7 @@ export class CollectionSchemaView extends CollectionViewBase {
             <FieldView {...props} />
         )
         return (
-            <EditableView contents={contents} GetValue={() => {
+            <EditableView contents={contents} height={36} GetValue={() => {
                 let field = props.doc.Get(props.fieldKey);
                 if (field && field instanceof Field) {
                     return field.ToScriptString();
@@ -118,28 +118,26 @@ export class CollectionSchemaView extends CollectionViewBase {
         return (
             <div onPointerDown={this.onPointerDown} className="collectionSchemaView-container"
                 style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px`, }} >
-                <SplitPane split={"vertical"} defaultSize="60%" style={{ position: "relative", overflow: "none" }}>
-                    <ScrollBox>
-                        <ReactTable
-                            data={children}
-                            pageSize={children.length}
-                            page={0}
-                            showPagination={false}
-                            columns={columns.map(col => {
-                                return (
-                                    {
-                                        Header: col.Name,
-                                        accessor: (doc: Document) => [doc, col],
-                                        id: col.Id
-                                    })
-                            })}
-                            column={{
-                                ...ReactTableDefaults.column,
-                                Cell: this.renderCell
-                            }}
-                            getTrProps={this.getTrProps}
-                        />
-                    </ScrollBox>
+                <SplitPane split={"vertical"} defaultSize="60%" style={{ height: "100%", position: "relative", overflow: "none" }}>
+                    <ReactTable
+                        data={children}
+                        pageSize={children.length}
+                        page={0}
+                        showPagination={false}
+                        columns={columns.map(col => {
+                            return (
+                                {
+                                    Header: col.Name,
+                                    accessor: (doc: Document) => [doc, col],
+                                    id: col.Id
+                                })
+                        })}
+                        column={{
+                            ...ReactTableDefaults.column,
+                            Cell: this.renderCell
+                        }}
+                        getTrProps={this.getTrProps}
+                    />
                     {content}
                 </SplitPane>
             </div>
-- 
cgit v1.2.3-70-g09d2