Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-01-31 10:31:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add page settings button

Browse Source
This commit is contained in:
F. Mitjans 2022-08-25 19:45:02 -04:00 committed by Felipe Mitjans
parent a777ecb989
commit 7b4dca44f8
1 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,12 +14,15 @@ 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'; import ZoomOutIcon from '@mui/icons-material/ZoomOut';
import ZoomInIcon from '@mui/icons-material/ZoomIn';
import SettingsIcon from '@mui/icons-material/Settings';
export default class App extends Component { export default class App extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
dark: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches, dark: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
expandedSettings: false,
openLearn: false, openLearn: false,
theme: {typography: { fontSize: 14 }}, theme: {typography: { fontSize: 14 }},
} }
@ -36,12 +39,20 @@ export default class App extends Component {
}, },
}); });
onZoomOutClick = () => { onSettingsClick = () => {
this.setState({
expandedSettings: ! this.state.expandedSettings
})
}
onZoomClick = (direction) => {
let zoomChange;
direction === "out" ? zoomChange = -1 : zoomChange = 1;
this.setState(({theme}) => ({ this.setState(({theme}) => ({
theme: { theme: {
...theme, ...theme,
typography: { typography: {
fontSize: this.state.theme.typography.fontSize - 1, fontSize: this.state.theme.typography.fontSize + zoomChange,
}, },
} }
})); }));
@ -54,11 +65,13 @@ export default class App extends Component {
<ThemeProvider theme={this.state.dark ? this.darkTheme : createTheme(this.state.theme)}> <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:'0px'}} onClick={()=> this.setState({expandedSettings: !this.state.expandedSettings})}><SettingsIcon/></IconButton>
<IconButton sx={{position:'fixed',right:'34px'}} onClick={()=> this.setState({openLearn:true})}><SchoolIcon/></IconButton> <IconButton sx={{position:'fixed', right:'0px', top: '34px', display: this.state.expandedSettings ? '':'none'}} onClick={() => this.onZoomClick("in")}><ZoomInIcon/></IconButton>
<IconButton sx={{position:'fixed',right:'0px'}} onClick={()=>this.setState({dark:!this.state.dark})}> <IconButton sx={{position:'fixed', right:'0px', top: '68px', display: this.state.expandedSettings ? '':'none'}} onClick={() => this.onZoomClick("out")}><ZoomOutIcon/></IconButton>
<IconButton sx={{position:'fixed', right:'0px', top: '102px', display: this.state.expandedSettings ? '':'none'}} onClick={()=>this.setState({dark:!this.state.dark})}>
{this.state.dark ? <LightModeIcon/>:<DarkModeIcon/>} {this.state.dark ? <LightModeIcon/>:<DarkModeIcon/>}
</IconButton> </IconButton>
<IconButton sx={{position:'fixed',right:'34px'}} onClick={()=> this.setState({openLearn:true})}><SchoolIcon/></IconButton>
<UnsafeAlert className="unsafeAlert"/> <UnsafeAlert className="unsafeAlert"/>
<HomePage {...this.state}/> <HomePage {...this.state}/>
</ThemeProvider> </ThemeProvider>