diff --git a/src/components/modals/Modals.jsx b/src/components/modals/Modals.jsx index 66d788cf..c6373725 100644 --- a/src/components/modals/Modals.jsx +++ b/src/components/modals/Modals.jsx @@ -22,7 +22,7 @@ export default class Modals extends React.PureComponent { } componentDidMount() { - if (localStorage.getItem('showWelcome') === 'true') { + if (localStorage.getItem('showWelcome') === 'true' && window.location.search !== '?nointro=true') { this.setState({ welcomeModal: true }); diff --git a/src/components/modals/main/scss/index.scss b/src/components/modals/main/scss/index.scss index f5768060..b3c801f0 100644 --- a/src/components/modals/main/scss/index.scss +++ b/src/components/modals/main/scss/index.scss @@ -126,14 +126,10 @@ ul.sidebar { text-align: center; } - svg, - li { - font-size: 30px; - } svg { vertical-align: middle; - font-size: 32px; + font-size: 35px; padding: 5px; } diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss index d421df73..4c12025d 100644 --- a/src/components/modals/main/scss/settings/_main.scss +++ b/src/components/modals/main/scss/settings/_main.scss @@ -119,7 +119,7 @@ input[type=color]::-moz-color-swatch { } .MuiFormControlLabel-labelPlacementStart { - margin-left: 0px; + margin-left: 0px !important; } .MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track { diff --git a/src/components/modals/main/settings/sections/Appearance.jsx b/src/components/modals/main/settings/sections/Appearance.jsx index 55e20435..833d2e7e 100644 --- a/src/components/modals/main/settings/sections/Appearance.jsx +++ b/src/components/modals/main/settings/sections/Appearance.jsx @@ -59,7 +59,7 @@ export default function AppearanceSettings() {

{appearance.accessibility.title}

{(engineName === 'Blink') ? - + : null} diff --git a/src/components/modals/main/settings/sections/Order.jsx b/src/components/modals/main/settings/sections/Order.jsx index f5d7bb75..67db3107 100644 --- a/src/components/modals/main/settings/sections/Order.jsx +++ b/src/components/modals/main/settings/sections/Order.jsx @@ -33,7 +33,7 @@ export default class OrderSettings extends React.PureComponent { } reset = () => { - localStorage.setItem('order', JSON.stringify(['greeting', 'time', 'quote', 'date'])); + localStorage.setItem('order', JSON.stringify(['greeting', 'time', 'quicklinks', 'quote', 'date'])); this.setState({ items: JSON.parse(localStorage.getItem('order')) diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx index 7b81535b..abd992c0 100644 --- a/src/components/modals/main/settings/sections/background/Background.jsx +++ b/src/components/modals/main/settings/sections/background/Background.jsx @@ -64,6 +64,14 @@ export default class BackgroundSettings extends React.PureComponent { <>
+
+ + + + + + + ); diff --git a/src/components/widgets/Widgets.jsx b/src/components/widgets/Widgets.jsx index dbd9da34..b399bcd0 100644 --- a/src/components/widgets/Widgets.jsx +++ b/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') ? : null, greeting: this.enabled('greeting') ? : null, quote: this.enabled('quote') ? : null, - date: this.enabled('date') ? : null + date: this.enabled('date') ? : null, + quicklinks: this.enabled('quicklinksenabled') ? : null } } @@ -77,15 +79,13 @@ export default class Widgets extends React.PureComponent { elements.push({this.widgets[element]}); }); } else { - elements = ['greeting', 'time', 'quote', 'date']; + elements = ['greeting', 'time', 'quicklinks', 'quote', 'date']; } return (
{this.enabled('searchBar') ? : null} {elements} - {this.enabled('view') ? : null} - {this.enabled('favouriteEnabled') ? : null}
); } diff --git a/src/components/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx index ebb62d5c..79feb8e2 100644 --- a/src/components/widgets/background/Background.jsx +++ b/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`; diff --git a/src/components/widgets/background/Favourite.jsx b/src/components/widgets/background/Favourite.jsx index 90a59b69..b1204b7d 100644 --- a/src/components/widgets/background/Favourite.jsx +++ b/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')) ? this.favourite()} /> : this.favourite()} /> + favourited: (localStorage.getItem('favourite')) ? this.favourite()} className='topicons' /> : 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: this.favourite()} /> + favourited: 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: this.favourite()} /> + favourited: 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
- {this.state.favourited} -
+ return {this.state.favourited} } } diff --git a/src/components/widgets/background/Maximise.jsx b/src/components/widgets/background/Maximise.jsx index 76a74d16..2cba2c12 100644 --- a/src/components/widgets/background/Maximise.jsx +++ b/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
- this.viewStuff()} /> -
+ return + this.viewStuff()} className='topicons' /> + } } diff --git a/src/components/widgets/background/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx index 59f5745a..59b11e2b 100644 --- a/src/components/widgets/background/PhotoInformation.jsx +++ b/src/components/widgets/background/PhotoInformation.jsx @@ -32,22 +32,25 @@ export default function PhotoInformation(props) { return (
-

{language.credit} {props.info.credit}

+

{language.credit} {props.info.credit}

{language.information}


- {props.info.location} + {props.info.location || 'N/A'} - {props.info.camera} + {props.info.camera || 'N/A'} - {props.info.resolution} + {props.info.resolution || 'N/A'} {props.info.credit.split(` ${language.unsplash}`)[0]} - - downloadImage(props.info)}>{language.download} + {(localStorage.getItem('downloadbtn') === 'true') ? + <> + + downloadImage(props.info)}>{language.download} + : null}
); diff --git a/src/components/widgets/background/scss/index.scss b/src/components/widgets/background/scss/index.scss index 4b7a1d7b..1b467db5 100644 --- a/src/components/widgets/background/scss/index.scss +++ b/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); - } -} diff --git a/src/components/widgets/navbar/Navbar.jsx b/src/components/widgets/navbar/Navbar.jsx index 694e573d..53ddf78f 100644 --- a/src/components/widgets/navbar/Navbar.jsx +++ b/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 (
+ {(localStorage.getItem('view') === 'true') ? :null} + {(localStorage.getItem('favouriteEnabled') === 'true') ? :null} + {(localStorage.getItem('notesEnabled') === 'true') ?
diff --git a/src/components/widgets/quicklinks/QuickLinks.jsx b/src/components/widgets/quicklinks/QuickLinks.jsx new file mode 100644 index 00000000..a384f5f6 --- /dev/null +++ b/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 ( +
+ {this.state.items.map((item) => ( + + + + ))} +
+ + +
+

New Link

+ this.updateLink('name', e.target.value)} /> +
+ this.updateLink('url', e.target.value)} /> +
+ +
+
+
+
+ ); + } +} \ No newline at end of file diff --git a/src/components/widgets/quicklinks/scss/index.scss b/src/components/widgets/quicklinks/scss/index.scss new file mode 100644 index 00000000..2f3ff7cf --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/components/widgets/quote/Quote.jsx b/src/components/widgets/quote/Quote.jsx index 8f4efe27..b4e49130 100644 --- a/src/components/widgets/quote/Quote.jsx +++ b/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; }