extern/pdf-to-markdown
1
0
Fork 0
mirror of https://github.com/jzillmann/pdf-to-markdown.git synced 2024-11-21 15:23:26 +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-dropzone": "^3.9.2",
"react-icons": "^2.2.3",
"react-overlays": "^0.6.12",
"remarkable": "^1.7.1"
},
"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 Collapse from 'react-bootstrap/lib/Collapse'
import Panel from 'react-bootstrap/lib/Panel'
import AutoAffix from 'react-overlays/lib/AutoAffix';
import ParseResult from '../models/ParseResult.jsx';
@ -115,88 +116,90 @@ export default class DebugView extends React.Component {
return (
<div>
<table>
<tbody>
{ lastTransformation.showPageSelection() &&
<AutoAffix viewportOffsetTop={ 15 } container={ this }>
<table>
<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>
<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>
<ButtonToolbar>
<ButtonGroup>
<Button className={ currentTransformation > 0 ? 'btn-round' : 'btn-round disabled' } onClick={ this.prevTransformation.bind(this) }>
← Previous
</Button>
</ButtonGroup>
<ButtonGroup>
{ ' ' }
<Button className={ currentTransformation < transformations.length - 1 ? 'btn-round' : 'btn-round disabled' } onClick={ this.nextTransformation.bind(this) }>
Next →
</Button>
</ButtonGroup>
<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', textAlign: 'left' } }>
<td style={ { padding: '5px' } }>
<Label bsStyle="info">
Pages
Transformations
{ ' - ' + currentTransformation + ' / ' + (transformations.length - 1) }
</Label>
</td>
</tr> }
<tr>
<td>
<ButtonToolbar>
<ButtonGroup>
<Button className={ currentTransformation > 0 ? 'btn-round' : 'btn-round disabled' } onClick={ this.prevTransformation.bind(this) }>
← Previous
</Button>
</ButtonGroup>
<ButtonGroup>
{ ' ' }
<Button className={ currentTransformation < transformations.length - 1 ? 'btn-round' : 'btn-round disabled' } onClick={ this.nextTransformation.bind(this) }>
Next →
</Button>
</ButtonGroup>
<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>
</tr>
<tr>
<td>
<Collapse in={ this.state.showStatistics }>
<Panel bsStyle="default">
<ul>
{ statisticsAsList }
</ul>
</Panel>
</Collapse>
</td>
</tr>
</tbody>
</table>
</AutoAffix>
{ !this.state.showStatistics &&
<hr style={ { marginTop: '5px' } } /> }
<ul>