aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorKim <1877318+kimsible@users.noreply.github.com>2020-07-31 11:30:57 +0200
committerGitHub <noreply@github.com>2020-07-31 11:30:57 +0200
commit30814423ae98b6ac5f7407fc53cffe32aae57124 (patch)
tree8cc300366fdf2c6dc8e3dfc4c1e6c079dfd11571
parent8d987ec63e6888c839ad55938d45809869c517c6 (diff)
downloadPeerTube-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>
-rw-r--r--client/src/app/+admin/follows/followers-list/followers-list.component.html19
-rw-r--r--client/src/app/+admin/follows/following-list/following-list.component.html8
-rw-r--r--client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html11
-rw-r--r--client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html9
-rw-r--r--client/src/app/+admin/users/user-list/user-list.component.html16
-rw-r--r--client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.html4
-rw-r--r--client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html18
-rw-r--r--client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html11
-rw-r--r--client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html4
-rw-r--r--client/src/app/+my-account/my-account-videos/my-account-videos.component.html4
-rw-r--r--client/src/app/shared/shared-main/buttons/button.component.html4
-rw-r--r--client/src/app/shared/shared-main/buttons/button.component.scss4
-rw-r--r--client/src/app/shared/shared-main/buttons/delete-button.component.html3
-rw-r--r--client/src/app/shared/shared-main/buttons/delete-button.component.ts17
-rw-r--r--client/src/app/shared/shared-main/buttons/edit-button.component.html3
-rw-r--r--client/src/app/shared/shared-main/buttons/edit-button.component.ts24
-rw-r--r--client/src/app/shared/shared-moderation/account-blocklist.component.html8
-rw-r--r--client/src/app/shared/shared-moderation/server-blocklist.component.html8
-rw-r--r--client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts2
19 files changed, 104 insertions, 73 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
diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html
index 486785f35..f461ef31b 100644
--- a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html
+++ b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html
@@ -19,14 +19,18 @@
19 19
20 <ng-template pTemplate="header"> 20 <ng-template pTemplate="header">
21 <tr> 21 <tr>
22 <th style="width: 150px;">Action</th> <!-- column for action buttons -->
22 <th style="width: 100%;" i18n>Account</th> 23 <th style="width: 100%;" i18n>Account</th>
23 <th style="width: 150px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th> 24 <th style="width: 150px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
24 <th style="width: 150px;"></th> <!-- column for action buttons -->
25 </tr> 25 </tr>
26 </ng-template> 26 </ng-template>
27 27
28 <ng-template pTemplate="body" let-accountBlock> 28 <ng-template pTemplate="body" let-accountBlock>
29 <tr> 29 <tr>
30 <td class="action-cell">
31 <button class="unblock-button" (click)="unblockAccount(accountBlock)" i18n>Unmute</button>
32 </td>
33
30 <td> 34 <td>
31 <a [href]="accountBlock.blockedAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer"> 35 <a [href]="accountBlock.blockedAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
32 <div class="chip two-lines"> 36 <div class="chip two-lines">
@@ -45,9 +49,6 @@
45 </td> 49 </td>
46 50
47 <td>{{ accountBlock.createdAt | date: 'short' }}</td> 51 <td>{{ accountBlock.createdAt | date: 'short' }}</td>
48 <td class="action-cell">
49 <button class="unblock-button" (click)="unblockAccount(accountBlock)" i18n>Unmute</button>
50 </td>
51 </tr> 52 </tr>
52 </ng-template> 53 </ng-template>
53 54
diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index e8a084259..012bb2d12 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -61,7 +61,7 @@
61 <th style="width: 60px;"> 61 <th style="width: 60px;">
62 <div class="c-hand" ngbDropdown placement="bottom-right auto" container="body" autoClose="outside"> 62 <div class="c-hand" ngbDropdown placement="bottom-right auto" container="body" autoClose="outside">
63 <my-global-icon iconName="columns" ngbDropdownToggle></my-global-icon> 63 <my-global-icon iconName="columns" ngbDropdownToggle></my-global-icon>
64 64
65 <div role="menu" class="dropdown-menu" ngbDropdownMenu> 65 <div role="menu" class="dropdown-menu" ngbDropdownMenu>
66 <div class="dropdown-header" i18n>Table parameters</div> 66 <div class="dropdown-header" i18n>Table parameters</div>
67 <div ngbDropdownItem class="dropdown-item"> 67 <div ngbDropdownItem class="dropdown-item">
@@ -95,6 +95,12 @@
95 </span> 95 </span>
96 </td> 96 </td>
97 97
98 <td class="action-cell">
99 <my-user-moderation-dropdown *ngIf="!isInSelectionMode()" [user]="user" container="body"
100 (userChanged)="onUserChanged()" (userDeleted)="onUserChanged()">
101 </my-user-moderation-dropdown>
102 </td>
103
98 <td *ngIf="getColumn('username')"> 104 <td *ngIf="getColumn('username')">
99 <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/accounts/' + user.username ]"> 105 <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/accounts/' + user.username ]">
100 <div class="chip two-lines"> 106 <div class="chip two-lines">
@@ -161,14 +167,6 @@
161 <td *ngIf="getColumn('createdAt')" [title]="user.createdAt">{{ user.createdAt | date: 'short' }}</td> 167 <td *ngIf="getColumn('createdAt')" [title]="user.createdAt">{{ user.createdAt | date: 'short' }}</td>
162 168
163 <td *ngIf="getColumn('lastLoginDate')" [title]="user.lastLoginDate">{{ user.lastLoginDate | date: 'short' }}</td> 169 <td *ngIf="getColumn('lastLoginDate')" [title]="user.lastLoginDate">{{ user.lastLoginDate | date: 'short' }}</td>
164
165 <td class="action-cell">
166 <my-user-moderation-dropdown
167 *ngIf="!isInSelectionMode()"
168 [user]="user" container="body" (userChanged)="onUserChanged()" (userDeleted)="onUserChanged()"
169 >
170 </my-user-moderation-dropdown>
171 </td>
172 </tr> 170 </tr>
173 </ng-template> 171 </ng-template>
174 172
diff --git a/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.html b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.html
index c20215cf9..f4ff32366 100644
--- a/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.html
+++ b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.html
@@ -34,8 +34,8 @@
34 <div i18n class="video-channel-videos">{videoChannel.videosCount, plural, =0 {No videos} =1 {1 video} other {{{ videoChannel.videosCount }} videos}}</div> 34 <div i18n class="video-channel-videos">{videoChannel.videosCount, plural, =0 {No videos} =1 {1 video} other {{{ videoChannel.videosCount }} videos}}</div>
35 35
36 <div class="video-channel-buttons"> 36 <div class="video-channel-buttons">
37 <my-edit-button [routerLink]="[ 'update', videoChannel.nameWithHost ]"></my-edit-button> 37 <my-edit-button label [routerLink]="[ 'update', videoChannel.nameWithHost ]"></my-edit-button>
38 <my-delete-button (click)="deleteVideoChannel(videoChannel)"></my-delete-button> 38 <my-delete-button label (click)="deleteVideoChannel(videoChannel)"></my-delete-button>
39 </div> 39 </div>
40 40
41 <div *ngIf="!isInSmallView" class="w-100 d-flex justify-content-end"> 41 <div *ngIf="!isInSmallView" class="w-100 d-flex justify-content-end">
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
index 4475178c7..fd2163fb4 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
+++ b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
@@ -15,6 +15,7 @@
15> 15>
16 <ng-template pTemplate="header"> 16 <ng-template pTemplate="header">
17 <tr> 17 <tr>
18 <th style="width: 150px;" i18n>Actions</th>
18 <th style="width: 35%;" i18n>Initiator</th> 19 <th style="width: 35%;" i18n>Initiator</th>
19 <th style="width: 65%;" i18n>Video</th> 20 <th style="width: 65%;" i18n>Video</th>
20 <th style="width: 150px;" i18n pSortableColumn="createdAt"> 21 <th style="width: 150px;" i18n pSortableColumn="createdAt">
@@ -22,12 +23,17 @@
22 <p-sortIcon field="createdAt"></p-sortIcon> 23 <p-sortIcon field="createdAt"></p-sortIcon>
23 </th> 24 </th>
24 <th style="width: 100px;" i18n>Status</th> 25 <th style="width: 100px;" i18n>Status</th>
25 <th style="width: 130px;" i18n>Action</th>
26 </tr> 26 </tr>
27 </ng-template> 27 </ng-template>
28 28
29 <ng-template pTemplate="body" let-videoChangeOwnership> 29 <ng-template pTemplate="body" let-videoChangeOwnership>
30 <tr> 30 <tr>
31 <td class="action-cell">
32 <ng-container *ngIf="videoChangeOwnership.status === 'WAITING'">
33 <my-button i18n-title title="Accept" icon="tick" (click)="openAcceptModal(videoChangeOwnership)"></my-button>
34 <my-button i18n-title title="Refuse" icon="cross" (click)="refuse(videoChangeOwnership)"></my-button>
35 </ng-container>
36 </td>
31 <td> 37 <td>
32 <a [href]="videoChangeOwnership.initiatorAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer"> 38 <a [href]="videoChangeOwnership.initiatorAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
33 <div class="chip two-lines"> 39 <div class="chip two-lines">
@@ -64,14 +70,8 @@
64 <td>{{ videoChangeOwnership.createdAt | date: 'short' }}</td> 70 <td>{{ videoChangeOwnership.createdAt | date: 'short' }}</td>
65 71
66 <td> 72 <td>
67 <span class="badge" [ngClass]="getStatusClass(videoChangeOwnership.status)">{{ videoChangeOwnership.status }}</span> 73 <span class="badge"
68 </td> 74 [ngClass]="getStatusClass(videoChangeOwnership.status)">{{ videoChangeOwnership.status }}</span>
69
70 <td class="action-cell">
71 <ng-container *ngIf="videoChangeOwnership.status === 'WAITING'">
72 <my-button i18n-label label="Accept" icon="tick" (click)="openAcceptModal(videoChangeOwnership)"></my-button>
73 <my-button i18n-label label="Refuse" icon="cross" (click)="refuse(videoChangeOwnership)"></my-button>
74 </ng-container>
75 </td> 75 </td>
76 </tr> 76 </tr>
77 </ng-template> 77 </ng-template>
diff --git a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html
index 854126443..1d3a45f76 100644
--- a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html
+++ b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html
@@ -13,11 +13,11 @@
13 <ng-template pTemplate="header"> 13 <ng-template pTemplate="header">
14 <tr> 14 <tr>
15 <th style="width: 40px;"></th> 15 <th style="width: 40px;"></th>
16 <th style="width: 70px">Action</th>
16 <th style="width: 45%" i18n>Target</th> 17 <th style="width: 45%" i18n>Target</th>
17 <th style="width: 55%" i18n>Video</th> 18 <th style="width: 55%" i18n>Video</th>
18 <th style="width: 150px" i18n>State</th> 19 <th style="width: 150px" i18n>State</th>
19 <th style="width: 150px" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th> 20 <th style="width: 150px" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
20 <th style="width: 70px"></th>
21 </tr> 21 </tr>
22 </ng-template> 22 </ng-template>
23 23
@@ -29,6 +29,11 @@
29 </span> 29 </span>
30 </td> 30 </td>
31 31
32 <td class="action-cell">
33 <my-edit-button *ngIf="isVideoImportSuccess(videoImport) && videoImport.video"
34 [routerLink]="getEditVideoUrl(videoImport.video)"></my-edit-button>
35 </td>
36
32 <td> 37 <td>
33 <a *ngIf="videoImport.targetUrl; else torrent" [href]="videoImport.targetUrl" target="_blank" rel="noopener noreferrer">{{ videoImport.targetUrl }}</a> 38 <a *ngIf="videoImport.targetUrl; else torrent" [href]="videoImport.targetUrl" target="_blank" rel="noopener noreferrer">{{ videoImport.targetUrl }}</a>
34 <ng-template #torrent> 39 <ng-template #torrent>
@@ -52,10 +57,6 @@
52 </td> 57 </td>
53 58
54 <td>{{ videoImport.createdAt | date: 'short' }}</td> 59 <td>{{ videoImport.createdAt | date: 'short' }}</td>
55
56 <td class="action-cell">
57 <my-edit-button label=" " *ngIf="isVideoImportSuccess(videoImport) && videoImport.video" [routerLink]="getEditVideoUrl(videoImport.video)"></my-edit-button>
58 </td>
59 </tr> 60 </tr>
60 </ng-template> 61 </ng-template>
61 62
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html
index d8e3fb2fa..3176bb8da 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html
@@ -24,9 +24,9 @@
24 </div> 24 </div>
25 25
26 <div *ngIf="isRegularPlaylist(playlist)" class="video-playlist-buttons"> 26 <div *ngIf="isRegularPlaylist(playlist)" class="video-playlist-buttons">
27 <my-delete-button (click)="deleteVideoPlaylist(playlist)"></my-delete-button> 27 <my-delete-button label (click)="deleteVideoPlaylist(playlist)"></my-delete-button>
28 28
29 <my-edit-button [routerLink]="[ 'update', playlist.uuid ]"></my-edit-button> 29 <my-edit-button label [routerLink]="[ 'update', playlist.uuid ]"></my-edit-button>
30 </div> 30 </div>
31 </div> 31 </div>
32</div> 32</div>
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
index faeb3b56c..779b42ab7 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
@@ -31,9 +31,9 @@
31 31
32 <ng-template ptTemplate="rowButtons" let-video> 32 <ng-template ptTemplate="rowButtons" let-video>
33 <div class="action-button"> 33 <div class="action-button">
34 <my-delete-button (click)="deleteVideo(video)"></my-delete-button> 34 <my-delete-button label (click)="deleteVideo(video)"></my-delete-button>
35 35
36 <my-edit-button [routerLink]="[ '/videos', 'update', video.uuid ]"></my-edit-button> 36 <my-edit-button label [routerLink]="[ '/videos', 'update', video.uuid ]"></my-edit-button>
37 37
38 <my-button i18n-label label="Change ownership" 38 <my-button i18n-label label="Change ownership"
39 className="action-button-change-ownership grey-button" 39 className="action-button-change-ownership grey-button"
diff --git a/client/src/app/shared/shared-main/buttons/button.component.html b/client/src/app/shared/shared-main/buttons/button.component.html
index 8eccd5c3c..65e06f7a4 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.html
+++ b/client/src/app/shared/shared-main/buttons/button.component.html
@@ -1,8 +1,8 @@
1<span class="action-button" [ngClass]="getClasses()" [title]="getTitle()" tabindex="0"> 1<span class="action-button" [ngClass]="getClasses()" [ngbTooltip]="getTitle()" tabindex="0">
2 <my-global-icon *ngIf="!loading" [iconName]="icon"></my-global-icon> 2 <my-global-icon *ngIf="!loading" [iconName]="icon"></my-global-icon>
3 <my-small-loader [loading]="loading"></my-small-loader> 3 <my-small-loader [loading]="loading"></my-small-loader>
4 4
5 <span class="button-label">{{ label }}</span> 5 <span *ngIf="label" class="button-label">{{ label }}</span>
6 6
7 <ng-content></ng-content> 7 <ng-content></ng-content>
8</span> 8</span>
diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
index 06fde9f1d..f73b7b808 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -1,6 +1,10 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4:host {
5 outline: none;
6}
7
4my-small-loader ::ng-deep .root { 8my-small-loader ::ng-deep .root {
5 display: inline-block; 9 display: inline-block;
6 margin: 0 3px 0 0; 10 margin: 0 3px 0 0;
diff --git a/client/src/app/shared/shared-main/buttons/delete-button.component.html b/client/src/app/shared/shared-main/buttons/delete-button.component.html
index 6643e6013..c94d8d0c9 100644
--- a/client/src/app/shared/shared-main/buttons/delete-button.component.html
+++ b/client/src/app/shared/shared-main/buttons/delete-button.component.html
@@ -1,6 +1,5 @@
1<span class="action-button action-button-delete grey-button" [title]="title" role="button" tabindex="0"> 1<span class="action-button action-button-delete grey-button" [ngbTooltip]="title" role="button" tabindex="0">
2 <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon> 2 <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon>
3 3
4 <span class="button-label" *ngIf="label">{{ label }}</span> 4 <span class="button-label" *ngIf="label">{{ label }}</span>
5 <span class="button-label" i18n *ngIf="!label">Delete</span>
6</span> 5</span>
diff --git a/client/src/app/shared/shared-main/buttons/delete-button.component.ts b/client/src/app/shared/shared-main/buttons/delete-button.component.ts
index 39e31900f..aced0f881 100644
--- a/client/src/app/shared/shared-main/buttons/delete-button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/delete-button.component.ts
@@ -9,12 +9,23 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
9 9
10export class DeleteButtonComponent implements OnInit { 10export class DeleteButtonComponent implements OnInit {
11 @Input() label: string 11 @Input() label: string
12 12 @Input() title: string
13 title: string
14 13
15 constructor (private i18n: I18n) { } 14 constructor (private i18n: I18n) { }
16 15
17 ngOnInit () { 16 ngOnInit () {
18 this.title = this.label || this.i18n('Delete') 17 // <my-delete-button /> No label
18 if (this.label === undefined && !this.title) {
19 this.title = this.i18n('Delete')
20 }
21
22 // <my-delete-button label /> Use default label
23 if (this.label === '') {
24 this.label = this.i18n('Delete')
25
26 if (!this.title) {
27 this.title = this.label
28 }
29 }
19 } 30 }
20} 31}
diff --git a/client/src/app/shared/shared-main/buttons/edit-button.component.html b/client/src/app/shared/shared-main/buttons/edit-button.component.html
index 4ffc563d9..ecb709be1 100644
--- a/client/src/app/shared/shared-main/buttons/edit-button.component.html
+++ b/client/src/app/shared/shared-main/buttons/edit-button.component.html
@@ -1,6 +1,5 @@
1<a class="action-button action-button-edit grey-button" [routerLink]="routerLink" i18n-title title="Update"> 1<a class="action-button action-button-edit grey-button" [routerLink]="routerLink" [ngbTooltip]="title">
2 <my-global-icon iconName="edit" aria-hidden="true"></my-global-icon> 2 <my-global-icon iconName="edit" aria-hidden="true"></my-global-icon>
3 3
4 <span class="button-label" *ngIf="label">{{ label }}</span> 4 <span class="button-label" *ngIf="label">{{ label }}</span>
5 <span class="button-label" i18n *ngIf="!label">Update</span>
6</a> 5</a>
diff --git a/client/src/app/shared/shared-main/buttons/edit-button.component.ts b/client/src/app/shared/shared-main/buttons/edit-button.component.ts
index 9cfe1a3bb..d8ae39b84 100644
--- a/client/src/app/shared/shared-main/buttons/edit-button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/edit-button.component.ts
@@ -1,4 +1,5 @@
1import { Component, Input } from '@angular/core' 1import { Component, Input, OnInit } from '@angular/core'
2import { I18n } from '@ngx-translate/i18n-polyfill'
2 3
3@Component({ 4@Component({
4 selector: 'my-edit-button', 5 selector: 'my-edit-button',
@@ -6,7 +7,26 @@ import { Component, Input } from '@angular/core'
6 templateUrl: './edit-button.component.html' 7 templateUrl: './edit-button.component.html'
7}) 8})
8 9
9export class EditButtonComponent { 10export class EditButtonComponent implements OnInit {
10 @Input() label: string 11 @Input() label: string
12 @Input() title: string
11 @Input() routerLink: string[] | string = [] 13 @Input() routerLink: string[] | string = []
14
15 constructor (private i18n: I18n) { }
16
17 ngOnInit () {
18 // <my-edit-button /> No label
19 if (this.label === undefined && !this.title) {
20 this.title = this.i18n('Update')
21 }
22
23 // <my-edit-button label /> Use default label
24 if (this.label === '') {
25 this.label = this.i18n('Update')
26
27 if (!this.title) {
28 this.title = this.label
29 }
30 }
31 }
12} 32}
diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.html b/client/src/app/shared/shared-moderation/account-blocklist.component.html
index df98cf84e..5af1095f1 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.html
@@ -24,14 +24,17 @@
24 24
25 <ng-template pTemplate="header"> 25 <ng-template pTemplate="header">
26 <tr> 26 <tr>
27 <th style="width: 150px;">Action</th> <!-- column for action buttons -->
27 <th style="width: 100%;" i18n>Account</th> 28 <th style="width: 100%;" i18n>Account</th>
28 <th style="width: 150px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th> 29 <th style="width: 150px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
29 <th style="width: 150px;"></th> <!-- column for action buttons -->
30 </tr> 30 </tr>
31 </ng-template> 31 </ng-template>
32 32
33 <ng-template pTemplate="body" let-accountBlock> 33 <ng-template pTemplate="body" let-accountBlock>
34 <tr> 34 <tr>
35 <td class="action-cell">
36 <button class="unblock-button" (click)="unblockAccount(accountBlock)" i18n>Unmute</button>
37 </td>
35 <td> 38 <td>
36 <a [href]="accountBlock.blockedAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer"> 39 <a [href]="accountBlock.blockedAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
37 <div class="chip two-lines"> 40 <div class="chip two-lines">
@@ -50,9 +53,6 @@
50 </td> 53 </td>
51 54
52 <td>{{ accountBlock.createdAt | date: 'short' }}</td> 55 <td>{{ accountBlock.createdAt | date: 'short' }}</td>
53 <td class="action-cell">
54 <button class="unblock-button" (click)="unblockAccount(accountBlock)" i18n>Unmute</button>
55 </td>
56 </tr> 56 </tr>
57 </ng-template> 57 </ng-template>
58 58
diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.html b/client/src/app/shared/shared-moderation/server-blocklist.component.html
index 4621414d9..598e1a42c 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.html
@@ -28,14 +28,17 @@
28 28
29 <ng-template pTemplate="header"> 29 <ng-template pTemplate="header">
30 <tr> 30 <tr>
31 <th style="width: 150px;">Action</th> <!-- column for action buttons -->
31 <th style="width: 100%;" i18n>Instance</th> 32 <th style="width: 100%;" i18n>Instance</th>
32 <th style="width: 150px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th> 33 <th style="width: 150px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
33 <th style="width: 150px;"></th> <!-- column for action buttons -->
34 </tr> 34 </tr>
35 </ng-template> 35 </ng-template>
36 36
37 <ng-template pTemplate="body" let-serverBlock> 37 <ng-template pTemplate="body" let-serverBlock>
38 <tr> 38 <tr>
39 <td class="action-cell">
40 <button class="unblock-button" (click)="unblockServer(serverBlock)" i18n>Unmute</button>
41 </td>
39 <td> 42 <td>
40 <a [href]="'https://' + serverBlock.blockedServer.host" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer"> 43 <a [href]="'https://' + serverBlock.blockedServer.host" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer">
41 {{ serverBlock.blockedServer.host }} 44 {{ serverBlock.blockedServer.host }}
@@ -43,9 +46,6 @@
43 </a> 46 </a>
44 </td> 47 </td>
45 <td>{{ serverBlock.createdAt | date: 'short' }}</td> 48 <td>{{ serverBlock.createdAt | date: 'short' }}</td>
46 <td class="action-cell">
47 <button class="unblock-button" (click)="unblockServer(serverBlock)" i18n>Unmute</button>
48 </td>
49 </tr> 49 </tr>
50 </ng-template> 50 </ng-template>
51 51
diff --git a/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts b/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts
index 78c2658df..34fa7366c 100644
--- a/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts
+++ b/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts
@@ -19,7 +19,7 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
19 @Input() prependActions: DropdownAction<{ user: User, account: Account }>[] 19 @Input() prependActions: DropdownAction<{ user: User, account: Account }>[]
20 20
21 @Input() buttonSize: 'normal' | 'small' = 'normal' 21 @Input() buttonSize: 'normal' | 'small' = 'normal'
22 @Input() placement = 'left-top left-bottom auto' 22 @Input() placement = 'right-top right-bottom auto'
23 @Input() label: string 23 @Input() label: string
24 @Input() container: 'body' | undefined = undefined 24 @Input() container: 'body' | undefined = undefined
25 25