external-repos/squoosh
1
0
Fork 1
mirror of https://github.com/GoogleChromeLabs/squoosh.git synced 2025-11-18 11:39:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Design review fixes (#172)

Browse Source 
* Design review fixes

* Adding styles for mozjpeg & fixing some merge errors
This commit is contained in:
Jason Miller
2018-10-02 15:53:21 +02:00
committed by Jake Archibald
parent b25d1eaf86
commit 37f5c0dd76
7 changed files with 151 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/codecs/mozjpeg/options.tsx
View File

@@ -1,6 +1,7 @@
import { h, Component } from 'preact';
import { bind, inputFieldChecked, inputFieldValueAsNumber } from '../../lib/util';
import { EncodeOptions, MozJpegColorSpace } from './encoder';
import '../../components/output/custom-els/RangeInput';
type Props = {
options: EncodeOptions,
@@ -40,9 +41,8 @@ export default class MozJPEGEncoderOptions extends Component<Props, {}> {
<form>
<label>
Quality:
<input
<range-input
name="quality"
type="range"
min="0"
max="100"
value={'' + options.quality}
@@ -56,7 +56,7 @@ export default class MozJPEGEncoderOptions extends Component<Props, {}> {
checked={options.baseline}
onChange={this.onChange}
/>
Baseline (worse but legacy-compatible)
<span>Baseline (worse but legacy-compatible)</span>
</label>
<label style={{ display: options.baseline ? 'none' : '' }}>
<input
@@ -65,7 +65,7 @@ export default class MozJPEGEncoderOptions extends Component<Props, {}> {
checked={options.progressive}
onChange={this.onChange}
/>
Progressive multi-pass rendering
<span>Progressive multi-pass rendering</span>
</label>
<label style={{ display: options.baseline ? '' : 'none' }}>
<input
@@ -74,13 +74,12 @@ export default class MozJPEGEncoderOptions extends Component<Props, {}> {
checked={options.optimize_coding}
onChange={this.onChange}
/>
Optimize Huffman table
<span>Optimize Huffman table</span>
</label>
<label>
Smoothing:
<input
<range-input
name="smoothing"
type="range"
min="0"
max="100"
value={'' + options.smoothing}
@@ -124,7 +123,7 @@ export default class MozJPEGEncoderOptions extends Component<Props, {}> {
checked={options.trellis_multipass}
onChange={this.onChange}
/>
Consider multiple scans during trellis quantization
<span>Consider multiple scans during trellis quantization</span>
</label>
<label style={{ display: options.trellis_multipass ? '' : 'none' }}>
<input
@@ -133,7 +132,7 @@ export default class MozJPEGEncoderOptions extends Component<Props, {}> {
checked={options.trellis_opt_zero}
onChange={this.onChange}
/>
Optimize runs of zero blocks
<span>Optimize runs of zero blocks</span>
</label>
<label>
<input
@@ -142,13 +141,12 @@ export default class MozJPEGEncoderOptions extends Component<Props, {}> {
checked={options.trellis_opt_table}
onChange={this.onChange}
/>
Optimize after trellis quantization
<span>Optimize after trellis quantization</span>
</label>
<label>
Trellis quantization passes:
<input
<range-input
name="trellis_loops"
type="range"
min="1"
max="50"
value={'' + options.trellis_loops}

32
src/codecs/webp/options.tsx
View File

@@ -2,6 +2,7 @@ import { h, Component } from 'preact';
import { bind, inputFieldCheckedAsNumber, inputFieldValueAsNumber } from '../../lib/util';
import { EncodeOptions, WebPImageHint } from './encoder';
import * as styles from './styles.scss';
import '../../components/output/custom-els/RangeInput';
type Props = {
options: EncodeOptions,
@@ -105,7 +106,7 @@ export default class WebPEncoderOptions extends Component<Props, {}> {
value={'' + WebPImageHint.WEBP_HINT_GRAPH}
onChange={this.onChange}
/>
Discrete tone image (graph, map-tile etc)
<span>Discrete tone image (graph, map-tile etc)</span>
</label>
</div>
);
@@ -135,6 +136,7 @@ export default class WebPEncoderOptions extends Component<Props, {}> {
onChange={this.onChange}
/>
</label>
<hr />
<label>
<input
name="alpha_compression"
@@ -164,16 +166,7 @@ export default class WebPEncoderOptions extends Component<Props, {}> {
onChange={this.onChange}
/>
</label>
<label>
Spacial noise shaping:
<range-input
name="sns_strength"
min="0"
max="100"
value={'' + options.sns_strength}
onChange={this.onChange}
/>
</label>
<hr />
<label>
<input
name="autofilter"
@@ -181,7 +174,7 @@ export default class WebPEncoderOptions extends Component<Props, {}> {
checked={!!options.autofilter}
onChange={this.onChange}
/>
Auto adjust filter strength
<span>Auto adjust filter strength</span>
</label>
<label>
Filter strength:
@@ -222,6 +215,7 @@ export default class WebPEncoderOptions extends Component<Props, {}> {
/>
Sharp RGB->YUV conversion
</label>
<hr />
<label>
Passes:
<range-input
@@ -232,6 +226,16 @@ export default class WebPEncoderOptions extends Component<Props, {}> {
onChange={this.onChange}
/>
</label>
<label>
Spacial noise shaping:
<range-input
name="sns_strength"
min="0"
max="100"
value={'' + options.sns_strength}
onChange={this.onChange}
/>
</label>
<label>
Preprocessing type:
<select
@@ -295,7 +299,9 @@ export default class WebPEncoderOptions extends Component<Props, {}> {
checked={!!options.exact}
onChange={this.onChange}
/>
Preserve transparent data. Otherwise, pixels with zero alpha will have RGB also zeroed.
<span>
Preserve transparent data. Otherwise, pixels with zero alpha will have RGB also zeroed.
</span>
</label>
</form>
);