From bb3bdb3268c98c922b3c64661624a1b8eee45b42 Mon Sep 17 00:00:00 2001 From: Joey Perrott Date: Fri, 8 Dec 2017 13:48:22 -0800 Subject: [PATCH] Remove data url from progress-bar. --- src/lib/progress-bar/_progress-bar-theme.scss | 36 ++----------------- src/lib/progress-bar/progress-bar.html | 14 ++++++-- src/lib/progress-bar/progress-bar.scss | 7 ++-- src/lib/progress-bar/progress-bar.ts | 6 +++- 4 files changed, 23 insertions(+), 40 deletions(-) diff --git a/src/lib/progress-bar/_progress-bar-theme.scss b/src/lib/progress-bar/_progress-bar-theme.scss index 890249b86a04..e82abe838e39 100644 --- a/src/lib/progress-bar/_progress-bar-theme.scss +++ b/src/lib/progress-bar/_progress-bar-theme.scss @@ -8,7 +8,7 @@ $warn: map-get($theme, warn); .mat-progress-bar-background { - background-image: #{_mat-progress-bar-buffer($primary, lighter)}; + fill: mat-color($primary, lighter); } .mat-progress-bar-buffer { @@ -21,7 +21,7 @@ .mat-progress-bar.mat-accent { .mat-progress-bar-background { - background-image: #{_mat-progress-bar-buffer($accent, lighter)}; + fill: mat-color($accent, lighter); } .mat-progress-bar-buffer { @@ -35,7 +35,7 @@ .mat-progress-bar.mat-warn { .mat-progress-bar-background { - background-image: #{_mat-progress-bar-buffer($warn, lighter)}; + fill: mat-color($warn, lighter); } .mat-progress-bar-buffer { @@ -50,33 +50,3 @@ @mixin mat-progress-bar-typography($config) { } -// TODO(josephperrott): Find better way to inline svgs. -// In buffer mode a repeated SVG object is used as a background. -// Each of the following defines the SVG object for each of the class defined colors. -// -// The string is a URL encoded version of: -// -// -// -// -@function _mat-progress-bar-buffer($palette, $hue) { - $color: mat-color($palette, $hue) + ''; - - // We also need to escape the hash in hex colors, - // otherwise IE will throw an XML error. - @if str-index($color, '#') == 1 { - $color: '%23' + str-slice($color, 2); - } - - $result: '' + - 'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2F' + - 'www.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%2' + - '7%20x%3D%270px%27%20y%3D%270px%27%20enable-background%3D%27new%200%200%205%202%27%20xml%' + - '3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio%3D%27none' + - '%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' + - $color + '%27%2F%3E%3C%2Fsvg%3E'; - - @return url($result); -} diff --git a/src/lib/progress-bar/progress-bar.html b/src/lib/progress-bar/progress-bar.html index a61ec0908081..632e741a1151 100644 --- a/src/lib/progress-bar/progress-bar.html +++ b/src/lib/progress-bar/progress-bar.html @@ -1,5 +1,15 @@ - -
+ + + + + + + + +
diff --git a/src/lib/progress-bar/progress-bar.scss b/src/lib/progress-bar/progress-bar.scss index 54e432031a86..d1e1e2df37e6 100644 --- a/src/lib/progress-bar/progress-bar.scss +++ b/src/lib/progress-bar/progress-bar.scss @@ -25,9 +25,9 @@ $mat-progress-bar-piece-animation-duration: 250ms !default; // The progress bar background is used to show the bubble animation scrolling behind a // buffering progress bar. .mat-progress-bar-background { - background-repeat: repeat-x; - background-size: 10px 4px; - display: none; + // The width is set to be 10px longer than the container as it will be translated 10px + // during the background scroll animation. + width: calc(100% + 10px); } // The progress bar buffer is the bar indicator showing the buffer value and is only visible @@ -113,7 +113,6 @@ $mat-progress-bar-piece-animation-duration: 250ms !default; @include backface-visibility(hidden); animation: mat-progress-bar-background-scroll $mat-progress-bar-piece-animation-duration infinite linear; - display: block; } } } diff --git a/src/lib/progress-bar/progress-bar.ts b/src/lib/progress-bar/progress-bar.ts index fbab5a9b2454..36878db54d84 100644 --- a/src/lib/progress-bar/progress-bar.ts +++ b/src/lib/progress-bar/progress-bar.ts @@ -5,7 +5,6 @@ * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ - import { Component, ChangeDetectionStrategy, @@ -26,6 +25,8 @@ export class MatProgressBarBase { export const _MatProgressBarMixinBase = mixinColor(MatProgressBarBase, 'primary'); +/** Counter used to generate unique IDs for progress bars. */ +let progressbarId = 0; /** * component. @@ -76,6 +77,9 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements CanColor */ @Input() mode: 'determinate' | 'indeterminate' | 'buffer' | 'query' = 'determinate'; + /** The id of the progress bar. */ + progressbarId = `mat-progress-bar-${progressbarId++}`; + /** Gets the current transform value for the progress bar's primary indicator. */ _primaryTransform() { const scale = this.value / 100;