Arrow revealer

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

@@ -0,0 +1,21 @@
+import { h, Component } from 'preact';
+import * as style from './style.css';
+import 'add-css:./style.css';
+import { Arrow } from '../../../icons';
+
+interface Props extends preact.JSX.HTMLAttributes {}
+interface State {}
+
+export default class Revealer extends Component<Props, State> {
+  render(props: Props) {
+    return (
+      <div class={style.checkbox}>
+        {/* @ts-ignore - TS bug https://github.com/microsoft/TypeScript/issues/16019 */}
+        <input class={style.realCheckbox} type="checkbox" {...props} />
+        <div class={style.arrow}>
+          <Arrow />
+        </div>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,29 @@
+.checkbox {
+  display: inline-block;
+  position: relative;
+}
+
+.arrow {
+  width: 10px;
+  height: 10px;
+  fill: var(--white);
+  transition: transform 200ms ease;
+  transform: rotate(-90deg);
+
+  svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+}
+
+.real-checkbox {
+  top: 0;
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+
+  &:checked + .arrow {
+    transform: none;
+  }
+}

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

@@ -1,7 +1,6 @@
 import { h, Component } from 'preact';
 import * as style from './style.css';
 import 'add-css:./style.css';
-import { UncheckedIcon, CheckedIcon } from '../../../icons';
 
 interface Props extends preact.JSX.HTMLAttributes {}
 interface State {}

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

@@ -27,7 +27,7 @@
   display: grid;
   align-items: center;
   grid-template-columns: 87px 1fr;
-  grid-gap: 0.7em;
+  gap: 0.7em;
   padding: 10px var(--horizontal-padding);
 }
 
@@ -36,10 +36,16 @@
   display: grid;
   align-items: center;
   grid-template-columns: 1fr auto;
-  grid-gap: 0.7em;
+  gap: 0.7em;
   padding: 10px var(--horizontal-padding);
 }
 
+.option-reveal {
+  composes: option-toggle;
+  grid-template-columns: auto 1fr;
+  gap: 1em;
+}
+
 .option-one-cell {
   display: grid;
   grid-template-columns: 1fr;

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

@@ -8,6 +8,7 @@ import Expander from 'client/lazy-app/Compress/Options/Expander';
 import Select from 'client/lazy-app/Compress/Options/Select';
 import Range from 'client/lazy-app/Compress/Options/Range';
 import linkState from 'linkstate';
+import Revealer from 'client/lazy-app/Compress/Options/Revealer';
 
 export const encode = (
   signal: AbortSignal,
@@ -288,12 +289,12 @@ export class Options extends Component<Props, State> {
             </div>
           )}
         </Expander>
-        <label class={style.optionToggle}>
+        <label class={style.optionReveal}>
-          Show advanced settings
+          <Revealer
-          <Checkbox
             checked={showAdvanced}
             onChange={linkState(this, 'showAdvanced')}
           />
+          Advanced settings
         </label>
         <Expander>
           {showAdvanced && (

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

@@ -12,6 +12,7 @@ import Range from 'client/lazy-app/Compress/Options/Range';
 import Checkbox from 'client/lazy-app/Compress/Options/Checkbox';
 import Expander from 'client/lazy-app/Compress/Options/Expander';
 import Select from 'client/lazy-app/Compress/Options/Select';
+import Revealer from 'client/lazy-app/Compress/Options/Revealer';
 
 export function encode(
   signal: AbortSignal,
@@ -116,12 +117,12 @@ export class Options extends Component<Props, State> {
             Quality:
           </Range>
         </div>
-        <label class={style.optionToggle}>
+        <label class={style.optionReveal}>
-          Show advanced settings
+          <Revealer
-          <Checkbox
             checked={showAdvanced}
             onChange={linkState(this, 'showAdvanced')}
           />
+          Advanced settings
         </label>
         <Expander>
           {showAdvanced ? (

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

@@ -12,6 +12,7 @@ import Range from 'client/lazy-app/Compress/Options/Range';
 import Checkbox from 'client/lazy-app/Compress/Options/Checkbox';
 import Expander from 'client/lazy-app/Compress/Options/Expander';
 import Select from 'client/lazy-app/Compress/Options/Select';
+import Revealer from 'client/lazy-app/Compress/Options/Revealer';
 
 export const encode = (
   signal: AbortSignal,
@@ -224,12 +225,12 @@ export class Options extends Component<Props, State> {
             Quality:
           </Range>
         </div>
-        <label class={style.optionToggle}>
+        <label class={style.optionReveal}>
-          Show advanced settings
+          <Revealer
-          <Checkbox
             checked={showAdvanced}
             onChange={linkState(this, 'showAdvanced')}
           />
+          Advanced settings
         </label>
         <Expander>
           {showAdvanced ? (

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

@@ -9,6 +9,7 @@ import Select from 'client/lazy-app/Compress/Options/Select';
 import Checkbox from 'client/lazy-app/Compress/Options/Checkbox';
 import Expander from 'client/lazy-app/Compress/Options/Expander';
 import linkState from 'linkstate';
+import Revealer from 'client/lazy-app/Compress/Options/Revealer';
 
 export const encode = (
   signal: AbortSignal,
@@ -212,12 +213,12 @@ export class Options extends Component<Props, State> {
                   </div>
                 )}
               </Expander>
-              <label class={style.optionToggle}>
+              <label class={style.optionReveal}>
-                Show advanced settings
+                <Revealer
-                <Checkbox
                   checked={showAdvanced}
                   onChange={linkState(this, 'showAdvanced')}
                 />
+                Advanced settings
               </label>
               <Expander>
                 {showAdvanced && (