added data table header component with title and actions (#55)

frontend/src/component/common/common.scss

@@ -8,6 +8,15 @@
     width: 100%;
 }
 
+.horizontalScroll {
+    overflow-x: scroll;
+    -webkit-overflow-scrolling: touch;
+}
+
+.horizontalScroll::-webkit-scrollbar {
+    display: none;
+}
+
 .divider {
     margin: 0;
     border-color: rgba(0,0,0,.12);
@@ -22,3 +31,36 @@
         display: none;
     }
 }
+
+.dataTableHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 64px;
+
+    .title {
+        padding: 20px 16px 20px 24px;
+    }
+
+    .titleText {
+        margin: 0;
+        font-size: 20px;
+        line-height: 24px
+    }
+
+    .actions {
+        flex-shrink: 0;
+        padding: 20px 14px 20px 16px;
+    }
+}
+
+.switchWithLabel {
+    .label {
+        padding-right: 16px;
+        line-height: 24px;
+    }
+    .switch {
+        display: inline-block;
+        padding-right: 8px;
+    }
+}

frontend/src/component/common/index.js

@@ -38,6 +38,19 @@ export const HeaderTitle = ({ title, actions, subtitle }) => (
     </div>
 );
 
+export const DataTableHeader = ({ title, actions }) => (
+    <div className={styles.dataTableHeader}>
+        <div className={styles.title}>
+            <h2 className={styles.titleText}>{title}</h2>
+        </div>
+        {actions &&
+            <div className={styles.actions}>
+                {actions}
+            </div>
+        }
+    </div>
+);
+
 export const FormButtons = ({ submitText = 'Create', onCancel }) => (
     <div>
         <Button type="submit" ripple raised primary icon="add">
@@ -52,12 +65,12 @@ export const FormButtons = ({ submitText = 'Create', onCancel }) => (
     </div>
 );
 
-export const SwitchWithLabel = ({ onChange, children, checked }) => (
-    <span>
-        <span style={{ cursor: 'pointer', display: 'inline-block', width: '52px' }}>
-            <Switch onChange={onChange} checked={checked} />
+export const SwitchWithLabel = ({ onChange, checked, children, ...switchProps }) => (
+    <span className={styles.switchWithLabel}>
+        <span className={styles.label}>{children}</span>
+        <span className={styles.switch}>
+            <Switch checked={checked} onChange={onChange} {...switchProps} />
         </span>
-        <span style={{ fontSize: '16px', lineHeight: '24px' }}>{children}</span>
     </span>
 );
 

frontend/src/component/history/history-component.jsx

@@ -1,6 +1,8 @@
 import React, { PureComponent } from 'react';
-import { Grid, Cell } from 'react-mdl';
+import { Card } from 'react-mdl';
 import HistoryList from './history-list-container';
+import { styles as commonStyles } from '../common';
+
 class History extends PureComponent {
 
     componentDidMount () {
@@ -18,11 +20,9 @@ class History extends PureComponent {
         }
 
         return (
-            <Grid className="mdl-color--white">
-                <Cell col={12}>
-                    <HistoryList history={history} title="Last 100 changes" />
-                </Cell>
-            </Grid>
+            <Card shadow={0} className={commonStyles.fullwidth}>
+                <HistoryList history={history} title="Recent changes" />
+            </Card>
         );
     }
 }

frontend/src/component/history/history-list-component.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import HistoryItemDiff from './history-item-diff';
 import HistoryItemJson from './history-item-json';
 import { Table, TableHeader } from 'react-mdl';
-import { HeaderTitle, SwitchWithLabel, styles as commonStyles } from '../common';
+import { DataTableHeader, SwitchWithLabel, styles as commonStyles } from '../common';
 import { formatFullDateTime } from '../common/util';
 
 import styles from './history.scss';
@@ -44,10 +44,12 @@ class HistoryList extends Component {
 
         return (
             <div className={styles.history}>
-                <HeaderTitle title={this.props.title} actions={
-                    <SwitchWithLabel checked={showData} onChange={this.toggleShowDiff.bind(this)}>Show full events</SwitchWithLabel>
+                <DataTableHeader title={this.props.title} actions={
+                    <SwitchWithLabel checked={showData} onChange={this.toggleShowDiff.bind(this)}>
+                        Full events
+                    </SwitchWithLabel>
                 }/>
-                <div style={{ overflowX: 'scroll' }}>
+                <div className={commonStyles.horizontalScroll}>
                     {entries}
                 </div>
             </div>

frontend/src/component/history/history-list-toggle-component.jsx

@@ -1,6 +1,5 @@
 import React, { Component, PropTypes } from 'react';
-import ListComponent from './history-list-container';
-import { Link } from 'react-router';
+import HistoryList from './history-list-container';
 
 class HistoryListToggle extends Component {
 
@@ -18,15 +17,11 @@ class HistoryListToggle extends Component {
         if (!this.props.history || this.props.history.length === 0) {
             return <span>fetching..</span>;
         }
-        const { history, toggleName } = this.props;
+        const { history } = this.props;
         return (
-                <ListComponent
+                <HistoryList
                     history={history}
-                    title={
-                        <span>Showing history for toggle: <Link to={`/features/edit/${toggleName}`}>
-                            <strong>{toggleName}</strong>
-                            </Link>
-                        </span>}/>
+                    title="Change log"/>
         );
     }
 }

frontend/src/component/history/history.scss

@@ -1,7 +1,4 @@
-.history {
-    width:100%;
-    border-collapse: collapse;
-    
+.history {    
     code {
         word-wrap: break-word;
         white-space: pre;