Merge pull request #30868 from begeeben/1174658_intro_launch_animation

Bug 1174658 - [Stingray][Dashboard] Intro launch animation for dashboard - Central Clock and Background, r=rexboy

tv_apps/dashboard/index.html

@@ -48,7 +48,8 @@
             <span id="seconds-units-digit" class="seconds-units-digit"></span>
           </p>
           <p id="date-now" class='date'>
-            <span id="today-is" data-l10n-id="today-is" data-l10n-args="{}"></span>
+            <span id="today-is" data-l10n-id="today-is" data-l10n-args="{}"></span><br>
+            <span id="greeting" data-l10n-id=""></span>
           </p>
         </div>
       </section>

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');
       }
     },

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 });

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

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