Commit 2678d552 authored by Audrey Hamelers's avatar Audrey Hamelers
Browse files
parent dec1afca
Pipeline #12917 passed with stages
in 5 minutes and 42 seconds
import React from 'react'
import styled, { createGlobalStyle } from 'styled-components'
import { Icon, Button } from '@pubsweet/ui'
import { th, darken, lighten } from '@pubsweet/ui-toolkit'
import { Icon, Action } from '@pubsweet/ui'
import { th } from '@pubsweet/ui-toolkit'
import * as PDFJS from 'pdfjs-dist/webpack.js'
import Viewer from './Viewer'
......@@ -31,30 +31,19 @@ const OuterContainer = styled.div`
}
`
const Toolbar = styled.div`
height: calc(${th('gridUnit')} * 3);
background-color: ${darken('colorBackgroundHue', 1)};
box-shadow: 0 0 8px ${darken('colorBackgroundHue', 30)};
background-color: ${th('colorBackgroundHue')};
border-bottom: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
height: calc(${th('gridUnit')} * 6);
padding: ${th('gridUnit')};
`
const Zoom = styled(Button)`
const Zoom = styled(Action)`
display: inline-flex;
vertical-align: top;
margin: 0;
height: calc(${th('gridUnit')} * 3);
padding: 0;
min-width: 0;
line-height: calc(${th('gridUnit')} * 3);
border: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
background-color: ${th('colorBackgroundHue')};
font-weight: normal;
color: ${th('colorText')};
font-size: ${th('fontSizeBaseSmall')}
&:hover {
background-color: ${lighten('colorBackgroundHue', 4)};
}
align-items: center;
@media screen and (max-width: 450px) {
.hide-mobile {
display: none;
......@@ -65,9 +54,6 @@ const Info = styled.span`
display: inline-block;
vertical-align: top;
margin: 0 ${th('gridUnit')};
height: calc(${th('gridUnit')} * 3);
line-height: calc(${th('gridUnit')} * 3);
font-size: ${th('fontSizeBaseSmall')};
`
class PDFViewer extends React.Component {
state = {
......@@ -159,29 +145,37 @@ class PDFViewer extends React.Component {
</Info>
)}
<div>
<Zoom onClick={this.zoomOut}>
<Icon size={2}>minus</Icon>
<Zoom onClick={this.zoomOut} title="Zoom out">
<Icon color="currentColor" size={2.5}>
minus-circle
</Icon>
</Zoom>
<Zoom onClick={this.zoomIn}>
<Icon size={2}>plus</Icon>
<Zoom onClick={this.zoomIn} title="Zoom in">
<Icon color="currentColor" size={2.5}>
plus-circle
</Icon>
</Zoom>
<Info>{(scale * 100).toFixed()}%</Info>
</div>
<div>
<Zoom
onClick={() => this.setState({ scale: 0 })}
style={{ padding: '0 4px', marginRight: '4px' }}
>
Fit&nbsp;<span className="hide-mobile">to width</span>
<Icon color="currentColor" size={2.5}>
crosshair
</Icon>
<span className="hide-mobile">Zoom to fit</span>
</Zoom>
</div>
<div>
<Zoom
onClick={() => this.setState({ fullscreen: !fullscreen })}
style={{ padding: '0 4px' }}
>
<Icon color="currentColor" size={2.5}>
{fullscreen ? 'minimize' : 'maximize'}
</Icon>
<span className="hide-mobile">
{fullscreen ? 'Exit full screen' : 'Full screen'}
</span>
<Icon size={2}>{fullscreen ? 'minimize' : 'maximize'}</Icon>
</Zoom>
</div>
</Toolbar>
......
......@@ -10,7 +10,7 @@ import 'pdfjs-dist/web/pdf_viewer.css'
import Loading from './Loading'
const PDFPage = styled.div`
margin: ${th('gridUnit')} auto;
margin: 0 auto;
.page {
margin 0 auto;
position: relative;
......@@ -23,6 +23,9 @@ const PDFPage = styled.div`
position: absolute !important;
}
}
& + div {
margin-top: calc(${th('gridUnit')} * 2);
}
`
class Page extends React.Component {
state = {
......
......@@ -8,7 +8,7 @@ const Pane = styled.div`
text-align: center;
max-width: 100%;
box-sizing: border-box;
height: calc(100vh - (${th('gridUnit')} * 3));
height: calc(100vh - (${th('gridUnit')} * 6));
overflow: auto;
`
......
......@@ -76,7 +76,7 @@ export const PanelContent = styled.div`
}
.pdf-viewer-pane {
overflow: auto;
height: calc(100% - (${th('gridUnit')} * 3));
height: calc(100% - (${th('gridUnit')} * 6));
padding: calc(${th('gridUnit')} / 2) 0;
}
#html-preview {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment