wip

src/components/App/style.scss

@@ -1,7 +1,3 @@
-/*
-Note: These styles are temporary. They will be replaced before going live.
-*/
-
 .app {
   position: absolute;
   left: 0;

src/components/Options/checkbox/index.tsx

@@ -0,0 +1,20 @@
+import { h, Component } from 'preact';
+import * as style from './style.scss';
+import { UncheckedIcon, CheckedIcon } from '../../../lib/icons';
+
+interface Props extends JSX.HTMLAttributes {}
+interface State {}
+
+export default class Checkbox extends Component<Props, State> {
+  render(props: Props) {
+    return (
+      <div class={style.checkbox}>
+        {props.checked
+          ? <CheckedIcon class={`${style.icon} ${style.checked}`} />
+          : <UncheckedIcon class={style.icon} />
+        }
+        <input class={style.realCheckbox} type="checkbox" {...props}/>
+      </div>
+    );
+  }
+}

src/components/Options/checkbox/style.scss

@@ -0,0 +1,21 @@
+.checkbox {
+  display: inline-block;
+  position: relative;
+  --size: 24px;
+}
+
+.real-checkbox {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.icon {
+  display: block;
+  width: var(--size);
+  height: var(--size);
+}
+
+.checked {
+  fill: #34B9EB;
+}

src/components/Options/index.tsx

@@ -31,7 +31,6 @@ import {
   encoders,
   encodersSupported,
   EncoderSupportMap,
-  encoderMap,
 } from '../../codecs/encoders';
 import { QuantizeOptions } from '../../codecs/imagequant/processor-meta';
 import { ResizeOptions } from '../../codecs/resize/processor-meta';
@@ -39,6 +38,7 @@ import { PreprocessorState } from '../../codecs/preprocessors';
 import FileSize from '../FileSize';
 import { DownloadIcon } from '../../lib/icons';
 import { SourceImage } from '../App';
+import Checkbox from './checkbox';
 
 const encoderOptionsComponentMap = {
   [identity.type]: undefined,
@@ -56,11 +56,6 @@ const encoderOptionsComponentMap = {
   [browserPDF.type]: undefined,
 };
 
-const titles = {
-  horizontal: ['Left Image', 'Right Image'],
-  vertical: ['Top Image', 'Bottom Image'],
-};
-
 interface Props {
   orientation: 'horizontal' | 'vertical';
   source?: SourceImage;
@@ -144,37 +139,17 @@ export default class Options extends Component<Props, State> {
     const EncoderOptionComponent = encoderOptionsComponentMap[encoderState.type];
 
     return (
-      <div class={`${style.options} ${style[orientation]}`}>
-        <h2 class={style.title}>
-          {titles[orientation][imageIndex]}
-          {', '}
-          {encoderMap[encoderState.type].label}
-        </h2>
-
-        <div class={style.content}>
-          <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>
-            }
-          </section>
-
-          {encoderState.type !== 'identity' && (
-            <div key="preprocessors" class={style.preprocessors}>
-              <label class={style.toggle}>
-                <input
+      <div class={style.options}>
+        <h2 class={style.optionsTitle}>Process</h2>
+        <label class={style.sectionEnabler}>
+          <Checkbox
             name="resize.enable"
-                  type="checkbox"
             checked={!!preprocessorState.resize.enabled}
             onChange={this.onPreprocessorEnabledChange}
           />
-                Resize
+          <span class={style.sectionEnablerLabel}>Resize</span>
         </label>
+        {/*
         {preprocessorState.resize.enabled &&
           <ResizeOptionsComponent
             isVector={Boolean(source && source.vectorImage)}
@@ -198,8 +173,19 @@ export default class Options extends Component<Props, State> {
             onChange={this.onQuantizerOptionsChange}
           />
         }
-            </div>
-          )}
+        */}
+
+        {/*<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>
+          }
+        </section>
 
         {EncoderOptionComponent &&
           <EncoderOptionComponent
@@ -211,7 +197,6 @@ export default class Options extends Component<Props, State> {
             onChange={onEncoderOptionsChange}
           />
         }
-        </div>
 
         <div class={style.row}>
           <button onClick={this.onCopyToOtherClick}>Copy settings to other side</button>
@@ -237,6 +222,7 @@ export default class Options extends Component<Props, State> {
             </a>
           )}
         </div>
+        */}
       </div>
     );
   }

src/components/Options/style.scss

@@ -1,225 +1,30 @@
-/*
-Note: These styles are temporary. They will be replaced before going live.
-*/
-
-.row {
-  padding: 5px;
-  margin: 0 10px;
-}
+$horizontalPadding: 15px;
 
 .options {
-  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;
-
-  &.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);
-    }
-  }
-
-  .content {
-    max-height: calc(75vh - 100px);
-    overflow: auto;
-    touch-action: pan-y;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .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;
-      transition: box-shadow 150ms ease;
-
-      &: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;
-  }
-
-  label {
-    display: block;
-    padding: 5px;
-    margin: 0 10px;
-    display: flex;
-    flex-wrap: wrap;
-
-    // prevent labels from wrapping below checkboxes
-    > span {
-      flex: 1;
-    }
-
-    input[type=checkbox],
-    input[type=radio] {
-      flex: 0;
-      margin: 2px 8px 0 0;
-    }
-
-    range-input {
-      display: block;
-      flex: 1 0 100%;
-      margin: 2px 0;
-    }
-  }
-
-  hr {
-    height: 1px;
-    border: none;
-    margin: 5px 0;
-    box-shadow: inset 0 0.5px 0 rgba(0, 0, 0, 0.4), inset 0 -0.5px 0 rgba(255, 255, 255, 0.2);
-  }
+  color: #fff;
+  width: 300px;
+  opacity: 0.8;
+  font-size: 1.2rem;
 }
 
-.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;
-  }
-
-  hr {
-    height: 1px;
-    border: none;
-    margin: 5px 0;
-    box-shadow: inset 0 0.5px 0 rgba(0, 0, 0, 0.4), inset 0 -0.5px 0 rgba(255, 255, 255, 0.2);
-  }
-}
-
-.size-details {
-  display: flex;
-  align-items: center;
-  padding: 5px 15px;
-  background: rgba(0,0,0,0.5);
-}
-
-.download {
-  flex: 0;
-  margin: 0 0 0 auto;
-  background: rgba(255,255,255,0.1);
-  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);
-  }
-}
-
-.size-details {
-  padding: 5px 15px;
-  background: rgba(0,0,0,0.5);
-}
-
-.size {
+.options-title {
+  background: rgba(0, 0, 0, 0.9);
+  margin: 0;
+  padding: 10px $horizontalPadding;
   font-weight: normal;
+  font-size: 1.4rem;
+  border-bottom: 1px solid #000;
 }
 
-.increase,
-.decrease {
-  font-style: italic;
-  filter: #{"grayscale(calc(50% - var(--size-delta, 50) * 0.5%))"};
-
-  &:before {
-    content: ' (';
-  }
-  &:after {
-    content: ')';
-  }
+.section-enabler {
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.8);
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: 0.5em;
+  padding: 6px $horizontalPadding;
 }
 
-.increase {
-  color: var(--negative);
-}
-.decrease {
-  color: var(--positive);
-}
-
-.preprocessors {
-  padding: 5px 0;
-  margin: 5px 0;
-  box-shadow: inset 0 -.5px 0 rgba(0,0,0,0.4), 0 .5px 0 rgba(255,255,255,0.2);
-}
-
-.toggle {
-  display: flex;
-  position: relative;
-  align-content: center;
-  font-size: 14px;
-  box-shadow: inset 0 -.5px 0 rgba(0,0,0,0.4), 0 .5px 0 rgba(255,255,255,0.2);
+.section-enabler-label {
+  padding-top: 3px;
 }

src/lib/icons.tsx

@@ -29,3 +29,15 @@ export const RemoveIcon = (props: JSX.HTMLAttributes) => (
     <path d="M19 13H5v-2h14v2z"/>
   </Icon>
 );
+
+export const UncheckedIcon = (props: JSX.HTMLAttributes) => (
+  <Icon {...props}>
+    <path d="M19 5v14H5V5h14m0-2H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z"/>
+  </Icon>
+);
+
+export const CheckedIcon = (props: JSX.HTMLAttributes) => (
+  <Icon {...props}>
+    <path d="M19 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-9 14l-5-5 1.4-1.4 3.6 3.6 7.6-7.6L19 8l-9 9z"/>
+  </Icon>
+);

src/style/index.scss

@@ -1,7 +1,3 @@
-/*
-Note: These styles are temporary. They will be replaced before going live.
-*/
-
 @import './reset.scss';
 
 html, body {

src/style/reset.scss

@@ -1,7 +1,3 @@
-/*
-Note: These styles are temporary. They will be replaced before going live.
-*/
-
 button, a, img, input, select, textarea {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
 }