Copy to side ui (#229)

* Copy settings to other side button

* Download button on the outside.

* Whoops
This commit is contained in:
Jake Archibald
2018-11-06 13:39:03 +00:00
committed by GitHub
parent d93169cc5a
commit 4599e51b1e
6 changed files with 110 additions and 47 deletions

View File

@@ -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<Props, State> {
@@ -43,9 +52,19 @@ export default class Results extends Component<Props, State> {
}
}
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 (
<div class={style.results}>
<div class={`${style.results} ${buttonPositionClass[buttonPosition]}`}>
<div class={style.resultData}>
{(children as ComponentChild[])[0]
? <div class={style.resultTitle}>{children}</div>
@@ -59,6 +78,14 @@ export default class Results extends Component<Props, State> {
}
</div>
<button
class={style.copyToOther}
title="Copy settings to other side"
onClick={this.onCopyToOtherClick}
>
<CopyAcrossIcon class={style.copyIcon} copyDirection={copyDirection} />
</button>
<div class={style.download}>
{(downloadUrl && imageFile) && (
<a