external-repos/squoosh
1
0
Fork 1
mirror of https://github.com/GoogleChromeLabs/squoosh.git synced 2025-11-12 00:37:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move back btn

Browse Source
This commit is contained in:
Jake Archibald
2020-11-27 16:03:23 +00:00
parent 002c9d987a
commit 148fcc308f
4 changed files with 35 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/client/lazy-app/Compress/Output/index.tsx
View File

@@ -27,7 +27,6 @@ interface Props {
rightCompressed?: ImageData; rightCompressed?: ImageData;
leftImgContain: boolean; leftImgContain: boolean;
rightImgContain: boolean; rightImgContain: boolean;
onBack: () => void;
onPreprocessorChange: (newState: PreprocessorState) => void; onPreprocessorChange: (newState: PreprocessorState) => void;
} }
@@ -254,7 +253,7 @@ export default class Output extends Component<Props, State> {
}; };
render( render(
{ mobileView, leftImgContain, rightImgContain, source, onBack }: Props, { mobileView, leftImgContain, rightImgContain, source }: Props,
{ scale, editingScale, altBackground }: State, { scale, editingScale, altBackground }: State,
) { ) {
const leftDraw = this.leftDrawable(); const leftDraw = this.leftDrawable();
@@ -313,20 +312,6 @@ export default class Output extends Component<Props, State> {
</pinch-zoom> </pinch-zoom>
</two-up> </two-up>
<button class={style.back} onClick={onBack}>
<svg viewBox="0 0 61 53.3">
<title>Back</title>
<path
class={style.backBlob}
d="M0 25.6c-.5-7.1 4.1-14.5 10-19.1S23.4.1 32.2 0c8.8 0 19 1.6 24.4 8s5.6 17.8 1.7 27a29.7 29.7 0 01-20.5 18c-8.4 1.5-17.3-2.6-24.5-8S.5 32.6.1 25.6z"
/>
<path
class={style.backX}
d="M41.6 17.1l-2-2.1-8.3 8.2-8.2-8.2-2 2 8.2 8.3-8.3 8.2 2.1 2 8.2-8.1 8.3 8.2 2-2-8.2-8.3z"
/>
</svg>
</button>
<div class={style.controls}> <div class={style.controls}>
<div class={style.zoomControls}> <div class={style.zoomControls}>
<button class={style.button} onClick={this.zoomOut}> <button class={style.button} onClick={this.zoomOut}>

21
src/client/lazy-app/Compress/Output/style.css
View File

@@ -149,27 +149,6 @@
border-bottom: 1px dashed #999; border-bottom: 1px dashed #999;
} }
.back {
composes: unbutton from global;
position: absolute;
top: var(--dist);
left: var(--dist);
--dist: 14px;
& > svg {
width: 58px;
}
}
.back-blob {
fill: var(--hot-pink);
opacity: 0.77;
}
.back-x {
fill: var(--white);
}
.buttons-no-wrap { .buttons-no-wrap {
display: flex; display: flex;
pointer-events: none; pointer-events: none;

14
src/client/lazy-app/Compress/index.tsx
View File

@@ -862,10 +862,22 @@ export default class Compress extends Component<Props, State> {
rightCompressed={rightImageData} rightCompressed={rightImageData}
leftImgContain={leftImgContain} leftImgContain={leftImgContain}
rightImgContain={rightImgContain} rightImgContain={rightImgContain}
onBack={onBack}
preprocessorState={preprocessorState} preprocessorState={preprocessorState}
onPreprocessorChange={this.onPreprocessorChange} onPreprocessorChange={this.onPreprocessorChange}
/> />
<button class={style.back} onClick={onBack}>
<svg viewBox="0 0 61 53.3">
<title>Back</title>
<path
class={style.backBlob}
d="M0 25.6c-.5-7.1 4.1-14.5 10-19.1S23.4.1 32.2 0c8.8 0 19 1.6 24.4 8s5.6 17.8 1.7 27a29.7 29.7 0 01-20.5 18c-8.4 1.5-17.3-2.6-24.5-8S.5 32.6.1 25.6z"
/>
<path
class={style.backX}
d="M41.6 17.1l-2-2.1-8.3 8.2-8.2-8.2-2 2 8.2 8.3-8.3 8.2 2.1 2 8.2-8.1 8.3 8.2 2-2-8.2-8.3z"
/>
</svg>
</button>
{mobileView ? ( {mobileView ? (
<div class={style.options}> <div class={style.options}>
<multi-panel class={style.multiPanel} open-one-only> <multi-panel class={style.multiPanel} open-one-only>

21
src/client/lazy-app/Compress/style.css
View File

@@ -73,3 +73,24 @@
:focus .expand-icon { :focus .expand-icon {
fill: #34b9eb; fill: #34b9eb;
} }
.back {
composes: unbutton from global;
position: absolute;
top: var(--dist);
left: var(--dist);
--dist: 14px;
& > svg {
width: 58px;
}
}
.back-blob {
fill: var(--hot-pink);
opacity: 0.77;
}
.back-x {
fill: var(--white);
}