raoul
/
openlp
forked from openlp/openlp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'css-standard-gradients' into 'master' 

Use CSS standard gradients

See merge request openlp/openlp!337
This commit is contained in:
Tim Bentley 2021-07-21 20:44:41 +00:00
parent 911a3528b7 0eb4e4b99e
commit ef1bffb0c3
2 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
openlp/core/display/html/display.js
View File

@ -137,14 +137,13 @@ function $(selector) {
/**
* Build linear gradient CSS
* @private
* @param {string} startDir - Starting direction
* @param {string} endDir - Ending direction
* @param {string} direction - The direction or angle of the gradient e.g. to bottom or 90deg
* @param {string} startColor - The starting color
* @param {string} endColor - The ending color
* @returns {string} A string of the gradient CSS
*/
function _buildLinearGradient(startDir, endDir, startColor, endColor) {
return "-webkit-gradient(linear, " + startDir + ", " + endDir + ", from(" + startColor + "), to(" + endColor + ")) fixed";
function _buildLinearGradient(direction, startColor, endColor) {
return "linear-gradient(" + direction + ", " + startColor + ", " + endColor + ") fixed";
}
/**
@ -156,7 +155,7 @@ function _buildLinearGradient(startDir, endDir, startColor, endColor) {
* @returns {string} A string of the gradient CSS
*/
function _buildRadialGradient(width, startColor, endColor) {
return "-webkit-gradient(radial, " + width + " 50%, 100, " + width + " 50%, " + width + ", from(" + startColor + "), to(" + endColor + ")) fixed";
return "radial-gradient(" + startColor + ", " + endColor + ") fixed";
}
/**
@ -971,22 +970,22 @@ var Display = {
case BackgroundType.Gradient:
switch (Display._theme.background_direction) {
case GradientType.Horizontal:
backgroundContent = _buildLinearGradient("left top", "left bottom",
backgroundContent = _buildLinearGradient("to right",
Display._theme.background_start_color,
Display._theme.background_end_color);
break;
case GradientType.Vertical:
backgroundContent = _buildLinearGradient("left top", "right top",
backgroundContent = _buildLinearGradient("to bottom",
Display._theme.background_start_color,
Display._theme.background_end_color);
break;
case GradientType.LeftTop:
backgroundContent = _buildLinearGradient("left top", "right bottom",
backgroundContent = _buildLinearGradient("to right bottom",
Display._theme.background_start_color,
Display._theme.background_end_color);
break;
case GradientType.LeftBottom:
backgroundContent = _buildLinearGradient("left bottom", "right top",
backgroundContent = _buildLinearGradient("to top right",
Display._theme.background_start_color,
Display._theme.background_end_color);
break;

6
tests/js/test_display.js
View File

@ -44,13 +44,13 @@ describe("The function", function () {
});
it("_buildLinearGradient() should build the correct string", function () {
var gradient = _buildLinearGradient("left top", "left bottom", "#000", "#fff");
expect(gradient).toBe("-webkit-gradient(linear, left top, left bottom, from(#000), to(#fff)) fixed");
var gradient = _buildLinearGradient("to bottom", "#000", "#fff");
expect(gradient).toBe("linear-gradient(to bottom, #000, #fff) fixed");
});
it("_buildRadialGradient() should build the correct string", function () {
var gradient = _buildRadialGradient(10, "#000", "#fff");
expect(gradient).toBe("-webkit-gradient(radial, 10 50%, 100, 10 50%, 10, from(#000), to(#fff)) fixed");
expect(gradient).toBe("radial-gradient(#000, #fff) fixed");
});
it("_getStyle should return the correct style on an element", function () {