mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-18 22:44:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: new background component

Browse Source
This commit is contained in:
David Ralph
2021-03-20 12:05:14 +00:00
parent 70756befa2
commit 0c71f0ebef
4 changed files with 177 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/App.jsx
View File

@@ -2,7 +2,6 @@ import React from 'react';
import Background from './components/widgets/background/Background';
import Widgets from './components/widgets/Widgets';
import PhotoInformation from './components/widgets/background/PhotoInformation';
import Navbar from './components/widgets/navbar/Navbar';
import SettingsFunctions from './modules/helpers/settings';
@@ -23,7 +22,9 @@ export default class App extends React.PureComponent {
mainModal: false,
updateModal: false,
welcomeModal: false,
feedbackModal: false
feedbackModal: false,
toastDisplayTime: localStorage.getItem('toastDisplayTime') || 2500,
overlayClassList: (localStorage.getItem('animations') === 'true') ? 'Overlay modal-animation' : 'Overlay'
};
}
@@ -40,6 +41,20 @@ export default class App extends React.PureComponent {
SettingsFunctions.loadSettings();
// dark theme support for modals and info card
let modalClassList = 'Modal';
let tooltipClassList = 'infoCard';
if ((localStorage.getItem('brightnessTime') && new Date().getHours() > 18) || localStorage.getItem('darkTheme') === 'true') {
modalClassList += ' dark';
tooltipClassList += ' dark';
}
this.setState({
modalClassList: modalClassList,
tooltipClassList: tooltipClassList
});
// These lines of code prevent double clicking the page or pressing CTRL + A from highlighting the page
document.addEventListener('mousedown', (event) => {
if (event.detail > 1) {
@@ -69,34 +84,21 @@ export default class App extends React.PureComponent {
}
render() {
// dark theme support for modals and info card
let modalClassList = 'Modal';
let tooltipClassList = 'infoCard';
if ((localStorage.getItem('brightnessTime') && new Date().getHours() > 18) || localStorage.getItem('darkTheme') === 'true') {
modalClassList += ' dark';
tooltipClassList += ' dark';
}
const overlayClassList = (localStorage.getItem('animations') === 'true') ? 'Overlay modal-animation' : 'Overlay';
const toastDisplayTime = localStorage.getItem('toastDisplayTime') || 2500;
return (
<React.Fragment>
<Background/>
<ToastContainer position='bottom-right' autoClose={toastDisplayTime} newestOnTop={true} closeOnClick pauseOnFocusLoss/>
<Background photoInformationClass={this.state.tooltipClassList}/>
<ToastContainer position='bottom-right' autoClose={this.state.toastDisplayTime} newestOnTop={true} closeOnClick pauseOnFocusLoss/>
<div id='center'>
<Navbar openModal={(modal) => this.setState({ [modal]: true })}/>
<Widgets/>
<PhotoInformation className={tooltipClassList}/>
<React.Suspense fallback={renderLoader()}>
<Modal closeTimeoutMS={300} id={'modal'} onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
<Modal closeTimeoutMS={300} id={'modal'} onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={this.state.modalClassList} overlayClassName={this.state.overlayClassList} ariaHideApp={false}>
<Main modalClose={() => this.setState({ mainModal: false })} />
</Modal>
<Modal onRequestClose={() => this.setState({ updateModal: false })} isOpen={this.state.updateModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
<Modal onRequestClose={() => this.setState({ updateModal: false })} isOpen={this.state.updateModal} className={this.state.modalClassList} overlayClassName={this.state.overlayClassList} ariaHideApp={false}>
<Update modalClose={() => this.setState({ updateModal: false })} />
</Modal>
<Modal onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
<Modal onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className={this.state.modalClassList} overlayClassName={this.state.overlayClassList} ariaHideApp={false}>
<Welcome modalClose={() => this.closeWelcome()} />
</Modal>
{/* <Modal onRequestClose={() => this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>