From bf8b78657d147e51e03bb1ac11fe759b4ea63a71 Mon Sep 17 00:00:00 2001
From: Jake Archibald <jaffathecake@gmail.com>
Date: Mon, 7 Dec 2020 14:19:01 +0000
Subject: [PATCH] Arrow revealer

---
 .../Compress/Options/Revealer/index.tsx       | 21 ++++++++++++++
 .../Compress/Options/Revealer/style.css       | 29 +++++++++++++++++++
 .../Compress/Options/Toggle/index.tsx         |  1 -
 .../lazy-app/Compress/Options/style.css       | 10 +++++--
 src/features/encoders/avif/client/index.tsx   |  7 +++--
 .../encoders/mozJPEG/client/index.tsx         |  7 +++--
 src/features/encoders/webP/client/index.tsx   |  7 +++--
 src/features/encoders/wp2/client/index.tsx    |  7 +++--
 8 files changed, 74 insertions(+), 15 deletions(-)
 create mode 100644 src/client/lazy-app/Compress/Options/Revealer/index.tsx
 create mode 100644 src/client/lazy-app/Compress/Options/Revealer/style.css

diff --git a/src/client/lazy-app/Compress/Options/Revealer/index.tsx b/src/client/lazy-app/Compress/Options/Revealer/index.tsx
new file mode 100644
index 00000000..a28dd5fb
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/src/client/lazy-app/Compress/Options/Revealer/style.css b/src/client/lazy-app/Compress/Options/Revealer/style.css
new file mode 100644
index 00000000..a1c250bd
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/client/lazy-app/Compress/Options/Toggle/index.tsx b/src/client/lazy-app/Compress/Options/Toggle/index.tsx
index c484d833..48411cb6 100644
--- a/src/client/lazy-app/Compress/Options/Toggle/index.tsx
+++ b/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 {}
diff --git a/src/client/lazy-app/Compress/Options/style.css b/src/client/lazy-app/Compress/Options/style.css
index 3719a345..d0f5e4b9 100644
--- a/src/client/lazy-app/Compress/Options/style.css
+++ b/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;
diff --git a/src/features/encoders/avif/client/index.tsx b/src/features/encoders/avif/client/index.tsx
index f1ec3839..f7d0316b 100644
--- a/src/features/encoders/avif/client/index.tsx
+++ b/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}>
-          Show advanced settings
-          <Checkbox
+        <label class={style.optionReveal}>
+          <Revealer
             checked={showAdvanced}
             onChange={linkState(this, 'showAdvanced')}
           />
+          Advanced settings
         </label>
         <Expander>
           {showAdvanced && (
diff --git a/src/features/encoders/mozJPEG/client/index.tsx b/src/features/encoders/mozJPEG/client/index.tsx
index a9383299..780e5cb3 100644
--- a/src/features/encoders/mozJPEG/client/index.tsx
+++ b/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}>
-          Show advanced settings
-          <Checkbox
+        <label class={style.optionReveal}>
+          <Revealer
             checked={showAdvanced}
             onChange={linkState(this, 'showAdvanced')}
           />
+          Advanced settings
         </label>
         <Expander>
           {showAdvanced ? (
diff --git a/src/features/encoders/webP/client/index.tsx b/src/features/encoders/webP/client/index.tsx
index 726b3e16..daa5dc0a 100644
--- a/src/features/encoders/webP/client/index.tsx
+++ b/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}>
-          Show advanced settings
-          <Checkbox
+        <label class={style.optionReveal}>
+          <Revealer
             checked={showAdvanced}
             onChange={linkState(this, 'showAdvanced')}
           />
+          Advanced settings
         </label>
         <Expander>
           {showAdvanced ? (
diff --git a/src/features/encoders/wp2/client/index.tsx b/src/features/encoders/wp2/client/index.tsx
index 3f873924..a7c4953e 100644
--- a/src/features/encoders/wp2/client/index.tsx
+++ b/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}>
-                Show advanced settings
-                <Checkbox
+              <label class={style.optionReveal}>
+                <Revealer
                   checked={showAdvanced}
                   onChange={linkState(this, 'showAdvanced')}
                 />
+                Advanced settings
               </label>
               <Expander>
                 {showAdvanced && (