vigdorov/free-your-brain
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Добавление страницы information (#41)

Browse Source
This commit is contained in:
Nikolay
2020-12-29 15:02:18 +03:00
committed by GitHub
parent 33cd679de3
commit 534fa35485
31 changed files with 434 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/app/components/both-menu/BothMenu.tsx
View File

@ -1,11 +1,16 @@
import {AppBar, createStyles, Fab, IconButton, makeStyles, Theme, Toolbar} from '@material-ui/core';
import React, {memo} from 'react';
import Slide from '@material-ui/core/Slide';
import MoreIcon from '@material-ui/icons/MoreVert';
import AddIcon from '@material-ui/icons/Add';
import MoveToInboxIcon from '@material-ui/icons/MoveToInbox';
import CalendarTodayIcon from '@material-ui/icons/CalendarToday';
import ListAltIcon from '@material-ui/icons/ListAlt';
type Props = {
trigger: boolean;
}
const useStyles = makeStyles((theme: Theme) =>
createStyles({
iconRight: {
@ -29,51 +34,52 @@ const useStyles = makeStyles((theme: Theme) =>
}),
);
const BothMenu: React.FC = () => {
const BothMenu: React.FC<Props> = ({trigger}) => {
const classes = useStyles();
return (
<AppBar
position="fixed"
color="primary"
className={classes.appBar}
>
<Toolbar>
<IconButton
className={classes.iconRight}
edge="start"
color="inherit"
>
<MoveToInboxIcon />
</IconButton>
<IconButton
edge="end"
color="inherit"
>
<ListAltIcon />
</IconButton>
<Fab
color="secondary"
className={classes.fabButton}
>
<AddIcon />
</Fab>
<div className={classes.grow} />
<IconButton
className={classes.iconRight}
edge="start"
color="inherit"
>
<CalendarTodayIcon />
</IconButton>
<IconButton
edge="end"
color="inherit"
>
<MoreIcon />
</IconButton>
</Toolbar>
</AppBar>
<Slide appear={false} direction="up" in={!trigger}>
<AppBar
color="primary"
className={classes.appBar}
>
<Toolbar>
<IconButton
className={classes.iconRight}
edge="start"
color="inherit"
>
<MoveToInboxIcon />
</IconButton>
<IconButton
edge="end"
color="inherit"
>
<ListAltIcon />
</IconButton>
<Fab
color="secondary"
className={classes.fabButton}
>
<AddIcon />
</Fab>
<div className={classes.grow} />
<IconButton
className={classes.iconRight}
edge="start"
color="inherit"
>
<CalendarTodayIcon />
</IconButton>
<IconButton
edge="end"
color="inherit"
>
<MoreIcon />
</IconButton>
</Toolbar>
</AppBar>
</Slide>
);
};

48
src/app/components/page/Page.tsx
View File

@ -1,5 +1,7 @@
import React, {Fragment, memo} from 'react';
import {Route, Switch} from 'react-router-dom';
import {Container, createStyles, makeStyles, useScrollTrigger} from '@material-ui/core';
import mainPageRouter from '_pages/main/routing';
import chaosBoxPageRouter from '_pages/chaos-box/routing';
import calendarPageRouter from '_pages/calendar/routing';
@ -13,26 +15,40 @@ import TopMenu from '../top-menu';
import './Page.scss';
import BothMenu from '../both-menu';
const useStyles = makeStyles(() =>
createStyles({
container: {
height: '100hv',
display: 'flex',
flexDirection: 'column',
},
}),
);
const Page: React.FC = () => {
const classes = useStyles();
const trigger = useScrollTrigger();
return (
<Fragment>
<TopMenu />
<div>
<Switch>
{mainPageRouter}
{chaosBoxPageRouter}
{calendarPageRouter}
{informationPageRouter}
{projectsPageRouter}
{settingsPageRouter}
{signInPageRouter}
{tagsPageRouter}
<Route>
<NotFoundPage />
</Route>
</Switch>
<div className={classes.container}>
<TopMenu trigger={trigger} />
<Container>
<Switch>
{mainPageRouter}
{chaosBoxPageRouter}
{calendarPageRouter}
{informationPageRouter}
{projectsPageRouter}
{settingsPageRouter}
{signInPageRouter}
{tagsPageRouter}
<Route>
<NotFoundPage />
</Route>
</Switch>
</Container>
<BothMenu trigger={trigger} />
</div>
<BothMenu />
</Fragment>
);
};

16
src/app/components/top-menu/TopMenu.tsx
View File

@ -3,6 +3,7 @@ import {useHistory} from 'react-router-dom';
import {createStyles, makeStyles} from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Slide from '@material-ui/core/Slide';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
@ -13,13 +14,14 @@ import {PAGE_TITLE} from '_consts/common';
import {usePageType} from '_hooks/usePageType';
import {buildPath} from '_utils/buildPath';
type Props = {
trigger: boolean;
}
const NO_NAME_AVATAR = 'https://d.newsweek.com/en/full/425257/02-10-putin-economy.jpg';
const useStyles = makeStyles(() =>
createStyles({
root: {
flexGrow: 1,
},
title: {
flexGrow: 1,
display: 'flex',
@ -28,7 +30,7 @@ const useStyles = makeStyles(() =>
}),
);
const TopMenu: React.FC = () => {
const TopMenu: React.FC<Props> = ({trigger}) => {
const classes = useStyles();
const pageType = usePageType();
const history = useHistory();
@ -39,8 +41,8 @@ const TopMenu: React.FC = () => {
const title = PAGE_TITLE[pageType];
return (
<div className={classes.root}>
<AppBar position="static">
<Slide appear={false} direction="down" in={!trigger}>
<AppBar position="sticky">
<Toolbar>
{pageType === PageType.Main && (
<IconButton
@ -70,7 +72,7 @@ const TopMenu: React.FC = () => {
<Avatar src={NO_NAME_AVATAR} />
</Toolbar>
</AppBar>
</div>
</Slide>
);
};

14
src/app/index.tsx
View File

@ -4,10 +4,14 @@ import {HashRouter} from 'react-router-dom';
import App from './components/page';
ReactDOM.render(
<React.StrictMode>
<HashRouter >
<App />
</HashRouter>
</React.StrictMode>,
/*
* Выключаем стрикт мод, пока не починят
* https://github.com/mui-org/material-ui/issues/13394
*/
// <React.StrictMode>
<HashRouter >
<App />
</HashRouter>,
// </React.StrictMode>
document.getElementById('root')
);