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..0e54ad09 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); @@ -156,6 +156,9 @@ async function processSvg(blob: Blob): Promise { // These are only used in the mobile view const resultTitles = ['Top', 'Bottom']; +// These are only used in the desktop view +const buttonPositions = + ['download-left', 'download-right'] as ('download-left' | 'download-right')[]; export default class Compress extends Component { widthQuery = window.matchMedia('(max-width: 599px)'); @@ -405,26 +408,30 @@ 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..9d4a6c0c 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,12 +13,21 @@ interface Props { imageFile?: Fileish; downloadUrl?: string; children: ComponentChildren; + copyDirection: CopyAcrossIconProps['copyDirection']; + buttonPosition: keyof typeof buttonPositionClass; + onCopyToOtherClick(): void; } interface State { showLoadingState: boolean; } +const buttonPositionClass = { + 'stack-right': style.stackRight, + 'download-right': style.downloadRight, + 'download-left': style.downloadLeft, +}; + const loadingReactionDelay = 500; export default class Results extends Component { @@ -43,9 +52,19 @@ 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, buttonPosition }: Props, + { showLoadingState }: State, + ) { + return ( -
+
{(children as ComponentChild[])[0] ?
{children}
@@ -59,6 +78,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 ( + + + + + + + + + ); +};