interim commit

src/components/app/index.js

@@ -0,0 +1,36 @@
+import { Component } from 'preact';
+import { updater, toggle } from '../../lib/util';
+import Fab from '../fab';
+import Header from '../header';
+import Drawer from '../drawer';
+import Home from '../home';
+import style from './style';
+
+export default class App extends Component {
+	state = {
+		showDrawer: false,
+		showFab: true
+	};
+
+	openDrawer = updater(this, 'showDrawer', true);
+	closeDrawer = updater(this, 'showDrawer', false);
+	toggleDrawer = updater(this, 'showDrawer', toggle);
+
+	openFab = updater(this, 'showFab', true);
+	closeFab = updater(this, 'showFab', false);
+	toggleFab = updater(this, 'showFab', toggle);
+
+	render({ url }, { showDrawer, showFab }) {
+		return (
+			<div id="app" class={style.app}>
+				<Fab showing={showFab} />
+				<Header toggleDrawer={this.toggleDrawer} />
+				<Drawer showing={showDrawer} openDrawer={this.openDrawer} closeDrawer={this.closeDrawer} />
+				<div class={style.content} paint-outside>
+					<Home />
+				</div>
+				<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+			</div>
+		);
+	}
+}

src/components/app/style.scss

@@ -0,0 +1,21 @@
+@import '~style/helpers.scss';
+
+.app {
+	position: absolute;
+	top: $toolbar-height;
+	left: 0;
+	width: 100%;
+	bottom: 0;
+	contain: size layout style;
+	overflow: auto;
+	-webkit-overflow-scrolling: touch;
+
+	> .content {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		overflow: visible;
+	}
+}

src/components/drawer/index.js

@@ -0,0 +1,38 @@
+import { 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 style from './style';
+
+export default class Drawer extends Component {
+	render({ showing, openDrawer, closeDrawer }) {
+		return (
+			<MdlDrawer open={showing} onOpen={openDrawer} onClose={closeDrawer}>
+				<MdlDrawer.Header autosize class="mdc-theme--primary-bg">
+					<img class={style.logo} alt="logo" src="/assets/icon.png" />
+				</MdlDrawer.Header>
+				<MdlDrawer.Content autosize class={style.list}>
+					<List autosize>
+						<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} autosize>
+					<List.LinkItem href="/preferences">
+						<List.ItemIcon>settings</List.ItemIcon>
+						<Text id="PREFERENCES">Preferences</Text>
+					</List.LinkItem>
+				</div>
+			</MdlDrawer>
+		);
+	}
+}

src/components/drawer/style.scss

@@ -0,0 +1,29 @@
+@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%;
+}

src/components/fab/index.js

@@ -0,0 +1,28 @@
+import { Component } from 'preact';
+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 style from './style';
+
+export default class AppFab extends Component {
+	handleClick = () => {
+		console.log('TODO: Save the file to disk.');
+		this.setState({ loading: true });
+		setTimeout( () => {
+			this.setState({ loading: false });
+		}, 100000);
+	};
+
+	render({}, { loading }) {
+		return (
+			<Fab ripple secondary class={style.fab} onClick={this.handleClick}>
+				{ loading ? (
+					<RadialProgress primary class={style.progress} />
+				) : (
+					<Icon autosize>file_download</Icon>
+				) }
+			</Fab>
+		);
+	}
+}

src/components/fab/style.scss

@@ -0,0 +1,18 @@
+@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;
+	}
+}

src/components/header/index.js

@@ -0,0 +1,35 @@
+import { Component } from 'preact';
+import Toolbar from 'preact-material-components/Toolbar';
+// import 'preact-material-components/Toolbar/mdc-toolbar.scss';
+// import Icon from 'preact-material-components/Icon';
+// import 'preact-material-components/Icon/style.css';
+// import Fab from 'preact-material-components/Fab';
+// import 'preact-material-components/Fab/mdc-fab.scss';
+import style from './style';
+
+export default class Header extends Component {
+	// fabClick = () => {
+	// 	alert("Hello");
+	// };
+
+	render({ toggleDrawer, showHeader, showFab }) {
+		return (
+			<Toolbar class={`${style.toolbar} ${showHeader === false ? style.minimal : ''} inert`} fixed>
+				<Toolbar.Row>
+					<Toolbar.Title autosize class={style.title}>
+						<img class={style.logo} src="/assets/icon.png" />
+					</Toolbar.Title>
+					<Toolbar.Section autosize align-end>
+						<Toolbar.Icon autosize menu onClick={toggleDrawer}>menu</Toolbar.Icon>
+					</Toolbar.Section>
+				</Toolbar.Row>
+
+				{/*
+				<Fab class={style.fab} exited={showFab===false} ripple onClick={this.fabClick}>
+					<Icon>create</Icon>
+				</Fab>
+				*/}
+			</Toolbar>
+		);
+	}
+}

src/components/header/style.scss

@@ -0,0 +1,45 @@
+@import '~style/helpers.scss';
+:global {
+	@import '~preact-material-components/Toolbar/mdc-toolbar.scss';
+}
+
+.toolbar {
+	height: $toolbar-height;
+
+	&.minimal {
+		height: $toolbar-height / 2;
+	}
+
+	// > * {
+	// 	min-height: 0;
+	// }
+}
+
+.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%;
+}

src/components/home/index.js

@@ -0,0 +1,16 @@
+import { 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 style from './style';
+
+
+export default class Home extends Component {
+	render() {
+		return (
+			<div class={style.home}>
+				<h1>Home</h1>
+			</div>
+		);
+	}
+}

src/components/home/style.scss

@@ -0,0 +1,10 @@
+@import '~style/helpers.scss';
+
+// :global {
+// 	@import '~preact-material-components/Button/mdc-button.scss';
+// 	// @import '~preact-material-components/Switch/mdc-switch.scss';
+// }
+
+.home {
+	padding: 20px;
+}