Copy setting button

src/client/lazy-app/Compress/Options/index.tsx

@@ -17,7 +17,7 @@ import Toggle from './Toggle';
 import Select from './Select';
 import { Options as QuantOptionsComponent } from 'features/processors/quantize/client';
 import { Options as ResizeOptionsComponent } from 'features/processors/resize/client';
-import { CLIIcon } from 'client/lazy-app/icons';
+import { CLIIcon, SwapIcon } from 'client/lazy-app/icons';
 
 interface Props {
   index: 0 | 1;
@@ -28,6 +28,7 @@ interface Props {
   onEncoderTypeChange(index: 0 | 1, newType: OutputType): void;
   onEncoderOptionsChange(index: 0 | 1, newOptions: EncoderOptions): void;
   onProcessorOptionsChange(index: 0 | 1, newOptions: ProcessorState): void;
+  onCopyToOtherSideClick(index: 0 | 1): void;
   onCopyCliClick(index: 0 | 1): void;
 }
 
@@ -111,6 +112,10 @@ export default class Options extends Component<Props, State> {
     this.props.onCopyCliClick(this.props.index);
   };
 
+  private onCopyToOtherSideClick = () => {
+    this.props.onCopyToOtherSideClick(this.props.index);
+  };
+
   render(
     { source, encoderState, processorState }: Props,
     { supportedEncoderMap }: State,
@@ -140,6 +145,13 @@ export default class Options extends Component<Props, State> {
                   >
                     <CLIIcon />
                   </button>
+                  <button
+                    class={style.copyOverButton}
+                    title="Copy settings to other side"
+                    onClick={this.onCopyToOtherSideClick}
+                  >
+                    <SwapIcon />
+                  </button>
                 </div>
               </h3>
               <label class={style.sectionEnabler}>

src/client/lazy-app/Compress/Options/style.css

@@ -87,6 +87,7 @@
   grid-auto-columns: max-content;
   grid-auto-flow: column;
   display: grid;
+  gap: 0.8rem;
 }
 
 .title-button {
@@ -106,3 +107,11 @@
     stroke: var(--header-text-color);
   }
 }
+
+.copy-over-button {
+  composes: title-button;
+
+  svg {
+    fill: var(--header-text-color);
+  }
+}

src/client/lazy-app/Compress/index.tsx

@@ -380,7 +380,7 @@ export default class Compress extends Component<Props, State> {
     this.queueUpdateImage();
   }
 
-  private async onCopyToOtherClick(index: 0 | 1) {
+  private onCopyToOtherClick = async (index: 0 | 1) => {
     const otherIndex = index ? 0 : 1;
     const oldSettings = this.state.sides[otherIndex];
     const newSettings = { ...this.state.sides[index] };
@@ -405,7 +405,7 @@ export default class Compress extends Component<Props, State> {
     this.setState({
       sides: cleanSet(this.state.sides, otherIndex, oldSettings),
     });
-  }
+  };
 
   private onPreprocessorChange = async (
     preprocessorState: PreprocessorState,
@@ -830,6 +830,7 @@ export default class Compress extends Component<Props, State> {
         onEncoderOptionsChange={this.onEncoderOptionsChange}
         onProcessorOptionsChange={this.onProcessorOptionsChange}
         onCopyCliClick={this.onCopyCliClick}
+        onCopyToOtherSideClick={this.onCopyToOtherClick}
       />
     ));
 

src/client/lazy-app/icons/index.tsx

@@ -83,3 +83,9 @@ export const CLIIcon = () => (
     />
   </svg>
 );
+
+export const SwapIcon = () => (
+  <svg viewBox="0 0 18 14">
+    <path d="M5.5 3.6v6.8L2.1 7l3.4-3.4M7 0L0 7l7 7V0zm4 0v14l7-7-7-7z" />
+  </svg>
+);