Ta-da. Back button. (#254)

src/components/App/index.tsx

@@ -82,6 +82,11 @@ export default class App extends Component<Props, State> {
     return this.snackbar.showSnackbar(message, options);
   }
 
+  @bind
+  private onBack() {
+    this.setState({ file: undefined });
+  }
+
   render({}: Props, { file, Compress }: State) {
     return (
       <div id="app" class={style.app}>
@@ -89,7 +94,7 @@ export default class App extends Component<Props, State> {
           {(!file)
             ? <Intro onFile={this.onIntroPickFile} showSnack={this.showSnack} />
             : (Compress)
-              ? <Compress file={file} showSnack={this.showSnack} />
+              ? <Compress file={file} showSnack={this.showSnack} onBack={this.onBack} />
               : <loading-spinner class={style.appLoader}/>
           }
           <snack-bar ref={linkRef(this, 'snackbar')} />

src/components/Output/custom-els/TwoUp/index.ts

@@ -70,12 +70,13 @@ export default class TwoUp extends HTMLElement {
   connectedCallback() {
     this._childrenChange();
 
+    this._handle.innerHTML = `<div class="${styles.scrubber}">${
+      `<svg viewBox="0 0 27 20" fill="currentColor">${
+        '<path d="M17 19.2l9.5-9.6L16.9 0zM9.6 0L0 9.6l9.6 9.6z"/>'
+      }</svg>`
+    }</div>`;
+
     if (!this._everConnected) {
-      this._handle.innerHTML = `<div class="${styles.scrubber}">${
-        `<svg viewBox="0 0 27 20" fill="currentColor">${
-          '<path d="M17 19.2l9.5-9.6L16.9 0zM9.6 0L0 9.6l9.6 9.6z"/>'
-        }</svg>`
-      }</div>`;
       this._resetPosition();
       this._everConnected = true;
     }

src/components/Output/index.tsx

@@ -5,7 +5,7 @@ import './custom-els/TwoUp';
 import * as style from './style.scss';
 import { bind, linkRef } from '../../lib/initial-util';
 import { shallowEqual, drawDataToCanvas } from '../../lib/util';
-import { ToggleIcon, AddIcon, RemoveIcon } from '../../lib/icons';
+import { ToggleIcon, AddIcon, RemoveIcon, BackIcon } from '../../lib/icons';
 import { twoUpHandle } from './custom-els/TwoUp/styles.css';
 
 interface Props {
@@ -15,6 +15,7 @@ interface Props {
   rightCompressed?: ImageData;
   leftImgContain: boolean;
   rightImgContain: boolean;
+  onBack: () => void;
 }
 
 interface State {
@@ -191,7 +192,7 @@ export default class Output extends Component<Props, State> {
   }
 
   render(
-    { mobileView, leftImgContain, rightImgContain, originalImage }: Props,
+    { mobileView, leftImgContain, rightImgContain, originalImage, onBack }: Props,
     { scale, editingScale, altBackground }: State,
   ) {
     const leftDraw = this.leftDrawable();
@@ -243,6 +244,12 @@ export default class Output extends Component<Props, State> {
           </pinch-zoom>
         </two-up>
 
+        <div class={style.back}>
+          <button class={style.button} onClick={onBack}>
+            <BackIcon />
+          </button>
+        </div>
+
         <div class={style.controls}>
           <div class={style.zoomControls}>
             <button class={style.button} onClick={this.zoomOut}>

src/components/Output/style.scss

@@ -38,7 +38,7 @@
   top: 0;
   left: 0;
   right: 0;
-  padding: 9px;
+  padding: 9px 84px;
   overflow: hidden;
   flex-wrap: wrap;
   contain: content;
@@ -50,6 +50,7 @@
   }
 
   @media (min-width: 860px) {
+    padding: 9px;
     top: auto;
     left: 320px;
     right: 320px;
@@ -78,14 +79,19 @@
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  height: 48px;
-  padding: 0 16px;
   margin: 4px;
   background-color: #fff;
   border: 1px solid rgba(0,0,0,0.2);
   border-radius: 5px;
   line-height: 1;
   white-space: nowrap;
+  height: 36px;
+  padding: 0 8px;
+
+  @media (min-width: 600px) {
+    height: 48px;
+    padding: 0 16px;
+  }
 
   &:focus {
     box-shadow: 0 0 0 2px var(--button-fg);
@@ -134,3 +140,10 @@
   // https://bugs.chromium.org/p/chromium/issues/detail?id=870222#c10
   will-change: auto;
 }
+
+.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 9px;
+}

src/components/compress/index.tsx

@@ -60,6 +60,7 @@ interface EncodedImage {
 interface Props {
   file: File | Fileish;
   showSnack: SnackBarElement['showSnackbar'];
+  onBack: () => void;
 }
 
 interface State {
@@ -415,7 +416,7 @@ export default class Compress extends Component<Props, State> {
     this.setState({ images });
   }
 
-  render({ }: Props, { loading, images, source, mobileView }: State) {
+  render({ onBack }: Props, { loading, images, source, mobileView }: State) {
     const [leftImage, rightImage] = images;
     const [leftImageData, rightImageData] = images.map(i => i.data);
 
@@ -460,6 +461,7 @@ export default class Compress extends Component<Props, State> {
           rightCompressed={rightImageData}
           leftImgContain={leftImage.preprocessorState.resize.fitMethod === 'cover'}
           rightImgContain={rightImage.preprocessorState.resize.fitMethod === 'cover'}
+          onBack={onBack}
         />
         {mobileView
           ? (

src/components/compress/style.scss

@@ -22,7 +22,7 @@
   max-width: 400px;
   margin: 0 auto;
   width: calc(100% - 60px);
-  max-height: calc(100% - 143px);
+  max-height: calc(100% - 104px);
   overflow: hidden;
 
   @media (min-width: 600px) {

src/lib/icons.tsx

@@ -48,6 +48,12 @@ export const ExpandIcon = (props: JSX.HTMLAttributes) => (
   </Icon>
 );
 
+export const BackIcon = (props: JSX.HTMLAttributes) => (
+  <Icon {...props}>
+    <path d="M20 11H7.8l5.6-5.6L12 4l-8 8 8 8 1.4-1.4L7.8 13H20v-2z"/>
+  </Icon>
+);
+
 const copyAcrossRotations = {
   up: 90, right: 180, down: -90, left: 0,
 };