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

fix(progressCircular): fixes scaling issues #5891

Closed
wants to merge 1 commit into from
Closed

fix(progressCircular): fixes scaling issues #5891

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
28 changes: 18 additions & 10 deletions src/components/progressCircular/progress-circular.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,14 +64,16 @@ function MdProgressCircularDirective($mdTheming, $mdUtil, $log) {
template:
// The progress 'circle' is composed of two half-circles: the left side and the right
// side. Each side has CSS applied to 'fill-in' the half-circle to the appropriate progress.
'<div class="md-spinner-wrapper">' +
'<div class="md-inner">' +
'<div class="md-gap"></div>' +
'<div class="md-left">' +
'<div class="md-half-circle"></div>' +
'</div>' +
'<div class="md-right">' +
'<div class="md-half-circle"></div>' +
'<div class="md-scale-wrapper">' +
'<div class="md-spinner-wrapper">' +
'<div class="md-inner">' +
'<div class="md-gap"></div>' +
'<div class="md-left">' +
'<div class="md-half-circle"></div>' +
'</div>' +
'<div class="md-right">' +
'<div class="md-half-circle"></div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>',
Expand Down Expand Up @@ -135,8 +137,14 @@ function MdProgressCircularDirective($mdTheming, $mdUtil, $log) {
* Watch the "value" and "md-mode" attributes
*/
function updateScale() {
circle.css(toVendorCSS({
transform : $mdUtil.supplant('scale( {0} )',[getDiameterRatio()])
// set the outer container to the size the user specified
circle.css({
width: (100 * getDiameterRatio()) + 'px',
height: (100 * getDiameterRatio()) + 'px'
});
// the internal element is still 100px, so we have to scale it down to match the size
circle.children().eq(0).css(toVendorCSS({
transform : $mdUtil.supplant('translate(-50%, -50%) scale( {0} )',[getDiameterRatio()])
Copy link
Contributor

Choose a reason for hiding this comment

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

@robertmesserle - is the translate( ) fixed regardless of the scale value ?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yea, it's a percentage-based translate, so it will center the spinner.

Copy link
Member

Choose a reason for hiding this comment

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

this line could use an explanation of its intent.

}));
}

Expand Down
34 changes: 18 additions & 16 deletions src/components/progressCircular/progress-circular.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,14 @@ md-progress-circular {
padding-top: 0 !important;
margin-bottom: 0 !important;

transform: scale(0.5);
z-index: $z-index-progress-circular; // Used to fix a Chrome bug with spinner animation

.md-spinner-wrapper {
display:block;
position: relative;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;

.md-inner {
width: $progress-circular-size;
Expand Down Expand Up @@ -74,7 +75,7 @@ md-progress-circular {
}


.md-spinner-wrapper.md-mode-indeterminate {
.md-mode-indeterminate .md-spinner-wrapper {
Copy link
Contributor

Choose a reason for hiding this comment

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

Just curious, was there a reason why these were swapped?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The DOM structure had to change to make this happen. I added an extra container that could be scaled separate from the outer container.

Copy link
Contributor

Choose a reason for hiding this comment

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

Ah gotcha! I missed the space between them or I wouldn't have asked (I thought you literally just swapped the order of the selector 😄).

animation: outer-rotate $progress-circular-outer-duration linear infinite;
.md-inner {
animation: sporadic-rotate $progress-circular-sporadic-duration $progress-circular-ease-in-out infinite;
Expand Down Expand Up @@ -141,24 +142,25 @@ md-progress-circular {
// Keyframe animation for the Indeterminate Progress
//
@keyframes outer-rotate {
100% { transform: rotate(360deg); }
0% { transform: rotate(0deg) scale(0.5); }
100% { transform: rotate(360deg) scale(0.5); }
}
@keyframes left-wobble {
0%, 100% { transform: rotate(130deg); }
50% { transform: rotate( -5deg); }
0%, 100% { transform: rotate(130deg); }
50% { transform: rotate( -5deg); }
}
@keyframes right-wobble {
0%, 100% { transform: rotate(-130deg); }
50% { transform: rotate( 5deg); }
0%, 100% { transform: rotate(-130deg); }
50% { transform: rotate( 5deg); }
}
@keyframes sporadic-rotate {
12.5% { transform: rotate( 135deg); }
25% { transform: rotate( 270deg); }
37.5% { transform: rotate( 405deg); }
50% { transform: rotate( 540deg); }
62.5% { transform: rotate( 675deg); }
75% { transform: rotate( 810deg); }
87.5% { transform: rotate( 945deg); }
100% { transform: rotate(1080deg); }
12.5% { transform: rotate( 135deg); }
25% { transform: rotate( 270deg); }
37.5% { transform: rotate( 405deg); }
50% { transform: rotate( 540deg); }
62.5% { transform: rotate( 675deg); }
75% { transform: rotate( 810deg); }
87.5% { transform: rotate( 945deg); }
100% { transform: rotate(1080deg); }
}

6 changes: 4 additions & 2 deletions src/components/progressCircular/progress-circular.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,9 @@ describe('mdProgressCircular', function() {

it('should set scaling using percentage values',function() {
var progress = buildIndicator('<md-progress-circular md-diameter="25%"></md-progress-circular>');
expect( getScale(progress) ).toBe(0.25);
expect( getScale(progress[0].children[0]) ).toBe(0.25);
expect(progress.css('width')).toBe('25px');
expect(progress.css('height')).toBe('25px');
});

it('should set scaling using pixel values', function() {
Expand All @@ -79,7 +81,7 @@ describe('mdProgressCircular', function() {
var progress = buildIndicator('<md-progress-circular md-diameter="37px"></md-progress-circular>');
var value = Math.round( (37 / DEFAULT_SIZE) * 100 )/100;

expect( getScale(progress) ).toBe(value);
expect( getScale(progress[0].children[0]) ).toBe(value);
});

/**
Expand Down
1 change: 1 addition & 0 deletions src/components/tabs/js/tabDirective.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ function MdTab () {
label = angular.element('<md-tab-label></md-tab-label>');
if (attr.label) label.text(attr.label);
else label.append(element.contents());

if (body.length == 0) {
var contents = element.contents().detach();
body = angular.element('<md-tab-body></md-tab-body>');
Expand Down