mirror of https://github.com/Chocobozzz/PeerTube
Fix input switch accessibility
parent
11f40299c5
commit
05d6520b22
|
@ -12,6 +12,7 @@
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<my-input-switch
|
<my-input-switch
|
||||||
|
[label]="getWebLabel(notificationType)"
|
||||||
[inputName]="'web-notification-' + notificationType"
|
[inputName]="'web-notification-' + notificationType"
|
||||||
[(ngModel)]="webNotifications[notificationType]"
|
[(ngModel)]="webNotifications[notificationType]"
|
||||||
(ngModelChange)="updateWebSetting(notificationType, webNotifications[notificationType])"
|
(ngModelChange)="updateWebSetting(notificationType, webNotifications[notificationType])"
|
||||||
|
@ -20,6 +21,7 @@
|
||||||
|
|
||||||
<div *ngIf="emailEnabled">
|
<div *ngIf="emailEnabled">
|
||||||
<my-input-switch
|
<my-input-switch
|
||||||
|
[label]="getEmailLabel(notificationType)"
|
||||||
[inputName]="'email-notification-' + notificationType"
|
[inputName]="'email-notification-' + notificationType"
|
||||||
[(ngModel)]="emailNotifications[notificationType]"
|
[(ngModel)]="emailNotifications[notificationType]"
|
||||||
(ngModelChange)="updateEmailSetting(notificationType, emailNotifications[notificationType])"
|
(ngModelChange)="updateEmailSetting(notificationType, emailNotifications[notificationType])"
|
||||||
|
|
|
@ -116,6 +116,14 @@ export class MyAccountNotificationPreferencesComponent implements OnInit {
|
||||||
return this.user.hasRight(rightToHave)
|
return this.user.hasRight(rightToHave)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getWebLabel (notificationType: keyof UserNotificationSetting) {
|
||||||
|
return `Toggle web notification for "${this.labelNotifications[notificationType]}"`
|
||||||
|
}
|
||||||
|
|
||||||
|
getEmailLabel (notificationType: keyof UserNotificationSetting) {
|
||||||
|
return `Toggle email notification for "${this.labelNotifications[notificationType]}"`
|
||||||
|
}
|
||||||
|
|
||||||
updateEmailSetting (field: keyof UserNotificationSetting, value: boolean) {
|
updateEmailSetting (field: keyof UserNotificationSetting, value: boolean) {
|
||||||
if (value === true) this.user.notificationSettings[field] |= UserNotificationSettingValue.EMAIL
|
if (value === true) this.user.notificationSettings[field] |= UserNotificationSettingValue.EMAIL
|
||||||
else this.user.notificationSettings[field] &= ~UserNotificationSettingValue.EMAIL
|
else this.user.notificationSettings[field] &= ~UserNotificationSettingValue.EMAIL
|
||||||
|
|
|
@ -32,7 +32,7 @@ export class MyAccountSettingsComponent implements OnInit, AfterViewChecked {
|
||||||
|
|
||||||
ngAfterViewChecked () {
|
ngAfterViewChecked () {
|
||||||
if (window.location.hash && window.location.hash !== this.lastScrollHash) {
|
if (window.location.hash && window.location.hash !== this.lastScrollHash) {
|
||||||
this.viewportScroller.scrollToAnchor(window.location.hash.replace('#', ''))
|
// this.viewportScroller.scrollToAnchor(window.location.hash.replace('#', ''))
|
||||||
|
|
||||||
this.lastScrollHash = window.location.hash
|
this.lastScrollHash = window.location.hash
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,7 +7,11 @@
|
||||||
[ngbTooltip]="autoPlayNextVideoTooltip" placement="bottom-right auto"
|
[ngbTooltip]="autoPlayNextVideoTooltip" placement="bottom-right auto"
|
||||||
>
|
>
|
||||||
<span i18n>AUTOPLAY</span>
|
<span i18n>AUTOPLAY</span>
|
||||||
<my-input-switch class="small" inputName="autoplay-next-video" [(ngModel)]="autoPlayNextVideo" (ngModelChange)="switchAutoPlayNextVideo()"></my-input-switch>
|
<my-input-switch
|
||||||
|
i18n-label label="Toggle autoplay next video"
|
||||||
|
class="small" inputName="autoplay-next-video"
|
||||||
|
[(ngModel)]="autoPlayNextVideo" (ngModelChange)="switchAutoPlayNextVideo()"
|
||||||
|
></my-input-switch>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -1,2 +1,4 @@
|
||||||
<input type="checkbox" role="switch" [checked]="checked" [name]="inputName" [id]="inputName" (change)="update()" [disabled]="preventUpdate" />
|
<div class="root">
|
||||||
<label [for]="inputName" class="ms-auto">Toggle</label>
|
<input type="checkbox" role="switch" [checked]="checked" [name]="inputName" [id]="inputName" (change)="update()" [disabled]="preventUpdate" />
|
||||||
|
<label [for]="inputName" class="ms-auto">{{ label }}</label>
|
||||||
|
</div>
|
||||||
|
|
|
@ -3,7 +3,8 @@
|
||||||
|
|
||||||
input {
|
input {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -100px;
|
width: 0;
|
||||||
|
height: 0;
|
||||||
left: -100px;
|
left: -100px;
|
||||||
|
|
||||||
+ label {
|
+ label {
|
||||||
|
|
|
@ -17,6 +17,7 @@ export class InputSwitchComponent implements ControlValueAccessor {
|
||||||
@Input() checked = false
|
@Input() checked = false
|
||||||
@Input() inputName: string
|
@Input() inputName: string
|
||||||
@Input() preventUpdate = false
|
@Input() preventUpdate = false
|
||||||
|
@Input() label = $localize`Toggle`
|
||||||
|
|
||||||
propagateChange = (_: any) => { /* empty */ }
|
propagateChange = (_: any) => { /* empty */ }
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue