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/shared/shared-main/buttons | |
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/shared/shared-main/buttons')
6 files changed, 44 insertions, 11 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 | |||
4 | my-small-loader ::ng-deep .root { | 8 | my-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 | ||
10 | export class DeleteButtonComponent implements OnInit { | 10 | export 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 @@ | |||
1 | import { Component, Input } from '@angular/core' | 1 | import { Component, Input, OnInit } from '@angular/core' |
2 | import { 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 | ||
9 | export class EditButtonComponent { | 10 | export 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 | } |