1
0
Fork 0

optional cover page

This commit is contained in:
Enoch Riese 2022-08-23 11:08:40 -05:00
parent 4e8a56bfc7
commit 553ac7b25a
5 changed files with 51 additions and 127 deletions

View file

@ -15,7 +15,9 @@ const PrintLayoutSettings = props => {
props.updateGist(['_state', 'layout', 'forPrinting', 'page', 'margin'], parseInt(evt.target.value))
}
const margin = props.gist._state?.layout?.forPrinting?.page?.margin || 10
const setCoverPage = () => {
props.updateGist(['_state', 'layout', 'forPrinting', 'page', 'coverPage'], !props.layoutSettings.coverPage)
}
return (
@ -30,7 +32,9 @@ const PrintLayoutSettings = props => {
<button
key="export"
onClick={props.exportIt}
className="btn btn-primary btn-outline">
className="btn btn-primary btn-outline"
disabled={count === 0}
aria-disabled={count === 0}>
<ExportIcon className="h-6 w-6 mr-2"/>
{t('export')}
</button>
@ -43,25 +47,39 @@ const PrintLayoutSettings = props => {
</button>
</div>
</div>
<div className="flex flex-row gap-8 justify-center">
<label htmlFor="pageMargin" className="label mx-6">
<span className="mr-2">{t('pageMargin')}</span>
<input
type="range"
max={50}
min={0}
step={1}
onChange={setMargin}
value={margin}
className="range range-sm mx-2"
name="pageMargin"
/>
<div className="text-center">
<div className="flex flex-row justify-between">
<div className="flex flex-row">
<label htmlFor="pageMargin" className="label mr-6">
<span className="mr-2">{t('pageMargin')}</span>
<input
type="range"
max={50}
min={0}
step={1}
onChange={setMargin}
value={props.layoutSettings.margin}
className="range range-sm mx-2"
name="pageMargin"
/>
<div className="text-center">
<span className="text-secondary">
{margin}mm
{props.layoutSettings.margin}mm
</span>
</div>
</label>
</div>
<button
title={t('reset')}
className="btn btn-ghost btn-xs text-accent mx-2"
disabled={props.layoutSettings.margin == 10}
onClick={() => setMargin({target: {value: 10}})}
>
<ClearIcon />
</button>
</label>
<label htmlFor="coverPage" className="label">
<span className="mr-2">{t('coverPage')}</span>
<input type="checkbox" className="toggle toggle-primary" checked={props.layoutSettings.coverPage} onChange={setCoverPage}/>
</label>
</div>
<div className="flex flex-row font-bold items-center px-0 text-xl">
<PrintIcon />
<span className="ml-2">{count}</span>