Merge pull request #251 from kassens/table

Update style Relay queries view

Author: kassens

plugins/Relay/Query.js

@@ -13,39 +13,43 @@
 import type {Map} from 'immutable';
 
 var React = require('react');
-var assign = require('object-assign');
 
 class Query extends React.Component {
   props: {
     data: Map,
+    oddRow: boolean,
     onSelect: () => void,
   };
   render(): ReactElement {
     var data = this.props.data;
     var containerStyle = styles.container;
     if (this.props.isSelected) {
-      containerStyle = {
-        ...styles.container,
-        ...styles.selectedContainer,
-      };
+      containerStyle = styles.containerSelected;
+    } else if (this.props.oddRow) {
+      containerStyle = styles.containeroOddRow;
     }
-    var statusStyle = assign({}, styles.status, {
-      backgroundColor: statusColors[data.get('status')] || statusColors.error,
-    });
+
+    var status = data.get('status');
+    var statusStyle = {
+      ...styles.status,
+      backgroundColor: statusColors[status] || statusColors.error,
+    };
 
     return (
-      <li onClick={this.props.onSelect} style={containerStyle}>
-        <div style={statusStyle} />
-        <div style={styles.name}>
+      <tr onClick={this.props.onSelect} style={containerStyle}>
+        <td style={styles.tdFirst}>
+          <span style={statusStyle} title={status} />
+        </td>
+        <td style={styles.tdName}>
           {data.get('name')}
-        </div>
-        <div style={styles.time}>
+        </td>
+        <td style={styles.td}>
           {new Date(data.get('start')).toLocaleTimeString()}
-        </div>
-        <div style={styles.duration}>
+        </td>
+        <td style={styles.td}>
           {data.get('end') - data.get('start')}ms
-        </div>
-      </li>
+        </td>
+      </tr>
     );
   }
 }
@@ -57,45 +61,54 @@ var statusColors = {
   error: '#aaa',
 };
 
+var baseContainer = {
+  cursor: 'pointer',
+  fontSize: 11,
+  height: 21,
+  lineHeight: '21px',
+  fontFamily: "'Lucida Grande', sans-serif",
+};
+
+var baseTD = {
+  whiteSpace: 'nowrap',
+  'padding': '1px 4px',
+  'lineHeight': '17px',
+  'borderLeft': '1px solid #e1e1e1',
+};
+
 var styles = {
-  container: {
-    padding: '10px 20px',
-    cursor: 'pointer',
-    display: 'flex',
-    fontSize: 14,
-  },
+  container: baseContainer,
 
-  selectedContainer: {
-    backgroundColor: '#eef',
+  containerSelected: {
+    ...baseContainer,
+    backgroundColor: '#3879d9',
+    color: 'white',
   },
 
-  name: {
-    flex: 1,
-    fontSize: 16,
-    padding: 10,
+  containeroOddRow: {
+    ...baseContainer,
+    backgroundColor: '#f5f5f5',
   },
 
-  time: {
-    padding: 10,
+  td: baseTD,
+
+  tdFirst: {
+    ...baseTD,
+    borderLeft: '',
   },
 
-  duration: {
-    padding: 10,
+  tdName: {
+    ...baseTD,
+    width: '100%',
   },
 
   status: {
-    width: 20,
-    height: 20,
-    margin: 10,
-    borderRadius: 25,
+    display: 'inline-block',
+    width: 11,
+    height: 11,
+    borderRadius: 6,
     backgroundColor: '#aaa',
   },
-
-  text: {
-    whiteSpace: 'pre',
-    fontFamily: 'monospace',
-    flex: 1,
-  },
 };
 
 module.exports = Query;

plugins/Relay/QueryList.js

@@ -24,34 +24,46 @@ class QueryList {
   };
 
   render() {
+    if (!this.props.queries.count()) {
+      return <div style={styles.empty}>No Relay Queries logged</div>;
+    }
+    var rows = this.props.queries.valueSeq().map((q, i) => (
+      <Query
+        data={q}
+        isSelected={q.get('id') === this.props.selectedQuery}
+        key={q.get('id')}
+        oddRow={(i % 2) === 1}
+        onSelect={() => this.props.selectQuery(q.get('id'))}
+      />
+    )).toArray();
+
     return (
-      <ul style={styles.list}>
-        {this.props.queries.valueSeq().map(q => (
-          <Query
-            data={q}
-            key={q.get('id')}
-            isSelected={q.get('id') === this.props.selectedQuery}
-            onSelect={() => this.props.selectQuery(q.get('id'))}
-          />
-        )).toArray()}
-        {!this.props.queries.count() &&
-          <li style={styles.empty}>No Relay Queries logged</li>}
-      </ul>
+      <div style={styles.container}>
+      <table style={styles.table}>
+        <tbody>
+          {rows}
+        </tbody>
+      </table>
+      </div>
     );
   }
 }
 
 var styles = {
-  list: {
-    listStyle: 'none',
-    padding: 0,
-    margin: 0,
-    overflow: 'auto',
-    minHeight: 0,
+  container: {
+    position: 'relative',
     flex: 1,
+    overflow: 'scroll',
+  },
+
+  table: {
+    flex: 1,
+    borderCollapse: 'collapse',
+    width: '100%',
   },
 
   empty: {
+    flex: 1,
     padding: 50,
     textAlign: 'center',
   },