Merge pull request #30362 from rexboy7/1168037-widget-expand-animation

Bug 1168037 - [Stingray][Dashboard] Widget expand animation. r=johnhu, yifan
mozilla-b2g · Jun 3, 2015 · 7eae1cf · 7eae1cf
2 parents 000f746 + 1088be2
commit 7eae1cf
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 4 deletions.
diff --git a/tv_apps/dashboard/style/dashboard.css b/tv_apps/dashboard/style/dashboard.css
@@ -18,7 +18,7 @@ html, body {
   position: absolute;
   width: 100%;
   height: 100%;
-  transition: transform 0.4s cubic-bezier(0.25, 0, 0, 1);
+  transition: transform 1s cubic-bezier(0.5, 0.0, 0.0, 1.0);
 }
 
 body[data-active-direction="up"] #main-section {
@@ -57,7 +57,7 @@ section {
   height: calc(100% + 26.6rem);
   background-image: url(images/Default_wallpaper_02.jpg);
   background-position: center;
-  transition: transform 0.4s cubic-bezier(0.25, 0, 0, 1);
+  transition: transform 1s cubic-bezier(0.5, 0.0, 0.0, 1.0);
 }
 
 body[data-active-direction="up"] .background {

diff --git a/tv_apps/weather-widget/js/weather-widget.js b/tv_apps/weather-widget/js/weather-widget.js
@@ -22,6 +22,11 @@ WeatherWidget.prototype = {
     // other widgets are landed.
     this.clocks[0].tabIndex = 1;
     this.clocks[0].focus();
+
+    window.onhashchange = function(evt) {
+      document.body.classList.toggle(
+                                  'expand', window.location.hash === '#expand');
+    };
   }
 };
 

diff --git a/tv_apps/weather-widget/style/weather-widget.css b/tv_apps/weather-widget/style/weather-widget.css
@@ -63,6 +63,22 @@ html, body {
   font-size: 5.4rem;
 }
 
+smart-weather > .weather-detail,
+.weather-icon-panel {
+  transform: translateY(30px);
+  opacity: 0;
+  transition: transform 0.01s cubic-bezier(0.5, 0.0, 0.0, 1.0) 0.95s,
+              opacity 0.01s ease-in 0.95s;
+}
+
+.expand smart-weather > .weather-detail,
+.expand .weather-icon-panel {
+  transform: translateY(0);
+  opacity: 1;
+  transition-delay: 0s, 0s;
+  transition-duration: 1s, 0.8s;
+}
+
 /* XXX: we leave a focusable element here for determining focus issues.
    This wiget has no focusable element by design, but we need to test
    dashboard ability on setting focus. These lines should be removed after

diff --git a/tv_apps/weather-widget/web_components/smart-weather.css b/tv_apps/weather-widget/web_components/smart-weather.css
@@ -46,19 +46,18 @@ smart-weather > .city {
   color: #ffffff;
   text-align: center;
   height: 4.6rem;
-  border-bottom: 0.1rem solid #ffffff;
 }
 
 smart-weather > .weather-detail {
   text-align: center;
   color: #ffffff;
   font-size: 2.2rem;
   font-weight: 300;
+  border-top: 0.1rem solid #ffffff;
 }
 
 smart-weather > .weather-detail > div {
   height: 2.4rem;
   margin-top: 3.4rem;
   margin-bottom: 4.2rem;
 }
-