Skip to content

Commit a77110d

Browse files
josephperrottjosephperrott
committed
Remove data url from progress-bar.
1 parent ac244d9 commit a77110d

File tree

6 files changed

+57
-328
lines changed

6 files changed

+57
-328
lines changed

‎src/demo-app/tabs/tabs-demo.html

Lines changed: 21 additions & 279 deletions
Original file line numberDiff line numberDiff line change
@@ -1,290 +1,32 @@
1-
<h1>Tab Nav Bar</h1>
2-
3-
<button mat-button (click)="tabLinks.shift()">Remove tab</button>
4-
<button mat-button (click)="swapTabLinks()">Swap first two</button>
5-
<button mat-button (click)="addToLabel()">Add to labels</button>
6-
<button mat-button (click)="toggleBackground()">Toggle background</button>
1+
<mat-tab-group>
2+
<mat-tab label="Tab 1" disabled>Content 1</mat-tab>
3+
<mat-tab label="Tab 2">Content 2</mat-tab>
4+
</mat-tab-group>
5+
6+
<nav mat-tab-nav-bar>
7+
<a mat-tab-link
8+
routerLink="1">
9+
<span class="step-number">1</span>
10+
</a>
11+
<a mat-tab-link
12+
routerLink="2"
13+
disabled>
14+
<span class="step-number">2</span>
15+
</a>
16+
</nav>
717

818
<div class="demo-nav-bar">
9-
<nav mat-tab-nav-bar aria-label="weather navigation links" [backgroundColor]="tabNavBackground">
19+
<nav mat-tab-nav-bar aria-label="weather navigation links">
1020
<a mat-tab-link
1121
*ngFor="let tabLink of tabLinks; let i = index"
12-
[routerLink]="tabLink.link"
13-
routerLinkActive #rla="routerLinkActive"
14-
[active]="rla.isActive">
22+
routerLink="tabLink.link">
1523
{{tabLink.label}}
1624
</a>
1725
<a mat-tab-link disabled>Disabled Link</a>
1826
</nav>
19-
<router-outlet></router-outlet>
20-
</div>
21-
22-
23-
<h1>Tab Group Demo - Dynamic Tabs</h1>
24-
25-
<div>
26-
Selected tab index:
27-
<mat-form-field>
28-
<input matInput type="number" [(ngModel)]="activeTabIndex">
29-
</mat-form-field>
30-
</div>
31-
32-
<div class="demo-dynamic-tabs">
33-
<mat-card>
34-
<mat-card-title>Add New Tab</mat-card-title>
35-
<mat-card-content>
36-
<mat-checkbox [(ngModel)]="createWithLongContent">
37-
Include extra content
38-
</mat-checkbox>
39-
<mat-checkbox [(ngModel)]="gotoNewTabAfterAdding">
40-
Select after adding
41-
</mat-checkbox>
42-
<div>
43-
Position:
44-
<mat-form-field>
45-
<input matInput type="number" [(ngModel)]="addTabPosition">
46-
</mat-form-field>
47-
</div>
48-
<button mat-raised-button color="primary"
49-
(click)="addTab(createWithLongContent)">
50-
Add
51-
</button>
52-
</mat-card-content>
53-
</mat-card>
54-
55-
<mat-tab-group class="demo-tab-group" dynamicHeight [(selectedIndex)]="activeTabIndex">
56-
<mat-tab *ngFor="let tab of dynamicTabs" [disabled]="tab.disabled">
57-
<ng-template mat-tab-label>{{tab.label}}</ng-template>
58-
<div class="tab-content">
59-
{{tab.content}}
60-
<br>
61-
<br>
62-
<div *ngIf="tab.extraContent">
63-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
64-
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
65-
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
66-
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
67-
orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
68-
gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
69-
diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
70-
ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
71-
venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
72-
Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
73-
orci posuere, nec luctus mauris semper.
74-
<br>
75-
<br>
76-
Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
77-
magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
78-
Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
79-
Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
80-
tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
81-
nisl consectetur, rhoncus sapien sit amet, tempus sapien.
82-
<br>
83-
<br>
84-
Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
85-
molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
86-
at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
87-
Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
88-
</div>
89-
<br>
90-
<br>
91-
<mat-form-field>
92-
<input matInput placeholder="Tab Label" [(ngModel)]="tab.label">
93-
</mat-form-field>
94-
<br><br>
95-
<button mat-raised-button
96-
[disabled]="dynamicTabs.length == 1"
97-
(click)="deleteTab(tab)">
98-
Delete Tab
99-
</button>
100-
</div>
101-
</mat-tab>
102-
</mat-tab-group>
10327
</div>
10428

105-
<h1>Tab Group Demo - Dynamic Height</h1>
10629

107-
<mat-tab-group class="demo-tab-group" dynamicHeight>
108-
<mat-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
109-
<ng-template mat-tab-label>{{tab.label}}</ng-template>
110-
<div class="tab-content">
111-
{{tab.content}}
112-
<br>
113-
<br>
114-
<div *ngIf="tab.extraContent">
115-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
116-
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
117-
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
118-
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
119-
orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
120-
gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
121-
diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
122-
ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
123-
venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
124-
Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
125-
orci posuere, nec luctus mauris semper.
126-
<br>
127-
<br>
128-
Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
129-
magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
130-
Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
131-
Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
132-
tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
133-
nisl consectetur, rhoncus sapien sit amet, tempus sapien.
134-
<br>
135-
<br>
136-
Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
137-
molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
138-
at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
139-
Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
140-
</div>
141-
<br>
142-
<br>
143-
<mat-form-field>
144-
<input matInput placeholder="Tab Label" [(ngModel)]="tab.label">
145-
</mat-form-field>
146-
</div>
147-
</mat-tab>
148-
</mat-tab-group>
149-
150-
151-
<h1>Tab Group Demo - Fixed Height</h1>
152-
153-
<mat-tab-group class="demo-tab-group" style="height: 220px">
154-
<mat-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
155-
<ng-template mat-tab-label>{{tab.label}}</ng-template>
156-
<div class="tab-content">
157-
{{tab.content}}
158-
<br>
159-
<br>
160-
<div *ngIf="tab.extraContent">
161-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
162-
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
163-
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
164-
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
165-
orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
166-
gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
167-
diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
168-
ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
169-
venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
170-
Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
171-
orci posuere, nec luctus mauris semper.
172-
<br>
173-
<br>
174-
Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
175-
magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
176-
Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
177-
Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
178-
tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
179-
nisl consectetur, rhoncus sapien sit amet, tempus sapien.
180-
<br>
181-
<br>
182-
Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
183-
molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
184-
at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
185-
Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
186-
</div>
187-
<br>
188-
<br>
189-
<mat-form-field>
190-
<input matInput placeholder="Tab Label" [(ngModel)]="tab.label">
191-
</mat-form-field>
192-
</div>
193-
</mat-tab>
194-
</mat-tab-group>
195-
196-
<h1>Stretched Tabs</h1>
197-
198-
<mat-tab-group class="demo-tab-group" style="height: 200px" mat-stretch-tabs>
199-
<mat-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
200-
<ng-template mat-tab-label>{{tab.label}}</ng-template>
201-
<div class="tab-content">
202-
{{tab.content}}
203-
</div>
204-
</mat-tab>
205-
</mat-tab-group>
206-
207-
208-
<h1>Async Tabs</h1>
209-
210-
<mat-tab-group class="demo-tab-group">
211-
<mat-tab *ngFor="let tab of asyncTabs | async; let i = index" [disabled]="i == 1">
212-
<ng-template mat-tab-label>{{tab.label}}</ng-template>
213-
214-
<div class="tab-content">
215-
{{tab.content}}
216-
<br>
217-
<br>
218-
<br>
219-
<mat-form-field>
220-
<input matInput placeholder="Tab Label" [(ngModel)]="tab.label">
221-
</mat-form-field>
222-
</div>
223-
</mat-tab>
224-
</mat-tab-group>
225-
226-
<!-- Simple tabs api -->
227-
<h1>Tabs with simplified api</h1>
228-
<mat-tab-group class="demo-tab-group">
229-
<mat-tab label="Earth">
230-
<div class="tab-content">
231-
This tab is about the Earth!
232-
</div>
233-
</mat-tab>
234-
<mat-tab label="Fire">
235-
This tab is about combustion!
236-
</mat-tab>
237-
</mat-tab-group>
238-
239-
<h1>Inverted tabs</h1>
240-
<mat-tab-group class="demo-tab-group" headerPosition="below">
241-
<mat-tab label="Earth">
242-
<div class="tab-content">
243-
This tab is about the Earth!
244-
</div>
245-
</mat-tab>
246-
<mat-tab label="Fire">
247-
<div class="tab-content">
248-
This tab is about combustion!
249-
</div>
250-
</mat-tab>
251-
</mat-tab-group>
252-
253-
<h1>Accent tabs</h1>
254-
<mat-tab-group class="demo-tab-group" color="accent">
255-
<mat-tab label="Earth">
256-
<div class="tab-content">
257-
This tab is about the Earth!
258-
</div>
259-
</mat-tab>
260-
<mat-tab label="Fire">
261-
<div class="tab-content">
262-
This tab is about combustion!
263-
</div>
264-
</mat-tab>
265-
</mat-tab-group>
266-
267-
<h1>Tabs with background color</h1>
268-
<mat-tab-group class="demo-tab-group" backgroundColor="primary" color="accent">
269-
<mat-tab label="Earth">
270-
<div class="tab-content">
271-
This tab is about the Earth!
272-
</div>
273-
</mat-tab>
274-
<mat-tab label="Fire">
275-
<div class="tab-content">
276-
This tab is about combustion!
277-
</div>
278-
</mat-tab>
279-
</mat-tab-group>
280-
281-
<h1>Tabs with autosize textarea</h1>
282-
<mat-tab-group class="demo-tab-group">
283-
<mat-tab label="Tab 1">
284-
<div class="tab-content">
285-
<mat-form-field>
286-
<textarea matInput placeholder="Autosize textarea" matTextareaAutosize>This is an autosize textarea, it should adjust to the size of its content.</textarea>
287-
</mat-form-field>
288-
</div>
289-
</mat-tab>
290-
</mat-tab-group>
30+
<!-- Copyright 2017 Google Inc. All Rights Reserved.
31+
Use of this source code is governed by an MIT-style license that
32+
can be found in the LICENSE file at http://angular.io/license -->

‎src/lib/progress-bar/_progress-bar-theme.scss

Lines changed: 3 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
$warn: map-get($theme, warn);
99

1010
.mat-progress-bar-background {
11-
background-image: #{_mat-progress-bar-buffer($primary, lighter)};
11+
fill: mat-color($primary, lighter);
1212
}
1313

1414
.mat-progress-bar-buffer {
@@ -21,7 +21,7 @@
2121

2222
.mat-progress-bar.mat-accent {
2323
.mat-progress-bar-background {
24-
background-image: #{_mat-progress-bar-buffer($accent, lighter)};
24+
fill: mat-color($accent, lighter);
2525
}
2626

2727
.mat-progress-bar-buffer {
@@ -35,7 +35,7 @@
3535

3636
.mat-progress-bar.mat-warn {
3737
.mat-progress-bar-background {
38-
background-image: #{_mat-progress-bar-buffer($warn, lighter)};
38+
fill: mat-color($warn, lighter);
3939
}
4040

4141
.mat-progress-bar-buffer {
@@ -50,33 +50,3 @@
5050

5151
@mixin mat-progress-bar-typography($config) { }
5252

53-
// TODO(josephperrott): Find better way to inline svgs.
54-
// In buffer mode a repeated SVG object is used as a background.
55-
// Each of the following defines the SVG object for each of the class defined colors.
56-
//
57-
// The string is a URL encoded version of:
58-
//
59-
// <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
60-
// version="1.1" x="0px" y="0px" enable-background="new 0 0 5 2"
61-
// xml:space="preserve" viewBox="0 0 5 2" preserveAspectRatio="none slice">
62-
// <circle cx="1" cy="1" r="1" fill="{INJECTED_COLOR}"/>
63-
// </svg>
64-
@function _mat-progress-bar-buffer($palette, $hue) {
65-
$color: mat-color($palette, $hue) + '';
66-
67-
// We also need to escape the hash in hex colors,
68-
// otherwise IE will throw an XML error.
69-
@if str-index($color, '#') == 1 {
70-
$color: '%23' + str-slice($color, 2);
71-
}
72-
73-
$result: '' +
74-
'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2F' +
75-
'www.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%2' +
76-
'7%20x%3D%270px%27%20y%3D%270px%27%20enable-background%3D%27new%200%200%205%202%27%20xml%' +
77-
'3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio%3D%27none' +
78-
'%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' +
79-
$color + '%27%2F%3E%3C%2Fsvg%3E';
80-
81-
@return url($result);
82-
}

‎src/lib/progress-bar/progress-bar.html

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
1-
<!-- The background div is named as such because it appears below the other divs and is not sized based on values. -->
2-
<div class="mat-progress-bar-background mat-progress-bar-element"></div>
1+
<!--
2+
The background div is named as such because it appears below the other divs and is not sized based
3+
on values.
4+
-->
5+
<svg width="100%" height="5" class="mat-progress-bar-background mat-progress-bar-element">
6+
<defs>
7+
<pattern [id]="progressbarId" x="5" y="0" width="10" height="5" patternUnits="userSpaceOnUse">
8+
<circle cx="2.5" cy="2.5" r="2.5"/>
9+
</pattern>
10+
</defs>
11+
<rect [attr.fill]="'url(#' + progressbarId + ')'" width="100%" height="100%"/>
12+
</svg>
313
<div class="mat-progress-bar-buffer mat-progress-bar-element" [ngStyle]="_bufferTransform()"></div>
414
<div class="mat-progress-bar-primary mat-progress-bar-fill mat-progress-bar-element" [ngStyle]="_primaryTransform()"></div>
515
<div class="mat-progress-bar-secondary mat-progress-bar-fill mat-progress-bar-element"></div>

0 commit comments

Comments
 (0)