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,68 +49,9 @@ Note: These styles are temporary. They will be replaced before going live.
     }
   }
 
-  .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;
+    @extend .row;
-    margin: 0 10px;
 
     input {
       vertical-align: middle;
@@ -121,47 +67,104 @@ Note: These styles are temporary. They will be replaced before going live.
       width: 90%;
     }
   }
+}
 
-  .size-details {
+.picker {
-    padding: 5px 15px;
+  margin: 5px 15px;
-    background: rgba(0,0,0,0.5);
 
-    .size {
+  select {
-      font-weight: normal;
+    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;
 
-      .increase,
+    &:hover {
-      .decrease {
+      opacity: 1;
-        font-style: italic;
+    }
-        filter: #{"grayscale(calc(50% - var(--size-delta, 50) * 0.5%))"};
+    &:focus {
-
+      opacity: 1;
-        &:before {
+      outline: none;
-          content: ' (';
+      box-shadow: 0 0 0 2px var(--button-fg, #ccc);
-        }
-        &:after {
-          content: ')';
-        }
-      }
-
-      .increase {
-        color: var(--negative);
-      }
-      .decrease {
-        color: var(--positive);
-      }
     }
   }
 }
 
+.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);
+  }
+}
+
+.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: ' (';
+  }
+  &:after {
+    content: ')';
+  }
+}
+
+.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 {
+
-    display: flex;
+.toggle {
-    position: relative;
+  display: flex;
-    align-content: center;
+  position: relative;
-    font-size: 14px;
+  align-content: center;
-  }
+  font-size: 14px;
 }