Code development platform for open source projects from the European Union institutions

Skip to content
Snippets Groups Projects
Commit bea3623c authored by Joze RIHTARSIC's avatar Joze RIHTARSIC
Browse files

[EDELIVERY-13955] fix table headers

parent a6156316
No related branches found
No related tags found
No related merge requests found
Pipeline #220612 failed
Hide whitespace changes
Inline Side-by-side
Showing
with 99 additions and 28 deletions
smp-angular/src/app/common/components/smp-table/smp-table-coldef.model.ts
+ 2
− 1
View file @ bea3623c
......@@ -7,5 +7,6 @@ export interface SmpTableColDef {
header: string;
cell?: (row: any) => any;
tooltip?: (row: any) => any;
style?:string ;
style?:string;
headerStyle?: string;
}
smp-angular/src/app/common/components/smp-table/smp-table.component.css
+ 15
− 1
View file @ bea3623c
......@@ -16,9 +16,19 @@
padding-right: 5px;
}
.smp-table-cell {
.smp-table-cell {
word-break: break-all;
word-wrap: break-word;
font-size: 0.8em;
padding: 1px 5px;
}
.smp-table-cell-header {
font-weight: bold;
font-size: 0.9em;
padding: 1px 5px;
text-align: left;
}
.smp-table-row {
......@@ -40,4 +50,8 @@
padding-top: 1em;
}
.smp-table-header-row{
min-height: 36px;
}
smp-angular/src/app/common/components/smp-table/smp-table.component.html
+ 4
− 2
View file @ bea3623c
......@@ -14,7 +14,8 @@
<ng-container *ngFor="let colDef of columnDefList; let colIndex = index"
matColumnDef="{{colDef.columnDef}}">
<mat-header-cell *matHeaderCellDef
[style]="colDef.style">{{ colDef.header | translate }}
class="smp-table-cell-header"
[style]="getHeaderStyle(colDef)">{{ colDef.header | translate }}
</mat-header-cell>
<mat-cell class="smp-table-cell" *matCellDef="let row"
......@@ -23,7 +24,8 @@
>{{ colDef.cell(row) }}</mat-cell>
</ng-container>
<!-- configure table header -->
<mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></mat-header-row>
<mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"
class="smp-table-header-row"></mat-header-row>
<!-- configure table rows -->
<mat-row class="smp-table-row" *matRowDef="let odd = odd; let row; columns: displayedColumns;"
(click)="onRowClickedEvent(row)"
......
smp-angular/src/app/common/components/smp-table/smp-table.component.ts
+ 7
− 0
View file @ bea3623c
......@@ -114,4 +114,11 @@ export class SmpTableComponent implements AfterViewInit {
}
}
getHeaderStyle(col: SmpTableColDef): string {
if (!col) {
return '';
}
return ( col?.style?col.style:'') + ' ' +( col?.headerStyle?col.headerStyle:'') ;
}
}
smp-angular/src/app/common/panels/document-events-panel/document-events-panel.component.ts
+ 5
− 5
View file @ bea3623c
......@@ -80,33 +80,33 @@ export class DocumentEventsPanelComponent implements AfterViewInit, BeforeLeaveG
columnDef: 'date',
header: 'document.events.panel.label.date',
cell: (row: DocumentVersionEventRo) => this.dateTimeService.formatDateTimeForUserLocal(row.eventOn),
style: 'font-size: 0.8em; flex-grow: 0;flex-basis: 80px; padding: 5px;justify-content : center;'
style: 'flex-basis: 150px;flex-grow: 0;'
} as SmpTableColDef,
{
columnDef: 'eventType',
header: 'document.events.panel.label.type',
cell: (row: DocumentVersionEventRo) => row.eventType,
style: 'font-size: 0.8em; padding: 5px;justify-content : center;flex-grow: 0;flex-basis:80px;'
style: 'flex-basis:80px;flex-grow: 0;'
} as SmpTableColDef,
{
columnDef: 'status',
header: 'document.events.panel.label.status',
cell: (row: DocumentVersionEventRo) => row.documentVersionStatus,
style: 'font-size: 0.8em; padding: 5px;justify-content : center;flex-grow: 0;flex-basis:80px;'
style: 'flex-basis:80px;flex-grow: 0;'
} as SmpTableColDef,
{
columnDef: 'username',
header: 'document.events.panel.label.username',
cell: (row: DocumentVersionEventRo) => row.username,
style: 'font-size: 0.8em; padding: 5px;justify-content : center;'
style: 'flex-grow: 1;'
} as SmpTableColDef,
{
columnDef: 'eventSource',
header: 'document.events.panel.label.source',
cell: (row: DocumentVersionEventRo) => row.eventSourceType,
style: 'font-size: 0.8em; flex-grow: 0;flex-basis:100px;padding: 5px;justify-content : center;'
style: 'flex-basis:60px;flex-grow: 0;'
} as SmpTableColDef,
];
}
......
smp-angular/src/app/common/panels/document-properties-panel/document-properties-panel.component.ts
+ 2
− 2
View file @ bea3623c
......@@ -76,13 +76,13 @@ export class DocumentPropertiesPanelComponent implements BeforeLeaveGuard, Contr
header: 'document.properties.panel.label.property',
cell: (row: DocumentPropertyRo) => row.property,
tooltip: (row: DocumentPropertyRo) => row.desc,
style: 'font-size: 0.8em; padding: 0 5px;flex-grow: 0;flex-basis:40%;'
style: 'flex-grow: 0;flex-basis:40%;'
} as SmpTableColDef,
{
columnDef: 'value',
header: 'document.properties.panel.label.value',
cell: (row: DocumentPropertyRo) => row.value,
style: 'font-size: 0.8em; padding: 0 5px;'
style: 'flex-grow: 1;'
} as SmpTableColDef
];
}
......
smp-angular/src/app/common/panels/document-versions-panel/document-versions-panel.component.ts
+ 4
− 4
View file @ bea3623c
......@@ -82,25 +82,25 @@ export class DocumentVersionsPanelComponent implements BeforeLeaveGuard, Control
columnDef: 'version',
header: 'document.versions.panel.label.version',
cell: (row: DocumentVersionRo) => row.version,
style: 'font-size: 0.8em;padding: 5px;justify-content : center;flex-grow: 0;flex-basis:70px;'
style: 'flex-grow: 0;flex-basis:70px;'
} as SmpTableColDef,
{
columnDef: 'status',
header: 'document.versions.panel.label.status',
cell: (row: DocumentVersionRo) => row.versionStatus,
style: 'font-size: 0.8em;padding: 5px;justify-content:center;flex-grow: 0;flex-basis:100px;'
style: 'flex-grow: 1;'
} as SmpTableColDef,
{
columnDef: 'createdOn',
header: 'document.versions.panel.label.created',
cell: (row: DocumentVersionRo) => this.dateTimeService.formatDateTimeForUserLocal(row.createdOn),
style: 'font-size: 0.8em; padding: 5px;justify-content:center;'
style: 'flex-basis: 150px;flex-grow: 0;'
} as SmpTableColDef,
{
columnDef: 'lastUpdatedOn',
header: 'document.versions.panel.label.updated',
cell: (row: DocumentVersionRo) => this.dateTimeService.formatDateTimeForUserLocal(row.lastUpdatedOn),
style: 'font-size: 0.8em; padding: 5px;justify-content:center;'
style: 'flex-basis: 150px;flex-grow: 0;'
} as SmpTableColDef
];
}
......
smp-angular/src/app/system-settings/admin-domain/admin-domain.component.css
+ 7
− 0
View file @ bea3623c
......@@ -31,3 +31,10 @@
height: 100%;
max-width: 800px
}
.domain-table-cell-header {
font-weight: bold;
font-size: 0.9em;
padding: 1px 5px;
text-align: center;
}
smp-angular/src/app/system-settings/admin-domain/admin-domain.component.html
+ 1
− 1
View file @ bea3623c
......@@ -92,7 +92,7 @@
<table class="mat-elevation-z2" id="admin-domain-table" mat-table
[dataSource]="dataSource" matSort>
<ng-container matColumnDef="domainCode">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "admin.domain.label.domain.code" | translate }}</th>
<th mat-header-cell *matHeaderCellDef mat-sort-header class="domain-table-cell-header">{{ "admin.domain.label.domain.code" | translate }}</th>
<td mat-cell *matCellDef="let row"
[matTooltip]="row.domainCode">{{ row.domainCode }}
</td>
......
smp-angular/src/app/system-settings/admin-domain/domain-properties-panel/domain-properties-panel.component.html
+ 3
− 3
View file @ bea3623c
......@@ -4,19 +4,19 @@
<table id="admin-domain-properties-table" mat-table
[dataSource]="propertyDataSource" matSort>
<ng-container matColumnDef="systemDefault">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "domain.properties.label.system.default" | translate }}</th>
<th mat-header-cell *matHeaderCellDef mat-sort-header class="domprop-table-cell-header">{{ "domain.properties.label.system.default" | translate }}</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox checked="{{row.systemDefault}}" disabled></mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="property">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "domain.properties.label.domain.property" | translate }}</th>
<th mat-header-cell *matHeaderCellDef mat-sort-header class="domprop-table-cell-header">{{ "domain.properties.label.domain.property" | translate }}</th>
<td mat-cell *matCellDef="let row"
[matTooltip]="row.desc">{{ row.property }}
</td>
</ng-container>
<ng-container matColumnDef="value">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "domain.properties.label.domain.value" | translate }}</th>
<th mat-header-cell *matHeaderCellDef mat-sort-header class="domprop-table-cell-header">{{ "domain.properties.label.domain.value" | translate }}</th>
<td mat-cell *matCellDef="let row">{{ getTableRowValue(row) }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
......
smp-angular/src/app/system-settings/admin-domain/domain-properties-panel/domain-properties-panel.component.scss
+ 8
− 0
View file @ bea3623c
......@@ -24,3 +24,11 @@
.table-row {
font-weight: normal;
}
.domprop-table-cell-header {
font-weight: bold;
font-size: 0.9em;
padding: 1px 5px;
text-align: left;
}
smp-angular/src/app/system-settings/admin-extension/extension.component.css
+ 8
− 0
View file @ bea3623c
......@@ -19,3 +19,11 @@
padding-top: 1em;
}
.extension-table-cell-header {
font-weight: bold;
font-size: 0.9em;
padding: 1px 5px;
text-align: left;
align-self: start;
}
smp-angular/src/app/system-settings/admin-extension/extension.component.html
+ 3
− 3
View file @ bea3623c
......@@ -22,13 +22,13 @@
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "extensions.label.name" | translate }}</th>
<th mat-header-cell *matHeaderCellDef mat-sort-header class="extension-table-cell-header">{{ "extensions.label.name" | translate }}</th>
<td mat-cell *matCellDef="let row"> {{row.name}} </td>
</ng-container>
<!-- Version Column -->
<ng-container matColumnDef="version">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "extensions.label.version" | translate }}</th>
<ng-container matColumnDef="version" class="extension-table-cell-header">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="extension-table-cell-header">{{ "extensions.label.version" | translate }}</th>
<td mat-cell *matCellDef="let row"> {{row.version}}</td>
</ng-container>
......
smp-angular/src/app/system-settings/admin-keystore/admin-keystore.component.css
+ 8
− 0
View file @ bea3623c
......@@ -26,3 +26,11 @@
display: block;
cursor: pointer;
}
.keystore-table-cell-header {
font-weight: bold;
font-size: 0.9em;
padding: 1px 5px;
text-align: left;
align-self: start;
}
smp-angular/src/app/system-settings/admin-keystore/admin-keystore.component.html
+ 2
− 2
View file @ bea3623c
......@@ -37,14 +37,14 @@
<table class="mat-elevation-z2" id="admin-keystore-table" mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="alias" [matTooltip]="selected?.certificateId">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "admin.keystore.label.alias" | translate }}</th>
<th mat-header-cell *matHeaderCellDef mat-sort-header class="keystore-table-cell-header">{{ "admin.keystore.label.alias" | translate }}</th>
<td mat-cell *matCellDef="let row"
[ngClass]="{'datatable-row-error': row.invalid}"
[matTooltip]="row.certificateId">{{row.alias}}</td>
</ng-container>
<ng-container matColumnDef="entry-type">
<th mat-header-cell *matHeaderCellDef>{{ "admin.keystore.label.type" | translate }}</th>
<th mat-header-cell *matHeaderCellDef class="keystore-table-cell-header">{{ "admin.keystore.label.type" | translate }}</th>
<td mat-cell *matCellDef="let row"
[ngClass]="{'datatable-row-error': row.invalid}"
[matTooltip]="(row.containingKey ? 'admin.keystore.label.key.pair': 'admin.keystore.label.certificate') | translate">
......
smp-angular/src/app/system-settings/admin-truststore/admin-truststore.component.css
+ 7
− 1
View file @ bea3623c
......@@ -12,7 +12,6 @@
padding-top: 1em;
}
#admin-truststore-table {
width: 100%;
padding-top: 1em;
......@@ -26,3 +25,10 @@
display: block;
cursor: pointer;
}
.truststore-table-cell-header {
font-weight: bold;
font-size: 0.9em;
padding: 1px 5px;
text-align: center;
}
smp-angular/src/app/system-settings/admin-truststore/admin-truststore.component.html
+ 1
− 1
View file @ bea3623c
......@@ -49,7 +49,7 @@
<!-- Name Column -->
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "admin.truststore.label.alias" | translate }}</th>
<th mat-header-cell *matHeaderCellDef mat-sort-header class="truststore-table-cell-header">{{ "admin.truststore.label.alias" | translate }}</th>
<td mat-cell *matCellDef="let row"
[ngClass]="{'datatable-row-error': row.invalid}"
[matTooltip]="row.certificateId">{{row.alias}}</td>
......
smp-angular/src/app/system-settings/admin-users/admin-user.component.css
+ 7
− 0
View file @ bea3623c
......@@ -17,3 +17,10 @@
width: 100%;
padding-top: 1em;
}
.user-table-cell-header {
font-weight: bold;
font-size: 0.9em;
padding: 1px 5px;
text-align: left;
}
smp-angular/src/app/system-settings/admin-users/admin-user.component.html
+ 2
− 2
View file @ bea3623c
......@@ -41,12 +41,12 @@
</mat-toolbar>
<table class="mat-elevation-z2" id="admin-user-table" mat-table [dataSource]="userData" >
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef >{{ "admin.user.label.username" | translate }}</th>
<th mat-header-cell *matHeaderCellDef class="user-table-cell-header" >{{ "admin.user.label.username" | translate }}</th>
<td mat-cell *matCellDef="let row" [matTooltip]="row.username">{{row.username}}</td>
</ng-container>
<ng-container matColumnDef="fullName">
<th mat-header-cell *matHeaderCellDef >{{ "admin.user.label.full.name" | translate }}</th>
<th mat-header-cell *matHeaderCellDef class="user-table-cell-header" >{{ "admin.user.label.full.name" | translate }}</th>
<td mat-cell *matCellDef="let row" [matTooltip]="row.username">{{row.fullName}}</td>
</ng-container>
......
smp-angular/src/assets/i18n/en.json
+ 3
− 0
View file @ bea3623c
......@@ -634,10 +634,13 @@
"domain.properties.button.reset": "Reset",
"domain.properties.button.save": "Save",
"domain.properties.label.filter": "Filter by prop. name",
"domain.properties.placeholder.filter": "Filter by property name",
"domain.properties.label.domain.property": "Domain property",
"domain.properties.label.domain.value": "Domain value",
"domain.properties.label.system.default": "Sys. Def.",
"domain.properties.label.no.properties.found": "No Domain properties found",
"domain.properties.label.no.filter.found": "No data matching the filter {{filterValue}}\"",
"domain.properties.panel.title": "Domain properties",
"domain.resource.type.panel.button.reset": "Reset",
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

For further information about the platform and support, please see https://code.europa.eu/info/about