extern/pdf-to-markdown
1
0
Fork 0
mirror of https://github.com/jzillmann/pdf-to-markdown.git synced 2024-11-21 23:33:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

Affix for debug panel

Browse Source
This commit is contained in:
Johannes Zillmann 2017-03-29 08:15:39 +02:00
parent 96d4f72889
commit 5ef6c362b0
2 changed files with 80 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -32,6 +32,7 @@
"react-dom": "^15.4.2", "react-dom": "^15.4.2",
"react-dropzone": "^3.9.2", "react-dropzone": "^3.9.2",
"react-icons": "^2.2.3", "react-icons": "^2.2.3",
"react-overlays": "^0.6.12",
"remarkable": "^1.7.1" "remarkable": "^1.7.1"
}, },
"devDependencies": { "devDependencies": {

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

@ -10,6 +10,7 @@ import Label from 'react-bootstrap/lib/Label'
import Checkbox from 'react-bootstrap/lib/Checkbox' import Checkbox from 'react-bootstrap/lib/Checkbox'
import Collapse from 'react-bootstrap/lib/Collapse' import Collapse from 'react-bootstrap/lib/Collapse'
import Panel from 'react-bootstrap/lib/Panel' import Panel from 'react-bootstrap/lib/Panel'
import AutoAffix from 'react-overlays/lib/AutoAffix';
import ParseResult from '../models/ParseResult.jsx'; import ParseResult from '../models/ParseResult.jsx';
@ -115,88 +116,90 @@ export default class DebugView extends React.Component {
return ( return (
<div> <div>
<table> <AutoAffix viewportOffsetTop={ 15 } container={ this }>
<tbody> <table>
{ lastTransformation.showPageSelection() && <tbody>
{ lastTransformation.showPageSelection() &&
<tr>
<td>
<div>
<ul className='pagination'>
<li className={ pageNr == -1 ? 'active' : '' }>
<a role='button' onClick={ this.selectPage.bind(this, 0) }>ALL</a>
</li>
</ul>
<Pagination
prev
next
first
last
ellipsis
boundaryLinks
items={ pages.length }
maxButtons={ 17 }
activePage={ this.state.pageNr + 1 }
onSelect={ this.selectPage.bind(this) } />
</div>
</td>
<td style={ { padding: '5px', textAlign: 'left' } }>
<Label bsStyle="info">
Pages
</Label>
</td>
</tr> }
<tr> <tr>
<td> <td>
<div> <ButtonToolbar>
<ul className='pagination'> <ButtonGroup>
<li className={ pageNr == -1 ? 'active' : '' }> <Button className={ currentTransformation > 0 ? 'btn-round' : 'btn-round disabled' } onClick={ this.prevTransformation.bind(this) }>
<a role='button' onClick={ this.selectPage.bind(this, 0) }>ALL</a> ← Previous
</li> </Button>
</ul> </ButtonGroup>
<Pagination <ButtonGroup>
prev { ' ' }
next <Button className={ currentTransformation < transformations.length - 1 ? 'btn-round' : 'btn-round disabled' } onClick={ this.nextTransformation.bind(this) }>
first Next →
last </Button>
ellipsis </ButtonGroup>
boundaryLinks <ButtonGroup>
items={ pages.length } <DropdownButton title={ currentTransformationName } id="dropdown-size-medium">
maxButtons={ 17 } { transformationMenuItems }
activePage={ this.state.pageNr + 1 } </DropdownButton>
onSelect={ this.selectPage.bind(this) } /> </ButtonGroup>
</div> <ButtonGroup>
{ showModificationCheckbox &&
<Checkbox onClick={ this.showModifications.bind(this) }>
Show only modifications
</Checkbox> }
</ButtonGroup>
<ButtonGroup>
<Checkbox onClick={ ::this.showStatistics }>
Show Statistics
</Checkbox>
</ButtonGroup>
</ButtonToolbar>
</td> </td>
<td style={ { padding: '5px', textAlign: 'left' } }> <td style={ { padding: '5px' } }>
<Label bsStyle="info"> <Label bsStyle="info">
Pages Transformations
{ ' - ' + currentTransformation + ' / ' + (transformations.length - 1) }
</Label> </Label>
</td> </td>
</tr> } </tr>
<tr> <tr>
<td> <td>
<ButtonToolbar> <Collapse in={ this.state.showStatistics }>
<ButtonGroup> <Panel bsStyle="default">
<Button className={ currentTransformation > 0 ? 'btn-round' : 'btn-round disabled' } onClick={ this.prevTransformation.bind(this) }> <ul>
← Previous { statisticsAsList }
</Button> </ul>
</ButtonGroup> </Panel>
<ButtonGroup> </Collapse>
{ ' ' } </td>
<Button className={ currentTransformation < transformations.length - 1 ? 'btn-round' : 'btn-round disabled' } onClick={ this.nextTransformation.bind(this) }> </tr>
Next → </tbody>
</Button> </table>
</ButtonGroup> </AutoAffix>
<ButtonGroup>
<DropdownButton title={ currentTransformationName } id="dropdown-size-medium">
{ transformationMenuItems }
</DropdownButton>
</ButtonGroup>
<ButtonGroup>
{ showModificationCheckbox &&
<Checkbox onClick={ this.showModifications.bind(this) }>
Show only modifications
</Checkbox> }
</ButtonGroup>
<ButtonGroup>
<Checkbox onClick={ ::this.showStatistics }>
Show Statistics
</Checkbox>
</ButtonGroup>
</ButtonToolbar>
</td>
<td style={ { padding: '5px' } }>
<Label bsStyle="info">
Transformations
{ ' - ' + currentTransformation + ' / ' + (transformations.length - 1) }
</Label>
</td>
</tr>
<tr>
<td>
<Collapse in={ this.state.showStatistics }>
<Panel bsStyle="default">
<ul>
{ statisticsAsList }
</ul>
</Panel>
</Collapse>
</td>
</tr>
</tbody>
</table>
{ !this.state.showStatistics && { !this.state.showStatistics &&
<hr style={ { marginTop: '5px' } } /> } <hr style={ { marginTop: '5px' } } /> }
<ul> <ul>