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

fix(dialog, menu, select, interimElement): use $animateCss #3946

Closed
wants to merge 1 commit into from

Conversation

ThomasBurleson
Copy link
Contributor

replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4.

$mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd()
use animateCss.js polyfill for 'material.animate' module

  • add mock createMockStyleSheet for animateCss tests
    refactors to menu-interim-element.js and select.js
  • refactor logic and patterns used
  • use $animateCss in place of waitTransitionEnd()
    debounce Select and Menu window resize handlers
    Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select
    select async demo no longer clears users list when reloading
    select demos use md-input-container { margin-right: 10px;}
    hide Select Backdrop with zero duration
    enable full click detection in select-value area by using background color (with zero alpa).

BREAKING-CHANGES: select and backdrop styles added

  • select list text is not selectable,
  • select backdrop hide duration is 0ms
  • select text value background has zero alpha
.md-text {  @include not-selectable(); }

.md-select-value {
  background-color: rgba(0,0,0,0);
}

md-backdrop {
  &.md-select-backdrop {
      transition-duration: 0ms;
  }  
}

Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.

@ThomasBurleson
Copy link
Contributor Author

@jelbourn, @robertmesserle, @rschmukler - this is ready for your reviews and testing. Use of $animateCss() works for Angular v1.3.x and v1.4.x (using a polyfill). Code refactors present logic onShow/onRemove logic in clear, concise fashion(s).

Once ready/approved, this will be merged into master for the v0.11 builds


// If body scrolling has been disabled using mdUtil.disableBodyScroll(),
// adjust the 'backdrop' height to account for the fixed 'body' top offset
var body = $window.getComputedStyle($document[0].body);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

body => bodyStyles ?

@ThomasBurleson ThomasBurleson added this to the 0.11.0 milestone Jul 29, 2015
@ThomasBurleson ThomasBurleson self-assigned this Jul 29, 2015
@ThomasBurleson ThomasBurleson added the needs: review This PR is waiting on review from the team label Jul 29, 2015
… transitionEnd events.

replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4.

$mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd()
use animateCss.js polyfill for 'material.animate' module
- add mock `createMockStyleSheet` for animateCss tests
refactors to menu-interim-element.js and select.js
- refactor logic and patterns used
- use $animateCss in place of waitTransitionEnd()
debounce Select and Menu window resize handlers
Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select
select async demo no longer clears users list when reloading
select demos use `md-input-container { margin-right: 10px;}`
hide Select Backdrop with zero duration
enable full click detection in select-value area by using background color (with zero alpa).

BREAKING-CHANGES:  select and backdrop styles added

*  select list text is not selectable,
*  select backdrop hide duration is 0ms
*  select text value background has zero alpha

```scss
.md-text {  @include not-selectable(); }

.md-select-value {
  background-color: rgba(0,0,0,0);
}

md-backdrop {
  &.md-select-backdrop {
      transition-duration: 0ms;
  }
}
```

Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
needs: review This PR is waiting on review from the team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants