mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-11 18:31:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

Allowing gradients as a background setting.

Browse Source 
I have it functional, now I just need to add it to the settings.

For testing, set your customBackgroundColour to
{"angle": "185",
"gradient": [
{"colour": "#020024", "stop": 0},
{"colour": "#090979", "stop": 35},
{"colour": "#090979", "stop": 100}],
"type": "linear"}
This commit is contained in:
MrOnosa
2020-10-05 21:20:48 -05:00
parent caaed9603d
commit 2bcc0beec7
1 changed files with 14 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/widgets/Background.jsx
View File

@@ -2,8 +2,21 @@ import React from 'react';
import * as Constants from '../../modules/constants';
export default class Background extends React.PureComponent {
gradientStyleBuilder(gradientSettings) {
const {type, angle, gradient } = gradientSettings;
const stepStyles = gradient.map(g => ` ${g.colour} ${g.stop}%`).join();
return `background: ${gradient[0].colour}; background: ${type}-gradient(${angle}deg,${stepStyles})`;
}
setBackground(url, colour, credit) { // Sets the attributes of the background image
const background = colour ? `background-color: ${colour};` : `background-image: url(${url});`;
let gradientSettings;
try {
gradientSettings = JSON.parse(colour);
} catch (e) {
//colour use to be simply a hex colour or a NULL value before it was a JSON object. This automatically upgrades the hex colour value to the new standard. (NULL would not trigger an exception)
gradientSettings = {"type": "linear", "angle": "0", "gradient": [{"colour": colour, "stop": 0}, {"colour": colour, "stop": 100}]};
}
const background = colour ? this.gradientStyleBuilder(gradientSettings) : `background-image: url(${url});`;
document.querySelector('#backgroundImage').setAttribute(
'style',