From 94e9c5d65eed562224a7b33b6589a170e256e2a3 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Fri, 17 Sep 2021 19:40:22 +0100 Subject: [PATCH] feat: random colour/gradient background, fix toasts --- .../main/marketplace/sections/Marketplace.jsx | 2 +- .../settings/sections/background/Background.jsx | 2 ++ src/components/widgets/background/Background.jsx | 10 ++++++++-- src/modules/helpers/background/widget.js | 16 ++++++++++++++++ src/modules/helpers/interval.js | 8 ++++---- src/translations/de_DE.json | 4 +++- src/translations/en_GB.json | 4 +++- src/translations/en_US.json | 4 +++- src/translations/es.json | 4 +++- src/translations/fr.json | 4 +++- src/translations/nl.json | 4 +++- src/translations/no.json | 4 +++- src/translations/ru.json | 4 +++- src/translations/zh_CN.json | 4 +++- 14 files changed, 58 insertions(+), 16 deletions(-) diff --git a/src/components/modals/main/marketplace/sections/Marketplace.jsx b/src/components/modals/main/marketplace/sections/Marketplace.jsx index d57107c6..d0c46cb3 100644 --- a/src/components/modals/main/marketplace/sections/Marketplace.jsx +++ b/src/components/modals/main/marketplace/sections/Marketplace.jsx @@ -111,7 +111,7 @@ export default class Marketplace extends PureComponent { uninstall(this.state.item.type, this.state.item.display_name); } - toast(this.getMessage('toats.' + type + 'ed')); + toast(this.getMessage('toasts.' + type + 'ed')); this.setState({ button: (type === 'install') ? this.buttons.uninstall : this.buttons.install }); diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx index 058959b6..7d8f8fc2 100644 --- a/src/components/modals/main/settings/sections/background/Background.jsx +++ b/src/components/modals/main/settings/sections/background/Background.jsx @@ -230,6 +230,8 @@ export default class BackgroundSettings extends PureComponent { + +
diff --git a/src/components/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx index e1b74ba5..c12d44e7 100644 --- a/src/components/widgets/background/Background.jsx +++ b/src/components/widgets/background/Background.jsx @@ -5,7 +5,7 @@ import PhotoInformation from './PhotoInformation'; import EventBus from 'modules/helpers/eventbus'; import Interval from 'modules/helpers/interval'; -import { videoCheck, offlineBackground, gradientStyleBuilder } from 'modules/helpers/background/widget'; +import { videoCheck, offlineBackground, gradientStyleBuilder, randomColourStyleBuilder } from 'modules/helpers/background/widget'; import './scss/index.scss'; @@ -92,7 +92,8 @@ export default class Background extends PureComponent { }); } - switch (localStorage.getItem('backgroundType')) { + const type = localStorage.getItem('backgroundType'); + switch (type) { case 'api': if (offline) { return this.setState(offlineBackground()); @@ -185,6 +186,11 @@ export default class Background extends PureComponent { } break; + case 'random_colour': + case 'random_gradient': + this.setState(randomColourStyleBuilder(type)); + break; + case 'custom': let customBackground; try { diff --git a/src/modules/helpers/background/widget.js b/src/modules/helpers/background/widget.js index 1021d089..5cee91ec 100644 --- a/src/modules/helpers/background/widget.js +++ b/src/modules/helpers/background/widget.js @@ -37,6 +37,22 @@ export function gradientStyleBuilder({ type, angle, gradient }) { }; } +export function randomColourStyleBuilder(type) { + // randomColour based on https://stackoverflow.com/a/5092872 + const randomColour = () => '#000000'.replace(/0/g, () => {return (~~(Math.random()*16)).toString(16)}); + let style = `background:${randomColour()};`; + + if (type === 'random_gradient') { + const directions = ['to right', 'to left', 'to bottom', 'to top', 'to bottom right', 'to bottom left', 'to top right', 'to top left']; + style = `background:linear-gradient(${directions[Math.floor(Math.random() * directions.length)]}, ${randomColour()}, ${randomColour()});`; + } + + return { + type: 'colour', + style + } +} + // source: https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#ECMAScript_.28JavaScript.2FActionScript.2C_etc..29 export function lon2tile(lon, zoom) { return (Math.floor((lon + 180) / 360 * Math.pow(2, zoom))); diff --git a/src/modules/helpers/interval.js b/src/modules/helpers/interval.js index 6a822fae..ac0bf8c2 100644 --- a/src/modules/helpers/interval.js +++ b/src/modules/helpers/interval.js @@ -1,8 +1,7 @@ // based on https://stackoverflow.com/a/47009962 export default function interval(callback, interval, name) { const key = name + 'interval'; - const timeInMs = localStorage.getItem(key); - + const ms = localStorage.getItem(key); const now = Date.now(); const executeCallback = () => { @@ -10,8 +9,8 @@ export default function interval(callback, interval, name) { callback(); }; - if (timeInMs) { - const delta = now - parseInt(timeInMs); + if (ms) { + const delta = now - parseInt(ms); if (delta > interval) { setInterval(executeCallback, interval); } else { @@ -23,5 +22,6 @@ export default function interval(callback, interval, name) { } else { setInterval(executeCallback, interval); } + localStorage.setItem(key, now); } diff --git a/src/translations/de_DE.json b/src/translations/de_DE.json index b165cc05..2a9720ba 100644 --- a/src/translations/de_DE.json +++ b/src/translations/de_DE.json @@ -160,7 +160,9 @@ "title": "Type", "api": "API", "custom_image": "Benutzerdefiniertes Bild", - "custom_colour": "Benutzerdefinierte Farbe/Farbverlauf" + "custom_colour": "Benutzerdefinierte Farbe/Farbverlauf", + "random_colour": "Random colour", + "random_gradient": "Random gradient" }, "source": { "title": "Quelle", diff --git a/src/translations/en_GB.json b/src/translations/en_GB.json index 8d02a37b..24063333 100644 --- a/src/translations/en_GB.json +++ b/src/translations/en_GB.json @@ -160,7 +160,9 @@ "title": "Type", "api": "API", "custom_image": "Custom image", - "custom_colour": "Custom colour/gradient" + "custom_colour": "Custom colour/gradient", + "random_colour": "Random colour", + "random_gradient": "Random gradient" }, "source": { "title": "Source", diff --git a/src/translations/en_US.json b/src/translations/en_US.json index d85ab857..9a71e7d7 100644 --- a/src/translations/en_US.json +++ b/src/translations/en_US.json @@ -160,7 +160,9 @@ "title": "Type", "api": "API", "custom_image": "Custom image", - "custom_colour": "Custom color/gradient" + "custom_colour": "Custom color/gradient", + "random_colour": "Random colour", + "random_gradient": "Random gradient" }, "source": { "title": "Source", diff --git a/src/translations/es.json b/src/translations/es.json index 1100f0ed..af62fc70 100644 --- a/src/translations/es.json +++ b/src/translations/es.json @@ -160,7 +160,9 @@ "title": "Tipo", "api": "API", "custom_image": "Imagen personalizada", - "custom_colour": "Color/degradado personalizado" + "custom_colour": "Color/degradado personalizado", + "random_colour": "Random colour", + "random_gradient": "Random gradient" }, "source": { "title": "Fuente", diff --git a/src/translations/fr.json b/src/translations/fr.json index c31af7cf..f2b26300 100644 --- a/src/translations/fr.json +++ b/src/translations/fr.json @@ -160,7 +160,9 @@ "title": "Type", "api": "API", "custom_image": "Image personnalisée", - "custom_colour": "Couleur / dégradé personnalisé" + "custom_colour": "Couleur / dégradé personnalisé", + "random_colour": "Random colour", + "random_gradient": "Random gradient" }, "source": { "title": "Source", diff --git a/src/translations/nl.json b/src/translations/nl.json index 8a50f494..0f02b4d3 100644 --- a/src/translations/nl.json +++ b/src/translations/nl.json @@ -160,7 +160,9 @@ "title": "Type", "api": "API", "custom_image": "Custom image", - "custom_colour": "Custom colour/gradient" + "custom_colour": "Custom colour/gradient", + "random_colour": "Random colour", + "random_gradient": "Random gradient" }, "source": { "title": "Source", diff --git a/src/translations/no.json b/src/translations/no.json index 9f869afe..16e7bc83 100644 --- a/src/translations/no.json +++ b/src/translations/no.json @@ -160,7 +160,9 @@ "title": "Type", "api": "API", "custom_image": "Custom image", - "custom_colour": "Custom colour/gradient" + "custom_colour": "Custom colour/gradient", + "random_colour": "Random colour", + "random_gradient": "Random gradient" }, "source": { "title": "Source", diff --git a/src/translations/ru.json b/src/translations/ru.json index 0f1d70a6..4931ba16 100644 --- a/src/translations/ru.json +++ b/src/translations/ru.json @@ -160,7 +160,9 @@ "title": "Type", "api": "API", "custom_image": "Custom image", - "custom_colour": "Custom colour/gradient" + "custom_colour": "Custom colour/gradient", + "random_colour": "Random colour", + "random_gradient": "Random gradient" }, "source": { "title": "Source", diff --git a/src/translations/zh_CN.json b/src/translations/zh_CN.json index 44761d9a..d13f4632 100644 --- a/src/translations/zh_CN.json +++ b/src/translations/zh_CN.json @@ -160,7 +160,9 @@ "title": "来源", "api": "API", "custom_image": "自定义图像", - "custom_colour": "自定义背景颜色" + "custom_colour": "自定义背景颜色", + "random_colour": "Random colour", + "random_gradient": "Random gradient" }, "source": { "title": "来源",