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

Removing everything that isn't skeletonyy (#22)

Browse Source 
* Simplifying

* Ignoring CSS defs
This commit is contained in:
Jake Archibald
2018-05-04 17:05:44 +01:00
parent 5f7f9e32a8
commit b619427237
26 changed files with 75 additions and 875 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/components/app/index.tsx
View File

@@ -1,41 +1,16 @@
import { h, Component } from 'preact';
import { When, bind } from '../../lib/util';
import Fab from '../fab';
import Header from '../header';
// import Drawer from 'async!../drawer';
const Drawer = require('async!../drawer').default;
import Home from '../home';
import { bind } from '../../lib/util';
import * as style from './style.scss';
import Output from '../output';
type Props = {
url?: string
};
export type FileObj = {
id: number,
data?: string,
uri?: string,
error?: Error | DOMError | String,
file: File,
loading: boolean
};
type Props = {};
type State = {
showDrawer: boolean,
showFab: boolean,
files: FileObj[]
img?: ImageBitmap
};
let idCounter = 0;
export default class App extends Component<Props, State> {
state: State = {
showDrawer: false,
showFab: true,
files: []
};
enableDrawer = false;
state: State = {};
constructor() {
super();
@@ -49,87 +24,25 @@ export default class App extends Component<Props, State> {
}
@bind
openDrawer() {
this.setState({ showDrawer: true });
}
@bind
closeDrawer() {
this.setState({ showDrawer: false });
}
@bind
toggleDrawer() {
this.setState({ showDrawer: !this.state.showDrawer });
async onFileChange(event: Event) {
const fileInput = event.target as HTMLInputElement;
if (!fileInput.files || !fileInput.files[0]) return;
// TODO: handle decode error
const img = await createImageBitmap(fileInput.files[0]);
this.setState({ img });
}
@bind
openFab() {
this.setState({ showFab: true });
}
@bind
closeFab() {
this.setState({ showFab: false });
}
@bind
toggleFab() {
this.setState({ showFab: !this.state.showFab });
}
@bind
loadFile(file: File) {
let fileObj: FileObj = {
id: ++idCounter,
file,
error: undefined,
loading: true,
data: undefined
};
this.setState({
files: [fileObj]
});
Promise.all([
new Response(file).text(),
new Response(file).blob()
])
.then(([data, blob]) => ({
data,
uri: URL.createObjectURL(blob)
}))
.catch(error => ({ error }))
.then(state => {
let files = this.state.files.slice();
files[files.indexOf(fileObj)] = Object.assign({}, fileObj, {
loading: false,
...state
});
this.setState({ files });
});
}
render({ url }: Props, { showDrawer, showFab, files }: State) {
if (showDrawer) this.enableDrawer = true;
if (showFab) showFab = files.length > 0;
render({ }: Props, { img }: State) {
return (
<div id="app" class={style.app}>
<Fab showing={showFab} />
<Header class={style.header} onToggleDrawer={this.toggleDrawer} loadFile={this.loadFile} />
{/* Avoid loading & rendering the drawer until the first time it is shown. */}
<When value={showDrawer}>
<Drawer showing={showDrawer} openDrawer={this.openDrawer} closeDrawer={this.closeDrawer} />
</When>
{/*
Note: this is normally where a <Router> with auto code-splitting goes.
Since we don't seem to need one (yet?), it's omitted.
*/}
<div class={style.content}>
<Home files={files} />
</div>
{img ?
<Output img={img} />
:
<div>
<h1>Select an image</h1>
<input type="file" onChange={this.onFileChange} />
</div>
}
</div>
);
}

26
src/components/app/style.scss
View File

@@ -1,25 +1,3 @@
@import '~style/helpers.scss';
.app {
position: absolute;
display: flex;
flex-direction: column;
top: 0;
left: 0;
width: 100%;
bottom: 0;
overflow: hidden;
z-index: 1;
.header {
flex: 0 0 auto;
position: relative;
}
.content {
flex: 1 1 auto;
contain: size layout style;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.app h1 {
color: green;
}

3
src/components/app/style.scss.d.ts vendored
View File

@@ -1,3 +0,0 @@
export const app: string;
export const header: string;
export const content: string;

63
src/components/drawer/index.tsx
View File

@@ -1,63 +0,0 @@
import { h, Component } from 'preact';
import MdlDrawer from 'preact-material-components-drawer';
import 'preact-material-components/Drawer/style.css';
import List from 'preact-material-components/List';
// import 'preact-material-components/List/style.css';
import { Text } from 'preact-i18n';
import * as style from './style.scss';
import { bind } from '../../lib/util';
type Props = {
showing: boolean,
openDrawer(): void,
closeDrawer(): void
};
type State = {
rendered: boolean
};
export default class Drawer extends Component<Props, State> {
state: State = {
rendered: false
};
@bind
setRendered() {
this.setState({ rendered: true });
}
render({ showing, openDrawer, closeDrawer }: Props, { rendered }: State) {
if (showing && !rendered) {
setTimeout(this.setRendered, 20);
showing = false;
}
return (
<MdlDrawer open={showing} onOpen={openDrawer} onClose={closeDrawer}>
<MdlDrawer.Header class="mdc-theme--primary-bg">
<img class={style.logo} alt="logo" src="/assets/icon.png" />
</MdlDrawer.Header>
<MdlDrawer.Content>
<List>
<List.LinkItem href="/">
<List.ItemIcon>verified_user</List.ItemIcon>
<Text id="SIGN_IN">Sign In</Text>
</List.LinkItem>
<List.LinkItem href="/register">
<List.ItemIcon>account_circle</List.ItemIcon>
<Text id="REGISTER">Register</Text>
</List.LinkItem>
</List>
</MdlDrawer.Content>
<div class={style.bottom}>
<List.LinkItem href="/preferences">
<List.ItemIcon>settings</List.ItemIcon>
<Text id="PREFERENCES">Preferences</Text>
</List.LinkItem>
</div>
</MdlDrawer>
);
}
}

29
src/components/drawer/style.scss
View File

@@ -1,29 +0,0 @@
@import '~style/helpers.scss';
:global {
// @import '~preact-material-components/Drawer/style.css';
@import '~preact-material-components/List/mdc-list.scss';
}
.drawer {
:global(.mdc-list-item__start-detail) {
margin-right: 16px;
}
}
.logo {
width: 50%;
}
.category img {
opacity: .6;
}
.bottom {
position: absolute;
bottom: 0;
bottom: constant(safe-area-inset-bottom);
bottom: env(safe-area-inset-bottom);
left: 0;
width: 100%;
}

14
src/components/drawer/style.scss.d.ts vendored
View File

@@ -1,14 +0,0 @@
export const mdcListItemSecondaryText: string;
export const mdcListItemGraphic: string;
export const mdcListItemMeta: string;
export const mdcListItem: string;
export const mdcListDivider: string;
export const mdcListGroup: string;
export const mdcListGroupSubheader: string;
export const drawer: string;
export const logo: string;
export const category: string;
export const bottom: string;
export const mdcRippleFgRadiusIn: string;
export const mdcRippleFgOpacityIn: string;
export const mdcRippleFgOpacityOut: string;

47
src/components/fab/index.tsx
View File

@@ -1,47 +0,0 @@
import { h, Component } from 'preact';
import { bind } from '../../lib/util';
import Icon from 'preact-material-components/Icon';
import 'preact-material-components/Icon/style.css';
import Fab from 'preact-material-components/Fab';
import RadialProgress from 'material-radial-progress';
import * as style from './style.scss';
type Props = {
showing: boolean
};
type State = {
loading: boolean
};
export default class AppFab extends Component<Props, State> {
state: State = {
loading: false
};
@bind
setLoading(loading: boolean) {
this.setState({ loading });
}
@bind
handleClick() {
console.log('TODO: Save the file to disk.');
this.setState({ loading: true });
setTimeout(() => {
this.setState({ loading: false });
}, 1000);
}
render({ showing }: Props, { loading }: State) {
return (
<Fab ripple secondary exited={showing === false} class={style.fab} onClick={this.handleClick}>
{ loading ? (
<RadialProgress primary class={style.progress} />
) : (
<Icon>file_download</Icon>
) }
</Fab>
);
}
}

18
src/components/fab/style.scss
View File

@@ -1,18 +0,0 @@
@import '~style/helpers.scss';
:global {
@import '~preact-material-components/Fab/mdc-fab.scss';
}
.fab {
position: fixed;
right: 14px;
bottom: 14px;
z-index: 4;
.progress {
width: 24px;
height: 24px;
color: white;
--mdc-theme-primary: #fff;
}
}

5
src/components/fab/style.scss.d.ts vendored
View File

@@ -1,5 +0,0 @@
export const fab: string;
export const progress: string;
export const mdcRippleFgRadiusIn: string;
export const mdcRippleFgOpacityIn: string;
export const mdcRippleFgOpacityOut: string;

53
src/components/header/index.tsx
View File

@@ -1,53 +0,0 @@
import { h, Component } from 'preact';
import Toolbar from 'preact-material-components/Toolbar';
import cx from 'classnames';
import * as style from './style.scss';
import { bind } from '../../lib/util';
type Props = {
'class'?: string,
showHeader?: boolean,
onToggleDrawer?(): void,
showFab?(): void,
loadFile(f: File): void
};
type State = {};
export default class Header extends Component<Props, State> {
input?: HTMLInputElement;
@bind
setInputRef(c?: Element) {
this.input = c as HTMLInputElement;
}
@bind
upload() {
this.input!.click();
}
@bind
handleFiles() {
let files = this.input!.files;
if (files && files.length) {
this.props.loadFile(files[0]);
}
}
render({ class: c, onToggleDrawer, showHeader = true, showFab }: Props) {
return (
<Toolbar fixed class={cx(c, style.toolbar, 'inert', !showHeader && style.minimal)}>
<Toolbar.Row>
<Toolbar.Title class={style.title}>
<Toolbar.Icon title="Upload" ripple onClick={this.upload} id="uploadIcon">file_upload</Toolbar.Icon>
</Toolbar.Title>
<Toolbar.Section align-end>
<Toolbar.Icon ripple onClick={onToggleDrawer}>menu</Toolbar.Icon>
</Toolbar.Section>
</Toolbar.Row>
<input class={style.fileInput} ref={this.setInputRef} type="file" onChange={this.handleFiles} aria-labelledby="uploadIcon" />
</Toolbar>
);
}
}

52
src/components/header/style.scss
View File

@@ -1,52 +0,0 @@
@import '~style/helpers.scss';
:global {
@import '~preact-material-components/Toolbar/mdc-toolbar.scss';
}
.toolbar {
// height: $toolbar-height;
&.minimal {
display: none;
// height: $toolbar-height / 2;
}
// > * {
// min-height: 0;
// }
}
.fileInput {
position: absolute;
left: 0;
top: -999px;
}
.fab {
position: fixed;
display: block;
right: 14px;
bottom: 14px;
// z-index: 999;
// transform: translateZ(0);
}
.logo {
height: 1em;
}
.menu {
position: absolute;
top: $toolbar-height;
right: 5px;
.menuItem {
margin-right: 16px;
}
}
.title {
padding: 3px 0 0;
font-weight: 300;
font-size: 140%;
}

8
src/components/header/style.scss.d.ts vendored
View File

@@ -1,8 +0,0 @@
export const toolbar: string;
export const minimal: string;
export const fileInput: string;
export const fab: string;
export const logo: string;
export const menu: string;
export const menuItem: string;
export const title: string;

41
src/components/home/index.tsx
View File

@@ -1,41 +0,0 @@
import { h, Component } from 'preact';
// import Button from 'preact-material-components/Button';
// import Switch from 'preact-material-components/Switch';
// import 'preact-material-components/Switch/style.css';
import * as style from './style.scss';
import { FileObj } from '../app';
type Props = {
files: FileObj[]
};
type State = {
active: boolean
};
export default class Home extends Component<Props, State> {
state: State = {
active: false
};
componentDidMount() {
setTimeout(() => {
this.setState({ active: true });
});
}
render({ files }: Props, { active }: State) {
return (
<div class={style.home}>
{ files && files[0] && (
<img src={files[0].uri} class={style.image} />
) || (
<div class={style.content}>
<h1>Squoosh</h1>
<p>Test home content</p>
</div>
) }
</div>
);
}
}

21
src/components/home/style.scss
View File

@@ -1,21 +0,0 @@
@import '~style/helpers.scss';
// :global {
// @import '~preact-material-components/Button/mdc-button.scss';
// // @import '~preact-material-components/Switch/mdc-switch.scss';
// }
.home {
padding: 20px;
}
.image {
width: 100%;
}
.content {
max-width: 600px;
margin: 50px auto 0;
font-size: 120%;
text-align: center;
}

3
src/components/home/style.scss.d.ts vendored
View File

@@ -1,3 +0,0 @@
export const home: string;
export const image: string;
export const content: string;

44
src/components/output/index.tsx Normal file
View File

@@ -0,0 +1,44 @@
import { h, Component } from 'preact';
// This isn't working.
// https://github.com/GoogleChromeLabs/squoosh/issues/14
import * as style from './style.scss';
type Props = {
img: ImageBitmap
};
type State = {};
export default class App extends Component<Props, State> {
state: State = {};
canvas?: HTMLCanvasElement;
constructor() {
super();
}
updateCanvas(img: ImageBitmap) {
if (!this.canvas) return;
const ctx = this.canvas.getContext('2d');
if (!ctx) return;
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
ctx.drawImage(img, 0, 0);
}
componentDidMount() {
this.updateCanvas(this.props.img);
}
componentDidUpdate({ img }: Props) {
if (img !== this.props.img) this.updateCanvas(this.props.img);
}
render({ img }: Props, { }: State) {
return (
<div>
<canvas ref={c => this.canvas = c as HTMLCanvasElement} width={img.width} height={img.height} />
<p>And that's all the app does so far!</p>
</div>
);
}
}

3
src/components/output/style.scss Normal file
View File

@@ -0,0 +1,3 @@
.app h1 {
color: green;
}