Skip to content
This repository was archived by the owner on Sep 3, 2024. It is now read-only.

Commit 3719bb1

Browse files
thefringeninjathefringeninja
authored
Merge pull request #20 from thefringeninja/darkside
Support Dark Theme w/ Toggle
2 parents fbdd7a3 + a6432c0 commit 3719bb1

File tree

11 files changed

+209
-55
lines changed

11 files changed

+209
-55
lines changed

‎src/SqlStreamStoreBrowser.tsx‎

Lines changed: 57 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,17 @@
1-
import { AppBar, CssBaseline, Toolbar, Typography } from '@material-ui/core';
1+
import {
2+
AppBar,
3+
CssBaseline,
4+
IconButton,
5+
Theme,
6+
Toolbar,
7+
Typography,
8+
WithStyles,
9+
withStyles,
10+
} from '@material-ui/core';
211
import { MuiThemeProvider } from '@material-ui/core/styles';
12+
import { SvgIconProps } from '@material-ui/core/SvgIcon';
313
import { JSONSchema7 } from 'json-schema';
4-
import React, { ComponentType } from 'react';
14+
import React, { ComponentType, createElement } from 'react';
515
import { Observable as obs } from 'rxjs';
616
import {
717
AuthorizationProvider,
@@ -11,12 +21,16 @@ import {
1121
Notifications,
1222
withAuthorization,
1323
} from './components';
14-
import { SqlStreamStore } from './components/Icons';
24+
import {
25+
LightbulbFull,
26+
LightbulbOutline,
27+
SqlStreamStore,
28+
} from './components/Icons';
1529
import { connect, createState } from './reactive';
1630
import { actions, store, Viewer } from './stream-store';
17-
import theme from './theme';
31+
import themes from './themes';
1832
import { AuthorizationProps, HalLink, HalLinks } from './types';
19-
import { mediaTypes } from './utils';
33+
import { mediaTypes, preventDefault } from './utils';
2034

2135
const getSelfAlias = (links: HalLinks) =>
2236
Object.keys(links)
@@ -39,6 +53,7 @@ interface SqlStreamStoreBrowserState {
3953
mediaType: string;
4054
_links: HalLinks;
4155
self: HalLink;
56+
theme: Theme;
4257
forms: { [rel: string]: JSONSchema7 };
4358
}
4459
const state$ = createState<SqlStreamStoreBrowserState>(
@@ -48,6 +63,7 @@ const state$ = createState<SqlStreamStoreBrowserState>(
4863
store.hal$.forms$.map(forms => ['forms', () => forms]),
4964
store.hal$.loading$.map(loading => ['loading', () => loading]),
5065
store.hal$.mediaType$.map(mediaType => ['mediaType', () => mediaType]),
66+
themes.theme$.map(theme => ['theme', () => theme]),
5167
),
5268
obs.of({
5369
_links: {},
@@ -57,6 +73,7 @@ const state$ = createState<SqlStreamStoreBrowserState>(
5773
self: {
5874
href: '',
5975
},
76+
theme: themes.defaultTheme,
6077
}),
6178
);
6279

@@ -70,26 +87,50 @@ const initialNavigation = ({ authorization }: AuthorizationProps) =>
7087
authorization,
7188
);
7289

73-
const Hero = () => (
74-
<AppBar position={'static'}>
75-
<Toolbar>
76-
<SqlStreamStore color={'action'} />
77-
<Typography variant={'h6'} color={'inherit'}>
78-
Sql Stream Store
79-
</Typography>
80-
</Toolbar>
81-
</AppBar>
90+
const lightbulbs: { [key: string]: ComponentType<SvgIconProps> } = {
91+
dark: LightbulbFull,
92+
light: LightbulbOutline,
93+
};
94+
95+
const heroStyle = {
96+
themeToggle: {
97+
marginLeft: 'auto',
98+
},
99+
};
100+
interface HeroProps {
101+
theme: Theme;
102+
}
103+
104+
const onThemeToggle = preventDefault(() => themes.actions.type.next(void 0));
105+
106+
const Hero: ComponentType<HeroProps> = withStyles(heroStyle)(
107+
({ theme, classes }: HeroProps & WithStyles<typeof heroStyle>) => (
108+
<AppBar position={'static'}>
109+
<Toolbar>
110+
<SqlStreamStore color={'action'} />
111+
<Typography variant={'h6'} color={'inherit'}>
112+
Sql Stream Store
113+
</Typography>
114+
<IconButton
115+
onClick={onThemeToggle}
116+
className={classes.themeToggle}
117+
>
118+
{createElement(lightbulbs[theme.palette.type])}
119+
</IconButton>
120+
</Toolbar>
121+
</AppBar>
122+
),
82123
);
83124

84125
const SqlStreamStoreBrowser: ComponentType<
85126
SqlStreamStoreBrowserState
86127
> = withAuthorization()(
87128
mount<SqlStreamStoreBrowserState & AuthorizationProps>(initialNavigation)(
88-
({ loading, ...props }) => (
129+
({ loading, theme, ...props }) => (
89130
<MuiThemeProvider theme={theme}>
90131
<div>
91132
<CssBaseline />
92-
<Hero />
133+
<Hero theme={theme} />
93134
<Loading open={loading} />
94135
<NavigationProvider onNavigate={onNavigate}>
95136
<Viewer {...props} />

‎src/components/Hyperlink.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1-
import { WithStyles, withStyles } from '@material-ui/core';
1+
import { Theme, WithStyles, withStyles } from '@material-ui/core';
22
import React, { ComponentType } from 'react';
3-
import theme from '../theme';
43
import { HalLink, HalLinks, NavigatableProps } from '../types';
54
import { preventDefault } from '../utils';
65
import { withNavigation } from './NavigationProvider';
76

8-
const color = theme.palette.action.active;
9-
10-
const styles = {
7+
const styles = ({
8+
palette: {
9+
action: { active: color },
10+
},
11+
}: Theme) => ({
1112
hyperlink: {
1213
'&:active': {
1314
color,
@@ -20,7 +21,7 @@ const styles = {
2021
},
2122
color,
2223
},
23-
};
24+
});
2425

2526
interface HyperlinkProps {
2627
rel: string;

‎src/components/Icons/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,4 @@ export { default as SpaceBar } from '@material-ui/icons/SpaceBar';
2121
export { default as Search } from '@material-ui/icons/Search';
2222
export { default as List } from '@material-ui/icons/List';
2323
export { default as Help } from '@material-ui/icons/Help';
24+
export { LightbulbFull, LightbulbOutline } from './mui';

‎src/components/Icons/mui/LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2014 Call-Em-All
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎src/components/Icons/mui/LightbulbFull.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/* tslint:disable:max-line-length */
2+
import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
3+
import React from 'react';
4+
5+
const LightbulbFull = (props: SvgIconProps) => (
6+
<SvgIcon {...props}>
7+
<path
8+
d={
9+
'm9,21c0,0.55 0.45,1 1,1l4,0c0.55,0 1,-0.45 1,-1l0,-1l-6,0l0,1zm3,-19c-3.86,0 -7,3.14 -7,7c0,2.38 1.19,4.47 3,5.74l0,2.26c0,0.55 0.45,1 1,1l6,0c0.55,0 1,-0.45 1,-1l0,-2.26c1.81,-1.27 3,-3.36 3,-5.74c0,-3.86 -3.14,-7 -7,-7z'
10+
}
11+
/>
12+
</SvgIcon>
13+
);
14+
15+
export default LightbulbFull;

‎src/components/Icons/mui/LightbulbOutline.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/* tslint:disable:max-line-length */
2+
import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
3+
import React from 'react';
4+
5+
const LightbulbOutline = (props: SvgIconProps) => (
6+
<SvgIcon {...props}>
7+
<path
8+
d={
9+
'M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z'
10+
}
11+
/>
12+
</SvgIcon>
13+
);
14+
15+
LightbulbOutline.muiName = 'SvgIcon';
16+
17+
export default LightbulbOutline;

‎src/components/Icons/mui/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default as LightbulbFull } from './LightbulbFull';
2+
export { default as LightbulbOutline } from './LightbulbOutline';

‎src/components/Notifications.tsx‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
Snackbar,
44
SnackbarContent,
55
Theme,
6+
Typography,
67
WithStyles,
78
withStyles,
89
} from '@material-ui/core';
@@ -187,15 +188,17 @@ const Notification: ComponentType<NotificationProps> = withStyles(styles)(
187188
className={classNames(classes[variant], className)}
188189
message={
189190
<span className={classes.message}>
190-
{createElement(iconsByVariant[variant], {
191-
className: classNames(
192-
classes.icon,
193-
classes.iconVariant,
194-
),
195-
})}
196-
{title} {subheader}
197-
<br />
198-
{content}
191+
<Typography variant={'body2'}>
192+
{createElement(iconsByVariant[variant], {
193+
className: classNames(
194+
classes.icon,
195+
classes.iconVariant,
196+
),
197+
})}
198+
{title} {subheader}
199+
<br />
200+
{content}
201+
</Typography>
199202
</span>
200203
}
201204
action={[
@@ -204,7 +207,9 @@ const Notification: ComponentType<NotificationProps> = withStyles(styles)(
204207
color={'inherit'}
205208
onClick={() => dismiss.next(messageId)}
206209
>
207-
<Close className={classes.icon} />
210+
<Typography variant={'body2'}>
211+
<Close className={classes.icon} />
212+
</Typography>
208213
</IconButton>,
209214
]}
210215
{...other}

‎src/stream-store/Viewer/HalViewer/StreamMessage.tsx‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
Drawer,
66
Tab,
77
Tabs,
8+
Typography,
89
WithStyles,
910
withStyles,
1011
} from '@material-ui/core';
@@ -251,7 +252,7 @@ const StreamMessageJson = withStyles(style)(class extends PureComponent<
251252
const { streams, loading, open } = this.state;
252253

253254
return (
254-
<div>
255+
<div className={classes.drawerPaper}>
255256
<Inspector
256257
data={json}
257258
expandLevel={32}
@@ -310,8 +311,30 @@ class StreamMessageTabs extends PureComponent<
310311
onChange={this._handleChange}
311312
indicatorColor={'primary'}
312313
>
313-
<Tab label={'Data'} icon={<Notes />} />
314-
<Tab label={'Metadata'} icon={<Settings />} />
314+
<Tab
315+
label={
316+
<Typography variant={'body1'}>
317+
{'Data'}
318+
</Typography>
319+
}
320+
icon={
321+
<Typography>
322+
<Notes />
323+
</Typography>
324+
}
325+
/>
326+
<Tab
327+
label={
328+
<Typography variant={'body1'}>
329+
{'Metadata'}
330+
</Typography>
331+
}
332+
icon={
333+
<Typography>
334+
<Settings />
335+
</Typography>
336+
}
337+
/>
315338
</Tabs>
316339
</CardActions>
317340
<CardContent>

‎src/theme.ts‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

0 commit comments

Comments
 (0)