From 91d165cab915e94aadaaf29b9e18a1f42a888f56 Mon Sep 17 00:00:00 2001
From: Jake Archibald <jaffathecake@gmail.com>
Date: Thu, 18 Oct 2018 08:17:39 +0100
Subject: [PATCH] Custom select elements & more form work

---
 src/codecs/imagequant/options.tsx             | 63 +++++++++++--------
 src/codecs/resize/options.tsx                 | 11 ++--
 src/components/Options/index.tsx              | 43 ++++++-------
 src/components/Options/style.scss             | 11 +++-
 .../Output/custom-els/TwoUp/styles.css        |  2 +-
 src/components/expander/index.tsx             |  4 +-
 src/components/expander/style.scss            |  1 -
 src/components/select/index.tsx               | 16 +++++
 src/components/select/style.scss              | 24 +++++++
 9 files changed, 119 insertions(+), 56 deletions(-)
 create mode 100644 src/components/select/index.tsx
 create mode 100644 src/components/select/style.scss

diff --git a/src/codecs/imagequant/options.tsx b/src/codecs/imagequant/options.tsx
index 82eb82bd..6ae1fda2 100644
--- a/src/codecs/imagequant/options.tsx
+++ b/src/codecs/imagequant/options.tsx
@@ -2,6 +2,9 @@ import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
 import { inputFieldValueAsNumber, konami } from '../../lib/util';
 import { QuantizeOptions } from './processor-meta';
+import * as style from '../../components/options/style.scss';
+import Expander from '../../components/expander';
+import Select from '../../components/select';
 
 const konamiPromise = konami();
 
@@ -28,8 +31,10 @@ export default class QuantizerOptions extends Component<Props, State> {
     const form = (event.currentTarget as HTMLInputElement).closest('form') as HTMLFormElement;
 
     const options: QuantizeOptions = {
-      zx: inputFieldValueAsNumber(form.zx),
-      maxNumColors: inputFieldValueAsNumber(form.maxNumColors),
+      zx: form.zx ? inputFieldValueAsNumber(form.zx) : this.props.options.zx,
+      maxNumColors: form.maxNumColors
+        ? inputFieldValueAsNumber(form.maxNumColors)
+        : this.props.options.maxNumColors,
       dither: inputFieldValueAsNumber(form.dither),
     };
     this.props.onChange(options);
@@ -37,29 +42,37 @@ export default class QuantizerOptions extends Component<Props, State> {
 
   render({ options }: Props, { extendedSettings }: State) {
     return (
-      <form>
-        <label style={{ display: extendedSettings ? '' : 'none' }}>
-          Type:
-          <select
-            name="zx"
-            value={'' + options.zx}
-            onChange={this.onChange}
-          >
-            <option value="0">Standard</option>
-            <option value="1">ZX</option>
-          </select>
-        </label>
-        <label style={{ display: options.zx ? 'none' : '' }}>
-          Palette Colors:
-          <range-input
-            name="maxNumColors"
-            min="2"
-            max="256"
-            value={'' + options.maxNumColors}
-            onChange={this.onChange}
-          />
-        </label>
-        <label>
+      <form class={style.optionsSection}>
+        <Expander>
+          {extendedSettings ?
+            <label class={style.optionTextFirst}>
+              Type:
+              <Select
+                name="zx"
+                value={'' + options.zx}
+                onChange={this.onChange}
+              >
+                <option value="0">Standard</option>
+                <option value="1">ZX</option>
+              </Select>
+            </label>
+          : null}
+        </Expander>
+        <Expander>
+          {options.zx ? null :
+            <label class={style.optionTextFirst}>
+              Colors:
+              <range-input
+                name="maxNumColors"
+                min="2"
+                max="256"
+                value={'' + options.maxNumColors}
+                onChange={this.onChange}
+              />
+            </label>
+          }
+        </Expander>
+        <label class={style.optionTextFirst}>
           Dithering:
           <range-input
             name="dither"
diff --git a/src/codecs/resize/options.tsx b/src/codecs/resize/options.tsx
index 02e2023d..1a0b5896 100644
--- a/src/codecs/resize/options.tsx
+++ b/src/codecs/resize/options.tsx
@@ -6,6 +6,7 @@ import { ResizeOptions } from './processor-meta';
 import * as style from '../../components/options/style.scss';
 import Checkbox from '../../components/checkbox';
 import Expander from '../../components/expander';
+import Select from '../../components/select';
 
 interface Props {
   isVector: Boolean;
@@ -73,7 +74,7 @@ export default class ResizerOptions extends Component<Props, State> {
       <form ref={linkRef(this, 'form')} class={style.optionsSection}>
         <label class={style.optionTextFirst}>
           Method:
-          <select
+          <Select
             name="resizeMethod"
             value={options.method}
             onChange={this.onChange}
@@ -83,12 +84,13 @@ export default class ResizerOptions extends Component<Props, State> {
             <option value="browser-low">Browser low quality</option>
             <option value="browser-medium">Browser medium quality</option>
             <option value="browser-high">Browser high quality</option>
-          </select>
+          </Select>
         </label>
         <label class={style.optionTextFirst}>
           Width:
           <input
             required
+            class={style.textField}
             name="width"
             type="number"
             min="1"
@@ -101,6 +103,7 @@ export default class ResizerOptions extends Component<Props, State> {
           Height:
           <input
             required
+            class={style.textField}
             name="height"
             type="number"
             min="1"
@@ -120,14 +123,14 @@ export default class ResizerOptions extends Component<Props, State> {
           {maintainAspect ? null :
             <label class={style.optionTextFirst}>
               Fit method:
-              <select
+              <Select
                 name="fitMethod"
                 value={options.fitMethod}
                 onChange={this.onChange}
               >
                 <option value="stretch">Stretch</option>
                 <option value="cover">Cover</option>
-              </select>
+              </Select>
             </label>
           }
         </Expander>
diff --git a/src/components/Options/index.tsx b/src/components/Options/index.tsx
index 45f3cf01..56070888 100644
--- a/src/components/Options/index.tsx
+++ b/src/components/Options/index.tsx
@@ -141,7 +141,7 @@ export default class Options extends Component<Props, State> {
 
     return (
       <div class={style.options}>
-        <h2 class={style.optionsTitle}>Process</h2>
+        <h2 class={style.optionsTitle}>Edit</h2>
         <label class={style.sectionEnabler}>
           <Checkbox
             name="resize.enable"
@@ -151,34 +151,31 @@ export default class Options extends Component<Props, State> {
           Resize
         </label>
         <Expander>
-          {preprocessorState.resize.enabled
-            ?
-              <ResizeOptionsComponent
-                isVector={Boolean(source && source.vectorImage)}
-                aspect={source ? (source.data.width / source.data.height) : 1}
-                options={preprocessorState.resize}
-                onChange={this.onResizeOptionsChange}
-              />
-            : null
-          }
+          {preprocessorState.resize.enabled ?
+            <ResizeOptionsComponent
+              isVector={Boolean(source && source.vectorImage)}
+              aspect={source ? (source.data.width / source.data.height) : 1}
+              options={preprocessorState.resize}
+              onChange={this.onResizeOptionsChange}
+            />
+          : null}
         </Expander>
-        {/*
-        <label class={style.toggle}>
-          <input
+        <label class={style.sectionEnabler}>
+          <Checkbox
             name="quantizer.enable"
-            type="checkbox"
             checked={!!preprocessorState.quantizer.enabled}
             onChange={this.onPreprocessorEnabledChange}
           />
-          Quantize
+          Reduce palette
         </label>
-        {preprocessorState.quantizer.enabled &&
-          <QuantizerOptionsComponent
-            options={preprocessorState.quantizer}
-            onChange={this.onQuantizerOptionsChange}
-          />
-        }
-        */}
+        <Expander>
+          {preprocessorState.quantizer.enabled ?
+            <QuantizerOptionsComponent
+              options={preprocessorState.quantizer}
+              onChange={this.onQuantizerOptionsChange}
+            />
+          : null}
+        </Expander>
 
         {/*<section class={style.picker}>
           {encoderSupportMap ?
diff --git a/src/components/Options/style.scss b/src/components/Options/style.scss
index 9d5f4af9..d378b52b 100644
--- a/src/components/Options/style.scss
+++ b/src/components/Options/style.scss
@@ -18,6 +18,7 @@ $horizontalPadding: 15px;
 
 .option-text-first {
   display: grid;
+  align-items: center;
   grid-template-columns: 87px 1fr;
   grid-gap: 0.7em;
   padding: 10px $horizontalPadding;
@@ -41,4 +42,12 @@ $horizontalPadding: 15px;
   background: rgba(0, 0, 0, 0.7);
 }
 
-
+.text-field {
+  background: #fff;
+  font: inherit;
+  border: none;
+  padding: 2px 0 2px 10px;
+  width: 100%;
+  box-sizing: border-box;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
+}
diff --git a/src/components/Output/custom-els/TwoUp/styles.css b/src/components/Output/custom-els/TwoUp/styles.css
index 8111754f..d40b8735 100644
--- a/src/components/Output/custom-els/TwoUp/styles.css
+++ b/src/components/Output/custom-els/TwoUp/styles.css
@@ -52,7 +52,7 @@ two-up[legacy-clip-compat] > :not(.two-up-handle) {
   height: calc(var(--thumb-size) * 0.9);
   background: var(--thumb-background);
   border: 1px solid rgba(0,0,0,0.2);
-  border-radius: calc(var(--thumb-size) * 0.08);
+  border-radius: var(--thumb-size);
   box-shadow: 0 1px 4px rgba(0,0,0,0.1);
   color: var(--thumb-color);
   box-sizing: border-box;
diff --git a/src/components/expander/index.tsx b/src/components/expander/index.tsx
index b7935110..49099cc2 100644
--- a/src/components/expander/index.tsx
+++ b/src/components/expander/index.tsx
@@ -55,14 +55,16 @@ export default class Expander extends Component<Props, State> {
     // Set the currently rendered height absolutely.
     this.el!.style.height = this.lastElHeight + 'px';
     this.el!.style.transition = '';
+    this.el!.style.overflow = 'hidden';
     // Force a style calc so the browser picks up the start value.
     getComputedStyle(this.el!).height;
     // Animate to the new height.
     this.el!.style.height = newHeight + 'px';
 
     const listener = () => {
-      // Unset the height, so element changes do the right thing.
+      // Unset the height & overflow, so element changes do the right thing.
       this.el!.style.height = '';
+      this.el!.style.overflow = '';
       this.el!.removeEventListener('transitionend', listener);
       this.el!.removeEventListener('transitioncancel', listener);
       if (this.state.outgoingChildren[0]) {
diff --git a/src/components/expander/style.scss b/src/components/expander/style.scss
index 2f0dabb9..f72985b7 100644
--- a/src/components/expander/style.scss
+++ b/src/components/expander/style.scss
@@ -1,5 +1,4 @@
 .expander {
-  overflow: hidden;
   transition: height 200ms ease-in-out;
 }
 
diff --git a/src/components/select/index.tsx b/src/components/select/index.tsx
new file mode 100644
index 00000000..a58fd068
--- /dev/null
+++ b/src/components/select/index.tsx
@@ -0,0 +1,16 @@
+import { h, Component } from 'preact';
+import * as style from './style.scss';
+
+interface Props extends JSX.HTMLAttributes {}
+interface State {}
+
+export default class Select extends Component<Props, State> {
+  render(props: Props) {
+    return (
+      <div class={style.select}>
+        <select class={style.nativeSelect} {...props}/>
+        <svg class={style.arrow} viewBox="0 0 10 5"><path d="M0 0l5 5 5-5z"/></svg>
+      </div>
+    );
+  }
+}
diff --git a/src/components/select/style.scss b/src/components/select/style.scss
new file mode 100644
index 00000000..1f14154f
--- /dev/null
+++ b/src/components/select/style.scss
@@ -0,0 +1,24 @@
+.select {
+  position: relative;
+}
+
+.native-select {
+  background: #2f2f2f;
+  border-radius: 4px;
+  font: inherit;
+  padding: 4px 25px 4px 10px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border: none;
+  color: #fff;
+  width: 100%;
+}
+
+.arrow {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  fill: #fff;
+  width: 10px;
+}