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,7 +49,27 @@ Note: These styles are temporary. They will be replaced before going live.
     }
   }
 
-  .picker {
+  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;
 
   select {
@@ -70,17 +95,18 @@ Note: These styles are temporary. They will be replaced before going live.
       box-shadow: 0 0 0 2px var(--button-fg, #ccc);
     }
   }
-  }
+}
 
-  .title {
+.title {
   display: flex;
   align-items: center;
   padding: 10px 15px;
   margin: 0 0 12px;
   background: rgba(0,0,0,0.9);
   font: inherit;
+}
 
-    .download {
+.download {
   flex: 0;
   margin: 0 0 0 auto;
   background: rgba(0,0,0,0.7);
@@ -99,38 +125,19 @@ Note: These styles are temporary. They will be replaced before going live.
   &:hover {
     background-color: rgba(255,255,255,0.3);
   }
-    }
+}
-  }
 
-  label {
+.size-details {
-    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 {
+.size {
   font-weight: normal;
+}
 
-      .increase,
+.increase,
-      .decrease {
+.decrease {
   font-style: italic;
   filter: #{"grayscale(calc(50% - var(--size-delta, 50) * 0.5%))"};
 
@@ -140,28 +147,24 @@ Note: These styles are temporary. They will be replaced before going live.
   &:after {
     content: ')';
   }
-      }
-
-      .increase {
-        color: var(--negative);
-      }
-      .decrease {
-        color: var(--positive);
-      }
-    }
-  }
 }
 
+.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.25), 0 .5px 0 rgba(255,255,255,0.15);
+}
 
-  .toggle {
+.toggle {
   display: flex;
   position: relative;
   align-content: center;
   font-size: 14px;
-  }
 }