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