From 7c055d6aff49e77e04b2d2b61934b41c955b58d7 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sat, 18 Jul 2020 22:00:34 +0100 Subject: [PATCH] More Settings Co-authored-by: Alex Sparkes --- .env | 2 + package.json | 4 +- public/index.html | 2 +- src/App.jsx | 55 ++++++--- src/components/Background.jsx | 12 ++ src/components/Clock.jsx | 4 +- src/components/Greeting.jsx | 2 +- src/components/Quote.jsx | 25 ++-- src/components/Settings.jsx | 62 ++++++++-- src/components/Update.jsx | 4 +- src/scss/index.scss | 48 +++++++- src/scss/modules/_miscellaneous.scss | 45 -------- src/scss/modules/_modal.scss | 116 +++++++------------ src/scss/modules/_quote.scss | 2 - src/scss/modules/_search.scss | 2 +- src/scss/modules/_settings.scss | 166 +++++++++++++++------------ src/scss/modules/_toast.scss | 33 +++--- 17 files changed, 321 insertions(+), 263 deletions(-) create mode 100644 .env delete mode 100644 src/scss/modules/_miscellaneous.scss diff --git a/.env b/.env new file mode 100644 index 00000000..7db6011f --- /dev/null +++ b/.env @@ -0,0 +1,2 @@ +GENERATE_SOURCEMAP=false +INLINE_RUNTIME_CHUNK=false \ No newline at end of file diff --git a/package.json b/package.json index 80fd3357..578cedca 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "homepage": "https://muetab.xyz", "bugs": "https://github.com/mue/mue/issues/new?assignees=&labels=bug&template=bug-report.md&title=%5BBUG%5D", "license": "BSD-3-Clause", - "version": "0.7.1", + "version": "3.0", "dependencies": { "@material-ui/core": "^4.11.0", "@material-ui/icons": "^4.9.1", @@ -31,7 +31,7 @@ }, "scripts": { "start": "react-scripts start", - "build": "env INLINE_RUNTIME_CHUNK=false && react-scripts build", + "build": "react-scripts build", "chrome": "cp manifest/chrome.json build/manifest.json", "firefox": "cp manifest/firefox.json build/manifest.json", "opera": "cp manifest/opera.json build/manifest.json && cp manifest/background-opera.js build/" diff --git a/public/index.html b/public/index.html index f00ffc6c..b615b75e 100644 --- a/public/index.html +++ b/public/index.html @@ -1,5 +1,5 @@ - + diff --git a/src/App.jsx b/src/App.jsx index 6009e046..7e36876f 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -7,12 +7,14 @@ import Quote from './components/Quote'; import Search from './components/Search'; import Credit from './components/Credit'; import Navbar from './components/Navbar'; -import Settings from './components/Settings'; -import Update from './components/Update'; import Toast from './components/Toast'; import Modal from 'react-modal'; import './scss/index.scss'; +const Settings = React.lazy(() => import('./components/Settings')); +const Update = React.lazy(() => import('./components/Update')); +const renderLoader = () =>
; + //* App export default class App extends React.Component { // Modal stuff @@ -25,15 +27,34 @@ export default class App extends React.Component { }; } + setDefaultSettings() { + localStorage.clear(); + + localStorage.setItem('time', true); + localStorage.setItem('greeting', true); + localStorage.setItem('background', true); + localStorage.setItem('quote', true); + localStorage.setItem('searchBar', true); + localStorage.setItem('blur', 0); + localStorage.setItem('copyButton', false); + localStorage.setItem('seconds', false); + localStorage.setItem('24hour', false); + localStorage.setItem('offlineMode', false); + localStorage.setItem('webp', false); + localStorage.setItem('events', true); + + // Set theme depending on user preferred + if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) localStorage.setItem('darkTheme', true); + else localStorage.setItem('darkTheme', false); + + // Finally we set this to true so it doesn't run the function on every load + localStorage.setItem('firstRun', true); + window.location.reload(); + } + // Render all the components render() { - if (!localStorage.getItem('firstRun')) { - localStorage.setItem('time', true); - localStorage.setItem('greeting', true); - localStorage.setItem('background', true); - localStorage.setItem('quote', true); - localStorage.setItem('firstRun', true); - } + if (!localStorage.getItem('firstRun')) this.setDefaultSettings(); let modalClassList = 'Modal'; const darkTheme = localStorage.getItem('darkTheme'); @@ -43,20 +64,22 @@ export default class App extends React.Component {
-
+ this.setState({ settingsModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} /> - - this.setState({ settingsModal: false })} /> - - - this.setState({ updateModal: false })} /> - + + + this.setState({ settingsModal: false })} setDefaultSettings={() => this.setDefaultSettings()} /> + + + this.setState({ updateModal: false })} /> + +
); diff --git a/src/components/Background.jsx b/src/components/Background.jsx index fd7bcdc9..85aa56c8 100644 --- a/src/components/Background.jsx +++ b/src/components/Background.jsx @@ -27,6 +27,18 @@ export default class Background extends React.Component { const enabled = localStorage.getItem('offlineMode'); if (enabled === 'true') return this.doOffline(); + const colour = localStorage.getItem('customBackgroundColour'); + if (colour) { + document.getElementById('backgroundCredits').style.display = 'none'; // Hide the location icon + return document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-color: ${colour}`); // Set background and blur etc + } + + const custom = localStorage.getItem('customBackground'); + if (custom) { + document.getElementById('backgroundCredits').style.display = 'none'; // Hide the location icon + return document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-image: url(${custom})`); // Set background and blur etc + } + try { // First we try and get an image from the API... let requestURL; const enabled = localStorage.getItem('webp'); diff --git a/src/components/Clock.jsx b/src/components/Clock.jsx index 6ee20308..babe806a 100644 --- a/src/components/Clock.jsx +++ b/src/components/Clock.jsx @@ -16,9 +16,7 @@ export default class Clock extends React.Component { const now = new Date(); let sec = ''; - if (localStorage.getItem('seconds') === 'true') { - sec = `:${('00' + now.getSeconds()).slice(-2)}`; - } + if (localStorage.getItem('seconds') === 'true') sec = `:${('00' + now.getSeconds()).slice(-2)}`; if (localStorage.getItem('24hour') === 'true') { this.setState({ diff --git a/src/components/Greeting.jsx b/src/components/Greeting.jsx index 592293db..ca0567b4 100644 --- a/src/components/Greeting.jsx +++ b/src/components/Greeting.jsx @@ -39,7 +39,7 @@ export default class Greeting extends React.Component { let data = localStorage.getItem('greetingName'); if (typeof data === 'string') { - data = data.replace(/\s/g, ''); + data = data.replace(/\s/g, ' '); if (data.length > 0) name = `, ${data}`; } diff --git a/src/components/Quote.jsx b/src/components/Quote.jsx index 133ee180..af7cec4e 100644 --- a/src/components/Quote.jsx +++ b/src/components/Quote.jsx @@ -28,9 +28,7 @@ export default class Quote extends React.Component { try { // First we try and get a quote from the API... let data = await fetch('https://api.muetab.xyz/getQuote'); data = await data.json(); - if (data.statusCode === 429) { // If we hit the ratelimit, we fallback to local quotes - this.doOffline(); - } + if (data.statusCode === 429) this.doOffline(); // If we hit the ratelimit, we fallback to local quotes this.setState({ quote: '"' + data.quote + '"', author: data.author @@ -42,9 +40,9 @@ export default class Quote extends React.Component { copyQuote() { copy(`${this.state.quote} - ${this.state.author}`); - var x = document.getElementById('toast'); - x.className = "show"; - setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000); + let toast = document.getElementById('toast'); + toast.className = 'show'; + setTimeout(() => { toast.className = toast.className.replace('show', ''); }, 3000); } componentDidMount() { @@ -54,18 +52,13 @@ export default class Quote extends React.Component { } render() { + let copy = this.copyQuote() }>; + const enabled = localStorage.getItem('copyButton'); + if (enabled === 'false') copy = ''; + return [

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

, -

{this.state.author} this.copyQuote() }>

, +

{this.state.author} {copy}

, ]; } - - - - - - - - - } diff --git a/src/components/Settings.jsx b/src/components/Settings.jsx index 99a0a3dc..07243db1 100644 --- a/src/components/Settings.jsx +++ b/src/components/Settings.jsx @@ -13,7 +13,7 @@ export default class Settings extends React.Component { localStorage.setItem(key, val); //document.getElementById(`${key}Status`).innerHTML = val === true ? 'ON' : 'OFF'; - console.log(`[DEBUG] setItem(${key}, ${old} -> ${val})`); + // console.log(`[DEBUG] setItem(${key}, ${old} -> ${val})`); } toggleExtra(element, element2) { @@ -24,9 +24,43 @@ export default class Settings extends React.Component { saveStuff() { localStorage.setItem('blur', document.getElementById('blurRange').value); // this is better than inline onChange for performance localStorage.setItem('greetingName', document.getElementById('greetingName').value); + localStorage.setItem('customBackground', document.getElementById('customBackground').value); + if (!document.getElementById('customBackgroundColour').enabled === 'false') localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundColour').value); window.location.reload(); } + resetItem(key) { + switch (key) { + case 'greetingName': + localStorage.setItem('greetingName', ''); + document.getElementById('greetingName').value = ''; + break; + case 'customBackgroundColour': + localStorage.setItem('customBackgroundColour', ''); + document.getElementById('customBackgroundColour').enabled = 'false'; + break; + case 'customBackground': + localStorage.setItem('customBackground', ''); + document.getElementById('customBackground').value = ''; + break; + case 'blur': + localStorage.setItem('blur', 0); + document.getElementById('blurRange').value = 0; + document.getElementById('blurAmount').innerText = '0'; + break; + default: + console.log('[ERROR] resetItem requires a key!'); + } + this.showToast(); + } + + showToast() { + let toast = document.getElementById('toast'); + toast.innerText = 'Reset successfully!'; + toast.className = 'show'; + setTimeout(() => { toast.className = toast.className.replace('show', ''); }, 3000); + } + componentDidMount() { document.getElementById('greetingName').value = localStorage.getItem('greetingName'); @@ -50,6 +84,10 @@ export default class Settings extends React.Component { tag.checked = value; } } + + document.addEventListener('keyup', (event) => { + if (event.keyCode === 13) this.saveStuff(); + }); } render() { @@ -91,7 +129,7 @@ export default class Settings extends React.Component { @@ -102,7 +140,8 @@ export default class Settings extends React.Component {
  • + +
    • this.setItem('copyButton')} id='copyButtonStatus' /> @@ -118,21 +157,29 @@ export default class Settings extends React.Component {
      • document.getElementById('blurAmount').innerText = document.getElementById('blurRange').value} />
      + +

      • Search Bar

      - this.toggleExtra(document.getElementsByClassName('extraSettings')[4], document.getElementsByClassName('expandIcons')[4])} /> + {/* this.toggleExtra(document.getElementsByClassName('extraSettings')[4], document.getElementsByClassName('expandIcons')[4])} /> */ } -
    • + {/*
      -
      • + */}

      Offline Mode

      @@ -166,6 +213,7 @@ export default class Settings extends React.Component {
      + ; diff --git a/src/components/Update.jsx b/src/components/Update.jsx index eba7a386..bbdb7705 100644 --- a/src/components/Update.jsx +++ b/src/components/Update.jsx @@ -4,9 +4,9 @@ export default class Update extends React.Component { constructor(...args) { super(...args); this.state = { - title: '', + title: 'Loading...', date: '', - content: '' + content: 'Loading...' }; } diff --git a/src/scss/index.scss b/src/scss/index.scss index 9ec3e3d1..a4693891 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -8,14 +8,58 @@ @import 'modules/modal'; @import 'modules/settings'; @import 'modules/toast'; -@import 'modules/miscellaneous'; + +body { + background: #2f3640; + margin: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-family: 'Lexend Deca', sans-serif; + overflow: hidden; +} + +#center { + margin-left: 2vw; + margin-right: 2vw; + display: flex; + flex-direction: column; + justify-content: center; + font-size: calc(10px + 2vmin); + text-align: center; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + text-shadow: 0 0 25px rgba(0, 0, 0, 0.3); +} + +::placeholder { + color: #ffffff; + opacity: 1; +} + +#root { + min-height: 100vh; + display: grid; + color: white; +} #backgroundImage { - height:100vh; + height: 100vh; background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed; z-index: 0; border: none; + transform: scale(1.1); } + + + +@font-face { + font-family: 'Lexend Deca'; + src: url('/./fonts/LexendDeca-Regular.woff2') format('woff2'); +} \ No newline at end of file diff --git a/src/scss/modules/_miscellaneous.scss b/src/scss/modules/_miscellaneous.scss deleted file mode 100644 index f0afdc2a..00000000 --- a/src/scss/modules/_miscellaneous.scss +++ /dev/null @@ -1,45 +0,0 @@ -body { - background: #2f3640; - margin: 0; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-family: 'Lexend Deca'; - overflow: hidden; -} - -#center { - margin-left: 2vw; - margin-right: 2vw; - display: flex; - flex-direction: column; - justify-content: center; - font-size: calc(10px + 2vmin); - text-align: center; - position:absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - margin: auto; - text-shadow: 0 0 25px rgba(0, 0, 0, 0.3); -} - -::placeholder { - color: #ffffff; - opacity: 1; -} - -#root { - background-size: cover; - background-repeat: no-repeat; - background-position: center; - background-attachment: fixed; - min-height: 100vh; - display: grid; - color: white; -} - -@font-face { - font-family: 'Lexend Deca'; - src: url('/./fonts/LexendDeca-Regular.woff2') format('woff2'); -} \ No newline at end of file diff --git a/src/scss/modules/_modal.scss b/src/scss/modules/_modal.scss index 842ddf7c..11e686a1 100644 --- a/src/scss/modules/_modal.scss +++ b/src/scss/modules/_modal.scss @@ -1,14 +1,21 @@ .Modal { + color: #000; background-color: #fff; - width: 600px; - margin: 0 auto; - margin-top: 40px; + box-shadow: 0 0 200px rgba(0, 0, 0, 0.3); border: none; opacity: 1; z-index: -2; - height: auto; padding: 20px; cursor: hand; + + &:focus { + outline: 0; + } +} + +a.modalLink { + color: #5352ed; + cursor: pointer; } .Overlay { @@ -19,83 +26,44 @@ bottom: 0; } -.switch { - position: relative; - display: inline-block; - width: 60px; - height: 34px; -} - -.switch input { - opacity: 0; - width: 0; - height: 0; -} - -.slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #ccc; - -webkit-transition: .4s; - transition: .4s; -} - -.slider:before { - position: absolute; - content: ""; - height: 26px; - width: 26px; - left: 4px; - bottom: 4px; - background-color: white; - -webkit-transition: .4s; - transition: .4s; -} - -input:checked+.slider { - background-color: #2196F3; -} - -input:focus+.slider { - box-shadow: 0 0 1px #2196F3; -} - -.slider.round { - border-radius: 34px; -} - -.slider.round:before { - border-radius: 50%; -} - -::-webkit-scrollbar { - width: 5px; -} - -::-webkit-scrollbar-thumb:hover { - background: #555; -} - - -.Modal:focus { - outline: 0; -} - .closeModal { float: right; font-size: 2em; cursor: pointer; -} -.closeModal:hover { - color: grey; + &:hover { + color: grey; + } } .dark { background-color: #2f3542 !important; color: white !important; -} \ No newline at end of file +} + +.ReactModal__Html--open, +.ReactModal__Body--open { + overflow: hidden; /* prevents background page from scrolling when the modal is open */ +} + +.ReactModal__Overlay { + position: fixed; + z-index: 999999; + top: 0; + left: 0; + width: 100vw; + height: 90vh; + display: flex; + align-items: baseline; + justify-content: center; + margin-top: 20px; +} + +.ReactModal__Content { + width: 500px; + max-width: 600px; + max-height: calc(100vh - 10vh); + box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25); + overflow-y: auto; + position: relative; +} diff --git a/src/scss/modules/_quote.scss b/src/scss/modules/_quote.scss index 5158a49a..56bb8b8f 100644 --- a/src/scss/modules/_quote.scss +++ b/src/scss/modules/_quote.scss @@ -3,8 +3,6 @@ text-shadow: 0 0 25px rgba(0, 0, 0, 0.3); } - - @media screen and (min-width: 600px) { .quote { margin-left: 30%; diff --git a/src/scss/modules/_search.scss b/src/scss/modules/_search.scss index e570618c..8c28f3b1 100644 --- a/src/scss/modules/_search.scss +++ b/src/scss/modules/_search.scss @@ -10,7 +10,7 @@ input[type=text] { font-size: calc(5px + 1.2vmin); - background: none; + background: transparent; border: 2px solid #ffff; padding: 10px; color: #ffff; diff --git a/src/scss/modules/_settings.scss b/src/scss/modules/_settings.scss index b63ebe2b..28f7e59a 100644 --- a/src/scss/modules/_settings.scss +++ b/src/scss/modules/_settings.scss @@ -1,11 +1,4 @@ -.Modal { - width: auto; - color: #000; - background-color: #fff; - max-width: 500px; - box-shadow: 0 0 200px rgba(0, 0, 0, 0.3); - z-index: 4; -} +$gradient: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%); .switch { position: relative; @@ -13,12 +6,12 @@ width: 60px; height: 34px; float: right; -} -.switch input { - opacity: 0; - width: 0; - height: 0; + input { + opacity: 0; + width: 0; + height: 0; + } } .slider { @@ -32,36 +25,57 @@ -webkit-transition: .4s; transition: .4s; border-radius: 34px; + + &:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; + border-radius: 50%; + } + + &.round:before { + border-radius: 50%; + } } -.slider:before { - position: absolute; - content: ""; - height: 26px; - width: 26px; - left: 4px; - bottom: 4px; - background-color: white; - -webkit-transition: .4s; - transition: .4s; - border-radius: 50%; +input { + &[type=text] { + width: 200px; + padding: 0.5rem 1rem; + box-sizing: border-box; + border-image-slice: 1; + border-image-source: $gradient; + outline: none; + font-family: 'Lexend Deca', sans-serif; + background: transparent; + } + + &:checked + .slider { + background: $gradient; + + &:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); + } + } + + &:focus + .slider { + box-shadow: 0 0 1px #e67e22; + } } -input:checked + .slider { - background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%); +::-webkit-scrollbar { + width: 5px; + background: #555; } -input:focus + .slider { - box-shadow: 0 0 1px #e67e22; -} - -input:checked + .slider:before { - -webkit-transform: translateX(26px); - -ms-transform: translateX(26px); - transform: translateX(26px); -} - - h4, .switch, .expandIcons { display: inline; font-size: 1.4em; @@ -76,14 +90,12 @@ h4, #engines { margin-bottom: 20px; } - -.apply { +%settingsButton { height: 45px; width: 130px; text-align: center; border: none; transition: 0.25s; - background-color: #dd3b67; color: #fff; cursor: pointer; display: inline-block; @@ -97,7 +109,6 @@ h4, #engines { &:before { content: ''; - background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%); position: absolute; width: 0%; top: 0; @@ -117,6 +128,23 @@ h4, #engines { } } +.apply { + @extend %settingsButton; + background-color: #dd3b67; + &:before { + background: $gradient; + } +} + +.reset { + @extend %settingsButton; + background-color: #ffb032; + margin-left: 20px; + &:before { + background: linear-gradient(90deg, #dd3b67 0%, #ffb032 100%); + } +} + .expandIcons { position: relative; font-size: 25px; @@ -126,14 +154,17 @@ h4, #engines { transition-duration: 0.5s; } -$gradient: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%); - .extraSettings { display: none; border-left: 10px solid; border-image-slice: 1; border-width: 5px; border-image-source: linear-gradient(to bottom, #ffb032 0%, #dd3b67 100%); + + > p { + margin: 0; + padding: 0; + } } ul { @@ -145,11 +176,6 @@ li { margin-top: 1px; } -.extraSettings > p { - margin: 0; - padding: 0; -} - .range { -webkit-appearance: none; width: 200px; @@ -160,32 +186,22 @@ li { background: #ecf0f1; border-radius: 12px; box-shadow: 0 0 100px rgba(0, 0, 0, 0.3); -} -.range::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - width: 25px; - height: 25px; - border-radius: 12px; - background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);; - cursor: pointer; -} - -.range::-moz-range-thumb { - width: 25px; - height: 25px; - border-radius: 12px; - background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);; - cursor: pointer; -} - -input[type=text] { - width: 200px; - padding: 0.5rem 1rem; - box-sizing: border-box; - border-image-slice: 1; - border-image-source: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%); - outline: none; - font-family: 'Lexend Deca', sans-serif; + &::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 25px; + height: 25px; + border-radius: 12px; + background: $gradient; + cursor: pointer; + } + + &::-moz-range-thumb { + width: 25px; + height: 25px; + border-radius: 12px; + background: $gradient; + cursor: pointer; + } } \ No newline at end of file diff --git a/src/scss/modules/_toast.scss b/src/scss/modules/_toast.scss index 3c819f81..3291644d 100644 --- a/src/scss/modules/_toast.scss +++ b/src/scss/modules/_toast.scss @@ -15,6 +15,23 @@ width: auto; bottom: 30px; right: 30px; + + &.show { + visibility: visible; + -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; + animation: fadein 0.5s, fadeout 0.5s 2.5s; + } + + > img { + height: 20px; + width: auto; + float: left; + } + + > hr { + margin-left: 10px; + margin-right: 10px; + } } .copyButton, hr { @@ -30,11 +47,6 @@ hr { margin-right: 10px; } -#toast.show { - visibility: visible; - -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; - animation: fadein 0.5s, fadeout 0.5s 2.5s; -} @-webkit-keyframes fadein { from { @@ -82,15 +94,4 @@ hr { bottom: 0; opacity: 0; } -} - -#toast>img { - height: 20px; - width: auto; - float: left; -} - -#toast>hr { - margin-left: 10px; - margin-right: 10px; } \ No newline at end of file