57 lines
2.4 KiB
HTML
57 lines
2.4 KiB
HTML
|
|
||
|
|
<template name="SelectImageDialog">
|
||
|
|
<div id="selectImageDialog" class="modalContent">
|
||
|
|
<!--<span class="modalClose">×</span>-->
|
||
|
|
<div class="dialog">
|
||
|
|
<!--<span class="modalClose close">×</span>-->
|
||
|
|
<div class="leftControls">
|
||
|
|
<div class="controlContainer" style="visibility: {{#if image}}visible{{else}}hidden{{/if}}">
|
||
|
|
<h1>Original Size</h1>
|
||
|
|
<div>Width: {{originalWidth}}, Height: {{originalHeight}}</div>
|
||
|
|
<h1>Width</h1>
|
||
|
|
<div>
|
||
|
|
<a class="leftArrow widthLess"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
|
||
|
|
<input class="number width" type="number" min="1" value="{{currentWidth}}"/>
|
||
|
|
<a class="rightArrow widthMore"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
|
||
|
|
</div>
|
||
|
|
<h1>Height</h1>
|
||
|
|
<div>
|
||
|
|
<a class="leftArrow heightLess"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
|
||
|
|
<input class="number height" type="number" min="1" value="{{currentHeight}}"/>
|
||
|
|
<a class="rightArrow heightMore"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
|
||
|
|
</div>
|
||
|
|
<h1>Compression Level</h1>
|
||
|
|
<div>
|
||
|
|
<a class="leftArrow compressionLess"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
|
||
|
|
<input class="number compression" type="number" min="0" max="10" value="{{currentCompression}}"/>
|
||
|
|
<a class="rightArrow compressionMore"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label class="checkContainer">
|
||
|
|
<input class="lossyCompression" type="checkbox" checked="{{#if lossyCompression}}checked{{else}}{{/if}}"/>
|
||
|
|
<i class="fa fa-square-o unchecked"></i>
|
||
|
|
<i class="fa fa-check-square-o checked"></i>
|
||
|
|
Lossy Compression
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
Size Estimate: {{compressedSize}}
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label class="checkContainer">
|
||
|
|
<input class="previewCompression" type="checkbox" checked="{{#if previewCompression}}checked{{else}}{{/if}}"/>
|
||
|
|
<i class="fa fa-square-o unchecked"></i>
|
||
|
|
<i class="fa fa-check-square-o checked"></i>
|
||
|
|
Preview Compressed Image
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="canvasContainer">
|
||
|
|
<div class="canvasWrapper"><canvas class="insertImageCanvas empty"></canvas></div>
|
||
|
|
<a class="close"><i class="fa fa-times"></i></a>
|
||
|
|
<a class="select" style="visibility: {{#if image}}visible{{else}}hidden{{/if}}"><i class="fa fa-check"></i></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|