Verified Commit b1f3b635 authored by Chocobozzz's avatar Chocobozzz
Browse files

Improve admin tables row expand

parent a911462d
<div class="admin-sub-header">
<div i18n class="form-sub-title">Video redundancies list</div>
<div class="select-filter-block">
<label for="displayType" i18n>Display</label>
......@@ -19,6 +17,7 @@
>
<ng-template pTemplate="header">
<tr>
<th style="width: 40px"></th>
<th i18n *ngIf="isDisplayingRemoteVideos()">Strategy</th>
<th i18n pSortableColumn="name">Video name <p-sortIcon field="name"></p-sortIcon></th>
<th i18n>Video URL</th>
......@@ -27,8 +26,15 @@
</tr>
</ng-template>
<ng-template pTemplate="body" let-redundancy>
<tr class="expander" [pRowToggler]="redundancy">
<ng-template pTemplate="body" let-expanded="expanded" let-redundancy>
<tr>
<td class="expand-cell">
<span class="expander" i18n-ngbTooltip ngbTooltip="List redundancies" [pRowToggler]="redundancy">
<i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
</span>
</td>
<td *ngIf="isDisplayingRemoteVideos()">{{ getRedundancyStrategy(redundancy) }}</td>
<td>{{ redundancy.name }}</td>
......@@ -46,16 +52,16 @@
</ng-template>
<ng-template pTemplate="rowexpansion" let-redundancy>
<tr>
<td colspan="2">
<tr *ngIf="redundancy.redundancies.files.length !== 0">
<td [attr.colspan]="getColspan()">
<div *ngFor="let file of redundancy.redundancies.files" class="expansion-block">
<my-video-redundancy-information [redundancyElement]="file"></my-video-redundancy-information>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<tr *ngIf="redundancy.redundancies.streamingPlaylists.length !== 0">
<td [attr.colspan]="getColspan()">
<div *ngFor="let playlist of redundancy.redundancies.streamingPlaylists">
<my-video-redundancy-information [redundancyElement]="playlist"></my-video-redundancy-information>
</div>
......
......@@ -6,7 +6,7 @@
}
.admin-sub-header {
align-items: flex-end;
justify-content: flex-end;
.select-filter-block {
&:not(:last-child) {
......
......@@ -65,6 +65,12 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
})
}
getColspan () {
if (this.isDisplayingRemoteVideos()) return 3
return 2
}
isDisplayingRemoteVideos () {
return this.displayType === 'remote-videos'
}
......
......@@ -15,8 +15,9 @@
<ng-template pTemplate="body" let-expanded="expanded" let-videoAbuse>
<tr>
<td class="expand-cell">
<span class="expander" [pRowToggler]="videoAbuse">
<span class="expander" i18n-ngbTooltip ngbTooltip="More information" [pRowToggler]="videoAbuse">
<i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
</span>
</td>
......
......@@ -15,8 +15,9 @@
<ng-template pTemplate="body" let-videoBlacklist let-expanded="expanded">
<tr>
<td class="expand-cell">
<span *ngIf="videoBlacklist.reason" class="expander" [pRowToggler]="videoBlacklist">
<span *ngIf="videoBlacklist.reason" class="expander" i18n-ngbTooltip ngbTooltip="More information" [pRowToggler]="videoBlacklist">
<i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
</span>
</td>
......
<div class="admin-sub-header">
<div i18n class="form-sub-title">Jobs list</div>
<div class="select-filter-block">
<label for="jobType" i18n>Job type</label>
<div class="peertube-select-container">
......@@ -27,6 +25,7 @@
>
<ng-template pTemplate="header">
<tr>
<th style="width: 40px"></th>
<th class="job-id" i18n>ID</th>
<th class="job-type" i18n>Type</th>
<th class="job-date" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
......@@ -35,7 +34,13 @@
</ng-template>
<ng-template pTemplate="body" let-expanded="expanded" let-job>
<tr class="expander" [pRowToggler]="job">
<tr>
<td class="expand-cell">
<span class="expander" [pRowToggler]="job" i18n-ngbTooltip ngbTooltip="More information">
<i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
</span>
</td>
<td class="job-id" [title]="job.id">{{ job.id }}</td>
<td class="job-type">{{ job.type }}</td>
<td class="job-date">{{ job.createdAt }}</td>
......
......@@ -18,7 +18,7 @@
}
.admin-sub-header {
align-items: flex-end;
justify-content: flex-end;
.select-filter-block {
&:not(:last-child) {
......
......@@ -15,8 +15,8 @@
<ng-template pTemplate="body" let-expanded="expanded" let-videoImport>
<tr>
<td>
<span *ngIf="videoImport.error" class="expander" [pRowToggler]="videoImport">
<td class="expand-cell">
<span *ngIf="videoImport.error" class="expander" [pRowToggler]="videoImport" i18n-ngbTooltip ngbTooltip="See the error">
<i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
</span>
</td>
......
Markdown is supported
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