aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
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 /client/src/app/shared
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>
Diffstat (limited to 'client/src/app/shared')
-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
9 files changed, 53 insertions, 20 deletions
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