Button to copy settings to the other side

src/components/App/index.tsx

@@ -224,6 +224,14 @@ export default class App extends Component<Props, State> {
     await this.updateFile(file);
   }
 
+  onCopyToOtherClick(index: 0 | 1) {
+    const otherIndex = (index + 1) % 2;
+
+    this.setState({
+      images: cleanSet(this.state.images, otherIndex, this.state.images[index]),
+    });
+  }
+
   async updateFile(file: File) {
     this.setState({ loading: true });
     try {
@@ -365,6 +373,7 @@ export default class App extends Component<Props, State> {
               onEncoderTypeChange={this.onEncoderTypeChange.bind(this, index)}
               onEncoderOptionsChange={this.onEncoderOptionsChange.bind(this, index)}
               onPreprocessorOptionsChange={this.onPreprocessorOptionsChange.bind(this, index)}
+              onCopyToOtherClick={this.onCopyToOtherClick.bind(this, index)}
             />
           ))}
           {anyLoading && <span style={{ position: 'fixed', top: 0, left: 0 }}>Loading...</span>}

src/components/Options/index.tsx

@@ -72,6 +72,7 @@ interface Props {
   onEncoderTypeChange(newType: EncoderType): void;
   onEncoderOptionsChange(newOptions: EncoderOptions): void;
   onPreprocessorOptionsChange(newOptions: PreprocessorState): void;
+  onCopyToOtherClick(): void;
 }
 
 interface State {
@@ -120,6 +121,12 @@ export default class Options extends Component<Props, State> {
     );
   }
 
+  @bind
+  onCopyToOtherClick(event: Event) {
+    event.preventDefault();
+    this.props.onCopyToOtherClick();
+  }
+
   render(
     {
       sourceImageFile,
@@ -217,6 +224,10 @@ export default class Options extends Component<Props, State> {
           }
         </div>
 
+        <div class={style.row}>
+          <button onClick={this.onCopyToOtherClick}>Copy settings to other side</button>
+        </div>
+
         <div class={style.sizeDetails}>
           <FileSize
             class={style.size}

src/components/Options/style.scss

@@ -2,6 +2,11 @@
 Note: These styles are temporary. They will be replaced before going live.
 */
 
+.row {
+  padding: 5px;
+  margin: 0 10px;
+}
+
 .options {
   box-sizing: border-box;
   padding: 0;
@@ -44,6 +49,26 @@ Note: These styles are temporary. They will be replaced before going live.
     }
   }
 
+  label {
+    display: block;
+    @extend .row;
+
+    input {
+      vertical-align: middle;
+    }
+
+    input[type=checkbox],
+    input[type=radio] {
+      margin-right: 8px;
+    }
+
+    range-input {
+      display: block;
+      width: 90%;
+    }
+  }
+}
+
 .picker {
   margin: 5px 15px;
 
@@ -79,6 +104,7 @@ Note: These styles are temporary. They will be replaced before going live.
   margin: 0 0 12px;
   background: rgba(0,0,0,0.9);
   font: inherit;
+}
 
 .download {
   flex: 0;
@@ -100,34 +126,15 @@ Note: These styles are temporary. They will be replaced before going live.
     background-color: rgba(255,255,255,0.3);
   }
 }
-  }
-
-  label {
-    display: block;
-    padding: 5px;
-    margin: 0 10px;
-
-    input {
-      vertical-align: middle;
-    }
-
-    input[type=checkbox],
-    input[type=radio] {
-      margin-right: 8px;
-    }
-
-    range-input {
-      display: block;
-      width: 90%;
-    }
-  }
 
 .size-details {
   padding: 5px 15px;
   background: rgba(0,0,0,0.5);
+}
 
 .size {
   font-weight: normal;
+}
 
 .increase,
 .decrease {
@@ -148,15 +155,12 @@ Note: These styles are temporary. They will be replaced before going live.
 .decrease {
   color: var(--positive);
 }
-    }
-  }
-}
-
 
 .preprocessors {
   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;
@@ -164,4 +168,3 @@ Note: These styles are temporary. They will be replaced before going live.
   align-content: center;
   font-size: 14px;
 }
-}