Progress

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
Co-authored-by: Isaac Saunders <contact@eartharoid.me>

package.json

@@ -15,9 +15,10 @@
   "license": "BSD-3-Clause",
   "version": "0.7.1",
   "dependencies": {
-    "@material-ui/core": "4.11.0",
+    "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@muetab/quotes": "^1.0.0",
+    "copy-text-to-clipboard": "^2.2.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-modal": "^3.11.2",

src/App.jsx

@@ -9,6 +9,7 @@ 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'; 
 
@@ -20,7 +21,7 @@ export default class App extends React.Component {
 
     this.state = { 
       settingsModal: false, 
-      updateModal: false 
+      updateModal: false
     };
   }
 
@@ -47,8 +48,9 @@ export default class App extends React.Component {
         <Navbar settingsModalOpen={() => this.setState({ settingsModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} />
             <Greeting/>
             <Clock/> 
-            <Quote/>
+            <Quote />
             <Credit/>
+            <Toast/>
             <Modal isOpen={this.state.settingsModal} className={modalClassList} overlayClassName="Overlay" ariaHideApp={false}>
               <Settings modalClose={() => this.setState({ settingsModal: false })} />
             </Modal>

src/components/Background.jsx

@@ -45,7 +45,10 @@ export default class Background extends React.Component {
 
   componentDidMount() {
     const enabled = localStorage.getItem('background');
-    if (enabled === 'false') return;
+    if (enabled === 'false') {
+      document.getElementById('backgroundCredits').style.display = 'none'; 
+      return;
+    }
     this.setBackground();
   }
 

src/components/Quote.jsx

@@ -1,6 +1,8 @@
 //* Imports
 import React from 'react';
 import Quotes from '@muetab/quotes';
+import copy from 'copy-text-to-clipboard';
+import FileCopy from '@material-ui/icons/AttachFile';
 
 export default class Quote extends React.Component {
   constructor(...args) {
@@ -38,6 +40,13 @@ 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);
+  } 
+
   componentDidMount() {
     const enabled = localStorage.getItem('quote');
     if (enabled === 'false') return;
@@ -46,9 +55,17 @@ export default class Quote extends React.Component {
 
   render() {
     return [
-      <h1 className='quote'>{`${this.state.quote}`}</h1>,
-      // <i class="material-icons">perm_identity</i>,
-      <h1 className='quoteauthor'>{`${this.state.author}`}</h1>,
+        <h1 className='quote'>{`${this.state.quote}`}</h1>,
+        <h1 className='quoteauthor'>{this.state.author} <FileCopy className='copyButton' onClick={() => this.copyQuote() }></FileCopy></h1>,
     ];
   }
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
 }

src/components/Settings.jsx

@@ -28,8 +28,16 @@ export default class Settings extends React.Component {
   }
 
   componentDidMount() {
+    document.getElementById('greetingName').value = localStorage.getItem('greetingName');
+
     for (const key of Object.keys(localStorage)) {
       let value = localStorage.getItem(key);
+
+      if (key === 'blur') {
+        document.getElementById('blurAmount').innerText = value;
+        document.getElementById('blurRange').value = value;
+      }
+  
       const tag = document.getElementById(`${key}Status`);
       
       if (tag) {
@@ -90,14 +98,20 @@ export default class Settings extends React.Component {
         </div>
         <div className='section'>
           <h4>Quote</h4>
+          <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[2], document.getElementsByClassName('expandIcons')[2])} />
           <label className="switch">
             <input id="quoteStatus" type="checkbox" onClick={()=> this.setItem('quote')} id='quoteStatus' />
             <span className="slider"></span>
-          </label>
+          </label>   <li className="extraSettings">
+            <ul>
+            <input id="5" type="checkbox" onClick={()=> this.setItem('copyButton')} id='copyButtonStatus' />
+            <label htmlFor="5">Copy Button</label>
+            </ul>
+          </li>
         </div>
         <div className='section'>
           <h4>Background</h4>
-          <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[2], document.getElementsByClassName('expandIcons')[2])} />
+          <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[3], document.getElementsByClassName('expandIcons')[3])} />
           <label className="switch">
             <input type="checkbox" onClick={()=> this.setItem('background')} id='backgroundStatus'  />
             <span className="slider"></span>
@@ -113,7 +127,7 @@ export default class Settings extends React.Component {
         </div>
         <div className='section'>
           <h4>Search Bar</h4>
-          <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[3], document.getElementsByClassName('expandIcons')[3])} />
+          <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[4], document.getElementsByClassName('expandIcons')[4])} />
           <label className="switch">
             <input type="checkbox" onClick={()=> this.setItem('searchBar')} id='searchBarStatus'  />
             <span className="slider"></span>

src/components/Toast.jsx

@@ -0,0 +1,15 @@
+//* Imports
+import React from 'react';
+import FileCopy from '@material-ui/icons/AttachFile';
+
+export default class Toast extends React.Component {
+  render() {
+    return (
+        <div id='toast'>
+        <FileCopy className="copyButton"/>
+        <hr />
+       Quote Copied!
+      </div>
+    );
+  }
+}

src/components/Update.jsx

@@ -1,11 +1,46 @@
 import React from 'react';
 
 export default class Update extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      title: '',
+      date: '',
+      content: ''
+    };
+ }
+
+ async getUpdate() {
+  const enabled = localStorage.getItem('offlineMode');
+  if (enabled === 'true') return this.setState({
+    title: 'Offline',
+    content: 'Cannot get update logs while in offline mode'
+  });
+
+  try { // First we try and get a quote from the API...
+    let data = await fetch('https://api.muetab.xyz/getUpdate');
+    data = await data.json();
+    this.setState({ 
+      title: data.title, 
+      content: data.content
+    });
+  } catch (e) {
+    this.setState({
+      title: 'Error',
+      content: 'Could not connect to the server!'
+    });
+  }
+ }
+
+ componentDidMount() {
+   this.getUpdate();
+ }
+
   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>;
-  }
+        <span className="closeModal" onClick={this.props.modalClose}>&times;</span>
+        <h1 dangerouslySetInnerHTML={{__html: this.state.title}}></h1>
+        <p dangerouslySetInnerHTML={{__html: this.state.content}}></p>
+      </div>;
+    }
 }

src/scss/index.scss

@@ -7,6 +7,7 @@
 @import 'modules/navbar';
 @import 'modules/modal';
 @import 'modules/settings';
+@import 'modules/toast';
 @import 'modules/miscellaneous';
 
 #backgroundImage {
@@ -17,4 +18,4 @@
     background-attachment: fixed;
     z-index: 0;
     border: none;
-}
+}

src/scss/modules/_quote.scss

@@ -3,6 +3,8 @@
   text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
 }
 
+
+
 @media screen and (min-width: 600px) {
   .quote {
     margin-left: 30%;
@@ -16,7 +18,37 @@
   margin: 0;
 }
 
+.quoteAuthor, .copyButton {
+  display: inline;
+  font-size: 0.8em;
+  position: relative !important;
+  display: block;
+  margin: 0 auto;
+}
+
+.copyButton {
+  cursor: pointer;
+  vertical-align: middle;
+  float: middle;
+  margin: 0 auto;
+  text-align: right;
+  transform: rotate(45deg);
+}
+
 i.material-icons,
 h1.quoteauthor {
   display: inline;
+}
+
+button.copyButton {
+  background: transparent;
+  border: none;
+  color: #fff;
+  padding: 20px 20px;
+  text-align: center;
+  text-decoration: none;
+  font-size: 20px;
+  cursor: pointer;
+  border-radius: 5px;
+  display: table-cell
 }

src/scss/modules/_toast.scss

@@ -0,0 +1,96 @@
+#toast {
+    visibility: hidden;
+    text-align: center;
+    position: fixed;
+    z-index: 2;
+    bottom: 30px;
+    padding: 10px;
+    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
+    // backdrop-filter: blur(20px);  stupid firefox :(
+    border-radius: 10px;
+    background: #fff;
+    color: #000;
+    text-align: left;
+    font-size: 16px;
+    width: auto;
+    bottom: 30px;
+    right: 30px;
+}
+
+.copyButton, hr {
+    display: inline;
+    vertical-align: middle;
+}
+
+hr {
+    height: 20px;
+    width: 1px;
+    margin: 0;
+    margin-left: 10px;
+    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 {
+        bottom: 0;
+        opacity: 0;
+    }
+
+    to {
+        bottom: 30px;
+        opacity: 1;
+    }
+}
+
+@keyframes fadein {
+    from {
+        bottom: 0;
+        opacity: 0;
+    }
+
+    to {
+        bottom: 30px;
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes fadeout {
+    from {
+        bottom: 30px;
+        opacity: 1;
+    }
+
+    to {
+        bottom: 0;
+        opacity: 0;
+    }
+}
+
+@keyframes fadeout {
+    from {
+        bottom: 30px;
+        opacity: 1;
+    }
+
+    to {
+        bottom: 0;
+        opacity: 0;
+    }
+}
+
+#toast>img {
+    height: 20px;
+    width: auto;
+    float: left;
+}
+
+#toast>hr {
+    margin-left: 10px;
+    margin-right: 10px;
+}