aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-11-26 15:29:55 +0100
committerChocobozzz <me@florianbigard.com>2021-11-26 15:29:55 +0100
commitdc4e0ddb742c04bb16a4b921029af263bc240b0e (patch)
tree307fbb1f826fc4718dc2502fb04c6960adfaf5d7
parent50a66a69a0cde2cc3f9d46acf7fd03f99d275b0c (diff)
downloadPeerTube-dc4e0ddb742c04bb16a4b921029af263bc240b0e.tar.gz
PeerTube-dc4e0ddb742c04bb16a4b921029af263bc240b0e.tar.zst
PeerTube-dc4e0ddb742c04bb16a4b921029af263bc240b0e.zip
Improve notification settings UI
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html48
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss4
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts56
3 files changed, 77 insertions, 31 deletions
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
index 75951006d..c3cfe0314 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
@@ -1,25 +1,29 @@
1<div class="custom-row"> 1<div *ngIf="webNotifications">
2 <div i18n>Activities</div> 2 <ng-container *ngFor="let group of notificationSettingGroups">
3 <div i18n>Web</div> 3 <div class="header custom-row">
4 <div i18n *ngIf="emailEnabled">Email</div> 4 <div i18n>{{ group.label }}</div>
5</div> 5 <div i18n>Web</div>
6 <div i18n *ngIf="emailEnabled">Email</div>
7 </div>
6 8
7<ng-container *ngFor="let notificationType of notificationSettingKeys"> 9 <ng-container *ngFor="let notificationType of group.keys">
8 <div class="custom-row" *ngIf="hasUserRight(notificationType)"> 10 <div class="custom-row" *ngIf="hasUserRight(notificationType)">
9 <div>{{ labelNotifications[notificationType] }}</div> 11 <div>{{ labelNotifications[notificationType] }}</div>
10 12
11 <div> 13 <div>
12 <my-input-switch 14 <my-input-switch
13 [(ngModel)]="webNotifications[notificationType]" 15 [(ngModel)]="webNotifications[notificationType]"
14 (ngModelChange)="updateWebSetting(notificationType, webNotifications[notificationType])" 16 (ngModelChange)="updateWebSetting(notificationType, webNotifications[notificationType])"
15 ></my-input-switch> 17 ></my-input-switch>
16 </div> 18 </div>
17 19
18 <div *ngIf="emailEnabled"> 20 <div *ngIf="emailEnabled">
19 <my-input-switch 21 <my-input-switch
20 [(ngModel)]="emailNotifications[notificationType]" 22 [(ngModel)]="emailNotifications[notificationType]"
21 (ngModelChange)="updateEmailSetting(notificationType, emailNotifications[notificationType])" 23 (ngModelChange)="updateEmailSetting(notificationType, emailNotifications[notificationType])"
22 ></my-input-switch> 24 ></my-input-switch>
23 </div> 25 </div>
24 </div> 26 </div>
25</ng-container> 27 </ng-container>
28 </ng-container>
29</div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
index b4a7a0a6d..2fe1f9536 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
@@ -6,8 +6,10 @@
6 align-items: center; 6 align-items: center;
7 border-bottom: 1px solid $separator-border-color; 7 border-bottom: 1px solid $separator-border-color;
8 8
9 &:first-child { 9 &.header {
10 font-size: 16px; 10 font-size: 16px;
11 font-weight: $font-semibold;
12 margin-top: 10px;
11 } 13 }
12 14
13 > div { 15 > div {
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
index 1eac06234..09da979ab 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
@@ -11,14 +11,14 @@ import { UserNotificationSetting, UserNotificationSettingValue, UserRight } from
11 styleUrls: [ './my-account-notification-preferences.component.scss' ] 11 styleUrls: [ './my-account-notification-preferences.component.scss' ]
12}) 12})
13export class MyAccountNotificationPreferencesComponent implements OnInit { 13export class MyAccountNotificationPreferencesComponent implements OnInit {
14 @Input() user: User = null 14 @Input() user: User
15 @Input() userInformationLoaded: Subject<any> 15 @Input() userInformationLoaded: Subject<any>
16 16
17 notificationSettingKeys: (keyof UserNotificationSetting)[] = [] 17 notificationSettingGroups: { label: string, keys: (keyof UserNotificationSetting)[] }[] = []
18 emailNotifications: { [ id in keyof UserNotificationSetting ]: boolean } = {} as any 18 emailNotifications: { [ id in keyof UserNotificationSetting ]?: boolean } = {}
19 webNotifications: { [ id in keyof UserNotificationSetting ]: boolean } = {} as any 19 webNotifications: { [ id in keyof UserNotificationSetting ]?: boolean } = {}
20 labelNotifications: { [ id in keyof UserNotificationSetting ]: string } = {} as any 20 labelNotifications: { [ id in keyof UserNotificationSetting ]?: string } = {}
21 rightNotifications: { [ id in keyof Partial<UserNotificationSetting> ]: UserRight } = {} as any 21 rightNotifications: { [ id in keyof Partial<UserNotificationSetting> ]?: UserRight } = {}
22 emailEnabled = false 22 emailEnabled = false
23 23
24 private savePreferences = debounce(this.savePreferencesImpl.bind(this), 500) 24 private savePreferences = debounce(this.savePreferencesImpl.bind(this), 500)
@@ -32,7 +32,7 @@ export class MyAccountNotificationPreferencesComponent implements OnInit {
32 newVideoFromSubscription: $localize`New video from your subscriptions`, 32 newVideoFromSubscription: $localize`New video from your subscriptions`,
33 newCommentOnMyVideo: $localize`New comment on your video`, 33 newCommentOnMyVideo: $localize`New comment on your video`,
34 abuseAsModerator: $localize`New abuse`, 34 abuseAsModerator: $localize`New abuse`,
35 videoAutoBlacklistAsModerator: $localize`Video blocked automatically waiting review`, 35 videoAutoBlacklistAsModerator: $localize`An automatically blocked video is awaiting review`,
36 blacklistOnMyVideo: $localize`One of your video is blocked/unblocked`, 36 blacklistOnMyVideo: $localize`One of your video is blocked/unblocked`,
37 myVideoPublished: $localize`Video published (after transcoding/scheduled update)`, 37 myVideoPublished: $localize`Video published (after transcoding/scheduled update)`,
38 myVideoImportFinished: $localize`Video import finished`, 38 myVideoImportFinished: $localize`Video import finished`,
@@ -46,7 +46,47 @@ export class MyAccountNotificationPreferencesComponent implements OnInit {
46 newPeerTubeVersion: $localize`A new PeerTube version is available`, 46 newPeerTubeVersion: $localize`A new PeerTube version is available`,
47 newPluginVersion: $localize`One of your plugin/theme has a new available version` 47 newPluginVersion: $localize`One of your plugin/theme has a new available version`
48 } 48 }
49 this.notificationSettingKeys = Object.keys(this.labelNotifications) as (keyof UserNotificationSetting)[] 49 this.notificationSettingGroups = [
50 {
51 label: $localize`Social`,
52 keys: [
53 'newVideoFromSubscription',
54 'newFollow',
55 'commentMention'
56 ]
57 },
58
59 {
60 label: $localize`Your videos`,
61 keys: [
62 'newCommentOnMyVideo',
63 'blacklistOnMyVideo',
64 'myVideoPublished',
65 'myVideoImportFinished'
66 ]
67 },
68
69 {
70 label: $localize`Moderation`,
71 keys: [
72 'abuseStateChange',
73 'abuseNewMessage',
74 'abuseAsModerator',
75 'videoAutoBlacklistAsModerator'
76 ]
77 },
78
79 {
80 label: $localize`Administration`,
81 keys: [
82 'newUserRegistration',
83 'newInstanceFollower',
84 'autoInstanceFollowing',
85 'newPeerTubeVersion',
86 'newPluginVersion'
87 ]
88 }
89 ]
50 90
51 this.rightNotifications = { 91 this.rightNotifications = {
52 abuseAsModerator: UserRight.MANAGE_ABUSES, 92 abuseAsModerator: UserRight.MANAGE_ABUSES,