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

Use point size for text outline.

Browse Source 
The previous code matched the erroneous behaviour of the original Python method, which used `em` as a measurement; the theme wizard uses `pt` as a unit and doesn't allow fractional values, which meant that it was not possible to specify very thin outlines at large font sizes.

Now, both UI and rendering code use `pt` as a unit, which allows thin outlines.
This commit is contained in:
James Muscat 2018-01-21 11:07:04 -07:00 committed by Raoul Snyman
commit 7539483959
2 changed files with 40 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -133,7 +133,7 @@ AudioPlayer.prototype.createAudioElement = function () {
this._audioElement.addEventListener("volumechange", this._callListener); this._audioElement.addEventListener("volumechange", this._callListener);
this._audioElement.addEventListener("durationchange", this._callListener); this._audioElement.addEventListener("durationchange", this._callListener);
this._audioElement.addEventListener("loadeddata", this._callListener); this._audioElement.addEventListener("loadeddata", this._callListener);
document.addEventListener("complete", function(event) { document.addEventListener("complete", function(event) {
document.body.appendChild(this._audioElement); document.body.appendChild(this._audioElement);
}); });
}; };
@ -551,7 +551,7 @@ var Display = {
"padding": "0"*/ "padding": "0"*/
}; };
if (!!theme.font_main_outline) { if (!!theme.font_main_outline) {
mainStyle["-webkit-text-stroke"] = "" + (parseFloat(theme.font_main_outline_size) / 16.0) + "em " + mainStyle["-webkit-text-stroke"] = "" + theme.font_main_outline_size + "pt " +
theme.font_main_outline_color; theme.font_main_outline_color;
mainStyle["-webkit-text-fill-color"] = theme.font_main_color; mainStyle["-webkit-text-fill-color"] = theme.font_main_color;
} }
@ -571,7 +571,7 @@ var Display = {
theme.font_main_shadow_size + "px"; theme.font_main_shadow_size + "px";
} }
mainStyle["padding-bottom"] = theme.display_vertical_align == VerticalAlign.Bottom ? "0.5em" : "0"; mainStyle["padding-bottom"] = theme.display_vertical_align == VerticalAlign.Bottom ? "0.5em" : "0";
mainStyle["padding-left"] = !!theme.font_main_outline ? "" + (theme.font_main_outline_size * 2) + "px" : "0"; mainStyle["padding-left"] = !!theme.font_main_outline ? "" + (theme.font_main_outline_size * 2) + "pt" : "0";
// These need to be fixed, in the Python they use a width passed in as a parameter // These need to be fixed, in the Python they use a width passed in as a parameter
mainStyle["position"] = "absolute"; mainStyle["position"] = "absolute";
mainStyle["width"] = "" + (window.innerWidth - (theme.font_main_outline_size * 4)) + "px"; mainStyle["width"] = "" + (window.innerWidth - (theme.font_main_outline_size * 4)) + "px";
@ -622,7 +622,6 @@ var Display = {
} }
return videoTypes; return videoTypes;
} }
}
}; };
new QWebChannel(qt.webChannelTransport, function (channel) { new QWebChannel(qt.webChannelTransport, function (channel) {
window.mediaWatcher = channel.objects.mediaWatcher; window.mediaWatcher = channel.objects.mediaWatcher;

37
tests/js/test_display.js
View File

@ -193,6 +193,15 @@ describe("Display.setTextSlides", function () {
var slidesDiv = document.createElement("div"); var slidesDiv = document.createElement("div");
slidesDiv.setAttribute("class", "slides"); slidesDiv.setAttribute("class", "slides");
document.body.appendChild(slidesDiv); document.body.appendChild(slidesDiv);
var background = document.createElement("div");
background.setAttribute("id", "global-background");
document.body.appendChild(background);
var footer = document.createElement("div");
footer.setAttribute("class", "footer");
document.body.appendChild(footer);
Display._slides = {}; Display._slides = {};
}); });
@ -222,6 +231,34 @@ describe("Display.setTextSlides", function () {
expect(Display.reinit).toHaveBeenCalledTimes(1); expect(Display.reinit).toHaveBeenCalledTimes(1);
expect(Reveal.slide).toHaveBeenCalledWith(0); expect(Reveal.slide).toHaveBeenCalledWith(0);
}); });
it("should correctly set outline width", function () {
const slides = [
{
"verse": "v1",
"text": "Amazing grace, how sweet the sound\nThat saved a wretch like me\n" +
"I once was lost, but now I'm found\nWas blind but now I see"
}
];
const theme = {
'font_main_color': 'yellow',
'font_main_outline': true,
'font_main_outline_size': 42,
'font_main_outline_color': 'red'
};
spyOn(Display, "reinit");
Display.setTextSlides(slides);
Display.setTheme(theme);
const slidesDiv = $(".slides")[0];
expect(slidesDiv.style['-webkit-text-stroke']).toEqual('42pt red');
expect(slidesDiv.style['padding-left']).toEqual('84pt');
expect(slidesDiv.style['-webkit-text-fill-color']).toEqual('yellow');
})
}); });
describe("Display.setImageSlides", function () { describe("Display.setImageSlides", function () {