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

progress-circular generates too much CSS #1926

Closed
jelbourn opened this issue Mar 16, 2015 · 0 comments
Closed

progress-circular generates too much CSS #1926

jelbourn opened this issue Mar 16, 2015 · 0 comments

Comments

@jelbourn
Copy link
Member

This SASS while-loop in the progress-circular styles expands to be about 2 kilobytes after gzip.

The component should be refactored to do this same thing with $animate from javascript. It might be tricky, though, to make it as smooth.
@jelbourn jelbourn mentioned this issue Mar 17, 2015
Merged
@ThomasBurleson ThomasBurleson modified the milestone: Backlog Apr 24, 2015
ThomasBurleson added a commit that referenced this issue Sep 3, 2015
@ThomasBurleson
fix(progressLinear, progressCircular): sync logic, fix linear animati…
7991599 
…ons, perf upgrades

synchronize progressLinear with similar logic used in progressCircular.

* improve animation performances
* watch md-mode for changes
* refactor animation SCSS
* enable hiding and no-animations with undefined/empty md-mode attributes
* for both indicators, use `display:inline-block;`
* update demos with enable switch
* fix query mode
* update Select to use enhanced progressCircular component
* fix autocomplete styling of progress-linear.md-mode-indeterminate

BREAKING-CHANGES

Before:

```css
md-progress-linear {
  display: block;
}
md-progress-circular {
   // display not set
   // position not set
}
```

```css
md-progress-linear {
  display: inline-block;
  position: relative;
}
md-progress-circular {
  display: inline-block;
  position: relative;
}
```

Fixes #4421. Fixes #4409. Fixes #2540. Fixes #2364. Fixes #1926. Fixes #3802.
@ThomasBurleson ThomasBurleson mentioned this issue Sep 3, 2015
Closed
ThomasBurleson added a commit that referenced this issue Sep 3, 2015
@ThomasBurleson
fix(progressLinear, progressCircular): sync logic, fix linear animati…
8bf7a8b 
…ons, perf upgrades

synchronize progressLinear with similar logic used in progressCircular.

* improve animation performances
* watch md-mode for changes
* refactor animation SCSS
* enable hiding and no-animations with undefined/empty md-mode attributes
* for both indicators, use `display:inline-block;`
* update demos with enable switch
* fix query mode
* update Select to use enhanced progressCircular component
* fix autocomplete styling of progress-linear.md-mode-indeterminate
*  auto-inject md-mode attribute if missing
  *  use 'determinate' if value attribute is defined
  *  otherwise use 'indeterminate'
  *  $log.debug() notify user (via $log.debug) of injection
  *  add API doc details regarding md-mode auto-injection
* fix tests

BREAKING-CHANGES

Before:

```css
md-progress-linear {
  display: block;
}
md-progress-circular {
   // display not set
   // position not set
}
```

```css
md-progress-linear {
  display: inline-block;
  position: relative;
}
md-progress-circular {
  display: inline-block;
  position: relative;
}
```

Fixes #4421. Fixes #4409. Fixes #2540. Fixes #2364. Fixes #1926. Fixes #3802.
kennethcachia pushed a commit to kennethcachia/material that referenced this issue Sep 23, 2015
@ThomasBurleson @kennethcachia
fix(progressLinear, progressCircular): sync logic, fix linear animati…
97cb36b 
…ons, perf upgrades

synchronize progressLinear with similar logic used in progressCircular.

* improve animation performances
* watch md-mode for changes
* refactor animation SCSS
* enable hiding and no-animations with undefined/empty md-mode attributes
* for both indicators, use `display:inline-block;`
* update demos with enable switch
* fix query mode
* update Select to use enhanced progressCircular component
* fix autocomplete styling of progress-linear.md-mode-indeterminate
*  auto-inject md-mode attribute if missing
  *  use 'determinate' if value attribute is defined
  *  otherwise use 'indeterminate'
  *  $log.debug() notify user (via $log.debug) of injection
  *  add API doc details regarding md-mode auto-injection
* fix tests

BREAKING-CHANGES

Before:

```css
md-progress-linear {
  display: block;
}
md-progress-circular {
   // display not set
   // position not set
}
```

```css
md-progress-linear {
  display: block;
  position: relative;
}
md-progress-circular {
  display: block;
  position: relative;
}
```

Fixes angular#4421. Fixes angular#4409. Fixes angular#2540. Fixes angular#2364. Fixes angular#1926. Fixes angular#3802. Closes angular#4454.
@Splaktar Splaktar removed this from the - Backlog milestone Feb 23, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(progressLinear): sync logic, perf upgrades, fix animations angular/material
3 participants
@ThomasBurleson @jelbourn @Splaktar