Changing checkbox position

src/client/lazy-app/Compress/Options/index.tsx

@@ -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 ? (

src/client/lazy-app/Compress/Options/style.css

@@ -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);

src/features/encoders/avif/client/index.tsx

@@ -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 && (

src/features/encoders/jxl/client/index.tsx

@@ -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

src/features/encoders/mozJPEG/client/index.tsx

@@ -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

src/features/encoders/webP/client/index.tsx

@@ -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>
     );

src/features/encoders/wp2/client/index.tsx

@@ -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>
                 )}

src/features/processors/resize/client/index.tsx

@@ -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 : (