mirror of
https://github.com/GoogleChromeLabs/squoosh.git
synced 2025-11-15 01:59:57 +00:00
Copy to side ui (#229)
* Copy settings to other side button * Download button on the outside. * Whoops
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user