Skip to content

Commit f4ca57b

Browse files
Lauest-IteratorLauest-Iterator
committed
pr
1 parent a84de0a commit f4ca57b

File tree

2 files changed

+67
-25
lines changed

2 files changed

+67
-25
lines changed

‎src/app/applications/applications-list/applications-table/applications-table.component.html‎

Lines changed: 55 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@
1919
>
2020
<ng-container matColumnDef="statusCheck">
2121
<th mat-header-cell *matHeaderCellDef mat-sort-header>
22-
{{ "APPLICATION-TABLE.STATUS" | translate }}
22+
<div [ngClass]="this.sort.active === 'statusCheck' ? 'column-title-color' : 'column-title-color-inactive'">
23+
{{ "APPLICATION-TABLE.STATUS" | translate }}
24+
</div>
2325
<app-table-sort-icon [sortDirection]="getSortDirection('statusCheck')" />
2426
</th>
2527
<td mat-cell *matCellDef="let application">
@@ -29,20 +31,26 @@
2931

3032
<ng-container matColumnDef="status">
3133
<th mat-header-cell *matHeaderCellDef mat-sort-header>
32-
{{ "APPLICATION-TABLE.STATE" | translate }}
34+
<div [ngClass]="this.sort.active === 'status' ? 'column-title-color' : 'column-title-color-inactive'">
35+
{{ "APPLICATION-TABLE.STATE" | translate }}
36+
</div>
3337
<app-table-sort-icon [sortDirection]="getSortDirection('status')" />
3438
</th>
3539
<td mat-cell *matCellDef="let application">
36-
<app-option-field
37-
[title]="'APPLICATION.STATUS.' + application.status | translate"
38-
[type]="application.status === 'IN-OPERATION' ? 'warring' : ''"
39-
/>
40+
<div class="options-container">
41+
<app-option-field
42+
[title]="'APPLICATION.STATUS.' + application.status | translate"
43+
[type]="application.status === 'IN-OPERATION' ? 'warring' : ''"
44+
/>
45+
</div>
4046
</td>
4147
</ng-container>
4248

4349
<ng-container matColumnDef="name">
4450
<th mat-header-cell *matHeaderCellDef mat-sort-header>
45-
{{ "APPLICATION-TABLE.NAME" | translate }}
51+
<div [ngClass]="this.sort.active === 'name' ? 'column-title-color' : 'column-title-color-inactive'">
52+
{{ "APPLICATION-TABLE.NAME" | translate }}
53+
</div>
4654
<app-table-sort-icon [sortDirection]="getSortDirection('name')" />
4755
</th>
4856
<td mat-cell *matCellDef="let element" class="name-and-description">
@@ -59,7 +67,9 @@
5967

6068
<ng-container matColumnDef="data">
6169
<th mat-header-cell *matHeaderCellDef mat-sort-header>
62-
{{ "APPLICATION-TABLE.CONTROLLED-PROPERTIES" | translate }}
70+
<div [ngClass]="this.sort.active === 'data' ? 'column-title-color' : 'column-title-color-inactive'">
71+
{{ "APPLICATION-TABLE.CONTROLLED-PROPERTIES" | translate }}
72+
</div>
6373
<app-table-sort-icon [sortDirection]="getSortDirection('data')" />
6474
</th>
6575
<td mat-cell *matCellDef="let application">
@@ -74,7 +84,9 @@
7484

7585
<ng-container matColumnDef="devices">
7686
<th mat-header-cell *matHeaderCellDef mat-sort-header>
77-
{{ "APPLICATION-TABLE.IOT-DEVICES" | translate }}
87+
<div [ngClass]="this.sort.active === 'devices' ? 'column-title-color' : 'column-title-color-inactive'">
88+
{{ "APPLICATION-TABLE.IOT-DEVICES" | translate }}
89+
</div>
7890
<app-table-sort-icon [sortDirection]="getSortDirection('devices')" />
7991
</th>
8092
<td mat-cell *matCellDef="let element">
@@ -84,7 +96,9 @@
8496

8597
<ng-container matColumnDef="owner">
8698
<th mat-header-cell *matHeaderCellDef mat-sort-header>
87-
{{ "APPLICATION-TABLE.OWNER" | translate }}
99+
<div [ngClass]="this.sort.active === 'owner' ? 'column-title-color' : 'column-title-color-inactive'">
100+
{{ "APPLICATION-TABLE.OWNER" | translate }}
101+
</div>
88102
<app-table-sort-icon [sortDirection]="getSortDirection('owner')" />
89103
</th>
90104
<td mat-cell *matCellDef="let application">
@@ -95,8 +109,10 @@
95109
<!-- Not default columns -->
96110

97111
<ng-container matColumnDef="contactPerson">
98-
<th mat-header-cell *matHeaderCellDef mat-sort-header class="col-1">
99-
{{ "APPLICATION-TABLE.CONTACT-PERSON" | translate }}
112+
<th mat-header-cell *matHeaderCellDef mat-sort-header>
113+
<div [ngClass]="this.sort.active === 'contactPerson' ? 'column-title-color' : 'column-title-color-inactive'">
114+
{{ "APPLICATION-TABLE.CONTACT-PERSON" | translate }}
115+
</div>
100116
<app-table-sort-icon [sortDirection]="getSortDirection('contactPerson')" />
101117
</th>
102118
<td mat-cell *matCellDef="let application">
@@ -105,8 +121,10 @@
105121
</ng-container>
106122

107123
<ng-container matColumnDef="dataTargets">
108-
<th mat-header-cell *matHeaderCellDef mat-sort-header class="col-1">
109-
{{ "APPLICATION-TABLE.DATA-TARGETS" | translate }}
124+
<th mat-header-cell *matHeaderCellDef mat-sort-header>
125+
<div [ngClass]="this.sort.active === 'dataTargets' ? 'column-title-color' : 'column-title-color-inactive'">
126+
{{ "APPLICATION-TABLE.DATA-TARGETS" | translate }}
127+
</div>
110128
<app-table-sort-icon [sortDirection]="getSortDirection('dataTargets')" />
111129
</th>
112130
<td mat-cell *matCellDef="let application">
@@ -115,8 +133,12 @@
115133
</ng-container>
116134

117135
<ng-container matColumnDef="openDataDkEnabled">
118-
<th mat-header-cell *matHeaderCellDef mat-sort-header class="col-1">
119-
{{ "APPLICATION-TABLE.OPEN-DATA-DK" | translate }}
136+
<th mat-header-cell *matHeaderCellDef mat-sort-header>
137+
<div
138+
[ngClass]="this.sort.active === 'openDataDkEnabled' ? 'column-title-color' : 'column-title-color-inactive'"
139+
>
140+
{{ "APPLICATION-TABLE.OPEN-DATA-DK" | translate }}
141+
</div>
120142
<app-table-sort-icon [sortDirection]="getSortDirection('openDataDkEnabled')" />
121143
</th>
122144
<td mat-cell *matCellDef="let application">
@@ -125,8 +147,10 @@
125147
</ng-container>
126148

127149
<ng-container matColumnDef="personalData">
128-
<th mat-header-cell *matHeaderCellDef mat-sort-header class="col-1">
129-
{{ "APPLICATION-TABLE.PERSONAL-DATA" | translate }}
150+
<th mat-header-cell *matHeaderCellDef mat-sort-header>
151+
<div [ngClass]="this.sort.active === 'personalData' ? 'column-title-color' : 'column-title-color-inactive'">
152+
{{ "APPLICATION-TABLE.PERSONAL-DATA" | translate }}
153+
</div>
130154
<app-table-sort-icon [sortDirection]="getSortDirection('personalData')" />
131155
</th>
132156
<td mat-cell *matCellDef="let application">
@@ -137,7 +161,9 @@
137161

138162
<ng-container matColumnDef="startDate">
139163
<th mat-header-cell *matHeaderCellDef mat-sort-header class="col-1">
140-
{{ "APPLICATION-TABLE.START-DATE" | translate }}
164+
<div [ngClass]="this.sort.active === 'startDate' ? 'column-title-color' : 'column-title-color-inactive'">
165+
{{ "APPLICATION-TABLE.START-DATE" | translate }}
166+
</div>
141167
<app-table-sort-icon [sortDirection]="getSortDirection('startDate')" />
142168
</th>
143169
<td mat-cell *matCellDef="let application">
@@ -147,7 +173,9 @@
147173

148174
<ng-container matColumnDef="endDate">
149175
<th mat-header-cell *matHeaderCellDef mat-sort-header class="col-1">
150-
{{ "APPLICATION-TABLE.END-DATE" | translate }}
176+
<div [ngClass]="this.sort.active === 'endDate' ? 'column-title-color' : 'column-title-color-inactive'">
177+
{{ "APPLICATION-TABLE.END-DATE" | translate }}
178+
</div>
151179
<app-table-sort-icon [sortDirection]="getSortDirection('endDate')" />
152180
</th>
153181
<td mat-cell *matCellDef="let application">
@@ -157,7 +185,9 @@
157185

158186
<ng-container matColumnDef="category">
159187
<th mat-header-cell *matHeaderCellDef class="col-1">
160-
{{ "APPLICATION-TABLE.CATEGORY" | translate }}
188+
<div [ngClass]="this.sort.active === 'category' ? 'column-title-color' : 'column-title-color-inactive'">
189+
{{ "APPLICATION-TABLE.CATEGORY" | translate }}
190+
</div>
161191
<app-table-sort-icon [sortDirection]="getSortDirection('category')" />
162192
</th>
163193
<td mat-cell *matCellDef="let application">
@@ -167,7 +197,9 @@
167197

168198
<ng-container matColumnDef="deviceTypes">
169199
<th mat-header-cell *matHeaderCellDef class="col-1">
170-
{{ "APPLICATION-TABLE.DEVICE-TYPES" | translate }}
200+
<div [ngClass]="this.sort.active === 'deviceTypes' ? 'column-title-color' : 'column-title-color-inactive'">
201+
{{ "APPLICATION-TABLE.DEVICE-TYPES" | translate }}
202+
</div>
171203
<app-table-sort-icon [sortDirection]="getSortDirection('deviceTypes')" />
172204
</th>
173205
<td mat-cell *matCellDef="let application">
@@ -177,7 +209,7 @@
177209

178210
<ng-container matColumnDef="menu">
179211
<th mat-header-cell *matHeaderCellDef class="col-1"></th>
180-
½
212+
181213
<td mat-cell *matCellDef="let element">
182214
<div class="dropdown" *ngIf="element?.id | canEditApplication">
183215
<a

‎src/app/applications/applications-list/applications-table/applications-table.component.scss‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import "../../../../assets/scss/setup/variables";
2+
13
.name-and-description {
24
max-width: 300px;
35
}
@@ -33,14 +35,14 @@
3335
}
3436

3537
.main-container-table {
36-
background-color: #ffff;
38+
background-color: $white;
3739
display: flex;
3840
flex-direction: column;
3941
}
4042

4143
.tool-container {
4244
width: 35px;
43-
background-color: #ffff;
45+
background-color: $white;
4446
}
4547

4648
.table-container {
@@ -55,3 +57,11 @@
5557
.mat-sort-header-arrow {
5658
display: none !important;
5759
}
60+
61+
.column-title-color {
62+
color: $color-link;
63+
}
64+
65+
.column-title-color-inactive {
66+
color: $default-icon-color;
67+
}

0 commit comments

Comments
 (0)