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

Use CSS standard gradients

This commit is contained in:
Scott Western 2021-07-21 20:44:41 +00:00 committed by Tim Bentley
parent 911a3528b7
commit 0eb4e4b99e
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 * Build linear gradient CSS
* @private * @private
* @param {string} startDir - Starting direction * @param {string} direction - The direction or angle of the gradient e.g. to bottom or 90deg
* @param {string} endDir - Ending direction
* @param {string} startColor - The starting color * @param {string} startColor - The starting color
* @param {string} endColor - The ending color * @param {string} endColor - The ending color
* @returns {string} A string of the gradient CSS * @returns {string} A string of the gradient CSS
*/ */
function _buildLinearGradient(startDir, endDir, startColor, endColor) { function _buildLinearGradient(direction, startColor, endColor) {
return "-webkit-gradient(linear, " + startDir + ", " + endDir + ", from(" + startColor + "), to(" + endColor + ")) fixed"; 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 * @returns {string} A string of the gradient CSS
*/ */
function _buildRadialGradient(width, startColor, endColor) { 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: case BackgroundType.Gradient:
switch (Display._theme.background_direction) { switch (Display._theme.background_direction) {
case GradientType.Horizontal: case GradientType.Horizontal:
backgroundContent = _buildLinearGradient("left top", "left bottom", backgroundContent = _buildLinearGradient("to right",
Display._theme.background_start_color, Display._theme.background_start_color,
Display._theme.background_end_color); Display._theme.background_end_color);
break; break;
case GradientType.Vertical: case GradientType.Vertical:
backgroundContent = _buildLinearGradient("left top", "right top", backgroundContent = _buildLinearGradient("to bottom",
Display._theme.background_start_color, Display._theme.background_start_color,
Display._theme.background_end_color); Display._theme.background_end_color);
break; break;
case GradientType.LeftTop: case GradientType.LeftTop:
backgroundContent = _buildLinearGradient("left top", "right bottom", backgroundContent = _buildLinearGradient("to right bottom",
Display._theme.background_start_color, Display._theme.background_start_color,
Display._theme.background_end_color); Display._theme.background_end_color);
break; break;
case GradientType.LeftBottom: case GradientType.LeftBottom:
backgroundContent = _buildLinearGradient("left bottom", "right top", backgroundContent = _buildLinearGradient("to top right",
Display._theme.background_start_color, Display._theme.background_start_color,
Display._theme.background_end_color); Display._theme.background_end_color);
break; 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 () { it("_buildLinearGradient() should build the correct string", function () {
var gradient = _buildLinearGradient("left top", "left bottom", "#000", "#fff"); var gradient = _buildLinearGradient("to bottom", "#000", "#fff");
expect(gradient).toBe("-webkit-gradient(linear, left top, left bottom, from(#000), to(#fff)) fixed"); expect(gradient).toBe("linear-gradient(to bottom, #000, #fff) fixed");
}); });
it("_buildRadialGradient() should build the correct string", function () { it("_buildRadialGradient() should build the correct string", function () {
var gradient = _buildRadialGradient(10, "#000", "#fff"); 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 () { it("_getStyle should return the correct style on an element", function () {