feat: WIP quick links widget, better maximise/favourite widget, fixed favourite button, finish download button etc

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/components/widgets/Widgets.jsx

@@ -7,6 +7,7 @@ import Search from './search/Search';
 import Maximise from './background/Maximise';
 import Favourite from './background/Favourite';
 import Date from './time/Date';
+import QuickLinks from './quicklinks/QuickLinks';
 
 export default class Widgets extends React.PureComponent {
   constructor() {
@@ -16,7 +17,8 @@ export default class Widgets extends React.PureComponent {
       time: this.enabled('time') ? <Clock/> : null,
       greeting: this.enabled('greeting') ? <Greeting/> : null,
       quote: this.enabled('quote') ? <Quote/> : null,
-      date: this.enabled('date') ? <Date/> : null
+      date: this.enabled('date') ? <Date/> : null,
+      quicklinks: this.enabled('quicklinksenabled') ? <QuickLinks/> : null
     }
   }
 
@@ -77,15 +79,13 @@ export default class Widgets extends React.PureComponent {
         elements.push(<React.Fragment key={element}>{this.widgets[element]}</React.Fragment>);
       });
     } else {
-      elements = ['greeting', 'time', 'quote', 'date'];
+      elements = ['greeting', 'time', 'quicklinks', 'quote', 'date'];
     }
 
     return (
       <div id='widgets'>
         {this.enabled('searchBar') ? <Search/> : null}
         {elements}
-        {this.enabled('view') ? <Maximise/> : null}
-        {this.enabled('favouriteEnabled') ? <Favourite/> : null}
       </div>
     );
   }

src/components/widgets/background/Background.jsx

@@ -14,9 +14,6 @@ export default class Background extends React.PureComponent {
       photoInfo: {
         hidden: false,
         credit: '',
-        location: 'N/A',
-        camera: 'N/A',
-        resolution: 'N/A',
         url: ''
       }
     };
@@ -95,8 +92,7 @@ export default class Background extends React.PureComponent {
           return this.setState({
              url: favourited.url,
              photoInfo: {
-              credit: favourited.credit,
-              location: favourited.location
+              credit: favourited.credit
             }
           });
         }
@@ -108,7 +104,7 @@ export default class Background extends React.PureComponent {
         switch (backgroundAPI) {
           case 'unsplash':
             requestURL = `${window.constants.UNSPLASH_URL}/getImage`;
-          break;
+            break;
           // Defaults to Mue
           default:
             requestURL = `${window.constants.API_URL}/getImage?category=Outdoors`;

src/components/widgets/background/Favourite.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import Tooltip from '@material-ui/core/Tooltip';
+
 import StarIcon from '@material-ui/icons/Star';
 import StarIcon2 from '@material-ui/icons/StarBorder';
 
@@ -7,7 +9,7 @@ export default class Favourite extends React.PureComponent {
   constructor() {
     super();
     this.state = {
-      favourited: (localStorage.getItem('favourite')) ? <StarIcon onClick={() => this.favourite()} /> : <StarIcon2 onClick={() => this.favourite()} />
+      favourited: (localStorage.getItem('favourite')) ? <StarIcon onClick={() => this.favourite()} className='topicons' /> : <StarIcon2 onClick={() => this.favourite()}  className='topicons' />
     };
   }
 
@@ -15,28 +17,25 @@ export default class Favourite extends React.PureComponent {
     if (localStorage.getItem('favourite')) {
       localStorage.removeItem('favourite');
       this.setState({
-        favourited: <StarIcon2 onClick={() => this.favourite()} />
+        favourited: <StarIcon2 onClick={() => this.favourite()} className='topicons' />
       });
     } else {
       const url = document.getElementById('backgroundImage').style.backgroundImage.replace('url("', '').replace('")', '');
       const credit = document.getElementById('credit').textContent;
-      const location = document.getElementById('location').textContent;
 
-      localStorage.setItem('favourite', JSON.stringify({ url: url, credit: credit, location: location }));
+      localStorage.setItem('favourite', JSON.stringify({ url: url, credit: credit }));
 
       this.setState({
-        favourited: <StarIcon onClick={() => this.favourite()} />
+        favourited: <StarIcon onClick={() => this.favourite()} className='topicons' />
       });
     }
   }
 
   render() {
-    if (localStorage.getItem('favouriteEnabled') === 'false' || localStorage.getItem('background') === 'false' || localStorage.getItem('customBackgroundColour') || localStorage.getItem('customBackground')) {
+    if (localStorage.getItem('background') === 'false' || localStorage.getItem('customBackgroundColour') || localStorage.getItem('customBackground')) {
       return null;
     }
 
-    return <div className='favourite'>
-      {this.state.favourited}
-    </div>
+    return <Tooltip title='Favourite' placement='top'>{this.state.favourited}</Tooltip>
   }
 }

src/components/widgets/background/Maximise.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import Tooltip from '@material-ui/core/Tooltip';
+
 import FullscreenIcon from '@material-ui/icons/Fullscreen';
 
 export default class View extends React.PureComponent {
@@ -19,7 +21,7 @@ export default class View extends React.PureComponent {
 
   viewStuff() {
     // elements to hide
-    const elements = ['.searchBar', '.navbar-container', '.clock', '.greeting', '.quotediv', 'time'];
+    const elements = ['.searchBar', '.clock', '.greeting', '.quotediv', 'time'];
 
     elements.forEach((element) => {
       try {
@@ -49,8 +51,8 @@ export default class View extends React.PureComponent {
       return null;
     }
 
-    return <div className='view'>
-      <FullscreenIcon onClick={() => this.viewStuff()} />
-    </div>
+    return <Tooltip title='View' placement='top'>
+      <FullscreenIcon onClick={() => this.viewStuff()} className='topicons' />
+    </Tooltip>
   }
 }

src/components/widgets/background/PhotoInformation.jsx

@@ -32,22 +32,25 @@ export default function PhotoInformation(props) {
 
   return (
     <div className='photoInformation'>
-      <h1>{language.credit} {props.info.credit}</h1>
+      <h1>{language.credit} <span id='credit'>{props.info.credit}</span></h1>
       <Info className='photoInformationHover'/>
       <div className={props.className || 'infoCard'}>
         <Info className='infoIcon'/>
         <h1>{language.information}</h1>
         <hr/>
         <Location/>
-        <span>{props.info.location}</span>
+        <span>{props.info.location || 'N/A'}</span>
         <Camera/>
-        <span>{props.info.camera}</span>
+        <span>{props.info.camera || 'N/A'}</span>
         <Resolution/>
-        <span>{props.info.resolution}</span>
+        <span>{props.info.resolution || 'N/A'}</span>
         <Photographer/>
         <span>{props.info.credit.split(` ${language.unsplash}`)[0]}</span>
-        <Download/>
-        <span className='download' onClick={() => downloadImage(props.info)}>{language.download}</span>
+        {(localStorage.getItem('downloadbtn') === 'true') ? 
+          <>
+            <Download/>
+            <span className='download' onClick={() => downloadImage(props.info)}>{language.download}</span>
+          </> : null}
       </div>
     </div>
   );

src/components/widgets/background/scss/index.scss

@@ -41,25 +41,3 @@
   text-decoration: none;
   color: white;
 }
-
-.view {
-  right: 25px;
-}
-
-.favourite {
-  right: 50px;
-  padding-right: 5px;
-}
-
-.view,
-.favourite {
-  bottom: 10px;
-  position: absolute;
-  transition: all 0.5s ease 0s;
-  width: auto;
-  cursor: pointer;
-
-  &:hover {
-    transform: scale(1.1);
-  }
-}

src/components/widgets/navbar/Navbar.jsx

@@ -3,10 +3,13 @@ import React from 'react';
 import RefreshIcon from '@material-ui/icons/RefreshRounded';
 import Gear from '@material-ui/icons/SettingsRounded';
 import NotesIcon from '@material-ui/icons/AssignmentRounded';
-import Tooltip from '@material-ui/core/Tooltip';
 import Report from '@material-ui/icons/SmsFailed';
 
+import Tooltip from '@material-ui/core/Tooltip';
+
 import Notes from './Notes';
+import View from '../background/Maximise';
+import Favourite from '../background/Favourite';
 
 import './scss/index.scss';
 
@@ -15,6 +18,9 @@ export default function Navbar(props) {
 
   return (
     <div className='navbar-container'>
+      {(localStorage.getItem('view') === 'true') ? <View/> :null}
+      {(localStorage.getItem('favouriteEnabled') === 'true') ? <Favourite/> :null}
+  
       {(localStorage.getItem('notesEnabled') === 'true') ?
         <div className='notes'>
           <NotesIcon className='topicons'/>

src/components/widgets/quicklinks/QuickLinks.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import Tooltip from '@material-ui/core/Tooltip';
+import TextareaAutosize from '@material-ui/core/TextareaAutosize';
+
+import './scss/index.scss';
+
+export default class QuickLinks extends React.PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      items: JSON.parse(localStorage.getItem('quicklinks')),
+      name: '',
+      url: ''
+    };
+  }
+
+  updateLink(type, value) {
+    this.setState({
+      [type]: value
+    });
+  }
+
+  addLink = () => {
+    let data = JSON.parse(localStorage.getItem('quicklinks'));
+    data.push({
+      name: this.state.name,
+      url: this.state.url
+    });
+
+    localStorage.setItem('quicklinks', JSON.stringify(data));
+
+    this.setState({
+      items: JSON.parse(localStorage.getItem('quicklinks')),
+      name: '',
+      url: ''
+    });
+  }
+
+  render() {
+    return (
+      <div className='quicklinks-container'>
+        {this.state.items.map((item) => (
+          <Tooltip title={item.name} key={item.name}>
+            <a href={item.url}><img src={'https://s2.googleusercontent.com/s2/favicons?domain_url=' + item.url}/></a>
+          </Tooltip>
+        ))}
+        <div className='quicklinks'>
+          <button>+</button>
+          <span className='quicklinkscontainer'>
+            <div className='topbarquicklinks'>
+              <h4>New Link</h4>
+              <TextareaAutosize rowsMax={1} placeholder='Name' value={this.state.name} onChange={(e) => this.updateLink('name', e.target.value)} />
+              <br/>
+              <TextareaAutosize rowsMax={10} placeholder='URL' value={this.state.url} onChange={(e) => this.updateLink('url', e.target.value)} />
+              <br/>
+              <button className='pinNote' onClick={this.addLink}>Add</button>
+            </div>
+          </span>
+        </div>
+      </div>
+    );
+  }
+}

src/components/widgets/quicklinks/scss/index.scss

@@ -0,0 +1,75 @@
+.quicklinks {
+  position: relative;
+
+  h3 {
+    text-shadow: none;
+    margin: 0;
+  }
+}
+
+.quicklinkscontainer {
+  padding: 15px;
+  visibility: hidden;
+  background-color: var(--background);
+  color: var(--modal-text);
+  text-align: center;
+  border-radius: 12px;
+  position: absolute;
+  top: 80%;
+  margin-left: -140px;
+  margin-top: 5px;
+
+  svg {
+    float: left;
+  }
+
+  ::placeholder {
+    color: #636e72;
+    opacity: 1;
+  }
+
+}
+
+.quicklinks:hover .quicklinkscontainer {
+  visibility: visible;
+}
+
+textarea {
+  border: none;
+  width: 200px;
+  resize: none;
+  height: 100px;
+  margin: 10px;
+}
+
+.topbarquicklinks {
+  svg {
+    font-size: 46px;
+    padding: 9px;
+  }
+
+  h3 {
+    font-size: 46px;
+    margin-right: 20px;
+  }
+
+  h4 {
+    margin: 0;
+  }
+}
+
+.dark textarea {
+  background-color: #2f3542;
+  color: white;
+}
+
+.quicklinks > button {
+  border: none;
+  color: #fff;
+  font-size: 22px;
+  background: none;
+}
+
+.quicklinks-container > a, .quicklinks-container > .quicklinks > button {
+  display: inline;
+}

src/components/widgets/quote/Quote.jsx

@@ -99,7 +99,7 @@ export default class Quote extends React.PureComponent {
         return this.doOffline();
       }
 
-      let authorlink = `https://${this.languagecode.split('-')[0]}.wikipedia.org/wiki/${data.author.split(' ').join('_')}`;
+      let authorlink = `https://${this.languagecode.split('_')[0]}.wikipedia.org/wiki/${data.author.split(' ').join('_')}`;
       if (localStorage.getItem('authorLink') === 'false') {
         authorLink = null;
       }