Merge lp:~huwshimi/juju-gui/more-animations into lp:juju-gui/experimental

[Huw Wilkins]

Add animations to browser

I had a bit of a realisation about how we could do open animations for the browser panels. It seems to QA accross browsers and even though the panels don't animate on close I think it's worth having.

I'm hoping this might be enough that we don't have to worry about animations on close...

There is one point which might be considered a bug in that the panels will animate in on page load instead of remaining in the open state. I think this is an OK trade off, but others may feel differently.

https://codereview.appspot.com/31930043/

[Huw Wilkins (huwshimi)]

Reviewers: mp+196475_code.launchpad.net,

Message:
Please take a look.

Description:
Add animations to browser

I had a bit of a realisation about how we could do open animations for
the browser panels. It seems to QA accross browsers and even though the
panels don't animate on close I think it's worth having.

I'm hoping this might be enough that we don't have to worry about
animations on close...

There is one point which might be considered a bug in that the panels
will animate in on page load instead of remaining in the open state. I
think this is an OK trade off, but others may feel differently.

https://code.launchpad.net/~huwshimi/juju-gui/more-animations/+merge/196475

(do not edit description out of merge proposal)

Please review this at https://codereview.appspot.com/31930043/

Affected files (+105, -1 lines):
   A [revision details]
   M lib/views/browser/browser-icon.less
   M lib/views/browser/main.less

[Jeff Pihach (hatch)]

LGTM QA OK

I think this is great good work! The animation in on page load looks
awesome (IMHO) and even though it doesn't animate closed one could
pretty easily make an argument that the user wants it gone so closing
really fast is a good thing :)

https://codereview.appspot.com/31930043/

[Jeff Pihach (hatch)]

*** Submitted:

Add animations to browser

I had a bit of a realisation about how we could do open animations for
the browser panels. It seems to QA accross browsers and even though the
panels don't animate on close I think it's worth having.

I'm hoping this might be enough that we don't have to worry about
animations on close...

There is one point which might be considered a bug in that the panels
will animate in on page load instead of remaining in the open state. I
think this is an OK trade off, but others may feel differently.

R=jeff.pihach
CC=
https://codereview.appspot.com/31930043

https://codereview.appspot.com/31930043/

=== modified file 'lib/views/browser/browser-icon.less'
--- lib/views/browser/browser-icon.less	2013-10-30 02:47:12 +0000
+++ lib/views/browser/browser-icon.less	2013-11-25 06:57:49 +0000
@@ -1,3 +1,51 @@
+@-webkit-keyframes knot-min-slide-in {
+    from {
+        left: -40px;
+    }
+    to {
+        left: 0;
+    }
+}
+@keyframes knot-min-slide-in {
+    from {
+        left: -40px;
+    }
+    to {
+        left: 0;
+    }
+}
+@-webkit-keyframes knot-sidebar-slide-in {
+    from {
+        left: 0;
+    }
+    to {
+        left: @bws-sidebar-width;
+    }
+}
+@keyframes knot-sidebar-slide-in {
+    from {
+        left: 0;
+    }
+    to {
+        left: @bws-sidebar-width;
+    }
+}
+@-webkit-keyframes knot-content-slide-in {
+    from {
+        left: 0;
+    }
+    to {
+        left: @bws-sidebar-width + @bws-panel-width;
+    }
+}
+@keyframes knot-content-slide-in {
+    from {
+        left: 0;
+    }
+    to {
+        left: @bws-sidebar-width + @bws-panel-width;
+    }
+}
 .bws-icon {
     position: absolute;
     display: block;
@@ -8,12 +56,28 @@
     box-shadow: 3px 0 2px rgba(0, 0, 0, 0.1);
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
-    z-index: 610;
+    z-index: 600;
 
+    &:hover i.sprite {
+        margin-left: 5px;
+    }
     i.sprite {
+        .transition(margin-left 0.2s ease-out);
         display: block;
     }
 }
 .content-visible .bws-icon {
     left: @bws-sidebar-width + @bws-panel-width;
 }
+#subapp-browser-min .bws-icon {
+    -webkit-animation: knot-min-slide-in 0.5s;
+    animation: knot-min-slide-in 0.5s;
+}
+#subapp-browser .bws-icon {
+    -webkit-animation: knot-sidebar-slide-in 0.5s;
+    animation: knot-sidebar-slide-in 0.5s;
+}
+#subapp-browser .content-visible .bws-icon {
+    -webkit-animation: knot-content-slide-in 0.5s;
+    animation: knot-content-slide-in 0.5s;
+}

=== modified file 'lib/views/browser/main.less'
--- lib/views/browser/main.less	2013-11-05 20:04:11 +0000
+++ lib/views/browser/main.less	2013-11-25 06:57:49 +0000
@@ -1,3 +1,35 @@
+@-webkit-keyframes sidebar-slide-in {
+  from {
+    left: -@bws-sidebar-width;
+  }
+  to {
+    left: 0;
+  }
+}
+@keyframes sidebar-slide-in {
+  from {
+    left: -@bws-sidebar-width;
+  }
+  to {
+    left: 0;
+  }
+}
+@-webkit-keyframes sidebar-details-slide-in {
+  from {
+    left: -@bws-panel-width;
+  }
+  to {
+    left: @bws-sidebar-width;
+  }
+}
+@keyframes sidebar-details-slide-in {
+  from {
+    left: -@bws-panel-width;
+  }
+  to {
+    left: @bws-sidebar-width;
+  }
+}
 #subapp-browser {
   .customize-scrollbar;
   .type9;
@@ -131,6 +163,8 @@
     width: @bws-sidebar-width;
     border-right: 1px solid #a5a5a5;
     box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+    -webkit-animation: sidebar-slide-in 0.5s;
+    animation: sidebar-slide-in 0.5s;
 
     .bws-searchbox {
         width: 100%;
@@ -167,4 +201,8 @@
   .bws-view-data {
     left: @bws-sidebar-width;
   }
+  .content-visible .bws-view-data {
+    -webkit-animation: sidebar-details-slide-in 0.5s;
+    animation: sidebar-details-slide-in 0.5s;
+  }
 }