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

Avoid having an element that covers the pinch zoom

Browse Source
This commit is contained in:
Jake Archibald
2018-10-21 09:24:11 +01:00
parent b36014c74a
commit c32b9a36bf
2 changed files with 22 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/compress/index.tsx
View File

@@ -400,7 +400,7 @@ export default class Compress extends Component<Props, State> {
const [leftImageData, rightImageData] = images.map(i => i.data); const [leftImageData, rightImageData] = images.map(i => i.data);
return ( return (
<div class={style.compress}> <div class={`${style.compress} ${style[orientation]}`}>
<Output <Output
originalImage={source && source.data} originalImage={source && source.data}
orientation={orientation} orientation={orientation}
@@ -409,24 +409,22 @@ export default class Compress extends Component<Props, State> {
leftImgContain={leftImage.preprocessorState.resize.fitMethod === 'cover'} leftImgContain={leftImage.preprocessorState.resize.fitMethod === 'cover'}
rightImgContain={rightImage.preprocessorState.resize.fitMethod === 'cover'} rightImgContain={rightImage.preprocessorState.resize.fitMethod === 'cover'}
/> />
<div class={`${style.optionPair} ${style[orientation]}`}> {images.map((image, index) => (
{images.map((image, index) => ( <Options
<Options loading={loading || image.loading}
loading={loading || image.loading} source={source}
source={source} orientation={orientation}
orientation={orientation} imageIndex={index}
imageIndex={index} imageFile={image.file}
imageFile={image.file} downloadUrl={image.downloadUrl}
downloadUrl={image.downloadUrl} preprocessorState={image.preprocessorState}
preprocessorState={image.preprocessorState} encoderState={image.encoderState}
encoderState={image.encoderState} onEncoderTypeChange={this.onEncoderTypeChange.bind(this, index)}
onEncoderTypeChange={this.onEncoderTypeChange.bind(this, index)} onEncoderOptionsChange={this.onEncoderOptionsChange.bind(this, index)}
onEncoderOptionsChange={this.onEncoderOptionsChange.bind(this, index)} onPreprocessorOptionsChange={this.onPreprocessorOptionsChange.bind(this, index)}
onPreprocessorOptionsChange={this.onPreprocessorOptionsChange.bind(this, index)} onCopyToOtherClick={this.onCopyToOtherClick.bind(this, index)}
onCopyToOtherClick={this.onCopyToOtherClick.bind(this, index)} />
/> ))}
))}
</div>
</div> </div>
); );
} }

14
src/components/compress/style.scss
View File

@@ -1,19 +1,15 @@
.compress { .compress {
height: 100%;
}
.option-pair {
display: flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
contain: strict;
display: grid;
&.horizontal { &.horizontal {
justify-content: space-between; grid-template-columns: 1fr auto;
align-items: flex-end; align-items: end;
} }
&.vertical { &.vertical {
flex-direction: column; // TODO
justify-content: flex-end;
} }
} }