extern/pdf-to-markdown
1
0
Fork 0
mirror of https://github.com/jzillmann/pdf-to-markdown.git synced 2024-11-28 18:53:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

re-design debug controls

Browse Source
This commit is contained in:
Johannes Zillmann 2017-02-03 12:34:27 +01:00
parent 7dc1de2912
commit c2289421e4
1 changed files with 49 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/javascript/components/DebugView.jsx
View File

@ -1,10 +1,11 @@
import React from 'react'; import React from 'react';
import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar' import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar'
import ButtonGroup from 'react-bootstrap/lib/ButtonGroup'
import Button from 'react-bootstrap/lib/Button' import Button from 'react-bootstrap/lib/Button'
import DropdownButton from 'react-bootstrap/lib/DropdownButton' import DropdownButton from 'react-bootstrap/lib/DropdownButton'
import Pagination from 'react-bootstrap/lib/Pagination'
import MenuItem from 'react-bootstrap/lib/MenuItem' import MenuItem from 'react-bootstrap/lib/MenuItem'
import Label from 'react-bootstrap/lib/Label'
import ContentView from '../models/ContentView.jsx'; import ContentView from '../models/ContentView.jsx';
import PdfPageView from './PdfPageView.jsx'; import PdfPageView from './PdfPageView.jsx';
@ -28,7 +29,7 @@ export default class DebugView extends React.Component {
selectPage(pageNr) { selectPage(pageNr) {
this.setState({ this.setState({
pageNr: pageNr pageNr: pageNr - 1
}); });
} }
@ -83,47 +84,39 @@ export default class DebugView extends React.Component {
return ( return (
<div> <div>
<div> <table>
{ lastTransformation.showPageSelection() && <tbody>
<table style={ { width: '100%' } }> { lastTransformation.showPageSelection() &&
<caption>
Pages
</caption>
<tbody>
<tr>
<td>
<ButtonToolbar>
<ButtonGroup>
<Button onClick={ this.selectPage.bind(this, -1) } className={ pageNr == -1 ? 'active' : '' }>
All
</Button>
{ pdfPages.map((pdfPage, i) => <Button key={ i } onClick={ this.selectPage.bind(this, i) } className={ pageNr == i ? 'active' : '' }>
{ i + 1 }
</Button>) }
</ButtonGroup>
</ButtonToolbar>
</td>
</tr>
</tbody>
</table> }
<br/>
<table>
<caption>
Current Transformation
</caption>
<tbody>
<tr> <tr>
<td> <td>
<DropdownButton title={ currentTransformationName } id="dropdown-size-medium"> <div>
{ transformations.map((transformation, i) => <MenuItem key={ i } eventKey={ i } onSelect={ this.selectTransformation.bind(this, i) }> <ul className='pagination'>
{ transformation.name } <li className={ pageNr == -1 ? 'active' : '' }>
</MenuItem>) } <a role='button' onClick={ this.selectPage.bind(this, 0) }>ALL</a>
</DropdownButton> </li>
</ul>
<Pagination
prev
next
first
last
ellipsis
boundaryLinks
items={ pdfPages.length }
maxButtons={ 18 }
activePage={ this.state.pageNr + 1 }
onSelect={ this.selectPage.bind(this) } />
</div>
</td> </td>
</tr> <td style={ { padding: '5px', textAlign: 'left' } }>
<tr> <Label bsStyle="info">
<td> Pages
<br/> </Label>
</td>
</tr> }
<tr>
<td>
<ButtonToolbar>
<Button className={ currentTransformation > 0 ? 'btn-round' : 'btn-round disabled' } onClick={ this.prevTransformation.bind(this) }> <Button className={ currentTransformation > 0 ? 'btn-round' : 'btn-round disabled' } onClick={ this.prevTransformation.bind(this) }>
← Previous ← Previous
</Button> </Button>
@ -131,11 +124,22 @@ export default class DebugView extends React.Component {
<Button className={ currentTransformation < transformations.length - 1 ? 'btn-round' : 'btn-round disabled' } onClick={ this.nextTransformation.bind(this) }> <Button className={ currentTransformation < transformations.length - 1 ? 'btn-round' : 'btn-round disabled' } onClick={ this.nextTransformation.bind(this) }>
Next → Next →
</Button> </Button>
</td> <DropdownButton title={ currentTransformationName } id="dropdown-size-medium">
</tr> { transformations.map((transformation, i) => <MenuItem key={ i } eventKey={ i } onSelect={ this.selectTransformation.bind(this, i) }>
</tbody> { transformation.name }
</table> </MenuItem>) }
</div> </DropdownButton>
</ButtonToolbar>
</td>
<td style={ { padding: '5px' } }>
<Label bsStyle="info">
Transformations
{ ' - ' + currentTransformation + ' / ' + (transformations.length - 1) }
</Label>
</td>
</tr>
</tbody>
</table>
<hr/> <hr/>
{ pageComponents } { pageComponents }
</div> </div>