Fix overlay toolbar bug and streamline toolbar experience

1. Previously when you open a menu (e.g., delete resource) the actionbar
would hide. Now this is fixed.
2. Started using official material style on toolbars. This means less
our code.

Author: bryk

src/app/frontend/chrome/chrome.html

@@ -28,8 +28,7 @@ <h2>
 
 <kd-actionbar ng-if="ctrl.isActionbarVisible()"></kd-actionbar>
 
-<md-content
-    ng-class="{'kd-chrome-content': true, 'kd-chrome-has-actionbar': ctrl.isActionbarVisible()}">
+<md-content flex="auto" class="kd-app-content">
   <div ng-switch="ctrl.showLoadingSpinner" flex="auto" >
     <div ng-switch-when="true" class="kd-center-fixed">
       <md-progress-circular md-mode="indeterminate" md-diameter="96">

src/app/frontend/chrome/chrome.scss

@@ -26,25 +26,16 @@
 
 .kd-toolbar {
   box-shadow: $whiteframe-shadow-1dp;
-  height: $toolbar-height-size-base;
-  position: fixed !important;
 }
 
-.kd-chrome-content {
-  padding-top: $toolbar-height-size-base;
-}
-
-.kd-chrome-has-actionbar {
-  padding-top: 2 * $toolbar-height-size-base;
-
-  @media only screen and (max-width: $layout-breakpoint-sm) {
-    padding-top: $toolbar-height-size-base + $toolbar-height-size-base-sm;
-  }
+chrome {
+  display: block;
+  overflow: hidden;
 }
 
-body {
+body,
+.kd-app-content {
   background-color: $body;
-  height: 100%;
 }
 
 a {

src/app/frontend/common/components/actionbar/actionbar.scss

@@ -18,12 +18,6 @@
   &.kd-actionbar {
     background: $content-background;
     color: $muted;
-    height: $toolbar-height-size-base;
-    top: $toolbar-height-size-base;
-
-    @media only screen and (min-width: 0) and (max-width: $layout-breakpoint-sm) {
-      height: $toolbar-height-size-base-sm;
-    }
   }
 }
 

src/app/frontend/common/components/actionbar/actionbar_component.js

@@ -17,42 +17,42 @@
  */
 export class ActionbarComponent {
   /**
-   * @param {!angular.JQLite} $document
    * @param {!angular.JQLite} $element
    * @param {!angular.Scope} $scope
-   * @param {!angular.$window} $window
    * @ngInject
    */
-  constructor($document, $element, $scope, $window) {
-    /** @private {!angular.JQLite} */
-    this.document_ = $document;
+  constructor($element, $scope) {
     /** @private {!angular.JQLite}} */
     this.element_ = $element;
     /** @private {!angular.Scope} */
     this.scope_ = $scope;
-    /** @private {!angular.$window} */
-    this.window_ = $window;
   }
 
   /**
    * @export
    */
   $onInit() {
-    this.computeScrollClass_();
+    let closestContent = this.element_.parent().find('md-content');
+    if (!closestContent || closestContent.length === 0) {
+      throw new Error('Actionbar component requires sibling md-content element');
+    }
 
-    let computeScrollClassCallback = () => { this.computeScrollClass_(); };
+    this.computeScrollClass_(closestContent[0]);  // Initialize scroll state at first.
 
-    this.document_.on('scroll', computeScrollClassCallback);
+    let computeScrollClassCallback =
+        (/** !Event */ e) => { this.computeScrollClass_(/** @type {!Element} */ (e.target)); };
+    closestContent.on('scroll', computeScrollClassCallback);
     this.scope_.$on(
-        '$destroy', () => { this.document_.off('scroll', computeScrollClassCallback); });
+        '$destroy', () => { closestContent.off('scroll', computeScrollClassCallback); });
   }
 
   /**
    * Computes scroll class based on scroll position and applies it to current element.
+   * @param {!Element} mdContentElement
    * @private
    */
-  computeScrollClass_() {
-    if (this.window_.scrollY > 0) {
+  computeScrollClass_(mdContentElement) {
+    if (mdContentElement.scrollTop > 0) {
       this.element_.removeClass('kd-actionbar-not-scrolled');
     } else {
       this.element_.addClass('kd-actionbar-not-scrolled');

src/app/frontend/index.html

@@ -44,7 +44,7 @@
       experience.</p>
     <![endif]-->
 
-    <chrome>
+    <chrome layout="column" layout-fill>
       <div ui-view> <!-- Application content is inserted here. --> </div>
     </chrome>
     <!-- build:js static/vendor.js -->

src/test/frontend/common/components/actionbar/actionbar_component_test.js

@@ -17,34 +17,42 @@ import actionbarCardModule from 'common/components/actionbar/actionbar_module';
 describe('Action bar', () => {
   beforeEach(() => angular.mock.module(actionbarCardModule.name));
 
-  it('should add shadow on scroll',
-     angular.mock.inject(($rootScope, $window, $document, $compile) => {
-       let elem = $compile('<kd-actionbar></kd-actionbar>')($rootScope);
-
-       // Start with no state.
-       expect(elem[0].classList).not.toContain('kd-actionbar-not-scrolled');
-
-       $rootScope.$digest();
-       // On initial load go with not scrolled state.
-       expect(elem[0].classList).toContain('kd-actionbar-not-scrolled');
-
-       $window.scrollY = 70;
-       $document.trigger('scroll');
-       $rootScope.$digest();
-       // Now it is scrolled
-       expect(elem[0].classList).not.toContain('kd-actionbar-not-scrolled');
-
-       $window.scrollY = 0;
-       $document.trigger('scroll');
-       $rootScope.$digest();
-       // Go back.
-       expect(elem[0].classList).toContain('kd-actionbar-not-scrolled');
-
-       $rootScope.$destroy();
-       $window.scrollY = 70;
-       $document.trigger('scroll');
-       $rootScope.$digest();
-       // After $destroy - nothing happens.
-       expect(elem[0].classList).toContain('kd-actionbar-not-scrolled');
-     }));
+  it('should add shadow on scroll', angular.mock.inject(($rootScope, $compile) => {
+    let elem = $compile(`
+           <div>
+             <kd-actionbar></kd-actionbar>
+             <md-content>foo</md-content>
+           </div>`)($rootScope);
+
+    let mdContent = elem.find('md-content');
+    let actionbar = elem.find('kd-actionbar');
+
+    // Start with no state.
+    expect(actionbar[0].classList).not.toContain('kd-actionbar-not-scrolled');
+
+    $rootScope.$digest();
+    let abCtrl = actionbar.controller('kdActionbar');
+    // On initial load go with not scrolled state.
+    expect(actionbar[0].classList).toContain('kd-actionbar-not-scrolled');
+
+    abCtrl.computeScrollClass_({scrollTop: 1});
+    // Now it is scrolled
+    expect(actionbar[0].classList).not.toContain('kd-actionbar-not-scrolled');
+
+    mdContent.trigger('scroll');
+    $rootScope.$digest();
+    // Go back.
+    expect(actionbar[0].classList).toContain('kd-actionbar-not-scrolled');
+
+    $rootScope.$destroy();
+    mdContent.trigger('scroll');
+    $rootScope.$digest();
+    // After $destroy - nothing happens.
+    expect(actionbar[0].classList).toContain('kd-actionbar-not-scrolled');
+  }));
+
+  it('should throw an error on no content', angular.mock.inject(($rootScope, $compile) => {
+    $compile('<kd-actionbar></kd-actionbar>')($rootScope);
+    expect(() => { $rootScope.$digest(); }).toThrow();
+  }));
 });