Skip to content

Commit

Permalink
Adds column order in testing table; adds missing icons for statuses
Browse files Browse the repository at this point in the history
  • Loading branch information
@sofyakurilova
sofyakurilova committed Jan 29, 2025
1 parent 4d1c656 commit 5e9e56b
Show file tree
Hide file tree
Showing 5 changed files with 64 additions and 16 deletions.
6 changes: 3 additions & 3 deletions modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@
<ng-container *ngIf="dataSource">
<mat-accordion displayMode="flat" multi class="tests-container" tabindex="0">
<section class="tests-header-row">
<span class="tests-header-cell">Result</span>
<span class="tests-header-cell">Name</span>
<span class="tests-header-cell">Description</span>
<span class="tests-header-cell">Result</span>
<span class="tests-header-cell">Required result</span>
<span class="tests-header-cell expander-button-cell">
<button
Expand Down Expand Up @@ -71,13 +71,13 @@
</ng-container>

<ng-template #ItemData let-item="item">
<span class="tests-item-cell">{{ item.name }}</span>
<span class="tests-item-cell">{{ item.description }}</span>
<span class="tests-item-cell tests-item-cell-result">
<span class="cell-result-text" [ngClass]="getResultClass(item.result)">
<span>{{ item.result }}</span>
</span>
</span>
<span class="tests-item-cell">{{ item.name }}</span>
<span class="tests-item-cell">{{ item.description }}</span>
<span
class="tests-item-cell tests-item-cell-required-result"
[ngClass]="getRequiredResultClass(item.required_result)">
Expand Down
36 changes: 31 additions & 5 deletions modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,17 +88,17 @@ $expander-button-size: 28px;
.tests-item-row {
min-height: $row-height;
height: auto;
grid-template-columns: 150px 1fr 2.2fr 222px 20px;
grid-template-columns: 1fr 2.2fr 150px 226px 20px;
border-bottom: 1px solid $lighter-grey;
}

.tests-header-row {
grid-template-columns: 150px 1fr 2.2fr 216px $expander-button-size;
grid-template-columns: 1fr 2.2fr 150px 220px $expander-button-size;
}

.expansion-panel-header ::ng-deep.mat-content {
display: grid;
grid-template-columns: 150px 1fr 2.2fr 216px;
grid-template-columns: 1fr 2.2fr 150px 220px;
}

.expansion-panel-header ::ng-deep .mat-expansion-indicator {
Expand Down Expand Up @@ -129,8 +129,8 @@ $expander-button-size: 28px;

.expansion-panel-row ::ng-deep.mat-expansion-panel-body {
display: grid;
grid-template-columns: 150px 1fr 2.2fr 216px 20px;
grid-template-areas: '. . description . .';
grid-template-columns: 1fr 2.2fr 150px 220px 20px;
grid-template-areas: '. description . . .';
}

.cel-description {
Expand Down Expand Up @@ -207,6 +207,32 @@ $expander-button-size: 28px;
line-height: 14px;
}
}
&.roadmap {
color: #00639b;
.cell-result-required-icon {
background: #00639b;
color: #e1e3e1;
&::before {
content: 'road';
}
}
}
&.recommended {
color: #146c2e;
.cell-result-required-icon {
background: #146c2e;
color: #ffffff;
&::before {
font-variation-settings:
'FILL' 1,
'wght' 400,
'GRAD' 0,
'opsz' 24;
content: 'thumb_up';
font-size: 9px;
}
}
}
&.informational {
color: #146c2e;
.cell-result-required-icon {
Expand Down
4 changes: 2 additions & 2 deletions modules/ui/src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,8 @@
href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
rel="stylesheet" />
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
</head>
<body class="mat-typography">
<!-- Google Tag Manager (noscript) -->
Expand Down
24 changes: 18 additions & 6 deletions resources/report/test_report_styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/icon/font?kit=kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejHdIa31RJq7xr9O779sC3DdMx&skey=b8dc2088854b122f&v=v222) format('woff2');
font-weight: 100 700;
src: url(https://fonts.gstatic.com/icon/font?kit=kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsKTDIwram_2pN8sass6hd4ObOPvrgWc3Hc02BrFizbd_1DP&skey=b8dc2088854b122f&v=v225) format('woff2');
}

/* Define some common body formatting*/
Expand Down Expand Up @@ -529,15 +529,25 @@
padding-left: 8px;
}

.result-test-required-result-informational{
.result-test-required-result-informational, .result-test-required-result-recommended {
color: #0D652D;
}

.result-test-required-result-informational .material-symbols-outlined {
.result-test-required-result-informational .material-symbols-outlined,
.result-test-required-result-recommended .material-symbols-outlined {
background: #0D652D;
color: #ffffff;
}

.result-test-required-result-recommended .material-symbols-outlined {
font-variation-settings:
'FILL' 1,
'wght' 400,
'GRAD' 0,
'opsz' 24;
font-size: 9px;
}

.result-test-required-result-required {
color: #000000;
}
Expand All @@ -547,11 +557,13 @@
color: #ffffff;
}

.result-test-required-result-required-if-applicable {
.result-test-required-result-required-if-applicable,
.result-test-required-result-roadmap {
color: #174EA6;
}

.result-test-required-result-required-if-applicable .material-symbols-outlined {
.result-test-required-result-required-if-applicable .material-symbols-outlined,
.result-test-required-result-roadmap .material-symbols-outlined {
background: #174EA6;
color: #ffffff;
}
Expand Down
10 changes: 10 additions & 0 deletions resources/report/test_report_template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,16 @@ <h4 class="result-list-title">Results List <small>({{ successful_tests }}/{{ tot
<span class="material-symbols-outlined">info_i</span>
<span class="result-test-required-result-text">{{ test_results[i]['required_result'] }}</span>
</div>
{% elif test_results[i]['required_result'] == "Roadmap" %}
<div class="result-test-label result-test-required-result result-test-required-result-roadmap" style="left: 7in;">
<span class="material-symbols-outlined">road</span>
<span class="result-test-required-result-text">{{ test_results[i]['required_result'] }}</span>
</div>
{% elif test_results[i]['required_result'] == "Recommended" %}
<div class="result-test-label result-test-required-result result-test-required-result-recommended" style="left: 7in;">
<span class="material-symbols-outlined">thumb_up</span>
<span class="result-test-required-result-text">{{ test_results[i]['required_result'] }}</span>
</div>
{% else %}
<div class="result-test-label result-test-required-result" style="left: 7in;">
<span class="result-test-required-result-text">{{ test_results[i]['required_result'] }}</span>
Expand Down

0 comments on commit 5e9e56b

Please sign in to comment.