Options UI (#135)

* Move gzipped size calculations into a worker and wrap it up in a `<GzipSize />` component that will also handle showing % of original size once that info is plumbed

* A couple tweaks for the app welcome (drop files) screen. We don't have mocks for this one, but this is at least a minor improvement.

* Prettier "pop" effect and styling for the drop zone/indicator.

* Styling for the quantization toggle to make it look like a disclosure triangle/button.

* Add controls bar (zoom in/out/to, background toggle). @todo: extract into its own component.

* When clicking/tapping the image area, give it focus.

* Utilities used by this PR

* Add a `two-up-handle` attribute to the handle for easier styling (classname gets mangled so it doesn't make for a good public API)

* Add a dummy comment to test netlify deploy

* Remove commented-out code.

* Fix styling of vertical split (which as it turns out is slightly different in the mocks anyway)

* Use a composited overlay for the dark background instead of animating background-color

* Move grayscale styling into `<two-up>` by default, then set colors via custom properties

* Remove commented-out svg fill

* Remove dummy comment

* Change `<GzipSize>` to be `<FileSize>`, add `compress` option that lets us show gzipped sizes later if we need. Defaults to `false`, and the gzip worker is only lazily instantiated the first time a compressed size calculation is requested.

* Dependency updates

* Remove color animations from dnd overlay

* Don't use a cyclical import for EncodedImage, instead just specify the types of the properties we Options actually uses.

* Pass source image through to FileSize component so it can compute delta

* Stylize size display with colors based on delta amount/direction

* Remove box-shadow animation.

* Simplify font stack

* Remove commented out code

* Remove gzip compression from size component

* Remove memoization bits

* Use specific flattend props instead of passing large context objects around.

* Remove unused packages.

* Remove unreachable String case in FileSize, and omit redundant File type

* Simplify calculateSize()

* Fix types for FileSize!

* Remove FileSize title

* Make delta variable consistent.

* Skip passing compareTo value for original image

* Remove manual focus

* Fix whitespace

* remove unused keyframes

* remove pointless flex-wrap property

* Remove unused resetZoom() method

* Remove pointless flex properties

* Use `on` prefix for event handling

* Remove pointless justify-self property

* Use an inline SVG for TwoUp's handle icon so it can be colored from outside the component..

* Move orientation state up from `<Output>` into `<App>` and share it with `<Options>`.

* Make the options panels responsive :)

* Show a plus sign for size increases `(+8%)`

* Use inline SVG for the zoom +/- icons, collect SVG icons into one file now that I've verified they get tree-shaken properly.

* Fix top/bottom options panels being reversed

* remove commented out code

* lockfile

* Revert quanitzation toggle styles so it's just a checkbox.

* Remove minimum delta for compare size

* Rename data prop to file.

* scale int -> float

* remove tabIndex

* Remove old icon files

* Add width to options panels

* Add vertical scrolling when options are taller than 80% of the screen height.

src/components/Options/index.tsx

@@ -30,11 +30,15 @@ import {
     encoders,
     encodersSupported,
     EncoderSupportMap,
+    encoderMap,
 } from '../../codecs/encoders';
 import { QuantizeOptions } from '../../codecs/imagequant/quantizer';
 
 import { PreprocessorState } from '../../codecs/preprocessors';
 
+import FileSize from '../FileSize';
+import { DownloadIcon } from '../../lib/icons';
+
 const encoderOptionsComponentMap = {
   [identity.type]: undefined,
   [optiPNG.type]: OptiPNGEncoderOptions,
@@ -51,8 +55,17 @@ const encoderOptionsComponentMap = {
   [browserPDF.type]: undefined,
 };
 
+const titles = {
+  horizontal: ['Left Image', 'Right Image'],
+  vertical: ['Top Image', 'Bottom Image'],
+};
+
 interface Props {
-  class?: string;
+  orientation: 'horizontal' | 'vertical';
+  imageIndex: number;
+  sourceImageFile?: File;
+  imageFile?: File;
+  downloadUrl?: string;
   encoderState: EncoderState;
   preprocessorState: PreprocessorState;
   onEncoderTypeChange(newType: EncoderType): void;
@@ -100,57 +113,94 @@ export default class Options extends Component<Props, State> {
   }
 
   render(
-    { class: className, encoderState, preprocessorState, onEncoderOptionsChange }: Props,
+    {
+      sourceImageFile,
+      imageIndex,
+      imageFile,
+      downloadUrl,
+      orientation,
+      encoderState,
+      preprocessorState,
+      onEncoderOptionsChange,
+    }: Props,
     { encoderSupportMap }: State,
   ) {
     // tslint:disable variable-name
     const EncoderOptionComponent = encoderOptionsComponentMap[encoderState.type];
 
     return (
-      <div class={`${style.options}${className ? (' ' + className) : ''}`}>
-        {encoderState.type !== 'identity' && (
-          <div>
-            <p>Quantization</p>
-            <label>
-              <input
-                name="quantizer.enable"
-                type="checkbox"
-                checked={!!preprocessorState.quantizer.enabled}
-                onChange={this.onPreprocessorEnabledChange}
-              />
-              Enable
-            </label>
-            {preprocessorState.quantizer.enabled &&
-              <QuantizerOptionsComponent
-                options={preprocessorState.quantizer}
-                onChange={this.onQuantizerOptionsChange}
-              />
+      <div class={`${style.options} ${style[orientation]}`}>
+        <h2 class={style.title}>
+          {titles[orientation][imageIndex]}
+          {', '}
+          {encoderMap[encoderState.type].label}
+
+          {(downloadUrl && imageFile) && (
+            <a
+              class={style.download}
+              href={downloadUrl}
+              download={imageFile.name}
+              title="Download"
+            >
+              <DownloadIcon />
+            </a>
+          )}
+        </h2>
+
+        <div class={style.inner}>
+          <section class={style.picker}>
+            {encoderSupportMap ?
+              <select value={encoderState.type} onChange={this.onEncoderTypeChange}>
+                {encoders.filter(encoder => encoderSupportMap[encoder.type]).map(encoder => (
+                  <option value={encoder.type}>{encoder.label}</option>
+                ))}
+              </select>
+              :
+              <select><option>Loading…</option></select>
             }
-            <hr/>
-          </div>
-        )}
-        <label>
-          Mode:
-          {encoderSupportMap ?
-            <select value={encoderState.type} onChange={this.onEncoderTypeChange}>
-              {encoders.filter(encoder => encoderSupportMap[encoder.type]).map(encoder => (
-                <option value={encoder.type}>{encoder.label}</option>
-              ))}
-            </select>
-            :
-            <select><option>Loading…</option></select>
+          </section>
+
+          {encoderState.type !== 'identity' && (
+            <div key="quantization" class={style.quantization}>
+              <label class={style.toggle}>
+                <input
+                  name="quantizer.enable"
+                  type="checkbox"
+                  checked={!!preprocessorState.quantizer.enabled}
+                  onChange={this.onPreprocessorEnabledChange}
+                />
+                Enable Quantization
+              </label>
+              {preprocessorState.quantizer.enabled &&
+                <QuantizerOptionsComponent
+                  options={preprocessorState.quantizer}
+                  onChange={this.onQuantizerOptionsChange}
+                />
+              }
+            </div>
+          )}
+
+          {EncoderOptionComponent &&
+            <EncoderOptionComponent
+              options={
+                // Casting options, as encoderOptionsComponentMap[encodeData.type] ensures
+                // the correct type, but typescript isn't smart enough.
+                encoderState.options as any
+              }
+              onChange={onEncoderOptionsChange}
+            />
           }
-        </label>
-        {EncoderOptionComponent &&
-          <EncoderOptionComponent
-            options={
-              // Casting options, as encoderOptionsComponentMap[encodeData.type] ensures the correct
-              // type, but typescript isn't smart enough.
-              encoderState.options as any
-            }
-            onChange={onEncoderOptionsChange}
+        </div>
+
+        <div class={style.sizeDetails}>
+          <FileSize
+            class={style.size}
+            increaseClass={style.increase}
+            decreaseClass={style.decrease}
+            file={imageFile}
+            compareTo={imageFile === sourceImageFile ? undefined : sourceImageFile}
           />
-        }
+        </div>
       </div>
     );
   }

src/components/Options/style.scss

@@ -3,36 +3,165 @@ Note: These styles are temporary. They will be replaced before going live.
 */
 
 .options {
-    width: 180px;
-    padding: 10px;
-    background: rgba(50,50,50,0.8);
-    border: 1px solid #222;
-    box-shadow: inset 0 0 1px #fff, 0 0 1px #fff;
-    border-radius: 3px;
-    color: #eee;
-    overflow: auto;
-    z-index: 1;
-    transition: opacity 300ms ease;
+  box-sizing: border-box;
+  padding: 0;
+  background: rgba(40,40,40,0.8);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
+  color: #eee;
+  overflow: auto;
+  z-index: 1;
+  opacity: 0.9;
+  transform-origin: 50% 140%;
+  transition: opacity 300ms linear;
+  animation: options-open 500ms cubic-bezier(.6,1.6,.6,1) forwards 1;
 
-    &:not(:hover) {
-        opacity: .6;
+  &.horizontal {
+    border-radius: 1px 1px 5px 5px;
+    width: 230px;
+
+    > .inner {
+      max-height: 80vh;
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
+      -ms-touch-action: pan-y;
+      touch-action: pan-y;
+    }
+  }
+
+  &.vertical {
+    opacity: 1;
+    margin: 0 5px 10px;
+    border-radius: 0 0 5px 5px;
+  }
+
+  &:hover, &:focus, &:focus-within {
+    opacity: 1;
+  }
+
+  @keyframes options-open {
+    from {
+      transform: translateY(100px) scale(.8);
+    }
+  }
+
+  .picker {
+    margin: 5px 15px;
+
+    select {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+      -webkit-appearance: none;
+      appearance: none;
+      padding: 10px 30px 10px 10px;
+      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="5"><polygon fill="#fff" points="10,0 5,5 0,0"/></svg>') right center no-repeat;
+      background-color: var(--gray-dark);
+      opacity: 0.9;
+      border: none;
+      font: inherit;
+      color: white;
+
+      &:hover {
+        opacity: 1;
+      }
+      &:focus {
+        opacity: 1;
+        outline: none;
+        box-shadow: 0 0 0 2px var(--button-fg, #ccc);
+      }
+    }
+  }
+
+  .title {
+    display: flex;
+    align-items: center;
+    padding: 10px 15px;
+    margin: 0 0 12px;
+    background: rgba(0,0,0,0.9);
+    font: inherit;
+
+    .download {
+      flex: 0;
+      margin: 0 0 0 auto;
+      background: rgba(0,0,0,0.7);
+      border-radius: 50%;
+      padding: 5px;
+      width: 16px;
+      height: 16px;
+      text-decoration: none;
+
+      > svg {
+        width: 16px;
+        height: 16px;
+        fill: #fff;
+      }
+
+      &:hover {
+        background-color: rgba(255,255,255,0.3);
+      }
+    }
+  }
+
+  label {
+    display: block;
+    padding: 5px;
+    margin: 0 10px;
+
+    input {
+      vertical-align: middle;
     }
 
-    label {
-        display: block;
-        padding: 5px;
-        font-weight: bold;
+    input[type=checkbox],
+    input[type=radio] {
+      margin-right: 8px;
+    }
 
-        select {
-            margin-left: 5px;
+    range-input {
+      display: block;
+      width: 90%;
+    }
+  }
+
+  .size-details {
+    padding: 5px 15px;
+    background: rgba(0,0,0,0.5);
+
+    .size {
+      font-weight: normal;
+
+      .increase,
+      .decrease {
+        font-style: italic;
+        filter: #{"grayscale(calc(50% - var(--size-delta, 50) * 0.5%))"};
+
+        &:before {
+          content: ' (';
         }
-
-        input {
-            vertical-align: middle;
+        &:after {
+          content: ')';
         }
-    }
+      }
 
-    pre {
-        font-size: 10px;
+      .increase {
+        color: var(--negative);
+      }
+      .decrease {
+        color: var(--positive);
+      }
     }
+  }
+}
+
+
+.quantization {
+  padding: 5px 0;
+  margin: 5px 0;
+  box-shadow: inset 0 -.5px 0 rgba(0,0,0,0.25), 0 .5px 0 rgba(255,255,255,0.15);
+
+  .toggle {
+    display: flex;
+    position: relative;
+    align-content: center;
+    font-size: 14px;
+  }
 }