Skip to content

Commit 4d67cd5

Browse files
franckevvafranckevva
committed
feat(ui-tables): add shadows to the tables #13 
1 parent bd0ffe0 commit 4d67cd5

File tree

1 file changed

+95
-90
lines changed

1 file changed

+95
-90
lines changed

‎src/app/pages/ui/tables/tables.component.html

Lines changed: 95 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,144 +1,149 @@
11
<div class="mdl-cell mdl-cell--6-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
2-
<div class="mdl-card">
3-
<div class="mdl-card__title">
2+
<base-card>
3+
<base-card-title>
44
<h1 class="mdl-card__title-text">Simple table</h1>
5-
</div>
6-
<div class="mdl-card__supporting-text no-padding">
5+
</base-card-title>
6+
<base-card-body class="no-padding">
77
<table class="mdl-data-table mdl-js-data-table">
88
<thead>
9-
<tr>
10-
<th *ngFor="let header of headers" class="mdl-data-table__cell--non-numeric">{{ header }}</th>
11-
</tr>
9+
<tr>
10+
<th *ngFor="let header of headers" class="mdl-data-table__cell--non-numeric">{{ header }}</th>
11+
</tr>
1212
</thead>
1313
<tbody>
14-
<tr *ngFor="let row of simpleTable">
15-
<td *ngFor="let cell of row.slice(0, -1)" class="mdl-data-table__cell--non-numeric">{{ cell }}</td>
16-
<td class="mdl-data-table__cell--non-numeric" [ngSwitch]="row[row.length - 1]">
17-
<span *ngSwitchCase="'read'" class="label label--mini background-color--primary">Read</span>
18-
<span *ngSwitchCase="'unread'" class="label label--mini background-color--secondary">Unread</span>
19-
</td>
20-
</tr>
14+
<tr *ngFor="let row of simpleTable">
15+
<td *ngFor="let cell of row.slice(0, -1)" class="mdl-data-table__cell--non-numeric">{{ cell }}</td>
16+
<td class="mdl-data-table__cell--non-numeric" [ngSwitch]="row[row.length - 1]">
17+
<span *ngSwitchCase="'read'" class="label label--mini background-color--primary">Read</span>
18+
<span *ngSwitchCase="'unread'" class="label label--mini background-color--secondary">Unread</span>
19+
</td>
20+
</tr>
2121
</tbody>
2222
</table>
23-
</div>
24-
</div>
23+
</base-card-body>
24+
</base-card>
2525
</div>
2626
<div class="mdl-cell mdl-cell--6-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
27-
<div class="mdl-card">
28-
<div class="mdl-card__title">
27+
<base-card>
28+
<base-card-title>
2929
<h1 class="mdl-card__title-text">Bordered table</h1>
30-
</div>
31-
<div class="mdl-card__supporting-text no-padding">
30+
</base-card-title>
31+
<base-card-body class="no-padding">
3232
<table class="mdl-data-table mdl-js-data-table bordered-table">
3333
<thead>
34-
<tr>
35-
<th *ngFor="let header of headers" class="mdl-data-table__cell--non-numeric">{{ header }}</th>
36-
</tr>
34+
<tr>
35+
<th *ngFor="let header of headers" class="mdl-data-table__cell--non-numeric">{{ header }}</th>
36+
</tr>
3737
</thead>
3838
<tbody>
39-
<tr *ngFor="let row of borderedTable">
40-
<td *ngFor="let cell of row.slice(0, -1)" class="mdl-data-table__cell--non-numeric">{{ cell }}</td>
41-
<td class="mdl-data-table__cell--non-numeric" [ngSwitch]="row[row.length - 1]">
42-
<span *ngSwitchCase="'read'" class="label label--mini background-color--primary">Read</span>
43-
<span *ngSwitchCase="'unread'" class="label label--mini background-color--secondary">Unread</span>
44-
</td>
45-
</tr>
39+
<tr *ngFor="let row of borderedTable">
40+
<td *ngFor="let cell of row.slice(0, -1)" class="mdl-data-table__cell--non-numeric">{{ cell }}</td>
41+
<td class="mdl-data-table__cell--non-numeric" [ngSwitch]="row[row.length - 1]">
42+
<span *ngSwitchCase="'read'" class="label label--mini background-color--primary">Read</span>
43+
<span *ngSwitchCase="'unread'" class="label label--mini background-color--secondary">Unread</span>
44+
</td>
45+
</tr>
4646
</tbody>
4747
</table>
48-
</div>
49-
</div>
48+
</base-card-body>
49+
</base-card>
5050
</div>
5151
<div class="mdl-cell mdl-cell--6-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
52-
<div class="mdl-card">
53-
<div class="mdl-card__title">
52+
<base-card>
53+
<base-card-title>
5454
<h1 class="mdl-card__title-text">Stripped table</h1>
55-
</div>
56-
<div class="mdl-card__supporting-text no-padding">
55+
</base-card-title>
56+
<base-card-body class="no-padding">
5757
<table class="mdl-data-table mdl-js-data-table stripped-table">
5858
<thead>
59-
<tr>
60-
<th *ngFor="let header of headers" class="mdl-data-table__cell--non-numeric">{{ header }}</th>
61-
</tr>
59+
<tr>
60+
<th *ngFor="let header of headers" class="mdl-data-table__cell--non-numeric">{{ header }}</th>
61+
</tr>
6262
</thead>
6363
<tbody>
64-
<tr *ngFor="let row of strippedTable">
65-
<td *ngFor="let cell of row.slice(0, -1)" class="mdl-data-table__cell--non-numeric">{{ cell }}</td>
66-
<td class="mdl-data-table__cell--non-numeric" [ngSwitch]="row[row.length - 1]">
67-
<span *ngSwitchCase="'unavailable'" class="label label--mini color--orange">Unavailable</span>
68-
<span *ngSwitchCase="'available'" class="label label--mini background-color--primary">Available</span>
69-
</td>
70-
</tr>
64+
<tr *ngFor="let row of strippedTable">
65+
<td *ngFor="let cell of row.slice(0, -1)" class="mdl-data-table__cell--non-numeric">{{ cell }}</td>
66+
<td class="mdl-data-table__cell--non-numeric" [ngSwitch]="row[row.length - 1]">
67+
<span *ngSwitchCase="'unavailable'" class="label label--mini color--orange">Unavailable</span>
68+
<span *ngSwitchCase="'available'" class="label label--mini background-color--primary">Available</span>
69+
</td>
70+
</tr>
7171
</tbody>
7272
</table>
73-
</div>
74-
</div>
73+
</base-card-body>
74+
</base-card>
7575
</div>
7676
<div class="mdl-cell mdl-cell--6-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
77-
<div class="mdl-card">
78-
<div class="mdl-card__title">
77+
<base-card>
78+
<base-card-title>
7979
<h1 class="mdl-card__title-text">Borderless table</h1>
80-
</div>
81-
<div class="mdl-card__supporting-text no-padding">
80+
</base-card-title>
81+
<base-card-body class="no-padding">
8282
<table class="mdl-data-table mdl-js-data-table borderless-table">
8383
<thead>
84-
<tr>
85-
<th *ngFor="let header of headers" class="mdl-data-table__cell--non-numeric">{{ header }}</th>
86-
</tr>
84+
<tr>
85+
<th *ngFor="let header of headers" class="mdl-data-table__cell--non-numeric">{{ header }}</th>
86+
</tr>
8787
</thead>
8888
<tbody>
89-
<tr *ngFor="let row of borderlessTable">
90-
<td *ngFor="let cell of row.slice(0, -1)" class="mdl-data-table__cell--non-numeric">{{ cell }}</td>
91-
<td class="mdl-data-table__cell--non-numeric" [ngSwitch]="row[row.length - 1]">
92-
<span *ngSwitchCase="'unavailable'" class="label label--mini color--orange">Unavailable</span>
93-
<span *ngSwitchCase="'available'" class="label label--mini background-color--primary">Available</span>
94-
</td>
95-
</tr>
89+
<tr *ngFor="let row of borderlessTable">
90+
<td *ngFor="let cell of row.slice(0, -1)" class="mdl-data-table__cell--non-numeric">{{ cell }}</td>
91+
<td class="mdl-data-table__cell--non-numeric" [ngSwitch]="row[row.length - 1]">
92+
<span *ngSwitchCase="'unavailable'" class="label label--mini color--orange">Unavailable</span>
93+
<span *ngSwitchCase="'available'" class="label label--mini background-color--primary">Available</span>
94+
</td>
95+
</tr>
9696
</tbody>
9797
</table>
98-
</div>
99-
</div>
98+
</base-card-body>
99+
</base-card>
100100
</div>
101101
<div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col-tablet mdl-cell--4-col-phone">
102-
<div class="mdl-card">
103-
<div class="mdl-card__title">
102+
<base-card>
103+
<base-card-title>
104104
<h1 class="mdl-card__title-text">Advanced table</h1>
105105
<div class="mdl-layout-spacer"></div>
106106
<base-pagination [numPage]="numPage"
107107
[currentPage]="currentPage"
108108
(changePage)="changePage($event)"></base-pagination>
109-
</div>
110-
<div class="mdl-card__supporting-text no-padding">
109+
</base-card-title>
110+
<base-card-body class="no-padding">
111111
<table class="mdl-data-table mdl-js-data-table sorting-table">
112112
<thead>
113-
<tr>
114-
<th *ngFor="let header of advancedHeaders; let i = index" class="mdl-data-table__cell--non-numeric"
115-
(click)="changeSorting(header, i)">
116-
<span>{{ header.name }}</span>
117-
<i *ngIf="header.sort !== null " class="material-icons sorting"
118-
[class.asc]="header.sort === sortOrder.asc"
119-
[class.active]="header.sort === sortOrder.asc || header.sort === sortOrder.desc">sort</i>
120-
</th>
121-
</tr>
113+
<tr>
114+
<th *ngFor="let header of advancedHeaders; let i = index" class="mdl-data-table__cell--non-numeric"
115+
(click)="changeSorting(header, i)">
116+
<span>{{ header.name }}</span>
117+
<i *ngIf="header.sort !== null " class="material-icons sorting"
118+
[class.asc]="header.sort === sortOrder.asc"
119+
[class.active]="header.sort === sortOrder.asc || header.sort === sortOrder.desc">sort</i>
120+
</th>
121+
</tr>
122122
</thead>
123123
<tbody>
124-
<tr *ngFor="let row of advancedTable">
125-
<td *ngFor="let cell of row.slice(0, 3)" class="mdl-data-table__cell--non-numeric">{{ cell }}</td>
126-
<td class="mdl-data-table__cell--non-numeric">
127-
<span *ngFor="let genre of row[3]" class="label label--mini color--{{ genreColors[genre] }}">{{ genre }}</span>
128-
</td>
129-
<td *ngFor="let cell of row.slice(4, 8)" class="mdl-data-table__cell--non-numeric">{{ cell }}</td>
130-
<td class="mdl-data-table__cell--non-numeric">
124+
<tr *ngFor="let row of advancedTable">
125+
<td *ngFor="let cell of row.slice(0, 3)" class="mdl-data-table__cell--non-numeric">{{ cell }}</td>
126+
<td class="mdl-data-table__cell--non-numeric">
127+
<span *ngFor="let genre of row[3]"
128+
class="label label--mini color--{{ genreColors[genre] }}">{{ genre }}</span>
129+
</td>
130+
<td *ngFor="let cell of row.slice(4, 8)" class="mdl-data-table__cell--non-numeric">{{ cell }}</td>
131+
<td class="mdl-data-table__cell--non-numeric">
131132
<span *ngFor="let i of Array(row[8])" class="label label--mini label__availability"
132133
[class.background-color--secondary]="row[8] === 1"
133134
[class.color--orange]="row[8] === 2"
134135
[class.background-color--primary]="row[8] === 4"
135136
[class.color--green]="row[8] === 3"></span>
136-
<span *ngFor="let i of Array(4 - row[8])" class="label label--mini label__availability"></span>
137-
</td>
138-
<td class="mdl-data-table__cell--non-numeric"><button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect button--colored-teal">Add to cart</button></td>
139-
</tr>
137+
<span *ngFor="let i of Array(4 - row[8])" class="label label--mini label__availability"></span>
138+
</td>
139+
<td class="mdl-data-table__cell--non-numeric">
140+
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect button--colored-teal">Add to
141+
cart
142+
</button>
143+
</td>
144+
</tr>
140145
</tbody>
141146
</table>
142-
</div>
143-
</div>
147+
</base-card-body>
148+
</base-card>
144149
</div>

0 commit comments

Comments
 (0)