Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

fix(toast): Hide scrollbars during animation. #6029

Closed
wants to merge 1 commit into from
Closed

fix(toast): Hide scrollbars during animation. #6029

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 13 additions & 11 deletions src/components/toast/toast-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
md-toast.md-THEME_NAME-theme {
background-color: #323232;
color: '{{background-50}}';

.md-button {
.md-toast-content {
background-color: #323232;
color: '{{background-50}}';
&.md-highlight {
color: '{{primary-A200}}';
&.md-accent {
color: '{{accent-A200}}';
}
&.md-warn {
color: '{{warn-A200}}';

.md-button {
color: '{{background-50}}';
&.md-highlight {
color: '{{primary-A200}}';
&.md-accent {
color: '{{accent-A200}}';
}
&.md-warn {
color: '{{warn-A200}}';
}
}
}
}
Expand Down
34 changes: 11 additions & 23 deletions src/components/toast/toast.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,19 +62,6 @@ function MdToastDirective($mdToast) {
* </div>
* </hljs>
*
* Additionally, during animation, we will add the `md-toast-animating` class to the parent
* container. This defines a simple rule of `overflow: hidden !important;` to ensure that
* scrollbars are not visible on the parent during animation if you use a different overflow style.
*
* If you need to override this, you can use the following CSS, but be aware that it may cause
* scrollbars to intermittently appear.
*
* <hljs lang="css">
* .md-toast-animating {
* overflow: auto !important;
* }
* </hljs>
*
* @usage
* <hljs lang="html">
* <div ng-controller="MyController">
Expand Down Expand Up @@ -246,16 +233,17 @@ function MdToastProvider($$interimElementProvider) {
methods: ['textContent', 'content', 'action', 'highlightAction', 'theme', 'parent'],
options: /* @ngInject */ function($mdToast, $mdTheming) {
var opts = {
template: [
'<md-toast md-theme="{{ toast.theme }}" ng-class="{\'md-capsule\': toast.capsule}">',
'<span flex role="alert" aria-relevant="all" aria-atomic="true">' +
'{{ toast.content }}' +
'</span>',
'<md-button class="md-action" ng-if="toast.action" ng-click="toast.resolve()" ng-class="{\'md-highlight\': toast.highlightAction}">',
'{{ toast.action }}',
'</md-button>',
'</md-toast>'
].join(''),
template:
'<md-toast md-theme="{{ toast.theme }}" ng-class="{\'md-capsule\': toast.capsule}">' +
' <div class="md-toast-content">' +
' <span flex role="alert" aria-relevant="all" aria-atomic="true">' +
' {{ toast.content }}' +
' </span>' +
' <md-button class="md-action" ng-if="toast.action" ng-click="toast.resolve()" ng-class="{\'md-highlight\': toast.highlightAction}">' +
' {{ toast.action }}' +
' </md-button>' +
' </div>' +
'</md-toast>',
controller: /* @ngInject */ function mdToastCtrl($scope) {
var self = this;
$scope.$watch(function() { return activeToastContent; }, function() {
Expand Down
124 changes: 82 additions & 42 deletions src/components/toast/toast.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,76 +1,107 @@
// See height set globally, depended on by buttons


md-toast {
display: flex;
position:absolute;
position: absolute;
z-index: $z-index-toast;

box-sizing: border-box;
align-items: center;
cursor: default;
overflow: hidden;

min-height: 48px;
padding-left: 24px;
padding-right: 24px;
// Add some padding to the outer toast container so that the wrapper's box shadow is visible
padding: $toast-margin;

box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border-radius: 2px;
font-size: 14px;
cursor: default;
// Setup opacity transition on whole toast
opacity: 1;
transition: $swift-ease-out;

height: 0px;
max-height: 7*$toast-height;
max-width: 100%;
.md-toast-content {
display: flex;
align-items: center;

overflow:hidden;
height: 0;
max-height: 7 * $toast-height;
max-width: 100%;
min-height: 48px;
padding-left: 24px;
padding-right: 24px;

box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border-radius: 2px;
font-size: 14px;

overflow: hidden;

// Setup for transform transitions on inner content
transform: translate3d(0, 0, 0) rotateZ(0deg);
transition: $swift-ease-out;
}

&.md-capsule {
border-radius: 24px;
}

opacity: 1;
transform: translate3d(0,0,0) rotateZ(0deg);
transition: $swift-ease-out;
.md-toast-content {
border-radius: 24px;
}
}

&.ng-leave-active {
transition: $swift-ease-in;
.md-toast-content {
transition: $swift-ease-in;
}
}

/* Transition differently when swiping */
&.md-swipeleft,
&.md-swiperight,
&.md-swipeup,
&.md-swipedown {
transition: $swift-ease-out;
.md-toast-content {
transition: $swift-ease-out;
}
}

&.ng-enter {
transform: translate3d(0, 100%, 0);
opacity: 0;
.md-toast-content {
transform: translate3d(0, 100%, 0);
}
&.md-top {
transform: translate3d(0, -100%, 0);
.md-toast-content {
transform: translate3d(0, -100%, 0);
}
}
opacity: 0;
&.ng-enter-active {
transform: translate3d(0, 0, 0);
opacity: 1;
.md-toast-content {
transform: translate3d(0, 0, 0);
}
}
}
/*
* When the toast doesn't take up the whole screen,
* make it rotate when the user swipes it away
*/
&.ng-leave.ng-leave-active {
opacity: 0;
transform: translate3d(0, 100%, 0);
.md-toast-content {
opacity: 0;
transform: translate3d(0, 100%, 0);
}

&.md-swipeup {
transform: translate3d(0, -50%, 0);
.md-toast-content {
transform: translate3d(0, -50%, 0);
}
}
&.md-swipedown {
transform: translate3d(0, 50%, 0);
.md-toast-content {
transform: translate3d(0, 50%, 0);
}
}
&.md-top {
transform: translate3d(0, -100%, 0);
.md-toast-content {
transform: translate3d(0, -100%, 0);
}
}
}

Expand Down Expand Up @@ -100,28 +131,33 @@ md-toast {

&.ng-leave.ng-leave-active {
&.md-swipeup {
transform: translate3d(0, -50%, 0);
.md-toast-content {
transform: translate3d(0, -50%, 0);
}
}
&.md-swipedown {
transform: translate3d(0, 50%, 0);
.md-toast-content {
transform: translate3d(0, 50%, 0);
}
}
}
}
}

@media (min-width: $layout-breakpoint-sm) {
md-toast {
min-width: 288px;
min-width: 288px + $toast-margin * 2;
&.md-bottom {
bottom: $toast-margin;
bottom: 0;
}
&.md-left {
left: $toast-margin;
left: 0;
}
&.md-right {
right: $toast-margin;
right: 0;
}
&.md-top {
top: $toast-margin;
top: 0;
}

/*
Expand All @@ -130,23 +166,27 @@ md-toast {
*/
&.ng-leave.ng-leave-active {
&.md-swipeleft {
transform: translate3d(-50%, 0, 0);
.md-toast-content {
transform: translate3d(-50%, 0, 0);
}
}
&.md-swiperight {
transform: translate3d(50%, 0, 0);
.md-toast-content {
transform: translate3d(50%, 0, 0);
}
}
}
}
}

@media (min-width: $layout-breakpoint-lg) {
md-toast {
max-width: $baseline-grid * 71;
.md-toast-content {
max-width: $baseline-grid * 71;
}
}
}



@media screen and (-ms-high-contrast: active) {
md-toast {
border: 1px solid #fff;
Expand Down
18 changes: 9 additions & 9 deletions src/components/toast/toast.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ describe('$mdToast service', function() {

$material.flushOutstandingAnimations();

expect(parent.find('span').text()).toBe('Do something');
expect(parent.find('span').text().trim()).toBe('Do something');
expect(parent.find('md-toast')).toHaveClass('md-capsule');
expect(parent.find('md-toast').attr('md-theme')).toBe('some-theme');

Expand All @@ -58,7 +58,7 @@ describe('$mdToast service', function() {
$rootScope.$digest();
$mdToast.updateContent('Goodbye world');
$rootScope.$digest();
expect($rootElement.find('span').text()).toBe('Goodbye world');
expect($rootElement.find('span').text().trim()).toBe('Goodbye world');
}));

it('supports an action toast', inject(function($mdToast, $rootScope, $material) {
Expand All @@ -76,7 +76,7 @@ describe('$mdToast service', function() {
});
$material.flushOutstandingAnimations();
var button = parent.find('button');
expect(button.text()).toBe('Click me');
expect(button.text().trim()).toBe('Click me');
button.triggerHandler('click');
$material.flushInterimElement();
expect(resolved).toBe(true);
Expand All @@ -100,8 +100,8 @@ describe('$mdToast service', function() {
var content = parent.find('span').eq(0);
var button = parent.find('button');

expect(content.text()).toBe('Do something');
expect(button.text()).toBe('Click me');
expect(content.text().trim()).toBe('Do something');
expect(button.text().trim()).toBe('Click me');
}));


Expand All @@ -119,8 +119,8 @@ describe('$mdToast service', function() {
var content = parent.find('span').eq(0);
var button = parent.find('button');

expect(content.text()).toBe('Do something');
expect(button.text()).toBe('Click me');
expect(content.text().trim()).toBe('Do something');
expect(button.text().trim()).toBe('Click me');
}));
});

Expand All @@ -145,7 +145,7 @@ describe('$mdToast service', function() {
});
var toast = $rootElement.find('md-toast');
$timeout.flush();
expect(toast.text()).toBe('1234');
expect(toast.text().trim()).toBe('1234');
}));

it('should have templateUrl', inject(function($timeout, $rootScope, $templateCache, $rootElement) {
Expand All @@ -154,7 +154,7 @@ describe('$mdToast service', function() {
templateUrl: 'template.html',
});
var toast = $rootElement.find('md-toast');
expect(toast.text()).toBe('hello, 1');
expect(toast.text().trim()).toBe('hello, 1');
}));

it('should add position class to toast', inject(function($rootElement, $timeout) {
Expand Down