beautify debug page

src/css/styles.css

@@ -6,4 +6,8 @@ a {
     pointer-events: none;
     cursor: default;
     opacity: 0.6;
-}
+}
+
+.btn-round {
+    border-radius: 24px;
+}

src/javascript/components/AppLogo.jsx

@@ -1,7 +1,7 @@
-import React, { Component } from 'react';
+import React from 'react';
 import FaFilePdfO from 'react-icons/lib/fa/file-pdf-o'
 
-export default class AppLogo extends Component {
+export default class AppLogo extends React.Component {
 
     static propTypes = {
         onClick: React.PropTypes.func,

src/javascript/components/PdfPageView.jsx

@@ -9,7 +9,7 @@ export default class PdfPageView extends React.Component {
     };
 
     render() {
-        const header = "Page " + this.props.pdfPage.index;
+        const header = "Page " + (this.props.pdfPage.index + 1);
         return (
             <div>
               <h2>{ header }</h2>

src/javascript/components/PdfView.jsx

@@ -1,6 +1,11 @@
 import React from 'react';
 
 import Badge from 'react-bootstrap/lib/Badge'
+import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar'
+import ButtonGroup from 'react-bootstrap/lib/ButtonGroup'
+import Button from 'react-bootstrap/lib/Button'
+import DropdownButton from 'react-bootstrap/lib/DropdownButton'
+import MenuItem from 'react-bootstrap/lib/MenuItem'
 
 import PdfPageView from './PdfPageView.jsx';
 
@@ -24,7 +29,12 @@ export default class PdfView extends React.Component {
         this.setState({
             pageNr: pageNr
         });
+    }
 
+    selectTransformation(currentTransformation) {
+        this.setState({
+            currentTransformation: currentTransformation
+        });
     }
 
     nextTransformation() {
@@ -46,19 +56,7 @@ export default class PdfView extends React.Component {
 
         const header = "Parsed " + pdfPages.length + " pages!"
 
-        var pageLinks = [];
-        pageLinks.push(<a key={ -1 } onClick={ this.selectPage.bind(this, -1) } style={ { fontSize: '1.20em' } }>All</a>);
-        pdfPages.forEach((pdfPage, i) => pageLinks.push(<a key={ i } onClick={ this.selectPage.bind(this, i) } style={ { fontSize: '1.10em' } }>
-                                                          { " " + i }
-                                                        </a>));
-
         const currentTransformationName = transformations[currentTransformation].name;
-        const prevLink = <a onClick={ this.prevTransformation.bind(this) } className={ currentTransformation > 0 ? '' : 'disabled' }>
-                           { '<==' }
-                         </a>;
-        const nextLink = <a onClick={ this.nextTransformation.bind(this) } className={ currentTransformation < transformations.length - 1 ? '' : 'disabled' }>
-                           { '==>' }
-                         </a>;
 
         const transformedPdfPages = pdfPages.filter((elem, i) => pageNr == -1 || i == pageNr).map(pdfPage => {
             for (var i = 0; i <= currentTransformation; i++) {
@@ -72,25 +70,56 @@ export default class PdfView extends React.Component {
         return (
             <div>
               <div>
-                <Badge>
+                <table style={ { width: '100%' } }>
-                  { pdfPages.length }
+                  <caption>
-                </Badge> pages!
+                    Pages
-              </div>
+                  </caption>
-              <div style={ { textAlign: 'center' } }>
+                  <tbody>
-                <div>
+                    <tr>
-                  <b>Pages:</b>
+                      <td>
-                </div>
+                        <ButtonToolbar>
-                <div>
+                          <ButtonGroup>
-                  { pageLinks }
+                            <Button onClick={ this.selectPage.bind(this, -1) } className={ pageNr == -1 ? 'active' : '' }>
-                </div>
+                              All
-                <div>
+                            </Button>
-                  <b>Current Transformation:</b>
+                            { pdfPages.map((pdfPage, i) => <Button key={ i } onClick={ this.selectPage.bind(this, i) } className={ pageNr == i ? 'active' : '' }>
-                </div>
+                                                             { i + 1 }
-                <div>
+                                                           </Button>) }
-                  { prevLink }
+                          </ButtonGroup>
-                  { " " + currentTransformationName + " " }
+                        </ButtonToolbar>
-                  { nextLink }
+                      </td>
-                </div>
+                    </tr>
+                  </tbody>
+                </table>
+                <br/>
+                <table>
+                  <caption>
+                    Current Transformation
+                  </caption>
+                  <tbody>
+                    <tr>
+                      <td>
+                        <DropdownButton title={ currentTransformationName } id="dropdown-size-medium">
+                          { transformations.map((transformation, i) => <MenuItem key={ i } eventKey={ i } onSelect={ this.selectTransformation.bind(this, i) }>
+                                                                       { transformation.name }
+                                                                       </MenuItem>) }
+                        </DropdownButton>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <br/>
+                        <Button className={ currentTransformation > 0 ? 'btn-round' : 'btn-round disabled' } onClick={ this.prevTransformation.bind(this) }>
+                          ← Previous
+                        </Button>
+                        { ' ' }
+                        <Button className={ currentTransformation < transformations.length - 1 ? 'btn-round' : 'btn-round disabled' } onClick={ this.nextTransformation.bind(this) }>
+                          Next →
+                        </Button>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
               </div>
               <hr/>
               { pageComponents }