interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Improve notification settings UI

This commit is contained in:
Chocobozzz 2021-11-26 15:29:55 +01:00
parent 50a66a69a0
commit dc4e0ddb74
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
3 changed files with 79 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
View File

@ -1,25 +1,29 @@
<div class="custom-row">
<div i18n>Activities</div>
<div i18n>Web</div>
<div i18n *ngIf="emailEnabled">Email</div>
<div *ngIf="webNotifications">
<ng-container *ngFor="let group of notificationSettingGroups">
<div class="header custom-row">
<div i18n>{{ group.label }}</div>
<div i18n>Web</div>
<div i18n *ngIf="emailEnabled">Email</div>
</div>
<ng-container *ngFor="let notificationType of group.keys">
<div class="custom-row" *ngIf="hasUserRight(notificationType)">
<div>{{ labelNotifications[notificationType] }}</div>
<div>
<my-input-switch
[(ngModel)]="webNotifications[notificationType]"
(ngModelChange)="updateWebSetting(notificationType, webNotifications[notificationType])"
></my-input-switch>
</div>
<div *ngIf="emailEnabled">
<my-input-switch
[(ngModel)]="emailNotifications[notificationType]"
(ngModelChange)="updateEmailSetting(notificationType, emailNotifications[notificationType])"
></my-input-switch>
</div>
</div>
</ng-container>
</ng-container>
</div>
<ng-container *ngFor="let notificationType of notificationSettingKeys">
<div class="custom-row" *ngIf="hasUserRight(notificationType)">
<div>{{ labelNotifications[notificationType] }}</div>
<div>
<my-input-switch
[(ngModel)]="webNotifications[notificationType]"
(ngModelChange)="updateWebSetting(notificationType, webNotifications[notificationType])"
></my-input-switch>
</div>
<div *ngIf="emailEnabled">
<my-input-switch
[(ngModel)]="emailNotifications[notificationType]"
(ngModelChange)="updateEmailSetting(notificationType, emailNotifications[notificationType])"
></my-input-switch>
</div>
</div>
</ng-container>

4
client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
View File

@ -6,8 +6,10 @@
align-items: center;
border-bottom: 1px solid $separator-border-color;
&:first-child {
&.header {
font-size: 16px;
font-weight: $font-semibold;
margin-top: 10px;
}
> div {

56
client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
View File

@ -11,14 +11,14 @@ import { UserNotificationSetting, UserNotificationSettingValue, UserRight } from
styleUrls: [ './my-account-notification-preferences.component.scss' ]
})
export class MyAccountNotificationPreferencesComponent implements OnInit {
@Input() user: User = null
@Input() user: User
@Input() userInformationLoaded: Subject<any>
notificationSettingKeys: (keyof UserNotificationSetting)[] = []
emailNotifications: { [ id in keyof UserNotificationSetting ]: boolean } = {} as any
webNotifications: { [ id in keyof UserNotificationSetting ]: boolean } = {} as any
labelNotifications: { [ id in keyof UserNotificationSetting ]: string } = {} as any
rightNotifications: { [ id in keyof Partial<UserNotificationSetting> ]: UserRight } = {} as any
notificationSettingGroups: { label: string, keys: (keyof UserNotificationSetting)[] }[] = []
emailNotifications: { [ id in keyof UserNotificationSetting ]?: boolean } = {}
webNotifications: { [ id in keyof UserNotificationSetting ]?: boolean } = {}
labelNotifications: { [ id in keyof UserNotificationSetting ]?: string } = {}
rightNotifications: { [ id in keyof Partial<UserNotificationSetting> ]?: UserRight } = {}
emailEnabled = false
private savePreferences = debounce(this.savePreferencesImpl.bind(this), 500)
@ -32,7 +32,7 @@ export class MyAccountNotificationPreferencesComponent implements OnInit {
newVideoFromSubscription: $localize`New video from your subscriptions`,
newCommentOnMyVideo: $localize`New comment on your video`,
abuseAsModerator: $localize`New abuse`,
videoAutoBlacklistAsModerator: $localize`Video blocked automatically waiting review`,
videoAutoBlacklistAsModerator: $localize`An automatically blocked video is awaiting review`,
blacklistOnMyVideo: $localize`One of your video is blocked/unblocked`,
myVideoPublished: $localize`Video published (after transcoding/scheduled update)`,
myVideoImportFinished: $localize`Video import finished`,
@ -46,7 +46,47 @@ export class MyAccountNotificationPreferencesComponent implements OnInit {
newPeerTubeVersion: $localize`A new PeerTube version is available`,
newPluginVersion: $localize`One of your plugin/theme has a new available version`
}
this.notificationSettingKeys = Object.keys(this.labelNotifications) as (keyof UserNotificationSetting)[]
this.notificationSettingGroups = [
{
label: $localize`Social`,
keys: [
'newVideoFromSubscription',
'newFollow',
'commentMention'
]
},
{
label: $localize`Your videos`,
keys: [
'newCommentOnMyVideo',
'blacklistOnMyVideo',
'myVideoPublished',
'myVideoImportFinished'
]
},
{
label: $localize`Moderation`,
keys: [
'abuseStateChange',
'abuseNewMessage',
'abuseAsModerator',
'videoAutoBlacklistAsModerator'
]
},
{
label: $localize`Administration`,
keys: [
'newUserRegistration',
'newInstanceFollower',
'autoInstanceFollowing',
'newPeerTubeVersion',
'newPluginVersion'
]
}
]
this.rightNotifications = {
abuseAsModerator: UserRight.MANAGE_ABUSES,