ryan/squoosh
1
0
Fork 0
forked from external-repos/squoosh
Code Pull Requests Activity

Changing checkbox position

Browse Source
This commit is contained in:
Jake Archibald
2020-12-05 15:56:41 +00:00
parent 0797ce99c0
commit dc49f361ea
8 changed files with 78 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/client/lazy-app/Compress/Options/index.tsx
View File

@@ -126,12 +126,12 @@ export default class Options extends Component<Props, State> {
<div>
<h3 class={style.optionsTitle}>Edit</h3>
<label class={style.sectionEnabler}>
Resize
<Checkbox
name="resize.enable"
checked={!!processorState.resize.enabled}
onChange={this.onProcessorEnabledChange}
/>
Resize
</label>
<Expander>
{processorState.resize.enabled ? (
@@ -146,12 +146,12 @@ export default class Options extends Component<Props, State> {
</Expander>
<label class={style.sectionEnabler}>
Reduce palette
<Checkbox
name="quantize.enable"
checked={!!processorState.quantize.enabled}
onChange={this.onProcessorEnabledChange}
/>
Reduce palette
</label>
<Expander>
{processorState.quantize.enabled ? (

20
src/client/lazy-app/Compress/Options/style.css
View File

@@ -31,23 +31,23 @@
padding: 10px var(--horizontal-padding);
}
.option-toggle {
cursor: pointer;
display: grid;
align-items: center;
grid-template-columns: 1fr auto;
grid-gap: 0.7em;
padding: 10px var(--horizontal-padding);
}
.option-one-cell {
display: grid;
grid-template-columns: 1fr;
padding: 10px var(--horizontal-padding);
}
.option-input-first,
.section-enabler {
cursor: pointer;
display: grid;
align-items: center;
grid-template-columns: auto 1fr;
grid-gap: 0.7em;
padding: 10px var(--horizontal-padding);
}
.section-enabler {
composes: option-toggle;
background: var(--dark-gray);
padding: 15px var(--horizontal-padding);
border-bottom: 1px solid var(--off-black);

20
src/features/encoders/avif/client/index.tsx
View File

@@ -209,12 +209,12 @@ export class Options extends Component<Props, State> {
) {
return (
<form class={style.optionsSection} onSubmit={preventDefault}>
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Lossless
<Checkbox
checked={lossless}
onChange={this._inputChange('lossless', 'boolean')}
/>
Lossless
</label>
<Expander>
{!lossless && (
@@ -242,22 +242,22 @@ export class Options extends Component<Props, State> {
</div>
)}
</Expander>
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Separate alpha quality
<Checkbox
checked={separateAlpha}
onChange={this._inputChange('separateAlpha', 'boolean')}
/>
Separate alpha quality
</label>
<Expander>
{separateAlpha && (
<div>
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Lossless alpha
<Checkbox
checked={losslessAlpha}
onChange={this._inputChange('losslessAlpha', 'boolean')}
/>
Lossless alpha
</label>
<Expander>
{!losslessAlpha && (
@@ -288,23 +288,23 @@ export class Options extends Component<Props, State> {
</div>
)}
</Expander>
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Show advanced settings
<Checkbox
checked={showAdvanced}
onChange={linkState(this, 'showAdvanced')}
/>
Show advanced settings
</label>
<Expander>
{showAdvanced && (
<div>
{/*<label class={style.optionInputFirst}>
{/*<label class={style.optionToggle}>
Grayscale
<Checkbox
data-set-state="grayscale"
checked={grayscale}
onChange={this._inputChange('grayscale', 'boolean')}
/>
Grayscale
</label>*/}
<Expander>
{!grayscale && !lossless && (

16
src/features/encoders/jxl/client/index.tsx
View File

@@ -123,23 +123,23 @@ export class Options extends Component<Props, State> {
// gathering the data.
return (
<form class={style.optionsSection} onSubmit={preventDefault}>
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Lossless
<Checkbox
name="lossless"
checked={lossless}
onChange={this._inputChange('lossless', 'boolean')}
/>
Lossless
</label>
<Expander>
{lossless && (
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Slight loss
<Checkbox
name="slightLoss"
checked={slightLoss}
onChange={this._inputChange('slightLoss', 'boolean')}
/>
Slight loss
</label>
)}
</Expander>
@@ -157,7 +157,8 @@ export class Options extends Component<Props, State> {
Quality:
</Range>
</div>
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Auto edge filter
<Checkbox
name="autoEdgeFilter"
checked={autoEdgePreservingFilter}
@@ -166,7 +167,6 @@ export class Options extends Component<Props, State> {
'boolean',
)}
/>
Auto edge filter
</label>
<Expander>
{!autoEdgePreservingFilter && (
@@ -188,13 +188,13 @@ export class Options extends Component<Props, State> {
</div>
)}
</Expander>
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Progressive rendering
<Checkbox
name="progressive"
checked={progressive}
onChange={this._inputChange('progressive', 'boolean')}
/>
Progressive rendering
</label>
<div class={style.optionOneCell}>
<Range

36
src/features/encoders/mozJPEG/client/index.tsx
View File

@@ -116,12 +116,12 @@ export class Options extends Component<Props, State> {
Quality:
</Range>
</div>
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Show advanced settings
<Checkbox
checked={showAdvanced}
onChange={linkState(this, 'showAdvanced')}
/>
Show advanced settings
</label>
<Expander>
{showAdvanced ? (
@@ -141,13 +141,13 @@ export class Options extends Component<Props, State> {
<Expander>
{options.color_space === MozJpegColorSpace.YCbCr ? (
<div>
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Auto subsample chroma
<Checkbox
name="auto_subsample"
checked={options.auto_subsample}
onChange={this.onChange}
/>
Auto subsample chroma
</label>
<Expander>
{options.auto_subsample ? null : (
@@ -164,13 +164,13 @@ export class Options extends Component<Props, State> {
</div>
)}
</Expander>
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Separate chroma quality
<Checkbox
name="separate_chroma_quality"
checked={options.separate_chroma_quality}
onChange={this.onChange}
/>
Separate chroma quality
</label>
<Expander>
{options.separate_chroma_quality ? (
@@ -190,35 +190,35 @@ export class Options extends Component<Props, State> {
</div>
) : null}
</Expander>
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Pointless spec compliance
<Checkbox
name="baseline"
checked={options.baseline}
onChange={this.onChange}
/>
Pointless spec compliance
</label>
<Expander>
{options.baseline ? null : (
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Progressive rendering
<Checkbox
name="progressive"
checked={options.progressive}
onChange={this.onChange}
/>
Progressive rendering
</label>
)}
</Expander>
<Expander>
{options.baseline ? (
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Optimize Huffman table
<Checkbox
name="optimize_coding"
checked={options.optimize_coding}
onChange={this.onChange}
/>
Optimize Huffman table
</label>
) : null}
</Expander>
@@ -251,33 +251,33 @@ export class Options extends Component<Props, State> {
<option value="8">Peterson et al</option>
</Select>
</label>
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Trellis multipass
<Checkbox
name="trellis_multipass"
checked={options.trellis_multipass}
onChange={this.onChange}
/>
Trellis multipass
</label>
<Expander>
{options.trellis_multipass ? (
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Optimize zero block runs
<Checkbox
name="trellis_opt_zero"
checked={options.trellis_opt_zero}
onChange={this.onChange}
/>
Optimize zero block runs
</label>
) : null}
</Expander>
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Optimize after trellis quantization
<Checkbox
name="trellis_opt_table"
checked={options.trellis_opt_table}
onChange={this.onChange}
/>
Optimize after trellis quantization
</label>
<div class={style.optionOneCell}>
<Range

32
src/features/encoders/webP/client/index.tsx
View File

@@ -179,7 +179,8 @@ export class Options extends Component<Props, State> {
Slight loss:
</Range>
</div>
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Discrete tone image
{/*
Although there are 3 different kinds of image hint, webp only
seems to do something with the 'graph' type, and I don't really
@@ -190,7 +191,6 @@ export class Options extends Component<Props, State> {
checked={options.image_hint === WebPImageHint.WEBP_HINT_GRAPH}
onChange={this.onChange}
/>
Discrete tone image
</label>
</div>
);
@@ -224,23 +224,23 @@ export class Options extends Component<Props, State> {
Quality:
</Range>
</div>
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Show advanced settings
<Checkbox
checked={showAdvanced}
onChange={linkState(this, 'showAdvanced')}
/>
Show advanced settings
</label>
<Expander>
{showAdvanced ? (
<div>
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Compress alpha
<Checkbox
name="alpha_compression"
checked={!!options.alpha_compression}
onChange={this.onChange}
/>
Compress alpha
</label>
<div class={style.optionOneCell}>
<Range
@@ -264,13 +264,13 @@ export class Options extends Component<Props, State> {
Alpha filter quality:
</Range>
</div>
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Auto adjust filter strength
<Checkbox
name="autofilter"
checked={!!options.autofilter}
onChange={this.onChange}
/>
Auto adjust filter strength
</label>
<Expander>
{options.autofilter ? null : (
@@ -287,13 +287,13 @@ export class Options extends Component<Props, State> {
</div>
)}
</Expander>
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Strong filter
<Checkbox
name="filter_type"
checked={!!options.filter_type}
onChange={this.onChange}
/>
Strong filter
</label>
<div class={style.optionOneCell}>
<Range
@@ -306,13 +306,13 @@ export class Options extends Component<Props, State> {
Filter sharpness:
</Range>
</div>
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Sharp RGB→YUV conversion
<Checkbox
name="use_sharp_yuv"
checked={!!options.use_sharp_yuv}
onChange={this.onChange}
/>
Sharp RGB→YUV conversion
</label>
<div class={style.optionOneCell}>
<Range
@@ -382,24 +382,24 @@ export class Options extends Component<Props, State> {
// gathering the data.
return (
<form class={style.optionsSection} onSubmit={preventDefault}>
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Lossless
<Checkbox
name="lossless"
checked={!!options.lossless}
onChange={this.onChange}
/>
Lossless
</label>
{options.lossless
? this._losslessSpecificOptions(options)
: this._lossySpecificOptions(options)}
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Preserve transparent data
<Checkbox
name="exact"
checked={!!options.exact}
onChange={this.onChange}
/>
Preserve transparent data
</label>
</form>
);

16
src/features/encoders/wp2/client/index.tsx
View File

@@ -154,12 +154,12 @@ export class Options extends Component<Props, State> {
) {
return (
<form class={style.optionsSection} onSubmit={preventDefault}>
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Lossless
<Checkbox
checked={lossless}
onChange={this._inputChange('lossless', 'boolean')}
/>
Lossless
</label>
<Expander>
{lossless && (
@@ -190,12 +190,12 @@ export class Options extends Component<Props, State> {
Quality:
</Range>
</div>
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Separate alpha quality
<Checkbox
checked={separateAlpha}
onChange={this._inputChange('separateAlpha', 'boolean')}
/>
Separate alpha quality
</label>
<Expander>
{separateAlpha && (
@@ -212,12 +212,12 @@ export class Options extends Component<Props, State> {
</div>
)}
</Expander>
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Show advanced settings
<Checkbox
checked={showAdvanced}
onChange={linkState(this, 'showAdvanced')}
/>
Show advanced settings
</label>
<Expander>
{showAdvanced && (
@@ -278,7 +278,8 @@ export class Options extends Component<Props, State> {
<option value={Csp.kYIQ}>YIQ</option>
</Select>
</label>
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Random matrix
<Checkbox
checked={useRandomMatrix}
onChange={this._inputChange(
@@ -286,7 +287,6 @@ export class Options extends Component<Props, State> {
'boolean',
)}
/>
Random matrix
</label>
</div>
)}

12
src/features/processors/resize/client/index.tsx
View File

@@ -285,33 +285,33 @@ export class Options extends Component<Props, State> {
</label>
<Expander>
{isWorkerOptions(options) ? (
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Premultiply alpha channel
<Checkbox
name="premultiply"
checked={options.premultiply}
onChange={this.onChange}
/>
Premultiply alpha channel
</label>
) : null}
{isWorkerOptions(options) ? (
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Linear RGB
<Checkbox
name="linearRGB"
checked={options.linearRGB}
onChange={this.onChange}
/>
Linear RGB
</label>
) : null}
</Expander>
<label class={style.optionInputFirst}>
<label class={style.optionToggle}>
Maintain aspect ratio
<Checkbox
name="maintainAspect"
checked={maintainAspect}
onChange={linkState(this, 'maintainAspect')}
/>
Maintain aspect ratio
</label>
<Expander>
{maintainAspect ? null : (