ryan/squoosh
1
0
Fork 0
forked from external-repos/squoosh
Code Pull Requests Activity

Class for file drop

Browse Source
This commit is contained in:
Jake Archibald
2018-10-15 11:24:24 +01:00
parent 43def798e1
commit 64da19e2fc
2 changed files with 34 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/App/index.tsx
View File

@@ -74,7 +74,7 @@ export default class App extends Component<Props, State> {
render({}: Props, { file, Compress }: State) { render({}: Props, { file, Compress }: State) {
return ( return (
<div id="app" class={style.app}> <div id="app" class={style.app}>
<file-drop accept="image/*" onfiledrop={this.onFileDrop}> <file-drop accept="image/*" onfiledrop={this.onFileDrop} class={style.drop}>
{(!file) {(!file)
? <Intro onFile={this.onIntroPickFile} onError={this.showError} /> ? <Intro onFile={this.onIntroPickFile} onError={this.showError} />
: (Compress) : (Compress)

68
src/components/App/style.scss
View File

@@ -12,45 +12,43 @@ Note: These styles are temporary. They will be replaced before going live.
contain: strict; contain: strict;
} }
:global { .drop {
file-drop { overflow: hidden;
overflow: hidden; touch-action: none;
touch-action: none; height:100%;
height:100%; width:100%;
width:100%;
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
display: block; display: block;
left: 10px; left: 10px;
top: 10px; top: 10px;
right: 10px; right: 10px;
bottom: 10px; bottom: 10px;
border: 2px dashed #fff; border: 2px dashed #fff;
border-radius: 10px; border-radius: 10px;
opacity: 0; opacity: 0;
transform: scale(0.95); transform: scale(0.95);
transition: opacity 300ms ease, transform 300ms cubic-bezier(.6,2,.6,1), background-color 300ms step-end, border-color 300ms step-end; transition: opacity 300ms ease, transform 300ms cubic-bezier(.6,2,.6,1), background-color 300ms step-end, border-color 300ms step-end;
pointer-events: none; pointer-events: none;
} }
&.drop-valid:after, &.drop-valid:after,
&.drop-invalid:after { &.drop-invalid:after {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
transition: opacity 300ms ease, transform 300ms cubic-bezier(.6,2,.6,1); transition: opacity 300ms ease, transform 300ms cubic-bezier(.6,2,.6,1);
} }
&.drop-valid:after { &.drop-valid:after {
background-color:rgba(88, 116, 88, 0.2); background-color:rgba(88, 116, 88, 0.2);
border-color: rgba(65, 129, 65, 0.5); border-color: rgba(65, 129, 65, 0.5);
} }
&.drop-invalid:after { &.drop-invalid:after {
background-color:rgba(119, 85, 85, 0.2); background-color:rgba(119, 85, 85, 0.2);
border-color:rgba(129, 63, 63, 0.5); border-color:rgba(129, 63, 63, 0.5);
}
} }
} }