diff options
author | Kim <1877318+kimsible@users.noreply.github.com> | 2020-07-31 11:30:57 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-07-31 11:30:57 +0200 |
commit | 30814423ae98b6ac5f7407fc53cffe32aae57124 (patch) | |
tree | 8cc300366fdf2c6dc8e3dfc4c1e6c079dfd11571 /client/src/app/+admin/follows | |
parent | 8d987ec63e6888c839ad55938d45809869c517c6 (diff) | |
download | PeerTube-30814423ae98b6ac5f7407fc53cffe32aae57124.tar.gz PeerTube-30814423ae98b6ac5f7407fc53cffe32aae57124.tar.zst PeerTube-30814423ae98b6ac5f7407fc53cffe32aae57124.zip |
Improve (accessibility title) and move action-buttons on left in tables (#2980)
* Improve and move action-buttons on left in tables
* Focus on my-delete and my-button
* Correct spaces syntax
* Move user-action dropdown on the left
Co-authored-by: kimsible <kimsible@users.noreply.github.com>
Diffstat (limited to 'client/src/app/+admin/follows')
3 files changed, 18 insertions, 20 deletions
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html index 050fe40fb..622d464e4 100644 --- a/client/src/app/+admin/follows/followers-list/followers-list.component.html +++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html | |||
@@ -24,16 +24,24 @@ | |||
24 | 24 | ||
25 | <ng-template pTemplate="header"> | 25 | <ng-template pTemplate="header"> |
26 | <tr> | 26 | <tr> |
27 | <th style="width: 150px;">Actions</th> | ||
27 | <th i18n>Follower handle</th> | 28 | <th i18n>Follower handle</th> |
28 | <th style="width: 100px;" i18n pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th> | 29 | <th style="width: 100px;" i18n pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th> |
29 | <th style="width: 100px;" i18n pSortableColumn="score">Score <p-sortIcon field="score"></p-sortIcon></th> | 30 | <th style="width: 100px;" i18n pSortableColumn="score">Score <p-sortIcon field="score"></p-sortIcon></th> |
30 | <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th> | 31 | <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th> |
31 | <th style="width: 150px;"></th> | ||
32 | </tr> | 32 | </tr> |
33 | </ng-template> | 33 | </ng-template> |
34 | 34 | ||
35 | <ng-template pTemplate="body" let-follow> | 35 | <ng-template pTemplate="body" let-follow> |
36 | <tr> | 36 | <tr> |
37 | <td class="action-cell"> | ||
38 | <ng-container *ngIf="follow.state === 'pending'"> | ||
39 | <my-button i18n-title title="Accept" icon="tick" (click)="acceptFollower(follow)"></my-button> | ||
40 | <my-button i18n-title title="Refuse" icon="cross" (click)="rejectFollower(follow)"></my-button> | ||
41 | </ng-container> | ||
42 | |||
43 | <my-delete-button label *ngIf="follow.state === 'accepted'" (click)="deleteFollower(follow)"></my-delete-button> | ||
44 | </td> | ||
37 | <td> | 45 | <td> |
38 | <a [href]="follow.follower.url" i18n-title title="Open actor page in a new tab" target="_blank" rel="noopener noreferrer"> | 46 | <a [href]="follow.follower.url" i18n-title title="Open actor page in a new tab" target="_blank" rel="noopener noreferrer"> |
39 | {{ follow.follower.name + '@' + follow.follower.host }} | 47 | {{ follow.follower.name + '@' + follow.follower.host }} |
@@ -50,15 +58,6 @@ | |||
50 | 58 | ||
51 | <td>{{ follow.score }}</td> | 59 | <td>{{ follow.score }}</td> |
52 | <td>{{ follow.createdAt | date: 'short' }}</td> | 60 | <td>{{ follow.createdAt | date: 'short' }}</td> |
53 | |||
54 | <td class="action-cell"> | ||
55 | <ng-container *ngIf="follow.state === 'pending'"> | ||
56 | <my-button i18n-title title="Accept" icon="tick" (click)="acceptFollower(follow)"></my-button> | ||
57 | <my-button i18n-title title="Refuse" icon="cross" (click)="rejectFollower(follow)"></my-button> | ||
58 | </ng-container> | ||
59 | |||
60 | <my-delete-button *ngIf="follow.state === 'accepted'" (click)="deleteFollower(follow)"></my-delete-button> | ||
61 | </td> | ||
62 | </tr> | 61 | </tr> |
63 | </ng-template> | 62 | </ng-template> |
64 | 63 | ||
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.html b/client/src/app/+admin/follows/following-list/following-list.component.html index 9dead2557..ed3899e71 100644 --- a/client/src/app/+admin/follows/following-list/following-list.component.html +++ b/client/src/app/+admin/follows/following-list/following-list.component.html | |||
@@ -28,16 +28,19 @@ | |||
28 | 28 | ||
29 | <ng-template pTemplate="header"> | 29 | <ng-template pTemplate="header"> |
30 | <tr> | 30 | <tr> |
31 | <th style="width: 150px;">Action</th> | ||
31 | <th i18n>Host</th> | 32 | <th i18n>Host</th> |
32 | <th style="width: 100px;" i18n pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th> | 33 | <th style="width: 100px;" i18n pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th> |
33 | <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th> | 34 | <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th> |
34 | <th style="width: 160px;" i18n pSortableColumn="redundancyAllowed">Redundancy allowed <p-sortIcon field="redundancyAllowed"></p-sortIcon></th> | 35 | <th style="width: 160px;" i18n pSortableColumn="redundancyAllowed">Redundancy allowed <p-sortIcon field="redundancyAllowed"></p-sortIcon></th> |
35 | <th style="width: 150px;"></th> | ||
36 | </tr> | 36 | </tr> |
37 | </ng-template> | 37 | </ng-template> |
38 | 38 | ||
39 | <ng-template pTemplate="body" let-follow> | 39 | <ng-template pTemplate="body" let-follow> |
40 | <tr> | 40 | <tr> |
41 | <td class="action-cell"> | ||
42 | <my-delete-button label (click)="removeFollowing(follow)"></my-delete-button> | ||
43 | </td> | ||
41 | <td> | 44 | <td> |
42 | <a [href]="'https://' + follow.following.host" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer"> | 45 | <a [href]="'https://' + follow.following.host" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer"> |
43 | {{ follow.following.host }} | 46 | {{ follow.following.host }} |
@@ -58,9 +61,6 @@ | |||
58 | [host]="follow.following.host" [redundancyAllowed]="follow.following.hostRedundancyAllowed" | 61 | [host]="follow.following.host" [redundancyAllowed]="follow.following.hostRedundancyAllowed" |
59 | ></my-redundancy-checkbox> | 62 | ></my-redundancy-checkbox> |
60 | </td> | 63 | </td> |
61 | <td class="action-cell"> | ||
62 | <my-delete-button (click)="removeFollowing(follow)"></my-delete-button> | ||
63 | </td> | ||
64 | </tr> | 64 | </tr> |
65 | </ng-template> | 65 | </ng-template> |
66 | 66 | ||
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html index 552c9f02d..a654e51a6 100644 --- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html +++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html | |||
@@ -24,22 +24,25 @@ | |||
24 | <ng-template pTemplate="header"> | 24 | <ng-template pTemplate="header"> |
25 | <tr> | 25 | <tr> |
26 | <th style="width: 40px;"></th> | 26 | <th style="width: 40px;"></th> |
27 | <th style="width: 150px;">Action</th> | ||
27 | <th style="width: 160px;" i18n *ngIf="isDisplayingRemoteVideos()">Strategy</th> | 28 | <th style="width: 160px;" i18n *ngIf="isDisplayingRemoteVideos()">Strategy</th> |
28 | <th i18n pSortableColumn="name">Video <p-sortIcon field="name"></p-sortIcon></th > | 29 | <th i18n pSortableColumn="name">Video <p-sortIcon field="name"></p-sortIcon></th > |
29 | <th style="width: 100px;" i18n *ngIf="isDisplayingRemoteVideos()">Total size</th> | 30 | <th style="width: 100px;" i18n *ngIf="isDisplayingRemoteVideos()">Total size</th> |
30 | <th style="width: 150px;"></th> | ||
31 | </tr> | 31 | </tr> |
32 | </ng-template> | 32 | </ng-template> |
33 | 33 | ||
34 | <ng-template pTemplate="body" let-expanded="expanded" let-redundancy> | 34 | <ng-template pTemplate="body" let-expanded="expanded" let-redundancy> |
35 | <tr> | 35 | <tr> |
36 | |||
37 | <td> | 36 | <td> |
38 | <span class="expander" i18n-ngbTooltip ngbTooltip="List redundancies" [pRowToggler]="redundancy"> | 37 | <span class="expander" i18n-ngbTooltip ngbTooltip="List redundancies" [pRowToggler]="redundancy"> |
39 | <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i> | 38 | <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i> |
40 | </span> | 39 | </span> |
41 | </td> | 40 | </td> |
42 | 41 | ||
42 | <td class="action-cell"> | ||
43 | <my-delete-button label (click)="removeRedundancy(redundancy)"></my-delete-button> | ||
44 | </td> | ||
45 | |||
43 | <td *ngIf="isDisplayingRemoteVideos()">{{ getRedundancyStrategy(redundancy) }}</td> | 46 | <td *ngIf="isDisplayingRemoteVideos()">{{ getRedundancyStrategy(redundancy) }}</td> |
44 | 47 | ||
45 | <td> | 48 | <td> |
@@ -50,10 +53,6 @@ | |||
50 | </td> | 53 | </td> |
51 | 54 | ||
52 | <td *ngIf="isDisplayingRemoteVideos()">{{ getTotalSize(redundancy) | bytes: 1 }}</td> | 55 | <td *ngIf="isDisplayingRemoteVideos()">{{ getTotalSize(redundancy) | bytes: 1 }}</td> |
53 | |||
54 | <td class="action-cell"> | ||
55 | <my-delete-button (click)="removeRedundancy(redundancy)"></my-delete-button> | ||
56 | </td> | ||
57 | </tr> | 56 | </tr> |
58 | </ng-template> | 57 | </ng-template> |
59 | 58 | ||