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) {
return (
<div id="app" class={style.app}>
<file-drop accept="image/*" onfiledrop={this.onFileDrop}>
<file-drop accept="image/*" onfiledrop={this.onFileDrop} class={style.drop}>
{(!file)
? <Intro onFile={this.onIntroPickFile} onError={this.showError} />
: (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;
}
:global {
file-drop {
overflow: hidden;
touch-action: none;
height:100%;
width:100%;
.drop {
overflow: hidden;
touch-action: none;
height:100%;
width:100%;
&:after {
content: '';
position: absolute;
display: block;
left: 10px;
top: 10px;
right: 10px;
bottom: 10px;
border: 2px dashed #fff;
border-radius: 10px;
opacity: 0;
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;
pointer-events: none;
}
&:after {
content: '';
position: absolute;
display: block;
left: 10px;
top: 10px;
right: 10px;
bottom: 10px;
border: 2px dashed #fff;
border-radius: 10px;
opacity: 0;
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;
pointer-events: none;
}
&.drop-valid:after,
&.drop-invalid:after {
opacity: 1;
transform: scale(1);
transition: opacity 300ms ease, transform 300ms cubic-bezier(.6,2,.6,1);
}
&.drop-valid:after,
&.drop-invalid:after {
opacity: 1;
transform: scale(1);
transition: opacity 300ms ease, transform 300ms cubic-bezier(.6,2,.6,1);
}
&.drop-valid:after {
background-color:rgba(88, 116, 88, 0.2);
border-color: rgba(65, 129, 65, 0.5);
}
&.drop-valid:after {
background-color:rgba(88, 116, 88, 0.2);
border-color: rgba(65, 129, 65, 0.5);
}
&.drop-invalid:after {
background-color:rgba(119, 85, 85, 0.2);
border-color:rgba(129, 63, 63, 0.5);
}
&.drop-invalid:after {
background-color:rgba(119, 85, 85, 0.2);
border-color:rgba(129, 63, 63, 0.5);
}
}