[issue #1] Add density props

src/LogMonitor.js

@@ -48,6 +48,9 @@ export default class LogMonitor extends Component {
     actionsById: PropTypes.object,
     stagedActionIds: PropTypes.array,
     skippedActionIds: PropTypes.array,
+    density: PropTypes.oneOf(['comfortable',
+      'cozy',
+      'compact']),
     monitorState: PropTypes.shape({
       initialScrollTop: PropTypes.number
     }),
@@ -197,6 +200,7 @@ export default class LogMonitor extends Component {
                          state={state}
                          previousState={previousState}
                          collapsed={skippedActionIds.indexOf(actionId) > -1}
+                         density={this.props.density}
                          error={error}
                          expandActionRoot={this.props.expandActionRoot}
                          expandStateRoot={this.props.expandStateRoot}

src/LogMonitorEntry.js

@@ -19,6 +19,9 @@ export default class LogMonitorEntry extends Component {
     action: PropTypes.object.isRequired,
     actionId: PropTypes.number.isRequired,
     select: PropTypes.func.isRequired,
+    density: PropTypes.oneOf(['comfortable',
+      'cozy',
+      'compact']),
     error: PropTypes.string,
     onActionClick: PropTypes.func.isRequired,
     collapsed: PropTypes.bool,
@@ -33,6 +36,15 @@ export default class LogMonitorEntry extends Component {
     this.handleActionClick = this.handleActionClick.bind(this);
   }
 
+  addDensity(style) {
+    const { density } = this.props
+    switch(density) {
+      case 'compact':
+        style.marginTop = 0
+    }
+    return style
+  }
+
   printState(state, error) {
     let errorText = error;
     if (!errorText) {
@@ -48,7 +60,7 @@ export default class LogMonitorEntry extends Component {
                 undefined
             }
             expandRoot={this.props.expandStateRoot}
-            style={styles.tree} />
+            style={this.addDensity(styles.tree)} />
         );
       } catch (err) {
         errorText = 'Error selecting state.';
@@ -93,6 +105,7 @@ export default class LogMonitorEntry extends Component {
           action={action}
           expandActionRoot={this.props.expandActionRoot}
           onClick={this.handleActionClick}
+          density={this.props.density}
           style={{...styles.entry, ...styleEntry}}/>
         {!collapsed &&
           <div>

src/LogMonitorEntryAction.js

@@ -10,10 +10,33 @@ const styles = {
   payload: {
     margin: 0,
     overflow: 'auto'
-  }
+  },
+  tree: {}
 };
 
 export default class LogMonitorAction extends Component {
+
+  addDensity(style) {
+    const { density } = this.props
+    switch(density) {
+      case 'compact': {
+        style.marginTop = 0
+        style.marginBottom = 0
+        break
+      }
+      case 'cozy': {
+        style.marginTop = 16
+        style.marginBottom = 16
+        break
+      }
+      default: {
+        style.marginTop = 8
+        style.marginBottom = 8
+      }
+    }
+    return style
+  }
+
   renderPayload(payload) {
     return (
       <div style={{
@@ -24,7 +47,8 @@ export default class LogMonitorAction extends Component {
           <JSONTree theme={this.props.theme}
                     keyName={'action'}
                     data={payload}
-                    expandRoot={this.props.expandActionRoot} /> : '' }
+                    expandRoot={this.props.expandActionRoot}
+                    style={this.addDensity(styles.tree)} /> : '' }
       </div>
     );
   }