aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-04-19 20:26:25 +0200
committerRigel Kent <par@rigelk.eu>2020-05-01 16:41:02 +0200
commitd384061366ae06294c0e222f0fb7ec4f0a172f39 (patch)
treeac97c69d7be200ab42d70ba50340b42673a4480e
parente0a929179a9dc76e035ca7fda2b61d5ff46afbc5 (diff)
downloadPeerTube-d384061366ae06294c0e222f0fb7ec4f0a172f39.tar.gz
PeerTube-d384061366ae06294c0e222f0fb7ec4f0a172f39.tar.zst
PeerTube-d384061366ae06294c0e222f0fb7ec4f0a172f39.zip
Empty states for tables
-rw-r--r--client/src/app/+admin/follows/followers-list/followers-list.component.html11
-rw-r--r--client/src/app/+admin/follows/followers-list/followers-list.component.ts2
-rw-r--r--client/src/app/+admin/follows/following-list/following-list.component.html11
-rw-r--r--client/src/app/+admin/follows/following-list/following-list.component.ts2
-rw-r--r--client/src/app/+admin/follows/follows.component.scss6
-rw-r--r--client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html13
-rw-r--r--client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts2
-rw-r--r--client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html31
-rw-r--r--client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.ts5
-rw-r--r--client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html13
-rw-r--r--client/src/app/+admin/moderation/moderation.component.scss4
-rw-r--r--client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html13
-rw-r--r--client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html11
-rw-r--r--client/src/sass/include/_mixins.scss9
14 files changed, 125 insertions, 8 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 7455cdf2b..d4f2b8dcc 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
@@ -41,4 +41,15 @@
41 </td> 41 </td>
42 </tr> 42 </tr>
43 </ng-template> 43 </ng-template>
44
45 <ng-template pTemplate="emptymessage">
46 <tr>
47 <td colspan="6">
48 <div class="empty-table-message">
49 <ng-container *ngIf="search" i18n>No follower found matching current filters.</ng-container>
50 <ng-container *ngIf="!search" i18n>Your instance doesn't have any follower.</ng-container>
51 </div>
52 </td>
53 </tr>
54 </ng-template>
44</p-table> 55</p-table>
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.ts b/client/src/app/+admin/follows/followers-list/followers-list.component.ts
index 585902827..81a91c1d1 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.ts
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.ts
@@ -9,7 +9,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
9@Component({ 9@Component({
10 selector: 'my-followers-list', 10 selector: 'my-followers-list',
11 templateUrl: './followers-list.component.html', 11 templateUrl: './followers-list.component.html',
12 styleUrls: [ './followers-list.component.scss' ] 12 styleUrls: [ '../follows.component.scss', './followers-list.component.scss' ]
13}) 13})
14export class FollowersListComponent extends RestTable implements OnInit { 14export class FollowersListComponent extends RestTable implements OnInit {
15 followers: ActorFollow[] = [] 15 followers: ActorFollow[] = []
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 f3bb7216b..e4189d334 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
@@ -45,6 +45,17 @@
45 </td> 45 </td>
46 </tr> 46 </tr>
47 </ng-template> 47 </ng-template>
48
49 <ng-template pTemplate="emptymessage">
50 <tr>
51 <td colspan="6">
52 <div class="empty-table-message">
53 <ng-container *ngIf="search" i18n>No host found matching current filters.</ng-container>
54 <ng-container *ngIf="!search" i18n>Your instance is not follwing any host.</ng-container>
55 </div>
56 </td>
57 </tr>
58 </ng-template>
48</p-table> 59</p-table>
49 60
50<my-batch-domains-modal #batchDomainsModal i18n-action action="Follow domains" (domains)="addFollowing($event)"></my-batch-domains-modal> 61<my-batch-domains-modal #batchDomainsModal i18n-action action="Follow domains" (domains)="addFollowing($event)"></my-batch-domains-modal>
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.ts b/client/src/app/+admin/follows/following-list/following-list.component.ts
index 477a6c0d7..a4dd07302 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.ts
+++ b/client/src/app/+admin/follows/following-list/following-list.component.ts
@@ -11,7 +11,7 @@ import { BatchDomainsModalComponent } from '@app/+admin/config/shared/batch-doma
11@Component({ 11@Component({
12 selector: 'my-followers-list', 12 selector: 'my-followers-list',
13 templateUrl: './following-list.component.html', 13 templateUrl: './following-list.component.html',
14 styleUrls: [ './following-list.component.scss' ] 14 styleUrls: [ '../follows.component.scss', './following-list.component.scss' ]
15}) 15})
16export class FollowingListComponent extends RestTable implements OnInit { 16export class FollowingListComponent extends RestTable implements OnInit {
17 @ViewChild('batchDomainsModal') batchDomainsModal: BatchDomainsModalComponent 17 @ViewChild('batchDomainsModal') batchDomainsModal: BatchDomainsModalComponent
diff --git a/client/src/app/+admin/follows/follows.component.scss b/client/src/app/+admin/follows/follows.component.scss
index 766d7853b..32394f698 100644
--- a/client/src/app/+admin/follows/follows.component.scss
+++ b/client/src/app/+admin/follows/follows.component.scss
@@ -1,4 +1,10 @@
1@import "mixins";
2
1.form-sub-title { 3.form-sub-title {
2 flex-grow: 0; 4 flex-grow: 0;
3 margin-right: 30px; 5 margin-right: 30px;
4} 6}
7
8.empty-table-message {
9 @include empty-state;
10}
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 a8dcc69d2..f3b980970 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
@@ -19,7 +19,7 @@
19 <tr> 19 <tr>
20 <th style="width: 40px;"></th> 20 <th style="width: 40px;"></th>
21 <th style="width: 160px;" i18n *ngIf="isDisplayingRemoteVideos()">Strategy</th> 21 <th style="width: 160px;" i18n *ngIf="isDisplayingRemoteVideos()">Strategy</th>
22 <th i18n pSortableColumn="name">Video name <p-sortIcon field="name"></p-sortIcon></th> 22 <th i18n pSortableColumn="name">Video name <p-sortIcon field="name"></p-sortIcon></th >
23 <th i18n>Video URL</th> 23 <th i18n>Video URL</th>
24 <th style="width: 100px;" i18n *ngIf="isDisplayingRemoteVideos()">Total size</th> 24 <th style="width: 100px;" i18n *ngIf="isDisplayingRemoteVideos()">Total size</th>
25 <th style="width: 80px;"></th> 25 <th style="width: 80px;"></th>
@@ -68,6 +68,17 @@
68 </td> 68 </td>
69 </tr> 69 </tr>
70 </ng-template> 70 </ng-template>
71
72 <ng-template pTemplate="emptymessage">
73 <tr>
74 <td colspan="6">
75 <div class="empty-table-message">
76 <ng-container *ngIf="isDisplayingRemoteVideos()" i18n>Your instance doesn't mirror any video.</ng-container>
77 <ng-container *ngIf="!isDisplayingRemoteVideos()" i18n>Your instance has no mirrored videos.</ng-container>
78 </div>
79 </td>
80 </tr>
81 </ng-template>
71</p-table> 82</p-table>
72 83
73 84
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
index 2b62d30a3..f91800175 100644
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
@@ -13,7 +13,7 @@ import { RedundancyService } from '@app/shared/video/redundancy.service'
13@Component({ 13@Component({
14 selector: 'my-video-redundancies-list', 14 selector: 'my-video-redundancies-list',
15 templateUrl: './video-redundancies-list.component.html', 15 templateUrl: './video-redundancies-list.component.html',
16 styleUrls: [ './video-redundancies-list.component.scss' ] 16 styleUrls: [ '../follows.component.scss', './video-redundancies-list.component.scss' ]
17}) 17})
18export class VideoRedundanciesListComponent extends RestTable implements OnInit { 18export class VideoRedundanciesListComponent extends RestTable implements OnInit {
19 private static LOCAL_STORAGE_DISPLAY_TYPE = 'video-redundancies-list-display-type' 19 private static LOCAL_STORAGE_DISPLAY_TYPE = 'video-redundancies-list-display-type'
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 d340b5e57..df0a8247e 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
@@ -17,7 +17,7 @@
17 17
18 <ng-template pTemplate="header"> 18 <ng-template pTemplate="header">
19 <tr> 19 <tr>
20 <th i18n>Account</th> 20 <th style="width: 100%;" i18n>Account</th>
21 <th style="width: 190px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th> 21 <th style="width: 190px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
22 <th style="width: 100px;"></th> <!-- column for action buttons --> 22 <th style="width: 100px;"></th> <!-- column for action buttons -->
23 </tr> 23 </tr>
@@ -25,11 +25,38 @@
25 25
26 <ng-template pTemplate="body" let-accountBlock> 26 <ng-template pTemplate="body" let-accountBlock>
27 <tr> 27 <tr>
28 <td>{{ accountBlock.blockedAccount.nameWithHost }}</td> 28 <td>
29 <a [href]="accountBlock.blockedAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
30 <div class="chip two-lines">
31 <img
32 class="avatar"
33 [src]="accountBlock.blockedAccount.avatar?.path"
34 (error)="switchToDefaultAvatar($event)"
35 alt="Avatar"
36 >
37 <div>
38 {{ accountBlock.blockedAccount.displayName }}
39 <span class="text-muted">{{ accountBlock.blockedAccount.nameWithHost }}</span>
40 </div>
41 </div>
42 </a>
43 </td>
44
29 <td>{{ accountBlock.createdAt }}</td> 45 <td>{{ accountBlock.createdAt }}</td>
30 <td class="action-cell"> 46 <td class="action-cell">
31 <button class="unblock-button" (click)="unblockAccount(accountBlock)" i18n>Unmute</button> 47 <button class="unblock-button" (click)="unblockAccount(accountBlock)" i18n>Unmute</button>
32 </td> 48 </td>
33 </tr> 49 </tr>
34 </ng-template> 50 </ng-template>
51
52 <ng-template pTemplate="emptymessage">
53 <tr>
54 <td colspan="6">
55 <div class="empty-table-message">
56 <ng-container *ngIf="search" i18n>No account found matching current filters.</ng-container>
57 <ng-container *ngIf="!search" i18n>No account found.</ng-container>
58 </div>
59 </td>
60 </tr>
61 </ng-template>
35</p-table> 62</p-table>
diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.ts b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.ts
index 607b1cbe0..6bd015234 100644
--- a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.ts
+++ b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.ts
@@ -4,6 +4,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
4import { RestPagination, RestTable } from '@app/shared' 4import { RestPagination, RestTable } from '@app/shared'
5import { SortMeta } from 'primeng/api' 5import { SortMeta } from 'primeng/api'
6import { AccountBlock, BlocklistService } from '@app/shared/blocklist' 6import { AccountBlock, BlocklistService } from '@app/shared/blocklist'
7import { Actor } from '@app/shared/actor/actor.model'
7 8
8@Component({ 9@Component({
9 selector: 'my-instance-account-blocklist', 10 selector: 'my-instance-account-blocklist',
@@ -34,6 +35,10 @@ export class InstanceAccountBlocklistComponent extends RestTable implements OnIn
34 return 'InstanceAccountBlocklistComponent' 35 return 'InstanceAccountBlocklistComponent'
35 } 36 }
36 37
38 switchToDefaultAvatar ($event: Event) {
39 ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
40 }
41
37 unblockAccount (accountBlock: AccountBlock) { 42 unblockAccount (accountBlock: AccountBlock) {
38 const blockedAccount = accountBlock.blockedAccount 43 const blockedAccount = accountBlock.blockedAccount
39 44
diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html
index b6c87fdc8..d4e6933af 100644
--- a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html
+++ b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html
@@ -21,7 +21,7 @@
21 21
22 <ng-template pTemplate="header"> 22 <ng-template pTemplate="header">
23 <tr> 23 <tr>
24 <th i18n>Instance</th> 24 <th style="width: 100%;" i18n>Instance</th>
25 <th style="width: 190px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th> 25 <th style="width: 190px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
26 <th style="width: 100px;"></th> <!-- column for action buttons --> 26 <th style="width: 100px;"></th> <!-- column for action buttons -->
27 </tr> 27 </tr>
@@ -41,6 +41,17 @@
41 </td> 41 </td>
42 </tr> 42 </tr>
43 </ng-template> 43 </ng-template>
44
45 <ng-template pTemplate="emptymessage">
46 <tr>
47 <td colspan="6">
48 <div class="empty-table-message">
49 <ng-container *ngIf="search" i18n>No server found matching current filters.</ng-container>
50 <ng-container *ngIf="!search" i18n>No server found.</ng-container>
51 </div>
52 </td>
53 </tr>
54 </ng-template>
44</p-table> 55</p-table>
45 56
46<my-batch-domains-modal #batchDomainsModal i18n-action action="Mute domains" (domains)="onDomainsToBlock($event)"> 57<my-batch-domains-modal #batchDomainsModal i18n-action action="Mute domains" (domains)="onDomainsToBlock($event)">
diff --git a/client/src/app/+admin/moderation/moderation.component.scss b/client/src/app/+admin/moderation/moderation.component.scss
index 97af74541..cf06401cf 100644
--- a/client/src/app/+admin/moderation/moderation.component.scss
+++ b/client/src/app/+admin/moderation/moderation.component.scss
@@ -15,6 +15,10 @@
15 } 15 }
16} 16}
17 17
18.empty-table-message {
19 @include empty-state;
20}
21
18.moderation-expanded { 22.moderation-expanded {
19 font-size: 90%; 23 font-size: 90%;
20 24
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
index e2c08f910..c15e98942 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
@@ -39,7 +39,7 @@
39 <div class="chip two-lines"> 39 <div class="chip two-lines">
40 <img 40 <img
41 class="avatar" 41 class="avatar"
42 [src]="videoAbuse.reporterAccount.avatar.path" 42 [src]="videoAbuse.reporterAccount.avatar?.path"
43 (error)="switchToDefaultAvatar($event)" 43 (error)="switchToDefaultAvatar($event)"
44 alt="Avatar" 44 alt="Avatar"
45 > 45 >
@@ -175,6 +175,17 @@
175 </td> 175 </td>
176 </tr> 176 </tr>
177 </ng-template> 177 </ng-template>
178
179 <ng-template pTemplate="emptymessage">
180 <tr>
181 <td colspan="6">
182 <div class="empty-table-message">
183 <ng-container *ngIf="search" i18n>No video abuses found matching current filters.</ng-container>
184 <ng-container *ngIf="!search" i18n>No video abuses found.</ng-container>
185 </div>
186 </td>
187 </tr>
188 </ng-template>
178</p-table> 189</p-table>
179 190
180<my-moderation-comment-modal #moderationCommentModal (commentUpdated)="onModerationCommentUpdated()"></my-moderation-comment-modal> 191<my-moderation-comment-modal #moderationCommentModal (commentUpdated)="onModerationCommentUpdated()"></my-moderation-comment-modal>
diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
index 6375dacd9..eade57b71 100644
--- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
+++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
@@ -82,5 +82,16 @@
82 </td> 82 </td>
83 </tr> 83 </tr>
84 </ng-template> 84 </ng-template>
85
86 <ng-template pTemplate="emptymessage">
87 <tr>
88 <td colspan="6">
89 <div class="empty-table-message">
90 <ng-container *ngIf="search" i18n>No blacklisted video found matching current filters.</ng-container>
91 <ng-container *ngIf="!search" i18n>No blacklisted video found.</ng-container>
92 </div>
93 </td>
94 </tr>
95 </ng-template>
85</p-table> 96</p-table>
86 97
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index cfb14ef65..adeee758e 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -876,6 +876,15 @@
876 } 876 }
877} 877}
878 878
879@mixin empty-state {
880 min-height: 40vh;
881 max-height: 500px;
882
883 display: flex;
884 justify-content: center;
885 align-items: center;
886}
887
879@mixin admin-sub-header-responsive ($horizontal-margins) { 888@mixin admin-sub-header-responsive ($horizontal-margins) {
880 flex-direction: column; 889 flex-direction: column;
881 890