RoboSats/robosats
1
1
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2024-12-26 05:43:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add demonstratory zoom out button

Browse Source
This commit is contained in:
Reckless_Satoshi 2022-08-19 14:01:20 -07:00 committed by Felipe Mitjans
parent 645671265a
commit e2455ec3f9
1 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/components/App.js
View File

@ -13,6 +13,7 @@ import i18n from "./i18n";
import DarkModeIcon from '@mui/icons-material/DarkMode'; import DarkModeIcon from '@mui/icons-material/DarkMode';
import LightModeIcon from '@mui/icons-material/LightMode'; import LightModeIcon from '@mui/icons-material/LightMode';
import SchoolIcon from '@mui/icons-material/School'; import SchoolIcon from '@mui/icons-material/School';
import ZoomOutIcon from '@mui/icons-material/ZoomOut';
export default class App extends Component { export default class App extends Component {
constructor(props) { constructor(props) {
@ -20,10 +21,11 @@ export default class App extends Component {
this.state = { this.state = {
dark: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches, dark: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
openLearn: false, openLearn: false,
theme: {typography: { fontSize: 14 }},
} }
} }
lightTheme = createTheme({}); lightTheme = createTheme ({});
darkTheme = createTheme({ darkTheme = createTheme({
palette: { palette: {
@ -34,13 +36,25 @@ export default class App extends Component {
}, },
}); });
onZoomOutClick = () => {
this.setState(({theme}) => ({
theme: {
...theme,
typography: {
fontSize: this.state.theme.typography.fontSize - 1,
},
}
}));
}
render() { render() {
return ( return (
<Suspense fallback="loading language"> <Suspense fallback="loading language">
<I18nextProvider i18n={i18n}> <I18nextProvider i18n={i18n}>
<ThemeProvider theme={this.state.dark ? this.darkTheme : this.lightTheme}> <ThemeProvider theme={this.state.dark ? this.darkTheme : createTheme(this.state.theme)}>
<CssBaseline/> <CssBaseline/>
<LearnDialog open={this.state.openLearn} onClose={()=> this.setState({openLearn:false})}/> <LearnDialog open={this.state.openLearn} onClose={()=> this.setState({openLearn:false})}/>
<IconButton sx={{position:'fixed',right:'68px'}} onClick={this.onZoomOutClick}><ZoomOutIcon/></IconButton>
<IconButton sx={{position:'fixed',right:'34px'}} onClick={()=> this.setState({openLearn:true})}><SchoolIcon/></IconButton> <IconButton sx={{position:'fixed',right:'34px'}} onClick={()=> this.setState({openLearn:true})}><SchoolIcon/></IconButton>
<IconButton sx={{position:'fixed',right:'0px'}} onClick={()=>this.setState({dark:!this.state.dark})}> <IconButton sx={{position:'fixed',right:'0px'}} onClick={()=>this.setState({dark:!this.state.dark})}>
{this.state.dark ? <LightModeIcon/>:<DarkModeIcon/>} {this.state.dark ? <LightModeIcon/>:<DarkModeIcon/>}