+
diff --git a/src/components/modals/main/settings/sections/Greeting.jsx b/src/components/modals/main/settings/sections/Greeting.jsx
index bd7a588f..37c354e7 100644
--- a/src/components/modals/main/settings/sections/Greeting.jsx
+++ b/src/components/modals/main/settings/sections/Greeting.jsx
@@ -3,6 +3,7 @@ import React from 'react';
import Checkbox from '../Checkbox';
import Switch from '../Switch';
import Text from '../Text';
+import Slider from '../Slider';
import DayPickerInput from 'react-day-picker/DayPickerInput';
import 'react-day-picker/lib/style.css';
@@ -34,6 +35,7 @@ export default class GreetingSettings extends React.PureComponent {
+
{greeting.birthday}
diff --git a/src/components/modals/main/settings/sections/Quote.jsx b/src/components/modals/main/settings/sections/Quote.jsx
index e2ea53aa..6ecdb2ac 100644
--- a/src/components/modals/main/settings/sections/Quote.jsx
+++ b/src/components/modals/main/settings/sections/Quote.jsx
@@ -3,6 +3,7 @@ import React from 'react';
import Checkbox from '../Checkbox';
import Text from '../Text';
import Switch from '../Switch';
+import Slider from '../Slider';
export default function QuoteSettings() {
const { quote } = window.language.modals.main.settings.sections;
@@ -14,6 +15,7 @@ export default function QuoteSettings() {
+
{quote.buttons.title}
diff --git a/src/components/modals/main/settings/sections/Search.jsx b/src/components/modals/main/settings/sections/Search.jsx
index 44a54a34..e83dbe5a 100644
--- a/src/components/modals/main/settings/sections/Search.jsx
+++ b/src/components/modals/main/settings/sections/Search.jsx
@@ -78,10 +78,6 @@ export default class SearchSettings extends React.PureComponent {
{search.title}
{isChrome ? : null}
-
-
-
-
this.setSearchEngine(value)}>
{searchEngines.map((engine) => (
@@ -89,11 +85,14 @@ export default class SearchSettings extends React.PureComponent {
-
+
+
+
>
);
}
diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx
index 8b828a88..e294ad90 100644
--- a/src/components/modals/main/settings/sections/Time.jsx
+++ b/src/components/modals/main/settings/sections/Time.jsx
@@ -4,6 +4,7 @@ import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown';
import Switch from '../Switch';
import Radio from '../Radio';
+import Slider from '../Slider';
export default class TimeSettings extends React.PureComponent {
constructor() {
@@ -101,6 +102,7 @@ export default class TimeSettings extends React.PureComponent {
{timeSettings}
+
{time.date.title}
@@ -112,6 +114,7 @@ export default class TimeSettings extends React.PureComponent {
{dateSettings}
+
>
);
}
diff --git a/src/components/modals/main/settings/sections/Weather.jsx b/src/components/modals/main/settings/sections/Weather.jsx
index 17ab6851..43d3aa2a 100644
--- a/src/components/modals/main/settings/sections/Weather.jsx
+++ b/src/components/modals/main/settings/sections/Weather.jsx
@@ -73,7 +73,7 @@ export default class TimeSettings extends React.PureComponent {
{language.extra_info.title}
-
+
diff --git a/src/components/widgets/Widgets.jsx b/src/components/widgets/Widgets.jsx
index 47dea04c..a993a402 100644
--- a/src/components/widgets/Widgets.jsx
+++ b/src/components/widgets/Widgets.jsx
@@ -51,6 +51,7 @@ export default class Widgets extends React.PureComponent {
elements.push({this.widgets[element]});
});
} else {
+ // prevent error
elements = ['greeting', 'time', 'quicklinks', 'quote', 'date'];
}
diff --git a/src/components/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx
index 7f6f2fd3..008b4096 100644
--- a/src/components/widgets/background/Background.jsx
+++ b/src/components/widgets/background/Background.jsx
@@ -71,6 +71,7 @@ export default class Background extends React.PureComponent {
const url = (localStorage.getItem('ddgProxy') === 'true') ? window.constants.DDG_PROXY + this.state.url : this.state.url;
const photoInformation = document.querySelector('.photoInformation');
+ // just set the background
if (localStorage.getItem('bgtransition') === 'false') {
if (photoInformation) {
photoInformation.style.display = 'block';
@@ -79,14 +80,16 @@ export default class Background extends React.PureComponent {
return backgroundImage.style.background = `url(${url})`;
}
+ // firstly we set the background as hidden and make sure there is no background set currently
backgroundImage.classList.add('backgroundPreload');
backgroundImage.style.background = null;
+ // same with photo information if not using custom background
if (photoInformation) {
photoInformation.classList.add('backgroundPreload');
}
- // preloader for background transition
+ // preloader for background transition, required so it loads in nice
const preloader = document.createElement('img');
preloader.src = url;
@@ -95,7 +98,9 @@ export default class Background extends React.PureComponent {
backgroundImage.classList.remove('backgroundPreload');
backgroundImage.classList.add('fade-in');
- backgroundImage.style.background = `url(${url})`;
+ // this doesn't make it fetch again which is nice
+ backgroundImage.style.background = `url(${url})`;
+ // remove the preloader element we created earlier
preloader.remove();
if (photoInformation) {
@@ -104,6 +109,7 @@ export default class Background extends React.PureComponent {
}
});
} else {
+ // custom colour
backgroundImage.setAttribute('style', this.state.style);
}
}
@@ -243,6 +249,7 @@ export default class Background extends React.PureComponent {
componentDidMount() {
const element = document.getElementById('backgroundImage');
+ // this resets it so the fade in and getting background all works properly
const refresh = () => {
element.classList.remove('fade-in');
this.setState({
@@ -260,17 +267,20 @@ export default class Background extends React.PureComponent {
EventBus.on('refresh', (data) => {
if (data === 'background') {
if (localStorage.getItem('background') === 'false') {
+ // user is using custom colour or image
if (this.state.photoInfo.hidden === false) {
document.querySelector('.photoInformation').style.display = 'none';
}
+ // video backgrounds
if (this.state.video === true) {
return document.getElementById('backgroundVideo').style.display = 'none';
} else {
return element.style.display = 'none';
}
}
-
+
+ // video backgrounds
if (this.state.video === true) {
document.getElementById('backgroundVideo').style.display = 'block';
} else {
@@ -284,11 +294,13 @@ export default class Background extends React.PureComponent {
const backgroundType = localStorage.getItem('backgroundType');
if (this.state.photoInfo.offline !== true) {
+ // basically check to make sure something has changed before we try getting another background
if (backgroundType !== this.state.type || localStorage.getItem('backgroundAPI') !== this.state.currentAPI || (this.state.type === 'custom' && localStorage.getItem('customBackground') !== this.state.url)) {
return refresh();
}
}
+ // background effects so we don't get another image again
if (this.state.video === true) {
document.getElementById('backgroundVideo').style.webkitFilter = `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%)`;
} else {
@@ -296,6 +308,7 @@ export default class Background extends React.PureComponent {
}
}
+ // uninstall photo pack reverts your background to what you had previously
if (data === 'marketplacebackgrounduninstall') {
refresh();
}
diff --git a/src/components/widgets/background/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx
index b781aa3e..dd3fff42 100644
--- a/src/components/widgets/background/PhotoInformation.jsx
+++ b/src/components/widgets/background/PhotoInformation.jsx
@@ -35,7 +35,7 @@ export default function PhotoInformation(props) {
let credit = props.info.credit;
let photo = language.credit;
- // unsplash
+ // unsplash credit
if (props.info.photographerURL && props.info.photographerURL !== '' && !props.info.offline) {
photo = {language.credit};
credit = <>{photographer} {language.unsplash}>;
diff --git a/src/components/widgets/greeting/Greeting.jsx b/src/components/widgets/greeting/Greeting.jsx
index 01a94d43..965a6290 100644
--- a/src/components/widgets/greeting/Greeting.jsx
+++ b/src/components/widgets/greeting/Greeting.jsx
@@ -114,9 +114,14 @@ export default class Greeting extends React.PureComponent {
this.getGreeting(0);
element.style.display = 'block';
+ element.style.fontSize = `${1.6 * Number(localStorage.getItem('zoomGreeting') / 100)}em`;
}
});
+ // this comment can apply to all widget zoom features apart from the general one in the Accessibility section
+ // in a nutshell: 1.6 is the current font size and we do "localstorage || 100" so we don't have to try that 4.0 -> 5.0 thing again
+ document.querySelector('.greeting').style.fontSize = `${1.6 * Number((localStorage.getItem('zoomGreeting') || 100) / 100)}em`;
+
this.getGreeting(0);
}
diff --git a/src/components/widgets/quicklinks/QuickLinks.jsx b/src/components/widgets/quicklinks/QuickLinks.jsx
index 3d35af53..c95eb0d1 100644
--- a/src/components/widgets/quicklinks/QuickLinks.jsx
+++ b/src/components/widgets/quicklinks/QuickLinks.jsx
@@ -104,6 +104,7 @@ export default class QuickLinks extends React.PureComponent {
}
});
+ // allows you to add a link by pressing enter
document.querySelector('.topbarquicklinks').onkeydown = (e) => {
e = e || window.event;
let code = e.which || e.keyCode;
diff --git a/src/components/widgets/quote/Quote.jsx b/src/components/widgets/quote/Quote.jsx
index 92603740..640c0d63 100644
--- a/src/components/widgets/quote/Quote.jsx
+++ b/src/components/widgets/quote/Quote.jsx
@@ -172,10 +172,15 @@ export default class Quote extends React.PureComponent {
}
element.style.display = 'block';
+ document.querySelector('.quote').style.fontSize = `${0.8 * Number((localStorage.getItem('zoomQuote') || 100) / 100)}em`;
+ document.querySelector('.quoteauthor').style.fontSize = `${0.9 * Number((localStorage.getItem('zoomQuote') || 100) / 100)}em`;
this.init();
}
});
+ document.querySelector('.quote').style.fontSize = `${0.8 * Number((localStorage.getItem('zoomQuote') || 100) / 100)}em`;
+ document.querySelector('.quoteauthor').style.fontSize = `${0.9 * Number((localStorage.getItem('zoomQuote') || 100) / 100)}em`;
+
this.init();
}
diff --git a/src/components/widgets/time/Clock.jsx b/src/components/widgets/time/Clock.jsx
index 2908f2fd..7653f1d7 100644
--- a/src/components/widgets/time/Clock.jsx
+++ b/src/components/widgets/time/Clock.jsx
@@ -100,9 +100,12 @@ export default class Clock extends React.PureComponent {
this.startTime(0);
element.style.display = 'block';
+ element.style.fontSize = `${4 * Number((localStorage.getItem('zoomClock') || 100) / 100)}em`;
}
});
+ document.querySelector('.clock-container').style.fontSize = `${4 * Number((localStorage.getItem('zoomClock') || 100) / 100)}em`;
+
this.startTime(0);
}
diff --git a/src/components/widgets/time/Date.jsx b/src/components/widgets/time/Date.jsx
index ec4f5d5f..b69c572d 100644
--- a/src/components/widgets/time/Date.jsx
+++ b/src/components/widgets/time/Date.jsx
@@ -108,10 +108,13 @@ export default class DateWidget extends React.PureComponent {
}
element.style.display = 'block';
+ element.style.fontSize = `${Number((localStorage.getItem('zoomDate') || 100) / 100)}em`;
this.getDate();
}
});
+ document.querySelector('.date').style.fontSize = `${Number((localStorage.getItem('zoomDate') || 100) / 100)}em`;
+
this.getDate();
}
diff --git a/src/components/widgets/weather/Weather.jsx b/src/components/widgets/weather/Weather.jsx
index ca6eef2f..a1d1e536 100644
--- a/src/components/widgets/weather/Weather.jsx
+++ b/src/components/widgets/weather/Weather.jsx
@@ -160,7 +160,7 @@ export default class Weather extends React.PureComponent {
{this.state.weather.temp + this.state.temp_text}
-
{this.state.weather.description}
+ {enabled('weatherdescription') ?
{this.state.weather.description} : null}
{minmax()}
{enabled('humidity') ?
{this.state.weather.humidity}% : null}
{enabled('windspeed') ?
{this.state.weather.wind_speed} m/s {enabled('windDirection') ? : null} : null}
diff --git a/src/components/widgets/weather/WindDirectionIcon.jsx b/src/components/widgets/weather/WindDirectionIcon.jsx
index d60db5f0..a26f8976 100644
--- a/src/components/widgets/weather/WindDirectionIcon.jsx
+++ b/src/components/widgets/weather/WindDirectionIcon.jsx
@@ -4,6 +4,7 @@ import { WiDirectionDownLeft, WiDirectionDownRight, WiDirectionDown, WiDirection
export default function WindDirectionIcon(props) {
let icon;
+ // convert the number openweathermap gives us to closest direction or something
const getDirection = (angle) => {
const directions = ['North', 'North-West', 'West', 'South-West', 'South', 'South-East', 'East', 'North-East'];
return directions[Math.round(((angle %= 360) < 0 ? angle + 360 : angle) / 45) % 8];
diff --git a/src/modules/helpers/settings.js b/src/modules/helpers/settings.js
index b22b28bb..0b424cfc 100644
--- a/src/modules/helpers/settings.js
+++ b/src/modules/helpers/settings.js
@@ -91,24 +91,32 @@ export default class SettingsFunctions {
document.title = tabName;
if (hotreload === true) {
- return;
+ const custom = ['customcss', 'customjs', 'customfont'];
+ custom.forEach((element) => {
+ try {
+ document.head.removeChild(document.getElementById(element));
+ } catch (e) {}
+ });
}
const css = localStorage.getItem('customcss');
if (css) {
- document.head.insertAdjacentHTML('beforeend', '');
+ document.head.insertAdjacentHTML('beforeend', '');
}
const js = localStorage.getItem('customjs');
if (js) {
- document.body.insertAdjacentHTML('beforeend', '');
+ document.head.insertAdjacentHTML('beforeend', '');
}
const font = localStorage.getItem('font');
if (font) {
const google = localStorage.getItem('fontGoogle');
- let url, fontweight, fontstyle = '';
+ let url = '';
+ let fontweight = '';
+ let fontstyle = '';
+
if (google === 'true') {
url = `@import url('https://fonts.googleapis.com/css2?family=${font}&display=swap');`;
}
@@ -124,7 +132,7 @@ export default class SettingsFunctions {
}
document.head.insertAdjacentHTML('beforeend', `
-