added css

10 files changed, 61 insertions, 53 deletions

diff --git a/.vscode/launch.json b/.vscode/launch.json
index 8aa197fa5..074f9ddf0 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -12,10 +12,6 @@
             "breakOnLoad": true,
             "url": "http://localhost:1050",
             "webRoot": "${workspaceFolder}",
-            "skipFiles": [
-                "${workspaceRoot}/node_modules/**/*.js",
-                "${workspaceRoot}/node_modules/**/*.ts",
-            ]
         },
         {
             "type": "node",
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 41f1c9b3f..1d24ff7d2 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -13,7 +13,7 @@ import { CollectionView, CollectionViewType } from "../views/collections/Collect
 import { HtmlField } from "../../fields/HtmlField";
 import { Key } from "../../fields/Key"
 import { Field } from "../../fields/Field";
-import { KeyValuePane } from "../views/nodes/KeyValuePane"
+import { KeyValueBox } from "../views/nodes/KeyValueBox"
 import { KVPField } from "../../fields/KVPField";
 
 export interface DocumentOptions {
@@ -105,7 +105,7 @@ export namespace Documents {
 
     function GetKVPPrototype(): Document {
         return kvpProto ? kvpProto :
-            kvpProto = setupPrototypeOptions(kvpProtoId, "KVP_PROTO", KeyValuePane.LayoutString(),
+            kvpProto = setupPrototypeOptions(kvpProtoId, "KVP_PROTO", KeyValueBox.LayoutString(),
                 { x: 0, y: 0, width: 300, height: 150, layoutKeys: [KeyStore.Data] })
     }
 
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 137bcf706..96b6d1477 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -16,6 +16,7 @@ import { DocumentView } from "../nodes/DocumentView";
 import { FormattedTextBox } from "../nodes/FormattedTextBox";
 import { ImageBox } from "../nodes/ImageBox";
 import { WebBox } from "../nodes/WebBox";
+import { KeyValueBox } from "../nodes/KeyValueBox"
 import "./CollectionFreeFormView.scss";
 import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import { CollectionViewBase } from "./CollectionViewBase";
@@ -230,7 +231,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
     get backgroundView() {
         return !this.backgroundLayout ? (null) :
             (<JsxParser
-                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox }}
+                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox }}
                 bindings={this.props.bindings}
                 jsx={this.backgroundLayout}
                 showWarnings={true}
@@ -241,7 +242,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
     get overlayView() {
         return !this.overlayLayout ? (null) :
             (<JsxParser
-                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox }}
+                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox }}
                 bindings={this.props.bindings}
                 jsx={this.overlayLayout}
                 showWarnings={true}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 23cfa6df3..a02fde133 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -16,7 +16,7 @@ import { ContextMenu } from "../ContextMenu";
 import { FormattedTextBox } from "../nodes/FormattedTextBox";
 import { ImageBox } from "../nodes/ImageBox";
 import { Documents } from "../../documents/Documents"
-import { KeyValuePane } from "../nodes/KeyValuePane"
+import { KeyValueBox } from "./KeyValueBox"
 import { WebBox } from "../nodes/WebBox";
 import "./DocumentView.scss";
 import React = require("react");
@@ -205,7 +205,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
     @computed get mainContent() {
         return <JsxParser
-            components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValuePane }}
+            components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox }}
             bindings={this._documentBindings}
             jsx={this.layout}
             showWarnings={true}
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 056f834d1..f372258f8 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -12,8 +12,6 @@ import { Key } from "../../../fields/Key";
 import { FormattedTextBox } from "./FormattedTextBox";
 import { ImageBox } from "./ImageBox";
 import { WebBox } from "./WebBox";
-import { KVPField } from "../../../fields/KVPField";
-import { KeyValuePane } from "./KeyValuePane";
 
 //
 // these properties get assigned through the render() method of the DocumentView when it creates this node.
diff --git a/src/client/views/nodes/KeyValueBox.scss b/src/client/views/nodes/KeyValueBox.scss
new file mode 100644
index 000000000..f22989735
--- /dev/null
+++ b/src/client/views/nodes/KeyValueBox.scss
@@ -0,0 +1,24 @@
+.keyValueBox-cont {
+    overflow-y:scroll;
+    height: 100%;
+    border: black;
+    border-width: 1px;
+    border-style: solid;
+    box-sizing: border-box;
+    display: inline-block;
+}
+.keyValueBox-header {
+    background:gray;
+}
+.keyValueBox-evenRow {
+    background: white;
+    .formattedTextBox-cont {
+        background: white;
+    }
+}
+.keyValueBox-oddRow {
+    background: lightGray;
+    .formattedTextBox-cont {
+        background: lightgray;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/KeyValuePane.tsx b/src/client/views/nodes/KeyValueBox.tsx
index 90f5b653c..7e2426b58 100644
--- a/src/client/views/nodes/KeyValuePane.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -1,32 +1,20 @@
 
-import Lightbox from 'react-image-lightbox';
-import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
-import "./KeyValuePane.scss";
-import React = require("react")
-import { FieldViewProps, FieldView } from './FieldView';
-import { FieldWaiting, Opt, Field } from '../../../fields/Field';
-import { observer } from "mobx-react"
-import { observable, action, IReactionDisposer, reaction, ObservableMap } from 'mobx';
-import { KeyStore } from '../../../fields/KeyStore';
-import { RichTextField } from "../../../fields/RichTextField";
-import { element } from 'prop-types';
-import { props } from 'bluebird';
+import { IReactionDisposer } from 'mobx';
+import { observer } from "mobx-react";
 import { EditorView } from 'prosemirror-view';
-import { Transaction, EditorState } from 'prosemirror-state';
-import { schema } from 'prosemirror-schema-basic';
-import { keymap } from 'prosemirror-keymap';
-import { undo, redo } from 'prosemirror-history';
-import { baseKeymap } from 'prosemirror-commands';
-import { KVPField } from '../../../fields/KVPField';
+import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
 import { Document } from '../../../fields/Document';
-import { Key } from '../../../fields/Key';
-import { JSXElement } from 'babel-types';
-import { KeyValuePair } from "./KeyValuePair"
+import { Opt } from '../../../fields/Field';
+import { KeyStore } from '../../../fields/KeyStore';
+import { FieldView, FieldViewProps } from './FieldView';
+import { KeyValuePair } from "./KeyValuePair";
+import "./KeyValueBox.scss";
+import React = require("react")
 
 @observer
-export class KeyValuePane extends React.Component<FieldViewProps> {
+export class KeyValueBox extends React.Component<FieldViewProps> {
 
-    public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(KeyValuePane, fieldStr) }
+    public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(KeyValueBox, fieldStr) }
     private _ref: React.RefObject<HTMLDivElement>;
     private _editorView: Opt<EditorView>;
     private _reactionDisposer: Opt<IReactionDisposer>;
@@ -74,8 +62,11 @@ export class KeyValuePane extends React.Component<FieldViewProps> {
         }
 
         let rows: JSX.Element[] = [];
+        let i = 0;
         for (let key in ids) {
-            rows.push(<KeyValuePair doc={realDoc} fieldId={key} />)
+            if (i++ % 2 == 0)
+                rows.push(<KeyValuePair doc={realDoc} rowStyle="keyValueBox-evenRow" fieldId={key} />)
+            else rows.push(<KeyValuePair doc={realDoc} rowStyle="keyValueBox-oddRow" fieldId={key} />)
         }
         return rows;
     }
@@ -83,14 +74,16 @@ export class KeyValuePane extends React.Component<FieldViewProps> {
 
     render() {
 
-        return (<table>
-            <tbody>
-                <tr>
-                    <th>Key</th>
-                    <th>Fields</th>
-                </tr>
-                {this.createTable()}
-            </tbody>
-        </table>)
+        return (<div className="keyValueBox-cont">
+            <table className="keyValueBox-table">
+                <tbody>
+                    <tr className="keyValueBox-header">
+                        <th>Key</th>
+                        <th>Fields</th>
+                    </tr>
+                    {this.createTable()}
+                </tbody>
+            </table>
+        </div>)
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index b8a0cca48..ecdd47a1e 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -1,5 +1,5 @@
 import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
-import "./KeyValuePane.scss";
+import "./KeyValueBox.scss";
 import React = require("react")
 import { FieldViewProps, FieldView } from './FieldView';
 import { Opt, Field } from '../../../fields/Field';
@@ -12,6 +12,7 @@ import { Server } from "../../Server"
 // Represents one row in a key value plane
 
 export interface KeyValuePairProps {
+    rowStyle: string;
     fieldId: string;
     doc: Document;
 }
@@ -33,7 +34,6 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
     }
 
 
-
     render() {
         if (!this.key) {
             return <tr><td>error</td><td></td></tr>
@@ -49,7 +49,7 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
             selectOnLoad: false,
         }
         return (
-            <tr><td>{this.key.Name}</td><td><FieldView {...props} /></td></tr>
+            <tr className={this.props.rowStyle}><td>{this.key.Name}</td><td><FieldView {...props} /></td></tr>
         )
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/KeyValuePane.scss b/src/client/views/nodes/KeyValuePane.scss
deleted file mode 100644
index e69de29bb..000000000
--- a/src/client/views/nodes/KeyValuePane.scss
+++ /dev/null
diff --git a/tsconfig.json b/tsconfig.json
index 823fc2732..e2538bc39 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,9 +11,5 @@
       "dom",
       "es2015"
     ]
-  },
-  "exclude": [
-    "node_modules",
-    "static"
-  ]
+  }
 }
\ No newline at end of file