提交 b1857592 编写于 作者: B bryk

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.
上级 64afff15
......@@ -28,8 +28,7 @@ limitations under the License.
<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">
......
......@@ -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 {
......
......@@ -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;
}
}
}
......
......@@ -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');
......
......@@ -44,7 +44,7 @@ limitations under the License.
experience.</p>
<![endif]-->
<chrome>
<chrome layout="column" layout-fill>
<div ui-view> <!-- Application content is inserted here. --> </div>
</chrome>
<!-- build:js static/vendor.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();
}));
});
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册