mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-16 21:44:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: random colour/gradient background, fix toasts

Browse Source
This commit is contained in:
David Ralph
2021-09-17 19:40:22 +01:00
parent e3edc3d89e
commit 94e9c5d65e
14 changed files with 58 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/modals/main/marketplace/sections/Marketplace.jsx
View File

@@ -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
});

2
src/components/modals/main/settings/sections/background/Background.jsx
View File

@@ -230,6 +230,8 @@ export default class BackgroundSettings extends PureComponent {
<option value='api'>{getMessage('modals.main.settings.sections.background.type.api')}</option>
<option value='custom'>{getMessage('modals.main.settings.sections.background.type.custom_image')}</option>
<option value='colour'>{getMessage('modals.main.settings.sections.background.type.custom_colour')}</option>
<option value='random_colour'>{getMessage('modals.main.settings.sections.background.type.random_colour')}</option>
<option value='random_gradient'>{getMessage('modals.main.settings.sections.background.type.random_gradient')}</option>
</Dropdown>
<br/>

10
src/components/widgets/background/Background.jsx
View File

@@ -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 {

16
src/modules/helpers/background/widget.js
View File

@@ -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)));

8
src/modules/helpers/interval.js
View File

@@ -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);
}

4
src/translations/de_DE.json
View File

@@ -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",

4
src/translations/en_GB.json
View File

@@ -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",

4
src/translations/en_US.json
View File

@@ -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",

4
src/translations/es.json
View File

@@ -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",

4
src/translations/fr.json
View File

@@ -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",

4
src/translations/nl.json
View File

@@ -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",

4
src/translations/no.json
View File

@@ -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",

4
src/translations/ru.json
View File

@@ -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",

4
src/translations/zh_CN.json
View File

@@ -160,7 +160,9 @@
"title": "来源",
"api": "API",
"custom_image": "自定义图像",
"custom_colour": "自定义背景颜色"
"custom_colour": "自定义背景颜色",
"random_colour": "Random colour",
"random_gradient": "Random gradient"
},
"source": {
"title": "来源",