From ad1da0e52f75ac94929f6a99195a69f839107933 Mon Sep 17 00:00:00 2001 From: Determinant Date: Mon, 8 Apr 2019 22:03:39 +0000 Subject: init --- src/About.tsx | 86 +++++++++++++++++++++++++++++++++ src/Grid.tsx | 17 +++++++ src/Snow.tsx | 26 ++++++++++ src/index.html | 17 +++++++ src/index.tsx | 149 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/theme.ts | 18 +++++++ 6 files changed, 313 insertions(+) create mode 100644 src/About.tsx create mode 100644 src/Grid.tsx create mode 100644 src/Snow.tsx create mode 100644 src/index.html create mode 100644 src/index.tsx create mode 100644 src/theme.ts (limited to 'src') diff --git a/src/About.tsx b/src/About.tsx new file mode 100644 index 0000000..9aae40c --- /dev/null +++ b/src/About.tsx @@ -0,0 +1,86 @@ +import React from 'react'; +import { Theme, withStyles, StyleRules } from '@material-ui/core/styles'; +import Typography from '@material-ui/core/Typography'; +import Link from '@material-ui/core/Link'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; + +const styles = (theme: Theme): StyleRules => ({ + infoField: { + fontWeight: theme.typography.fontWeightMedium, + paddingRight: 14, + }, + body: { + margin: '0 auto', + width: 800, + fontSize: 16 + }, + pre: { + fontFamily: "Monospace" + } +}); + +type AboutProps = { + classes: { + infoField: string, + body: string, + pre: string + } +}; + +function About(props: AboutProps) { + const { classes } = props; + return ( +
+
+ The MIT License (MIT) +

Copyright 2019 Maofan "Ted" Yin

+ +

Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions:

+ +

The above copyright notice and this permission notice shall be included in + all copies or substantial portions of the Software.

+ +

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + THE SOFTWARE.

+
+ + + Email: + 73d at tedyin dot com + + + GitHub: + + Determinant/chromicle + + + + About Me: + + https://www.cs.cornell.edu/~tedyin/ + + + + Buy me a cup of coffee: + + Ether: 0xFEeed0f0BA87824819aabfa789f41FA2dd9ad81e + Bitcoin: 1CbVBB6Gv7WP4u39wsN416SJrjmvQDjggw + + + +
+ ); +} + +export default withStyles(styles)(About); diff --git a/src/Grid.tsx b/src/Grid.tsx new file mode 100644 index 0000000..65cf2ec --- /dev/null +++ b/src/Grid.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import 'typeface-roboto'; +import MGrid from '@material-ui/core/Grid'; + + +interface GridProps { + classes: {} +} + +class Grid extends React.Component { + render() { + const { classes } = this.props; + return (
); + } +} + +export default Grid; diff --git a/src/Snow.tsx b/src/Snow.tsx new file mode 100644 index 0000000..47a1c06 --- /dev/null +++ b/src/Snow.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import MGrid from '@material-ui/core/Grid'; +import { Theme, withStyles } from '@material-ui/core/styles'; + +interface SnowProps { + classes: {} +} + +const styles = (theme: Theme) => ({ + buttonSpacer: { + marginBottom: theme.spacing.unit * 4, + }, +}); + +class Snow extends React.Component { + render() { + const { classes } = this.props; + + return ( + + + ); + } +} + +export default withStyles(styles)(Snow); diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..a51779c --- /dev/null +++ b/src/index.html @@ -0,0 +1,17 @@ + + + + + + + + Chromicle + + + +
+ + diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..da751ca --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,149 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import 'typeface-roboto'; +import { Theme, withStyles, MuiThemeProvider } from '@material-ui/core/styles'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import Tabs from '@material-ui/core/Tabs'; +import Tab, { TabProps } from '@material-ui/core/Tab'; +import { LinkProps } from '@material-ui/core/Link'; +import Grid from '@material-ui/core/Grid'; +import { HashRouter as Router, RouteComponentProps, withRouter, Route, Link, Redirect, Switch } from "react-router-dom"; +import { TransitionGroup, CSSTransition } from "react-transition-group"; + +import { theme } from './theme'; +import Snow from './Snow'; +import About from './About'; + +const styles = (theme: Theme) => ({ + root: { + display: 'flex', + height: '100vh', + }, + appBar: { + zIndex: theme.zIndex.drawer + 1, + transition: theme.transitions.create(['width', 'margin'], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + }, + title: { + flexGrow: 1, + display: 'inline-block' + }, + appBarSpacer: theme.mixins.toolbar, + contentWrapper: { + position: 'relative' as 'relative', + flexGrow: 1, + padding: theme.spacing.unit * 3, + overflow: 'auto', + }, + content: { + position: 'absolute' as 'absolute', + left: theme.spacing.unit * 3, + right: theme.spacing.unit * 3, + paddingBottom: theme.spacing.unit * 3, + }, + indicator: { + backgroundColor: theme.palette.primary.contrastText + }, + fadeEnter: { + opacity: 0.001 + }, + fadeEnterActive: { + opacity: 1, + transition: 'opacity 300ms ease-in' + }, + fadeExit: { + opacity: 1 + }, + fadeExitActive: { + opacity: 0.001, + transition: 'opacity 300ms ease-in' + } +}); + +interface MainTabsProps extends RouteComponentProps { + classes: { + root: string, + appBar: string, + appBarSpacer: string, + toolbar: string, + title: string, + indicator: string, + content: string, + contentWrapper: string, + fadeEnter: string, + fadeEnterActive: string, + fadeExit: string, + fadeExitActive: string, + } +} + +class MainTabs extends React.Component { + handleChangeTab = (event: React.SyntheticEvent<{}>, currentTab: any) => { + this.props.history.push(currentTab); + } + + render() { + const { classes, location } = this.props; + return ( +
+ + + + Snow + + + + + + + + +
+
+ + +
+ + {console.log(location)} + + + }/> + +
+
+
+
+
+ ); + } +} + +class Main extends React.Component { + render() { + let Tabs = withRouter(withStyles(styles)(MainTabs)); + return ( + + + ); + } +} + +ReactDOM.render(
, document.getElementById('root')); diff --git a/src/theme.ts b/src/theme.ts new file mode 100644 index 0000000..0269fd3 --- /dev/null +++ b/src/theme.ts @@ -0,0 +1,18 @@ +import { createMuiTheme } from '@material-ui/core/styles'; +import orange from '@material-ui/core/colors/orange'; +import deepOrange from '@material-ui/core/colors/deepOrange'; + +export const defaultChartColor = deepOrange[300]; +export const theme = createMuiTheme({ + palette: { + primary: { + light: orange[300], + main: orange[500], + dark: orange[700], + contrastText: "#fff" + } + }, + typography: { + useNextVariants: true, + } +}); -- cgit v1.2.3