Hide unusable stuff when no image is selected
This commit is contained in:
parent
a3d1f33969
commit
44ba7d338d
|
@ -266,10 +266,6 @@ function Converter({
|
|||
grid: gridData,
|
||||
scaling: scaleData,
|
||||
});
|
||||
} else {
|
||||
const output = document.getElementById('imgoutput');
|
||||
output.width = 0;
|
||||
output.height = 0;
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -591,32 +587,37 @@ function Converter({
|
|||
</div>
|
||||
)
|
||||
: null}
|
||||
<p id="qprog">Select an Image</p>
|
||||
<p>
|
||||
<canvas
|
||||
id="imgoutput"
|
||||
style={{ width: '80%', imageRendering: 'crisp-edges' }}
|
||||
/>
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={downloadOutput}
|
||||
>
|
||||
Download Template
|
||||
</button>
|
||||
{(typeof ClipboardItem === 'undefined')
|
||||
? null
|
||||
: (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const output = document.getElementById('imgoutput');
|
||||
copyCanvasToClipboard(output);
|
||||
}}
|
||||
>
|
||||
Copy to Clipboard
|
||||
</button>
|
||||
)}
|
||||
{(selectedFile)
|
||||
? (
|
||||
<div>
|
||||
<p id="qprog">...</p>
|
||||
<p>
|
||||
<canvas
|
||||
id="imgoutput"
|
||||
style={{ width: '80%', imageRendering: 'crisp-edges' }}
|
||||
/>
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={downloadOutput}
|
||||
>
|
||||
Download Template
|
||||
</button>
|
||||
{(typeof ClipboardItem === 'undefined')
|
||||
? null
|
||||
: (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const output = document.getElementById('imgoutput');
|
||||
copyCanvasToClipboard(output);
|
||||
}}
|
||||
>
|
||||
Copy to Clipboard
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user