From af3ecde2a242a3cce1767886047feb0b457ad99e Mon Sep 17 00:00:00 2001
From: Yi-Fan Liao
Date: Wed, 8 Jul 2015 11:00:57 +0800
Subject: [PATCH] Bug 1174658 - [Stingray][Dashboard] Intro launch animation
for dashboard - Central Clock and Background
* Add background and greeting animations.
* Change mozl10n.get() to mozl10n.formatValue().
---
tv_apps/dashboard/index.html | 3 +-
tv_apps/dashboard/js/dashboard.js | 1 +
tv_apps/dashboard/js/digital_clock.js | 13 ++--
.../locales/dashboard.en-US.properties | 24 +++++++
tv_apps/dashboard/style/dashboard.css | 68 +++++++++++++++++++
5 files changed, 104 insertions(+), 5 deletions(-)
diff --git a/tv_apps/dashboard/index.html b/tv_apps/dashboard/index.html
index bac03d39e761..2cd1e159f7f6 100644
--- a/tv_apps/dashboard/index.html
+++ b/tv_apps/dashboard/index.html
@@ -48,7 +48,8 @@
-
+
+
diff --git a/tv_apps/dashboard/js/dashboard.js b/tv_apps/dashboard/js/dashboard.js
index 64fe8faf5f5c..6af085962c75 100644
--- a/tv_apps/dashboard/js/dashboard.js
+++ b/tv_apps/dashboard/js/dashboard.js
@@ -37,6 +37,7 @@
this._clearActiveDirection();
document.body.classList.remove('active');
} else {
+ this.digitalClock.generateGreeting();
document.body.classList.add('active');
}
},
diff --git a/tv_apps/dashboard/js/digital_clock.js b/tv_apps/dashboard/js/digital_clock.js
index d04d4283753c..7a92aa4b386f 100644
--- a/tv_apps/dashboard/js/digital_clock.js
+++ b/tv_apps/dashboard/js/digital_clock.js
@@ -14,7 +14,8 @@
'minutes-units-digit': document.getElementById('minutes-units-digit'),
'seconds-tens-digit': document.getElementById('seconds-tens-digit'),
'seconds-units-digit': document.getElementById('seconds-units-digit'),
- 'today': document.getElementById('today-is')
+ 'today': document.getElementById('today-is'),
+ 'greeting': document.getElementById('greeting')
};
}
@@ -70,6 +71,11 @@
this.date = date;
},
+ generateGreeting: function () {
+ var hours = this.date ? this.date.getHours() : (new Date()).getHours;
+ this.elements.greeting.dataset.l10nId = 'greeting-at-' + hours;
+ },
+
/**
* Update the display date and time.
* @param {Date} date The Date to be displayed.
@@ -117,9 +123,8 @@
* @param {[Date} date The date to be displayed.
*/
_changeDate: function (date) {
- navigator.mozL10n.ready(function() {
- var dateTimeFormat = new navigator.mozL10n.DateTimeFormat();
- var format = navigator.mozL10n.get('dateFormat');
+ var dateTimeFormat = new navigator.mozL10n.DateTimeFormat();
+ navigator.mozL10n.formatValue('dateFormat').then(function (format) {
var formatted = dateTimeFormat.localeFormat(date, format);
this.elements.today.dataset.l10nArgs =
JSON.stringify({ 'date': formatted });
diff --git a/tv_apps/dashboard/locales/dashboard.en-US.properties b/tv_apps/dashboard/locales/dashboard.en-US.properties
index 7ad39c776987..9b7eb8587f32 100644
--- a/tv_apps/dashboard/locales/dashboard.en-US.properties
+++ b/tv_apps/dashboard/locales/dashboard.en-US.properties
@@ -1,2 +1,26 @@
dateFormat = %A, %b %e
today-is=Today is {{date}}
+greeting-at-0=Good Evening
+greeting-at-1=Good Evening
+greeting-at-2=Good Evening
+greeting-at-3=Good Evening
+greeting-at-4=Good Morning
+greeting-at-5=Good Morning
+greeting-at-6=Good Morning
+greeting-at-7=Good Morning
+greeting-at-8=Good Morning
+greeting-at-9=Good Morning
+greeting-at-10=Good Morning
+greeting-at-11=Good Morning
+greeting-at-12=Good Afternoon
+greeting-at-13=Good Afternoon
+greeting-at-14=Good Afternoon
+greeting-at-15=Good Afternoon
+greeting-at-16=Good Afternoon
+greeting-at-17=Good Afternoon
+greeting-at-18=Good Afternoon
+greeting-at-19=Good Afternoon
+greeting-at-20=Good Evening
+greeting-at-21=Good Evening
+greeting-at-22=Good Evening
+greeting-at-23=Good Evening
diff --git a/tv_apps/dashboard/style/dashboard.css b/tv_apps/dashboard/style/dashboard.css
index 79fc875fdae7..d61d5cc0f373 100644
--- a/tv_apps/dashboard/style/dashboard.css
+++ b/tv_apps/dashboard/style/dashboard.css
@@ -14,6 +14,11 @@ html, body {
padding: 0;
}
+body {
+ transform-style: preserve-3d;
+ perspective: 25rem;
+}
+
a {
outline: 0;
}
@@ -121,6 +126,8 @@ body[data-active-direction="left"] .background {
height: 100%;
}
+/* digital clock */
+
#digital-clock {
position: absolute;
top: 50%;
@@ -153,9 +160,21 @@ body[data-active-direction="left"] .background {
}
#digital-clock .date {
+ position: relative;
margin-top: 4.4rem;
font-size: 3.4rem;
line-height: 3.4rem;
+ overflow: hidden;
+}
+
+#today-is {
+ position: relative;
+ /*top: -4rem;*/
+}
+
+#greeting {
+ position: relative;
+ top: 4rem;
}
/* top-panel */
@@ -198,6 +217,55 @@ iframe {
/* Intro animation */
+/*
+ * Animation for background.
+ */
+
+.active .background {
+ animation: shrink 1s cubic-bezier(0.0, 0.0, 0.0, 1.0) 1.2s;
+}
+
+@keyframes shrink {
+ from { transform: translateZ(10rem); }
+ to { transform: translateZ(0); }
+}
+
+/*
+ * Animations for greetings and date.
+ */
+
+/* XXX: 'both' will keep the animation at running state, not sure if it'll affect performance. ; */
+/* Come back to this if there's a performance issue. */
+.active #today-is {
+ animation: slidedown 0.3s cubic-bezier(0.0, 0.0, 0.0, 1.0) 4.5s both;
+}
+
+.active #greeting {
+ animation: slideupdown 2.6s cubic-bezier(0.0, 0.0, 0.0, 1.0) 2.2s both;
+}
+
+@keyframes slidedown {
+ from {
+ top: -4rem;
+ }
+ to {
+ top: 0;
+ }
+}
+
+@keyframes slideupdown {
+ 0% {
+ top: 4rem;
+ }
+ 11.54% {
+ top: -3.4rem;
+ }
+ 88.46% {
+ top: -3.4rem;
+ }
+ 100% { top: 4rem;}
+}
+
/*
* The following rules set transform origin to central point of the screen.
* For the formula calc(XXrem +/- 50vh/vw), they locate to respective screen