Merge lp:~rharding/juju-gui/animation1 into lp:juju-gui/experimental

[Richard Harding]

TBD

Unmerged revisions

917. By Richard Harding on 2013-07-31

Update to catch the details on close as well

916. By Richard Harding on 2013-07-31

More work on getting charm details to work right

915. By Richard Harding on 2013-07-31

Work on adjusting the css/html to allow for the sidebar/tab animations

=== modified file 'app/subapps/browser/browser.js'
--- app/subapps/browser/browser.js	2013-07-29 17:47:25 +0000
+++ app/subapps/browser/browser.js	2013-07-31 15:27:38 +0000
@@ -52,11 +52,11 @@
           container = Y.one('.charmbrowser');
       if (detailsNode) {
         if (visible) {
-          detailsNode.show();
+          // detailsNode.show();
           container.addClass('content-visible');
         }
         else {
-          detailsNode.hide();
+          // detailsNode.hide();
           container.removeClass('content-visible');
         }
       }
@@ -742,7 +742,7 @@
         this._detailsVisible(false);
         var detailsNode = Y.one('.bws-view-data');
         if (detailsNode) {
-          detailsNode.hide();
+          // detailsNode.hide();
         }
         // Clean up any details we've got.
         if (this._details) {

=== modified file 'app/subapps/browser/templates/fullscreen.handlebars'
--- app/subapps/browser/templates/fullscreen.handlebars	2013-07-11 06:11:21 +0000
+++ app/subapps/browser/templates/fullscreen.handlebars	2013-07-31 15:27:38 +0000
@@ -1,5 +1,4 @@
 <div class="charmbrowser">
-    <a href="" class="bws-icon"></a>
     <div id="bws-fullscreen">
         <div class="bws-header-wrapper">
             <div class="bws-header">

=== modified file 'app/subapps/browser/templates/minimized.handlebars'
--- app/subapps/browser/templates/minimized.handlebars	2013-07-03 22:55:30 +0000
+++ app/subapps/browser/templates/minimized.handlebars	2013-07-31 15:27:38 +0000
@@ -1,1 +1,1 @@
-<a href="" class="bws-icon"></a>
+<div class="bws-icon"><a href="">&nbsp;</a></div>

=== modified file 'app/subapps/browser/templates/sidebar.handlebars'
--- app/subapps/browser/templates/sidebar.handlebars	2013-07-15 15:01:59 +0000
+++ app/subapps/browser/templates/sidebar.handlebars	2013-07-31 15:27:38 +0000
@@ -1,5 +1,5 @@
 <div class="charmbrowser">
-    <a href="" class="bws-icon"></a>
+    <div class="bws-icon"><a href="">&nbsp;</a></div>
     <div id="bws-sidebar">
         <div class="bws-header">
         </div>

=== modified file 'app/subapps/browser/views/charm.js'
--- app/subapps/browser/views/charm.js	2013-07-30 14:03:43 +0000
+++ app/subapps/browser/views/charm.js	2013-07-31 15:27:38 +0000
@@ -266,13 +266,22 @@
 
      */
     _handleBack: function(ev) {
+      var self = this;
       ev.halt();
-      this.fire('viewNavigate', {
-        change: {
-          charmID: null,
-          hash: null
-        }
-      });
+
+      var renderTo = this.get('renderTo');
+      // XXX: hack to help me get the animations going. This class should not
+      // be messing with css outside of its area of control.
+      Y.one('.charmbrowser').removeClass('content-visible');
+
+      setTimeout(function() {
+        self.fire('viewNavigate', {
+          change: {
+            charmID: null,
+            hash: null
+          }
+        });
+      }, 500);
     },
 
     /**
@@ -724,7 +733,6 @@
       });
       this._dispatchTabEvents(this.tabview);
 
-
       if (isFullscreen) {
         if (!this.get('charm').get('relatedCharms')) {
           this.showIndicator(Y.one('.related-charms'));

=== modified file 'app/subapps/browser/views/view.js'
--- app/subapps/browser/views/view.js	2013-07-30 14:03:43 +0000
+++ app/subapps/browser/views/view.js	2013-07-31 15:27:38 +0000
@@ -1,7 +1,7 @@
 /*
-This file is part of the Juju GUI, which lets users view and manage Juju
+this file is part of the juju gui, which lets users view and manage juju
 environments within a graphical interface (https://launchpad.net/juju-gui).
-Copyright (C) 2012-2013 Canonical Ltd.
+copyright (c) 2012-2013 canonical ltd.
 
 This program is free software: you can redistribute it and/or modify it under
 the terms of the GNU Affero General Public License version 3, as published by
@@ -232,13 +232,23 @@
 
      */
     _toggleBrowser: function(ev) {
+      var self = this;
       ev.halt();
 
-      this.fire('viewNavigate', {
-        change: {
-          viewmode: 'minimized'
-        }
-      });
+      // Update the CSS on the sidebar to allow it to animate out of the way.
+      this.get('container').one('.charmbrowser').addClass('hideme-slowly');
+      // Make sure we also sync any visible charm details with this animation
+      // to close.
+      Y.one('.charmbrowser').removeClass('content-visible');
+
+
+      window.setTimeout(function() {
+        self.fire('viewNavigate', {
+          change: {
+            viewmode: 'minimized'
+          }
+        });
+      }, 400);
     },
 
     /**

=== modified file 'lib/views/browser/browser-icon.less'
--- lib/views/browser/browser-icon.less	2013-07-16 05:10:27 +0000
+++ lib/views/browser/browser-icon.less	2013-07-31 15:27:38 +0000
@@ -1,16 +1,44 @@
 .bws-icon {
+    background-color: #bbbbbb;
     position: absolute;
     display: block;
     left: @bws-sidebar-width;
     top: 114px;
-    width: 40px;
-    height: 40px;
-    background: #bbbbbb url(/juju-ui/assets/images/browser_icon.png)
-        no-repeat center center;
+
     box-shadow: 3px 0 2px rgba(0, 0, 0, 0.1);
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
-}
+
+    // Adjust the left position when hiding the sidebar from view
+    transition: left .3s ease-in-out;
+
+    &:hover a {
+        margin-left: 5px;
+    }
+
+    a {
+        background: #bbbbbb url(/juju-ui/assets/images/browser_icon.png)
+            no-repeat center center;
+
+        border-bottom-right-radius: 4px;
+        border-top-right-radius: 4px;
+        display: block;
+        height: 40px;
+        width: 40px;
+
+        // Transition a margin when hovering over the bws-icon tab.
+        transition: margin-left .2s ease-in-out;
+    }
+}
+
+.charmbrowser.hideme-slowly {
+    &.hideme-slowly {
+        .bws-icon {
+            left: -@bws-sidebar-width;
+        }
+    }
+}
+
 .content-visible .bws-icon {
     left: @bws-sidebar-width + @bws-panel-width;
 }

=== modified file 'lib/views/browser/main.less'
--- lib/views/browser/main.less	2013-07-26 06:43:11 +0000
+++ lib/views/browser/main.less	2013-07-31 15:27:38 +0000
@@ -126,50 +126,77 @@
       padding: 0 0 0 50px;
     }
   }
-  #bws-sidebar {
-    z-index: 2;
-    right: auto;
-    width: @bws-sidebar-width;
-    min-width: @bws-sidebar-min-width;
-    border-right: 1px solid #a5a5a5;
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
-
-    .bws-searchbox {
-        width: 100%;
-    }
-    .bws-content {
-      top: @bws-sidebar-header-height;
-      border-top: 8px solid @bws-sidebar-content-top-border;
-
-      &.with-home {
-        top: @bws-sidebar-header-height-with-home;
-      }
-
-      .section-title {
-        padding-left: 20px;
-        padding-right: 20px;
-      }
-      .yui3-charmtoken {
-        width: 100%;
-        border-top: 1px solid @bws-groove-light;
-        border-bottom: 1px solid @bws-groove-dark;
-
-        .title {
-            max-width: 135px;
-        }
-        .description {
-            display: none;
-        }
-        &:hover {
-            background-color: #eee;
-        }
-      }
-    }
-  }
-  .bws-view-data {
-    left: @bws-sidebar-width;
-    width: @bws-panel-width;
-    background-color: #fff;
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
-  }
+  .charmbrowser {
+
+    &.hideme-slowly #bws-sidebar {
+      left: -@bws-sidebar-width;
+    }
+
+    #bws-sidebar {
+      z-index: 2;
+      right: auto;
+      width: @bws-sidebar-width;
+      min-width: @bws-sidebar-min-width;
+      border-right: 1px solid #a5a5a5;
+      box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+
+      // This animation is timed with a navigate timeout in the base
+      // subapp/views.js. Make sure that the timeout is adjusted if the timing
+      // here is changed.
+      transition: all .3s ease-in-out;
+
+      .bws-searchbox {
+          width: 100%;
+      }
+      .bws-content {
+        top: @bws-sidebar-header-height;
+        border-top: 8px solid @bws-sidebar-content-top-border;
+
+        &.with-home {
+          top: @bws-sidebar-header-height-with-home;
+        }
+
+        .section-title {
+          padding-left: 20px;
+          padding-right: 20px;
+        }
+        .yui3-charmtoken {
+          width: 100%;
+          border-top: 1px solid @bws-groove-light;
+          border-bottom: 1px solid @bws-groove-dark;
+
+          .title {
+              max-width: 135px;
+          }
+          .description {
+              display: none;
+          }
+          &:hover {
+              background-color: #eee;
+          }
+        }
+      }
+    }
+  }
+
+  .charmbrowser {
+
+      &.hideme-slowly .bws-view-data {
+          left: -@bws-panel-width - @bws-sidebar-width;
+      }
+
+      .bws-view-data {
+          left: -@bws-panel-width + @bws-sidebar-width;
+          width: @bws-panel-width;
+          transition: left .3s ease-in-out;
+      }
+
+      &.content-visible .bws-view-data {
+        left: @bws-sidebar-width;
+        width: @bws-panel-width;
+        background-color: #fff;
+        box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+      }
+  }
+
 }

=== modified file 'lib/views/browser/minimized.less'
--- lib/views/browser/minimized.less	2013-07-03 22:56:16 +0000
+++ lib/views/browser/minimized.less	2013-07-31 15:27:38 +0000
@@ -10,5 +10,9 @@
         left: 0;
         right: auto;
         background-color: @charm-panel-orange;
+
+        a {
+            background-color: @charm-panel-orange;
+        }
     }
 }