Skip to content

Commit 5689ed9

Browse files
htbkoohtbkoo
authored
Merge pull request #3 from htbkoo/dev
Updated to leverage MUI to improve design and usability
2 parents 291f823 + ec5363a commit 5689ed9

21 files changed

+1161
-452
lines changed

‎package-lock.json

+240-253
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "lightweight-epub-reader-electron",
3-
"version": "0.2.1",
3+
"version": "0.3.0",
44
"description": " A lightweight epub-reader desktop app created with electron",
55
"main": "./dist/main/main.js",
66
"scripts": {
@@ -15,6 +15,7 @@
1515
"start": "npm run start-dev",
1616
"start-prod-local": "npm run build && cross-env NODE_ENV=production electron .",
1717
"test": "jest --config jest-unit.config.js",
18+
"test:watch": "jest --watch --config jest-unit.config.js",
1819
"pretest:e2e": "npm run build",
1920
"test:e2e": "jest --config test/e2e/jest-e2e.config.js",
2021
"dep:clean": "rimraf node_modules",
@@ -52,7 +53,7 @@
5253
"@types/react-dom": "^16.8.4",
5354
"@types/react-redux": "^7.0.9",
5455
"@types/react-test-renderer": "^16.8.1",
55-
"@types/webdriverio": "^5.0.0",
56+
"@types/webdriverio": "4.8.x",
5657
"@types/webpack-env": "^1.13.3",
5758
"@typescript-eslint/eslint-plugin": "^2.21.0",
5859
"@typescript-eslint/parser": "^2.21.0",
@@ -83,6 +84,8 @@
8384
"webpack-merge": "^4.2.2"
8485
},
8586
"dependencies": {
87+
"@material-ui/core": "^4.9.5",
88+
"@material-ui/icons": "^4.9.1",
8689
"dompurify": "^2.0.8",
8790
"electron-is-dev": "^1.1.0",
8891
"epub-chinese-converter": "0.1.6",

‎src/renderer/actions/appActions.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import {createAction} from "typesafe-actions";
2+
3+
export const setBookmarkDrawerOpen = createAction('SET_BOOKMARK_DRAWER_OPEN')<boolean>();

‎src/renderer/actions/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
import * as appActions from './appActions';
12
import * as bookActions from './bookActions';
23

34
export default {
5+
appActions,
46
bookActions
57
}

‎src/renderer/app.tsx

+9-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import * as React from 'react';
22
import * as ReactDOM from 'react-dom';
3-
import { Provider } from 'react-redux';
4-
import { AppContainer } from 'react-hot-loader';
3+
import {Provider} from 'react-redux';
4+
import {AppContainer} from 'react-hot-loader';
5+
import {ThemeProvider} from '@material-ui/core/styles';
56

67
import Application from './components/Application';
78
import store from './store';
89
import "./app.css";
10+
import {createEpubReaderTheme} from "./helpers/helpers";
911

1012
// Create main element
1113
const mainElement = document.createElement('div');
@@ -15,9 +17,11 @@ document.body.appendChild(mainElement);
1517
const render = (Component: () => JSX.Element) => {
1618
ReactDOM.render(
1719
<AppContainer>
18-
<Provider store={store}>
19-
<Component />
20-
</Provider>
20+
<ThemeProvider theme={createEpubReaderTheme()}>
21+
<Provider store={store}>
22+
<Component/>
23+
</Provider>
24+
</ThemeProvider>
2125
</AppContainer>,
2226
mainElement
2327
);

‎src/renderer/components/Application.tsx

+56-32
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,69 @@
11
import {hot} from 'react-hot-loader/root';
22
import * as React from 'react';
3+
import clsx from 'clsx';
4+
import {createStyles, makeStyles, Theme} from '@material-ui/core/styles';
5+
import AppBar from '@material-ui/core/AppBar';
6+
import CssBaseline from '@material-ui/core/CssBaseline';
7+
import Toolbar from '@material-ui/core/Toolbar';
8+
import useScrollTrigger from '@material-ui/core/useScrollTrigger';
9+
import Box from '@material-ui/core/Box';
10+
import Container from '@material-ui/core/Container';
11+
import Slide from '@material-ui/core/Slide';
312

413
import LoadBookPanelContainer from "../containers/LoadBookPanelContainer";
514
import BookTextAreaContainer from "../containers/BookTextAreaContainer";
6-
import BookmarkBarContainer from "../containers/BookmarkBarContainer";
15+
import BookmarkDrawerContainer from "../containers/BookmarkDrawerContainer";
716

8-
const styles = {
9-
"body": {"backgroundColor": "#111", "color": "aliceblue", "height": "100%", overflowY: "hidden" as any},
10-
"padding": {"padding": "1%", height: "100%", boxSizing: "border-box" as any}, // reference: https://stackoverflow.com/a/41663710
11-
"container": {"display": "flex" as any, "flexDirection": "column" as any, "height": "100%"},
12-
"ebook_content": {}
13-
};
17+
const useStyles = makeStyles((theme: Theme) =>
18+
createStyles({
19+
"body": {
20+
backgroundColor: theme.palette.primary.dark,
21+
color: theme.palette.primary.contrastText,
22+
minHeight: "100%",
23+
},
24+
"padding": {"padding": "1%", height: "100%", boxSizing: "border-box"}, // reference: https://stackoverflow.com/a/41663710
25+
}),
26+
);
27+
28+
function HideOnScroll({children}: { children: React.ReactElement; }) {
29+
const trigger = useScrollTrigger();
30+
31+
return (
32+
<Slide appear={false} direction="down" in={!trigger}>
33+
{children}
34+
</Slide>
35+
);
36+
}
37+
38+
function Application() {
39+
const classes = useStyles();
40+
41+
const trigger = useScrollTrigger();
1442

15-
const Application = () => {
1643
return (
17-
<div id="react-mount" className="container-fluid" style={styles.body}>
18-
<div style={styles.padding}>
19-
<div style={styles.container}>
20-
<div className="row">
21-
<div className="col-md-12">
44+
<div className={clsx(classes.body)}>
45+
<CssBaseline/>
46+
<BookmarkDrawerContainer/>
47+
48+
<HideOnScroll>
49+
<div>
50+
<AppBar>
51+
<Toolbar>
2252
<LoadBookPanelContainer/>
23-
</div>
24-
</div>
25-
26-
<div className="row" style={{marginBottom: "1%"}}>
27-
<BookmarkBarContainer/>
28-
</div>
29-
30-
<div className="row" style={{height: "100%", overflow: "auto", flexGrow: 1}}>
31-
<div className="col-md-12">
32-
<div className="panel panel-default">
33-
<div className="ebook-content panel-body" style={styles.ebook_content}>
34-
<BookTextAreaContainer/>
35-
</div>
36-
</div>
37-
</div>
38-
</div>
53+
</Toolbar>
54+
</AppBar>
3955
</div>
40-
</div>
56+
</HideOnScroll>
57+
58+
<Toolbar/>
59+
60+
<Container>
61+
<Box py={2}>
62+
<BookTextAreaContainer/>
63+
</Box>
64+
</Container>
4165
</div>
42-
)
43-
};
66+
);
67+
}
4468

4569
export default hot(Application);

‎src/renderer/components/BookmarkBar.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import * as React from 'react';
2+
import Button from '@material-ui/core/Button';
23

34
import {BookState} from "../reducers/bookReducer";
45

@@ -15,9 +16,11 @@ const BookmarkBar = ({book}: Props) => {
1516
return (
1617
<div style={{wordBreak: "break-word"}}>
1718
{Object.keys(chapters).map(chapterId => (
18-
<span key={chapterId} style={{margin: "5px"}}>
19-
<a style={{color: "aliceblue"}} href={`#${chapterId}`}>{getLinkText(chapters, chapterId)}</a>
20-
</span>
19+
<div>
20+
<Button key={chapterId} color="secondary" href={`#${chapterId}`}>
21+
{getLinkText(chapters, chapterId)}
22+
</Button>
23+
</div>
2124
))}
2225
</div>
2326
);

‎src/renderer/components/BookmarkDrawer.tsx

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import * as React from 'react';
2+
import {createStyles, makeStyles, Theme} from '@material-ui/core/styles';
3+
import Drawer from '@material-ui/core/Drawer';
4+
import Divider from '@material-ui/core/Divider';
5+
import Box from "@material-ui/core/Box";
6+
7+
import BookmarkBarContainer from "../containers/BookmarkBarContainer";
8+
import {AppState} from "../reducers/appReducer";
9+
10+
interface Props {
11+
app: AppState;
12+
setDrawerOpen: (open: boolean) => any;
13+
}
14+
15+
const useStyles = makeStyles((theme: Theme) =>
16+
createStyles({
17+
fullList: {
18+
width: 'auto',
19+
backgroundColor: theme.palette.primary.dark,
20+
padding: theme.spacing(1),
21+
},
22+
}),
23+
);
24+
25+
function BookmarkDrawer({app, setDrawerOpen}: Props) {
26+
const anchor = 'top';
27+
28+
const classes = useStyles();
29+
30+
const toggleDrawer = (open: boolean) => (
31+
event: React.KeyboardEvent | React.MouseEvent,
32+
) => {
33+
if (
34+
event.type === 'keydown' &&
35+
((event as React.KeyboardEvent).key === 'Tab' ||
36+
(event as React.KeyboardEvent).key === 'Shift')
37+
) {
38+
return;
39+
}
40+
41+
setDrawerOpen(open);
42+
};
43+
44+
return (
45+
<Box m={1}>
46+
<Drawer anchor={anchor} open={app.isBookmarkDrawerOpen} onClose={toggleDrawer(false)}>
47+
<DrawerContent/>
48+
</Drawer>
49+
</Box>
50+
);
51+
52+
function DrawerContent() {
53+
return (
54+
<div
55+
className={classes.fullList}
56+
role="presentation"
57+
onClick={toggleDrawer(false)}
58+
onKeyDown={toggleDrawer(false)}
59+
>
60+
<BookmarkBarContainer/>
61+
<Divider/>
62+
</div>
63+
);
64+
}
65+
}
66+
67+
68+
export default BookmarkDrawer;

0 commit comments

Comments
 (0)