diff --git a/openlp/core/display/html/display.css b/openlp/core/display/html/display.css
index e68b1ac28..301e91d11 100644
--- a/openlp/core/display/html/display.css
+++ b/openlp/core/display/html/display.css
@@ -21,7 +21,6 @@
z-index: 10;
width: 100%;
height: 0%;
- vertical-align: middle;
overflow: hidden;
visibility:hidden;
}
diff --git a/openlp/core/display/html/display.js b/openlp/core/display/html/display.js
index 9a0b2ded3..914439fd5 100644
--- a/openlp/core/display/html/display.js
+++ b/openlp/core/display/html/display.js
@@ -488,7 +488,7 @@ var Display = {
alertBackground.style.height = "25%";
alertBackground.style.transition = "2s linear";
alertBackground.style.visibility = "visible";
- }, 200);
+ }, 50);
return TransitionState.EntranceTransition;
},
@@ -499,7 +499,7 @@ var Display = {
doExitTransition: function () {
var alertBackground = $("#alert-background")[0];
alertBackground.style.height = "0%";
- alertBackground.style.transition = '2s linear';
+ alertBackground.style.transition = "2s linear";
return TransitionState.ExitTransition;
},
/**
diff --git a/openlp/plugins/alerts/lib/alertsmanager.py b/openlp/plugins/alerts/lib/alertsmanager.py
index 6d2a221d0..f33f2e8c1 100644
--- a/openlp/plugins/alerts/lib/alertsmanager.py
+++ b/openlp/plugins/alerts/lib/alertsmanager.py
@@ -25,7 +25,7 @@ displaying of alerts.
"""
import json
-from PyQt5 import QtCore
+from PyQt5 import QtCore, QtGui
from openlp.core.common.i18n import translate
from openlp.core.common.mixins import LogMixin, RegistryProperties
@@ -87,12 +87,12 @@ class AlertsManager(QtCore.QObject, RegistryBase, LogMixin, RegistryProperties):
text = self.alert_list.pop(0)
# Put alert settings together for dict
alert_settings = {
- 'background_color': Settings().value('alerts/background color'),
+ 'background_color': self.hex_to_rgb(Settings().value('alerts/background color')),
'location': Settings().value('alerts/location'),
'font_face': Settings().value('alerts/font face'),
'font_size': Settings().value('alerts/font size'),
- 'font_color': Settings().value('alerts/font color'),
- 'timeout': Settings().value().value('alerts/timeout')
+ 'font_color': self.hex_to_rgb(Settings().value('alerts/font color')),
+ 'timeout': Settings().value('alerts/timeout')
}
self.live_controller.displays[0].alert(text, json.dumps(alert_settings))
# Check to see if we have a timer running.
@@ -111,3 +111,10 @@ class AlertsManager(QtCore.QObject, RegistryBase, LogMixin, RegistryProperties):
self.killTimer(self.timer_id)
self.timer_id = 0
self.generate_alert()
+
+ def hex_to_rgb(self, hex_color):
+ rgb_values = QtGui.QColor(hex_color)
+ rgb_color = 'rgb(' + str(rgb_values.red()) + ", " \
+ + str(rgb_values.green()) + ", " + \
+ str(rgb_values.blue()) + ")"
+ return rgb_color
diff --git a/tests/js/test_display.js b/tests/js/test_display.js
index 36d5eae68..a8599e16b 100644
--- a/tests/js/test_display.js
+++ b/tests/js/test_display.js
@@ -186,69 +186,70 @@ describe("Display.alert", function () {
describe("The doEntranceTransition", function () {
- var alertBackground, alertText;
+ var alertBackground, alertText, css, settings, style;
// TODO: Fix tests to accommodate new behaviour with CSS classes and settings modification
beforeEach(function() {
document.body.innerHTML = "";
+ style = document.createElement("style");
+ style.type = "text/css";
+ css = '.normal { position: absolute; margin: 0; padding: 0; left: 0; z-index: 10; \
+ width: 100%; height: 0%; vertical-align: middle; overflow: hidden; visibility:hidden; \
+ }';
+ settings = {
+ "location": 2, "font_face": "Tahoma", "font_size": 40,
+ "font_color": "rgb(255, 255, 255)", "background_color": "rgb(102, 0, 0)"
+ };
+ style.innerHTML = css;
+ document.head.appendChild(style);
alertBackground = document.createElement("div");
alertBackground.setAttribute("id", "alert-background");
- document.body.appendChild(alertBackground);
+ alertBackground.setAttribute("class", "normal");
+ document.body.appendChild(alertBackground);
alertText = document.createElement("p");
alertText.setAttribute("id","alert");
alertBackground.appendChild(alertText);
- alertBackground.style.top = '0px';
- alertBackground.style.height = "0%";
});
- it("should set the correct styles for the alert when location is top of the page", function () {
- var settings = {
- "location": 0, "font_face": "Segoe UI, Tahoma, Geneva, Verdana, sans-serif",
- "font_size": 40, "font_color": "#ffffff", "background_color": "#660000"
- };
-
- Display.doEntranceTransition(settings);
-
- setTimeout( function() {
- expect(alertBackground.style.bottom).toEqual('');
- expect(alertBackground.style.top).toEqual('0px');
- expect(alertBackground.style.transition).toEqual("2s linear");
- expect(alertBackground.style.height).toEqual("25%");
- expect(alertBackground.style.visibility).toEqual("visible");
- }, 500);
-
- });
-
- it("should set the correct styles for the alert when location is middle of the page", function () {
- var settings = {
- "location": 0, "font_face": "Segoe UI, Tahoma, Geneva, Verdana, sans-serif",
- "font_size": 40, "font_color": "#ffffff", "background_color": "#660000"
- };
-
- Display.doEntranceTransition(settings);
- //To be replaced
- var middlePosition = ((window.innerHeight - alertBackground.clientHeight) / 2) + 'px';
- expect(alertBackground.style.top).toEqual(middlePosition);
- expect(alertBackground.style.height).toEqual("25%");
- expect(alertBackground.style.visibility).toEqual("visible");
- });
-
- it("should set the correct styles for the alert when location is bottom of the page", function () {
- var settings = {
- "location": 0, "font_face": "Segoe UI, Tahoma, Geneva, Verdana, sans-serif",
- "font_size": 40, "font_color": "#ffffff", "background_color": "#660000"
- };
-
+ it("should apply the styles correctly when doEntranceTransition is called", function(done) {
Display.doEntranceTransition(settings);
+ expect(alertBackground.classList.contains("bottom")).toBe(true);
setTimeout(function() {
- expect(alertBackground.style.top).toEqual('');
- expect(alertBackground.style.bottom).toEqual('0px');
- expect(alertBackground.style.transition).toEqual("2s linear");
+ expect(alertText.style.fontFamily).toEqual(settings.font_face);
+ expect(alertText.style.color).toEqual(settings.font_color);
+ expect(alertText.style.fontSize).toEqual(settings.font_size + "pt");
+ expect(alertBackground.style.backgroundColor).toEqual(settings.background_color);
+ expect(alertBackground.classList.contains("bottom")).toBe(true);
expect(alertBackground.style.height).toEqual("25%");
+ expect(alertBackground.style.transition).toEqual("2s linear");
expect(alertBackground.style.visibility).toEqual("visible");
- }, 500);
+ done();
+ }, 60);
+ });
+
+ it("should set the correct class for the alert when location is top of the page", function () {
+ settings.location = 0;
+ Display.doEntranceTransition(settings);
+
+ expect(alertBackground.classList.contains("normal")).toBe(true);
+ expect(alertBackground.classList.contains("top")).toBe(true);
+
+ });
+
+ it("should set the correct class for the alert when location is middle of the page", function () {
+ settings.location = 1;
+ Display.doEntranceTransition(settings);
+ expect(alertBackground.classList.contains("normal")).toBe(true);
+ expect(alertBackground.classList.contains("middle")).toBe(true);
+ });
+
+ it("should set the correct class for the alert when location is bottom of the page", function () {
+ Display.doEntranceTransition(settings);
+
+ expect(alertBackground.classList.contains("normal")).toBe(true);
+ expect(alertBackground.classList.contains("bottom")).toBe(true);
});
});
@@ -262,27 +263,12 @@ describe("The doExitTransition", function () {
document.body.appendChild(alertBackground);
});
- it("should remove the styles correctly when the location is the top of the page", function () {
- Display.doExitTransition(0);
+ it("should transition correctly when the doExitTransition method is called", function () {
+ Display.doExitTransition();
expect(alertBackground.style.height).toEqual('0%');
expect(alertBackground.style.transition).toEqual("2s linear");
});
-
- it("should remove the styles correctly when the location is middle of the page", function () {
- Display.doExitTransition(1);
-
- expect(alertBackground.style.height).toEqual('0%');
- expect(alertBackground.classList.contains("middle-exit-animation"));
- });
-
-it("should remove the styles correctly when the location is the bottom of the page", function () {
- Display.doExitTransition(2);
-
- expect(alertBackground.style.height).toEqual('0%');
- expect(alertBackground.style.transition).toEqual("2s linear");
-});
-
});