Work more on settings and update modal etc

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
Co-authored-by: Wessel Tip <discord@go2it.eu>

src/App.jsx

@@ -8,6 +8,7 @@ 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 Modal from 'react-modal';
 import './scss/index.scss'; 
 
@@ -17,16 +18,10 @@ export default class App extends React.Component {
   constructor(props) {
     super(props);
 
-    this.state = { modal: false };
-    this.openModal = this.onOpenModal.bind(this);
-  }
-
-  onOpenModal() {
-    this.setState({ modal: true });
-  }
-
-  onCloseModal() {
-    this.setState({ modal: false });
+    this.state = { 
+      settingsModal: false, 
+      updateModal: false 
+    };
   }
 
   // Render all the components
@@ -40,16 +35,20 @@ export default class App extends React.Component {
     }
     return (
       <React.Fragment>
+        <div id='backgroundImage'></div>
         <Background/>
         <Search/>
         <div id='center'>
-        <Navbar modalOpen={() => this.onOpenModal()}/>
+        <Navbar settingsModalOpen={() => this.setState({ settingsModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} />
             <Greeting/>
             <Clock/> 
             <Quote/>
             <Credit/>
-            <Modal isOpen={this.state.modal} className='Modal' overlayClassName="Overlay" ariaHideApp={false}>
-              <Settings modalClose={() => this.onCloseModal()} />
+            <Modal isOpen={this.state.settingsModal} className='Modal' overlayClassName="Overlay" ariaHideApp={false}>
+              <Settings modalClose={() => this.setState({ settingsModal: false })} />
+            </Modal>
+            <Modal isOpen={this.state.updateModal} className='Modal' overlayClassName="Overlay" ariaHideApp={false}>
+              <Update modalClose={() => this.setState({ updateModal: false })} />
             </Modal>
         </div>
       </React.Fragment>

src/components/Background.jsx

@@ -7,38 +7,22 @@ export default class Background extends React.Component {
   doOffline() {
     const photo = Math.floor(Math.random() * (20 - 1 + 1)) + 1; // There are 20 images in the offline-images folder
     document.getElementById('backgroundCredits').style.display = 'none'; // Hide the location icon
+
     let photographer; // Photographer credit
     let pixabayNumbers = [2, 3, 9, 11, 13, 14, 15]; // As there are a lot of Pixabay photos, we shorten the code a bit here
     if (pixabayNumbers.includes(photo)) photographer = 'Pixabay';
     else switch (photo) {
-      default: {
-        photographer = 'Unknown';
-        break;
-      }
-      case 1: {
-        photographer = 'Tirachard Kumtanom';
-        break;
-      }
-      case 4: {
-        photographer = 'Sohail Na';
-        break;
-      }
-      case 7: {
-        photographer = 'Miriam Espacio';
-        break;
-      }
-      case 10: {
-        photographer = 'NO NAME';
-        break;
-      }
-      case 20: {
-        photographer = 'Fabian Wiktor';
-        break;
-      }
+      case 1: photographer = 'Tirachard Kumtanom'; break;
+      case 4: photographer = 'Sohail Na'; break;
+      case 7: photographer = 'Miriam Espacio'; break;
+      case 10: photographer = 'NO NAME'; break;
+      case 20: photographer = 'Fabian Wiktor'; break;
+      default: photographer = 'Unknown'; break;
     }
+
     document.getElementById('photographer').innerText = `Photo by ${photographer} (Pexels)`; // Set the credit
-    document.getElementById('root').style.backgroundImage = `url(../offline-images/${photo}.jpeg)`; // Set the background
-  }  
+    document.getElementById('backgroundImage').style.backgroundImage = `url(../offline-images/${photo}.jpeg)`; // Set the background
+  }
 
   async setBackground() {    
     const enabled = localStorage.getItem('offlineMode');
@@ -46,12 +30,13 @@ export default class Background extends React.Component {
 
     try { // First we try and get an image from the API...
       let requestURL;
-      if (await supportsWebP) requestURL = 'https://api.muetab.xyz/getImage?webp=true';
+      const enabled = localStorage.getItem('webp');
+      if (await supportsWebP && enabled === 'true') requestURL = 'https://api.muetab.xyz/getImage?webp=true';
       else requestURL = 'https://api.muetab.xyz/getImage?category=Outdoors';
       let data = await fetch(requestURL);
       data = await data.json(); 
 
-      document.getElementById('root').style.backgroundImage = `url(${data.file})`; // Set the background
+      document.getElementById('backgroundImage').style.backgroundImage = `url(${data.file})`; // Set the background
       document.getElementById('photographer').innerText = `Photo by ${data.photographer}`; // Set the credit
       document.getElementById('location').innerText = `${data.location}`; // Set the location tooltip
     } catch (e) { // ..and if that fails we load one locally

src/components/Clock.jsx

@@ -8,27 +8,44 @@ export default class Clock extends React.Component {
       date: '',
       ampm: '',
     };
+    this.timer = undefined;
   }
+  
+  startTime(time) {
+    this.timer = setTimeout(() => {
+      this.startTime();
+      const t = new Date(); // Get the current date 
+      const a = t.getHours();
+      let h = t.getHours(); // Get hours
+  
+      // Seconds 
+      let s = '';
+      const enabled = localStorage.getItem('seconds');
+      if (enabled === 'true') s = ':' + ('0' + t.getSeconds()).slice(-2);
+  
+      const twentyfour = localStorage.getItem('24hour');
+      if (twentyfour === 'true') {
+        // this.date = `${('0' + h).slice(-2)}:${('0' + t.getMinutes()).slice(-2)}${s}`;
+        return this.setState({ 
+          date: `${('0' + h).slice(-2)}:${('0' + t.getMinutes()).slice(-2)}${s}`
+        }); 
+      } else {
+        if (h > 12) h = h - 12; // 12 hour support
+        // this.date = `${('0' + h).slice(-2)}:${('0' + t.getMinutes()).slice(-2)}${s}`;
 
-  startTime() {
-    const t = new Date(); // Get the current date 
-    const a = t.getHours();
-    let h = t.getHours(); // Get hours
-    // const s = today.getSeconds();
-
-    if (h > 12) h = h - 12; // 12 hour support
-
-    this.setState({ 
-      date: `${('0' + h).slice(-2)}:${('0' + t.getMinutes()).slice(-2)}`, ampm: a >= 12 ? 'PM' : 'AM' 
-    }); // Set time
-
-    this.timeout = setTimeout(() => this.startTime(), 750); // Update the clock every 750 milliseconds
+        this.setState({ 
+          date: `${('0' + h).slice(-2)}:${('0' + t.getMinutes()).slice(-2)}${s}`, ampm: a >= 12 ? 'PM' : 'AM' 
+        }); // Set time
+        }
+  
+  
+    }, (1000 - Date.now() % 1000));
   }
 
   componentDidMount() {
     const enabled = localStorage.getItem('time');
     if (enabled === 'false') return;
-    this.startTime();
+    this.startTime(0);
   }
 
   render() {

src/components/Greeting.jsx

@@ -9,6 +9,22 @@ export default class Greeting extends React.Component {
     };
  }
 
+  doEvents(t, g) {
+    const enabled = localStorage.getItem('events');
+    if (enabled === 'false') return;
+
+    const m = t.getMonth(); // Current month
+    const d = t.getDate(); // Current Date
+
+    if (m === 0 && d === 1) g = 'Happy new year'; // If the date is January 1st, set the greeting string to "Happy new year"
+    else if (m === 11 && d === 25) g = 'Merry Christmas'; // If it's December 25th, set the greeting string to "Merry Christmas"
+    else if (m === 9 && d === 31) g = 'Happy Halloween'; // If it's October 31st, set the greeting string to "Happy Halloween"
+    return {
+      g,
+      t
+    }
+  }
+
   getGreeting() {
     const t = new Date(); // Current date object
     
@@ -20,12 +36,7 @@ export default class Greeting extends React.Component {
     else if (h < 18) g = 'Good afternoon'; // If it's before 6pm, set the greeting string to "Good afternoon"
 
     // Events
-    const m = t.getMonth(); // Current month
-    const d = t.getDate(); // Current Date
-
-    if (m === 0 && d === 1) g = 'Happy new year'; // If the date is January 1st, set the greeting string to "Happy new year"
-    else if (m === 11 && d === 25) g = 'Merry Christmas'; // If it's December 25th, set the greeting string to "Merry Christmas"
-    else if (m === 9 && d === 31) g = 'Happy Halloween'; // If it's October 31st, set the greeting string to "Happy Halloween"
+    this.doEvents(t, g);
 
     this.setState({ 
       greeting: g 

src/components/Navbar.jsx

@@ -1,6 +1,7 @@
 //* Imports
 import RefreshIcon from '@material-ui/icons/Refresh';
 import Gear from '@material-ui/icons/Settings';
+import NewReleases from '@material-ui/icons/NewReleases';
 import React from 'react';
 
 export default class Navbar extends React.Component {
@@ -8,11 +9,14 @@ export default class Navbar extends React.Component {
     return (
       <div className='navbar-container'>
         <div className='navbar1'>
-          <Gear className='settings-icon' onClick={this.props.modalOpen} />
+          <Gear className='settings-icon' onClick={this.props.settingsModalOpen} />
         </div>
         <div className='navbar2'>
             <RefreshIcon className='refreshicon' onClick={() => window.location.reload()} />
         </div>
+        <div className='navbar3'>
+            <NewReleases className='refreshicon' onClick={this.props.updateModalOpen} />
+        </div>
       </div>
     );
   }

src/components/Settings.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import ExpandMore from '@material-ui/icons/ExpandMore';
 
 export default class Settings extends React.Component {
   setItem(key, value) {
@@ -15,93 +16,131 @@ export default class Settings extends React.Component {
     console.log(`[DEBUG] setItem(${key}, ${old} -> ${val})`);
   }
 
+  toggleExtra(element, element2) {
+    (element.style.display === 'none' || !element.style.display) ? element.style.display = 'block' : element.style.display = 'none';
+    (element2.style.transform === 'rotate(-180deg)') ? element2.style.transform = 'rotate(0)' : element2.style.transform = 'rotate(-180deg)';
+  }
+
+  componentDidMount() {
+    for (const key of Object.keys(localStorage)) {
+      let value = localStorage.getItem(key);
+      const tag = document.getElementById(`${key}Status`);
+      
+      if (tag) {
+        switch (value) {
+          case 'true': value = true; break;
+          case 'false': value = false; break;
+          default: value = true; 
+        }
+
+        tag.checked = value;
+      }
+    }
+  }
+
   render() {
     return <div className="content">
-      <a class="closeModal" onClick={this.props.modalClose}>&times;</a>
+      <span className="closeModal" onClick={this.props.modalClose}>&times;</span>
       <h1>Settings</h1>
       <p>Edit different components to make Mue your new tab.</p>
-
       <div className='columns'>
-        <div className='section'>
-          <h4>Time</h4>
-          <label class="switch">
-            <input type="checkbox" onClick={()=> this.setItem('time')} />
-            <span class="slider round"></span>
+          <div className='group'>
+          <div className='section'>
+            <h4>Time</h4>     
+            <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[0], document.getElementsByClassName('expandIcons')[0])} />
+          <label className="switch">
+            <input type="checkbox" onClick={()=> this.setItem('time')} id='timeStatus' />
+            <span className="slider round"></span>
           </label>
+          <li className="extraSettings">
+            <ul>
+            <input id="1" type="checkbox" onClick={()=> this.setItem('seconds')} id='secondsStatus' />
+            <label for="1">Seconds</label>
+            </ul>
+            <ul>
+            <input id="2" type="checkbox" onClick={()=> this.setItem('24hour')} id='24hourStatus' />
+            <label for="2">24 Hour</label>
+            </ul>
+          </li>
+        </div>
         </div>
         <div className='section'>
           <h4>Greeting</h4>
-          <label class="switch">
-            <input type="checkbox" onClick={()=> this.setItem('greeting')} />
-            <span class="slider round"></span>
+          <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[1], document.getElementsByClassName('expandIcons')[1])} />
+          <label className="switch">
+            <input type="checkbox" onClick={()=> this.setItem('greeting')} id='greetingStatus' />
+            <span className="slider round"></span>
           </label>
+          <li className="extraSettings">
+            <ul>
+            <input id="3" type="checkbox" onClick={()=> this.setItem('events')} id='eventsStatus' />
+            <label for="3">Events</label>
+            </ul>
+          </li>
         </div>
         <div className='section'>
           <h4>Quote</h4>
-          <label class="switch">
-            <input type="checkbox" onClick={()=> this.setItem('quote')} />
-            <span class="slider"></span>
+          <label className="switch">
+            <input id="quoteStatus" type="checkbox" onClick={()=> this.setItem('quote')} id='quoteStatus' />
+            <span className="slider"></span>
           </label>
         </div>
         <div className='section'>
           <h4>Background</h4>
-          <label class="switch">
-            <input type="checkbox" onClick={()=> this.setItem('background')}  />
-            <span class="slider"></span>
+          <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[2], document.getElementsByClassName('expandIcons')[2])} />
+          <label className="switch">
+            <input type="checkbox" onClick={()=> this.setItem('background')} id='backgroundStatus'  />
+            <span className="slider"></span>
           </label>
+          <li className="extraSettings">
+            <ul>
+              <p>Adjust Blur</p>
+            </ul>
+            <ul>
+              <input className="range" type="range" min="1" max="100" />
+            </ul>
+            <ul>
+              <p>Adjust Brightness</p>
+            </ul>
+            <ul>
+              <input className="range" type="range" min="1" max="100" />
+            </ul>
+          </li>
         </div>
         <div className='section'>
           <h4>Search Bar</h4>
-          <label class="switch">
-            <input type="checkbox" onClick={()=> this.setItem('searchBar')}  />
-            <span class="slider"></span>
+          <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[3], document.getElementsByClassName('expandIcons')[3])} />
+          <label className="switch">
+            <input type="checkbox" onClick={()=> this.setItem('searchBar')} id='searchBarStatus'  />
+            <span className="slider"></span>
           </label>
+          <li className="extraSettings">
+            <ul>
+            <label for="4">Search Engine</label>
+            <select name="4">
+              <option value="duckduckgo">DuckDuckGo</option>
+              <option value="google">Google</option>
+              <option value="bing">Bing</option>
+              <option value="custom">Custom</option>
+            </select>
+            </ul>
+          </li>
         </div>
         <div className='section'>
           <h4>Offline Mode</h4>
-          <label class="switch">
-            <input type="checkbox" onClick={()=> this.setItem('offlineMode')}  />
-            <span class="slider"></span>
+          <label className="switch">
+            <input type="checkbox" onClick={()=> this.setItem('offlineMode')} id='offlineModeStatus'  />
+            <span className="slider"></span>
           </label>
         </div>
         <div className='section'>
           <h4>Enable WebP (experimental)</h4>
-          <label class="switch">
-            <input type="checkbox" onClick={()=> this.setItem('webp')}  />
-            <span class="slider"></span>
+          <label className="switch">
+            <input type="checkbox" onClick={()=> this.setItem('webp')} id='webpStatus'  />
+            <span className="slider"></span>
           </label>
         </div>
-        <button class="apply" onClick={() => window.location.reload()}>Apply</button>
-      {/*
-        <h4 style={{ flex: 2 }}>Time <span id="timeStatus">{localStorage.getItem('time') === 'true' ? 'ON' : 'OFF'}</span>
-        </h4> 
-        <button onClick={()=>this.setItem('time')}>Toggle Time</button>
-      <h4 style={{ flex: 2 }}>Search Bar</h4>
-      <button onClick={()=>this.setItem('searchbar')}>Toggle Searchbar</button>
-      <h4 style={{ flex: 2 }}>Greeting <span id="greetingStatus">{localStorage.getItem('greeting') === 'true' ? 'ON' :
-        'OFF'}</span></h4>
-      <button onClick={()=>this.setItem('greeting')}>Greeting Toggle</button>
-      <h4 style={{ flex: 2 }}>Quote <span id="quoteStatus">{localStorage.getItem('quote') === 'true' ? 'ON' :
-          'OFF'}</span>     <button onClick={()=>this.setItem('quote')}>Quote Toggle</button>
-          </h4>
-      <h4 style={{ flex: 2 }}>Background <span id="backgroundStatus">{localStorage.getItem('background') === 'true' ? 'ON'
-          : 'OFF'}</span></h4>
-      <button onClick={()=> this.setItem('background')}>Background Toggle</button>
-
-      <label class="switch">
-        <input type="checkbox" />
-        <span class="slider round"></span>
-      </label>
-
-      <label class="switch">
-        <input type="checkbox"  checked />
-        <span class="slider round"></span>
-      </label>
-      {/* <label className="switch">
-        <input type="checkbox" checked></input>
-          <span className="slider round"></span>
-        </label> */} 
-
+        <button className="apply" onClick={() => window.location.reload()}>Apply</button>
       </div>
     </div>;
   }

src/components/Update.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default class Update extends React.Component {
+  render() {
+    return <div className="content">
+              <span className="closeModal" onClick={this.props.modalClose}>&times;</span>
+              <h1>Update</h1>
+      <p>Edit different components to make Mue your new tab.</p>
+    </div>;
+  }
+}

src/scss/index.scss

@@ -8,3 +8,13 @@
 @import 'modules/modal';
 @import 'modules/settings';
 @import 'modules/miscellaneous';
+
+#backgroundImage {
+    height:100vh;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-attachment: fixed;
+    z-index: 0;
+    border: none;
+}

src/scss/modules/_greeting.scss

@@ -1,5 +1,5 @@
 .greeting {
     margin: 0;
     font-size: 1.6em;
-    text-shadow: 0 0 25px rgba(0,0,0,0.3);
+    text-shadow: 250px 250px 250px rgba(0, 0, 0, 0.3);
 }

src/scss/modules/_miscellaneous.scss

@@ -15,6 +15,12 @@ body {
   justify-content: center;
   font-size: calc(10px + 2vmin);
   text-align: center;
+  position:absolute;
+  top: 0; 
+  bottom: 0; 
+  left: 0; 
+  right: 0;
+  margin: auto;
 }
 
 ::placeholder {

src/scss/modules/_modal.scss

@@ -71,4 +71,23 @@
   .slider.round:before {
     border-radius: 50%;
   }
+
+  ::-webkit-scrollbar {
+    width: 5px;
+}
+
+/* Track /
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+/ Handle /
+::-webkit-scrollbar-thumb {
+    background: #888;
+}
+
+/ Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
   

src/scss/modules/_navbar.scss

@@ -15,4 +15,10 @@
     @extend %navbar;
     top: 50px;
     right: 50px;
+}
+
+.navbar3 {
+    @extend %navbar;
+    top: 50px;
+    right: 100px;
 }

src/scss/modules/_quote.scss

@@ -14,10 +14,11 @@
   font-size: 0.9em;
   letter-spacing: 0.5px;
   margin: 0;
-  text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
+  text-shadow: 25px 25px 25px rgba(0, 0, 0, 0.3);
 }
 
 i.material-icons,
 h1.quoteauthor {
   display: inline;
+  text-shadow: 25px 25px 25px rgba(0, 0, 0, 0.3);
 }

src/scss/modules/_settings.scss

@@ -4,6 +4,7 @@
   background-color: #fff;
   max-width: 500px;
   box-shadow: 0 0 200px rgba(0, 0, 0, 0.3);
+  z-index: 4;
 }
 
 .Modal:focus {
@@ -75,15 +76,21 @@ input:checked + .slider:before {
 }
 
 
-h4, .switch {
+h4, .switch, .expandIcons {
   display: inline;
   font-size: 1.4em;
+  font-weight: 100;
+}
+
+h4, #engines {
+  display: inline;
 }
 
 .section {
   margin-bottom: 20px;
 }
 
+
 .apply {
   height: 45px;
   width: 130px;
@@ -122,4 +129,67 @@ h4, .switch {
   &:active {
     outline: none;
   }
+}
+
+.expandIcons {
+  position: relative;
+  font-size: 25px;
+  vertical-align: middle;
+  display: inline-flex;
+  cursor: pointer;
+  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%);
+}
+
+ul {
+  padding-left: 5px;
+  margin: 0;
+}
+
+li {
+  margin-top: 1px;
+}
+
+.extraSettings > p {
+  margin: 0;
+  padding: 0;
+}
+
+.range {
+  -webkit-appearance: none;
+  width: 200px;
+  height: 15px;
+  background: #ccc;
+  border-radius: 12px;
+  outline: none;
+  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;
 }