diff --git a/src/App.jsx b/src/App.jsx index d307c0d0..51cc6250 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,10 +1,14 @@ import React from 'react'; + import Background from './components/widgets/Background'; import Clock from './components/widgets/Clock'; import Greeting from './components/widgets/Greeting'; import Quote from './components/widgets/Quote'; import Search from './components/widgets/Search'; +import Maximise from './components/widgets/Maximise'; + import Navbar from './components/Navbar'; + import SettingsFunctions from './modules/settingsFunctions'; import { ToastContainer } from 'react-toastify'; import Modal from 'react-modal'; @@ -69,6 +73,7 @@ export default class App extends React.PureComponent { + this.setState({ settingsModal: false })} isOpen={this.state.settingsModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}> { - console.log(index) - document.getElementsByClassName('choices')[index].style.background = 'black'; - })*/ document.getElementById('greetingName').style.color = 'white'; } } @@ -117,7 +102,6 @@ export default class Settings extends React.PureComponent { document.getElementById('customBackgroundHex').innerText = hex; }*/ - document.getElementById('backgroundImage').classList.toggle('backgroundEffects'); document.getElementById('center').classList.toggle('backgroundEffects'); } diff --git a/src/components/modals/Update.jsx b/src/components/modals/Update.jsx index 18783469..42574062 100644 --- a/src/components/modals/Update.jsx +++ b/src/components/modals/Update.jsx @@ -20,8 +20,7 @@ export default class Update extends React.PureComponent { }); try { // Get update log from the API - let data = await fetch(Constants.API_URL + '/getUpdate'); - data = await data.json(); + const data = await (await fetch(Constants.API_URL + '/getUpdate')).json(); this.setState({ title: data.title, content: data.content, diff --git a/src/components/modals/settings/Checkbox.jsx b/src/components/modals/settings/Checkbox.jsx index 2949ca69..4b61d250 100644 --- a/src/components/modals/settings/Checkbox.jsx +++ b/src/components/modals/settings/Checkbox.jsx @@ -7,33 +7,24 @@ export default class Checkbox extends React.PureComponent { constructor(...args) { super(...args); this.state = { - checked: true + checked: true } } + handleChange() { + SettingsFunctions.setItem(this.props.name); + this.setState({ checked: this.state.checked }); + } + + componentDidMount() { + this.setState({ checked: (localStorage.getItem(this.props.name) === 'true') }); + } + render() { - const handleChange = () => { - SettingsFunctions.setItem(this.props.name); - let checked; - if (this.state.checked === true) checked = false; - else checked = true; - this.setState({ checked: checked }); - } - - let value = localStorage.getItem(this.props.name); - - switch (value) { - case 'true': value = true; break; - case 'false': value = false; break; - default: value = false; - } - - this.setState({ checked: value }); - return ( } + control={} label={this.props.text} />
diff --git a/src/components/widgets/Maximise.jsx b/src/components/widgets/Maximise.jsx new file mode 100644 index 00000000..f3f9dd11 --- /dev/null +++ b/src/components/widgets/Maximise.jsx @@ -0,0 +1,41 @@ +import React from 'react'; +import FullscreenIcon from '@material-ui/icons/Fullscreen'; + +export default class View extends React.PureComponent { + constructor(...args) { + super(...args); + this.state = { + hidden: false + }; + } + + setAttribute(blur, brightness) { + document.querySelector('#backgroundImage').setAttribute( + 'style', + `background-image: url(${document.getElementById('backgroundImage').style.backgroundImage.replace('url("', '').replace('")', '')}); + -webkit-filter: blur(${blur}); + -webkit-filter: brightness(${brightness}%);` + ); + } + + viewStuff() { + const elements = ['#searchBar', '.navbar-container', '.clock', '.greeting', '.quotediv']; + elements.forEach(element => { + (this.state.hidden === false) ? document.querySelector(element).style.display = 'none' : document.querySelector(element).style.display = 'block'; + }); + if (this.state.hidden === false) { + this.setState({ hidden: true }); + this.setAttribute(0, 100); + } else { + this.setState({ hidden: false }); + this.setAttribute(localStorage.getItem('blur'), localStorage.getItem('brightness')); + } + } + + render() { + if (localStorage.getItem('view') === 'false') return
; + return
+ this.viewStuff()} /> +
+ } +} \ No newline at end of file diff --git a/src/components/widgets/Quote.jsx b/src/components/widgets/Quote.jsx index 551e57ca..fddd28e6 100644 --- a/src/components/widgets/Quote.jsx +++ b/src/components/widgets/Quote.jsx @@ -34,8 +34,7 @@ export default class Quote extends React.PureComponent { if (localStorage.getItem('offlineMode') === 'true') return this.doOffline(); try { // First we try and get a quote from the API... - let data = await fetch(Constants.API_URL + '/getQuote'); - data = await data.json(); + const data = await (await fetch(Constants.API_URL + '/getQuote')).json(); if (data.statusCode === 429) return this.doOffline(); // If we hit the ratelimit, we fallback to local quotes this.setState({ quote: '"' + data.quote + '"', @@ -61,7 +60,7 @@ export default class Quote extends React.PureComponent { if (localStorage.getItem('copyButton') === 'false') copy = ''; return ( -
+

{`${this.state.quote}`}

{this.state.author} {copy}

diff --git a/src/scss/modules/_credit.scss b/src/scss/modules/_credit.scss index 8bf8bacd..2a9ba056 100644 --- a/src/scss/modules/_credit.scss +++ b/src/scss/modules/_credit.scss @@ -9,6 +9,12 @@ margin-bottom: -10px; } +.view { + position: absolute; + bottom: 10px; + right: 25px; +} + #photographer { position: absolute; bottom: 10px; @@ -16,12 +22,12 @@ width: 1000px; } -.locationicon { +.locationicon, #viewButton { width: auto; cursor: pointer; } -.navbar-container > svg, #backgroundCredits > svg { +.navbar-container > svg, #backgroundCredits > svg, #viewButton > svg { font-size: calc(10px + 1.5vmin) !important; position: absolute; bottom: 2px;