From 97778c5ba6707e03c54cf361b23e25d1a8957840 Mon Sep 17 00:00:00 2001 From: Jake Archibald Date: Sun, 28 Oct 2018 11:36:46 +0000 Subject: [PATCH] Copy settings to other side button --- src/components/Options/index.tsx | 17 ----------------- src/components/Options/style.scss | 15 --------------- src/components/compress/index.tsx | 15 +++++++++------ src/components/results/index.tsx | 25 ++++++++++++++++++++++--- src/components/results/style.scss | 24 ++++++++++++++++++++---- src/lib/icons.tsx | 25 +++++++++++++++++++++++++ 6 files changed, 76 insertions(+), 45 deletions(-) diff --git a/src/components/Options/index.tsx b/src/components/Options/index.tsx index 2f16c4a4..d4fed3db 100644 --- a/src/components/Options/index.tsx +++ b/src/components/Options/index.tsx @@ -59,13 +59,11 @@ const encoderOptionsComponentMap = { interface Props { mobileView: boolean; source?: SourceImage; - imageIndex: number; encoderState: EncoderState; preprocessorState: PreprocessorState; onEncoderTypeChange(newType: EncoderType): void; onEncoderOptionsChange(newOptions: EncoderOptions): void; onPreprocessorOptionsChange(newOptions: PreprocessorState): void; - onCopyToOtherClick(): void; } interface State { @@ -116,16 +114,9 @@ export default class Options extends Component { ); } - @bind - onCopyToOtherClick(event: Event) { - event.preventDefault(); - this.props.onCopyToOtherClick(); - } - render( { source, - imageIndex, encoderState, preprocessorState, onEncoderOptionsChange, @@ -205,14 +196,6 @@ export default class Options extends Component { /> : null} - -
- -
); } diff --git a/src/components/Options/style.scss b/src/components/Options/style.scss index d7f7180a..3ec68295 100644 --- a/src/components/Options/style.scss +++ b/src/components/Options/style.scss @@ -55,18 +55,3 @@ $horizontalPadding: 15px; overflow-x: hidden; overflow-y: auto; } - -.options-copy { - display: grid; - background: rgba(0, 0, 0, 0.9); - padding: 5px; -} - -.copy-button { - composes: unbutton from '../../lib/util.scss'; - background: #484848; - border-radius: 4px; - color: #fff; - text-align: left; - padding: 5px 10px; -} diff --git a/src/components/compress/index.tsx b/src/components/compress/index.tsx index 2fc9c553..b7f31aca 100644 --- a/src/components/compress/index.tsx +++ b/src/components/compress/index.tsx @@ -34,7 +34,7 @@ import Processor from '../../codecs/processor'; import { VectorResizeOptions, BitmapResizeOptions } from '../../codecs/resize/processor-meta'; import './custom-els/MultiPanel'; import Results from '../results'; -import { ExpandIcon } from '../../lib/icons'; +import { ExpandIcon, CopyAcrossIconProps } from '../../lib/icons'; export interface SourceImage { file: File | Fileish; @@ -136,7 +136,7 @@ async function processSvg(blob: Blob): Promise { const parser = new DOMParser(); const text = await blobToText(blob); const document = parser.parseFromString(text, 'image/svg+xml'); - const svg = document.documentElement; + const svg = document.documentElement!; if (svg.hasAttribute('width') && svg.hasAttribute('height')) { return blobToImg(blob); @@ -405,26 +405,29 @@ export default class Compress extends Component { )); - const results = images.map((image, i) => ( + const copyDirections = + (mobileView ? ['down', 'up'] : ['right', 'left']) as CopyAcrossIconProps['copyDirection'][]; + + const results = images.map((image, index) => ( {!mobileView ? null : [ , - `${resultTitles[i]} (${encoderMap[image.encoderState.type].label})`, + `${resultTitles[index]} (${encoderMap[image.encoderState.type].label})`, ]} )); diff --git a/src/components/results/index.tsx b/src/components/results/index.tsx index f3f865cb..845e3c5e 100644 --- a/src/components/results/index.tsx +++ b/src/components/results/index.tsx @@ -2,10 +2,10 @@ import { h, Component, ComponentChildren, ComponentChild } from 'preact'; import * as style from './style.scss'; import FileSize from './FileSize'; -import { DownloadIcon } from '../../lib/icons'; +import { DownloadIcon, CopyAcrossIcon, CopyAcrossIconProps } from '../../lib/icons'; import '../custom-els/LoadingSpinner'; import { SourceImage } from '../compress'; -import { Fileish } from '../../lib/initial-util'; +import { Fileish, bind } from '../../lib/initial-util'; interface Props { loading: boolean; @@ -13,6 +13,8 @@ interface Props { imageFile?: Fileish; downloadUrl?: string; children: ComponentChildren; + copyDirection: CopyAcrossIconProps['copyDirection']; + onCopyToOtherClick(): void; } interface State { @@ -43,7 +45,16 @@ export default class Results extends Component { } } - render({ source, imageFile, downloadUrl, children }: Props, { showLoadingState }: State) { + @bind + private onCopyToOtherClick(event: Event) { + event.preventDefault(); + this.props.onCopyToOtherClick(); + } + + render( + { source, imageFile, downloadUrl, children, copyDirection }: Props, + { showLoadingState }: State, + ) { return (
@@ -59,6 +70,14 @@ export default class Results extends Component { }
+ +
{(downloadUrl && imageFile) && ( ( ); + +const copyAcrossRotations = { + up: 90, right: 180, down: -90, left: 0, +}; + +export interface CopyAcrossIconProps extends JSX.HTMLAttributes { + copyDirection: keyof typeof copyAcrossRotations; +} + +export const CopyAcrossIcon = (props: CopyAcrossIconProps) => { + const { copyDirection, ...otherProps } = props; + const id = 'point-' + copyDirection; + const rotation = copyAcrossRotations[copyDirection]; + + return ( + + + + + + + + + ); +};