From 244b4ae3973bc1511464a08158a123767f83179c Mon Sep 17 00:00:00 2001 From: BO41 Date: Thu, 18 Oct 2018 09:08:59 +0200 Subject: NoImplicitAny flag true (#1157) this enables the `noImplicitAny` flag in the Typescript compiler > When the noImplicitAny flag is true and the TypeScript compiler cannot infer the type, it still generates the JavaScript files, but it also reports an error. Many seasoned developers prefer this stricter setting because type checking catches more unintentional errors at compile time. closes: #1131 replaces #1137 --- client/src/app/menu/menu.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'client/src/app/menu') diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts index 95926f5f0..348700c09 100644 --- a/client/src/app/menu/menu.component.ts +++ b/client/src/app/menu/menu.component.ts @@ -18,7 +18,7 @@ export class MenuComponent implements OnInit { userHasAdminAccess = false helpVisible = false - private routesPerRight = { + private routesPerRight: any = { [UserRight.MANAGE_USERS]: '/admin/users', [UserRight.MANAGE_SERVER_FOLLOW]: '/admin/friends', [UserRight.MANAGE_VIDEO_ABUSES]: '/admin/moderation/video-abuses', -- cgit v1.2.3 From c199c427d4ae586339822320f20f512a7a19dc3f Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 18 Oct 2018 14:35:31 +0200 Subject: Better typings --- client/src/app/menu/menu.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'client/src/app/menu') diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts index 348700c09..371beb4a5 100644 --- a/client/src/app/menu/menu.component.ts +++ b/client/src/app/menu/menu.component.ts @@ -18,7 +18,7 @@ export class MenuComponent implements OnInit { userHasAdminAccess = false helpVisible = false - private routesPerRight: any = { + private routesPerRight: { [ role in UserRight ]?: string } = { [UserRight.MANAGE_USERS]: '/admin/users', [UserRight.MANAGE_SERVER_FOLLOW]: '/admin/friends', [UserRight.MANAGE_VIDEO_ABUSES]: '/admin/moderation/video-abuses', -- cgit v1.2.3 From e6d5a4f1ea917098058f9db2e28f1c039d8f5c00 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 15 Nov 2018 11:41:25 +0100 Subject: Add background effect to active menu page --- client/src/app/menu/menu.component.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'client/src/app/menu') diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index a842765ba..b271ebfd2 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -131,10 +131,14 @@ menu { transition: background-color .1s ease-in-out; @include disable-default-a-behaviour; - &:hover, &.focus-visible { + &.active { background-color: rgba(255, 255, 255, 0.15); } + &:hover, &.focus-visible { + background-color: rgba(255, 255, 255, 0.10); + } + .icon { @include icon(22px); -- cgit v1.2.3 From 9c53ef67e303d6c2742126670963db8cfc81e6d2 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 5 Dec 2018 10:53:14 +0100 Subject: Add button to help to translate peertube --- client/src/app/menu/language-chooser.component.html | 5 +++++ client/src/app/menu/language-chooser.component.scss | 7 ++++++- 2 files changed, 11 insertions(+), 1 deletion(-) (limited to 'client/src/app/menu') diff --git a/client/src/app/menu/language-chooser.component.html b/client/src/app/menu/language-chooser.component.html index c37bf2826..c79609898 100644 --- a/client/src/app/menu/language-chooser.component.html +++ b/client/src/app/menu/language-chooser.component.html @@ -4,6 +4,11 @@ + + + Help to translate PeerTube! + +
{{ lang.label }}
diff --git a/client/src/app/menu/language-chooser.component.scss b/client/src/app/menu/language-chooser.component.scss index 944e86f46..72deb3952 100644 --- a/client/src/app/menu/language-chooser.component.scss +++ b/client/src/app/menu/language-chooser.component.scss @@ -1,6 +1,11 @@ @import '_variables'; @import '_mixins'; +.help-to-translate { + @include peertube-button-link; + @include orange-button; +} + .modal-body { text-align: center; @@ -9,4 +14,4 @@ font-size: 16px; margin: 15px; } -} \ No newline at end of file +} -- cgit v1.2.3 From 2f1548fda32c3ba9e53913270394eedfacd55986 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 8 Jan 2019 11:26:41 +0100 Subject: Add notifications in the client --- .../app/menu/avatar-notification.component.html | 23 ++++++ .../app/menu/avatar-notification.component.scss | 82 ++++++++++++++++++++++ .../src/app/menu/avatar-notification.component.ts | 64 +++++++++++++++++ client/src/app/menu/index.ts | 2 + client/src/app/menu/menu.component.html | 6 +- client/src/app/menu/menu.component.scss | 7 -- 6 files changed, 173 insertions(+), 11 deletions(-) create mode 100644 client/src/app/menu/avatar-notification.component.html create mode 100644 client/src/app/menu/avatar-notification.component.scss create mode 100644 client/src/app/menu/avatar-notification.component.ts (limited to 'client/src/app/menu') diff --git a/client/src/app/menu/avatar-notification.component.html b/client/src/app/menu/avatar-notification.component.html new file mode 100644 index 000000000..2f0b7c669 --- /dev/null +++ b/client/src/app/menu/avatar-notification.component.html @@ -0,0 +1,23 @@ +
+
{{ unreadNotifications }}
+ + Avatar +
+ + +
+
Notifications
+ + +
+ + + + See all your notifications + diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss new file mode 100644 index 000000000..c86667469 --- /dev/null +++ b/client/src/app/menu/avatar-notification.component.scss @@ -0,0 +1,82 @@ +@import '_variables'; +@import '_mixins'; + +/deep/ { + .popover-notifications.popover { + max-width: 400px; + + .popover-body { + padding: 0; + font-size: 14px; + font-family: $main-fonts; + overflow-y: auto; + max-height: 500px; + box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30); + + .notifications-header { + display: flex; + justify-content: space-between; + + background-color: rgba(0, 0, 0, 0.10); + align-items: center; + padding: 0 10px; + font-size: 16px; + height: 50px; + + a { + @include disable-default-a-behaviour; + + color: rgba(20, 20, 20, 0.5); + + &:hover { + color: rgba(20, 20, 20, 0.8); + } + } + } + + .all-notifications { + display: flex; + align-items: center; + justify-content: center; + font-weight: $font-semibold; + color: var(--mainForegroundColor); + height: 30px; + } + } + } +} + +.notification-avatar { + cursor: pointer; + position: relative; + + img, + .unread-notifications { + margin-left: 20px; + } + + img { + @include avatar(34px); + + margin-right: 10px; + } + + .unread-notifications { + position: absolute; + top: -5px; + left: -5px; + + display: flex; + align-items: center; + justify-content: center; + + background-color: var(--mainColor); + color: var(--mainBackgroundColor); + font-size: 10px; + font-weight: $font-semibold; + + border-radius: 15px; + width: 15px; + height: 15px; + } +} diff --git a/client/src/app/menu/avatar-notification.component.ts b/client/src/app/menu/avatar-notification.component.ts new file mode 100644 index 000000000..60e090726 --- /dev/null +++ b/client/src/app/menu/avatar-notification.component.ts @@ -0,0 +1,64 @@ +import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core' +import { User } from '../shared/users/user.model' +import { UserNotificationService } from '@app/shared/users/user-notification.service' +import { Subscription } from 'rxjs' +import { Notifier } from '@app/core' +import { NgbPopover } from '@ng-bootstrap/ng-bootstrap' +import { NavigationEnd, Router } from '@angular/router' +import { filter } from 'rxjs/operators' + +@Component({ + selector: 'my-avatar-notification', + templateUrl: './avatar-notification.component.html', + styleUrls: [ './avatar-notification.component.scss' ] +}) +export class AvatarNotificationComponent implements OnInit, OnDestroy { + @ViewChild('popover') popover: NgbPopover + @Input() user: User + + unreadNotifications = 0 + + private notificationSub: Subscription + private routeSub: Subscription + + constructor ( + private userNotificationService: UserNotificationService, + private notifier: Notifier, + private router: Router + ) {} + + ngOnInit () { + this.userNotificationService.countUnreadNotifications() + .subscribe( + result => { + this.unreadNotifications = Math.min(result, 99) // Limit number to 99 + this.subscribeToNotifications() + }, + + err => this.notifier.error(err.message) + ) + + this.routeSub = this.router.events + .pipe(filter(event => event instanceof NavigationEnd)) + .subscribe(() => this.closePopover()) + } + + ngOnDestroy () { + if (this.notificationSub) this.notificationSub.unsubscribe() + if (this.routeSub) this.routeSub.unsubscribe() + } + + closePopover () { + this.popover.close() + } + + private subscribeToNotifications () { + this.notificationSub = this.userNotificationService.getMyNotificationsSocket() + .subscribe(data => { + if (data.type === 'new') return this.unreadNotifications++ + if (data.type === 'read') return this.unreadNotifications-- + if (data.type === 'read-all') return this.unreadNotifications = 0 + }) + } + +} diff --git a/client/src/app/menu/index.ts b/client/src/app/menu/index.ts index 421271c12..39dbde750 100644 --- a/client/src/app/menu/index.ts +++ b/client/src/app/menu/index.ts @@ -1 +1,3 @@ +export * from './language-chooser.component' +export * from './avatar-notification.component' export * from './menu.component' diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html index e04bdf3d6..aa5bfa9c9 100644 --- a/client/src/app/menu/menu.component.html +++ b/client/src/app/menu/menu.component.html @@ -2,9 +2,7 @@
- - Avatar - +
{{ user.account?.displayName }} @@ -97,4 +95,4 @@
- \ No newline at end of file + diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index b271ebfd2..a4aaadc7f 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -39,13 +39,6 @@ menu { justify-content: center; margin-bottom: 35px; - img { - @include avatar(34px); - - margin-left: 20px; - margin-right: 10px; - } - .logged-in-info { flex-grow: 1; -- cgit v1.2.3 From f242c2e01e3423ad63a9a6d904062256d60b6971 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 10 Jan 2019 16:28:31 +0100 Subject: Improve "no notifications" message --- client/src/app/menu/avatar-notification.component.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'client/src/app/menu') diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss index c86667469..47d04ace3 100644 --- a/client/src/app/menu/avatar-notification.component.scss +++ b/client/src/app/menu/avatar-notification.component.scss @@ -11,6 +11,7 @@ font-family: $main-fonts; overflow-y: auto; max-height: 500px; + min-width: 200px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30); .notifications-header { -- cgit v1.2.3 From f57ad0d22c527328b1412aa1c8c3f0d4819219ca Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 14 Jan 2019 15:12:20 +0100 Subject: Fix scroll in notifications page --- client/src/app/menu/avatar-notification.component.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'client/src/app/menu') diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss index 47d04ace3..807385022 100644 --- a/client/src/app/menu/avatar-notification.component.scss +++ b/client/src/app/menu/avatar-notification.component.scss @@ -13,6 +13,7 @@ max-height: 500px; min-width: 200px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30); + overflow-y: auto; .notifications-header { display: flex; -- cgit v1.2.3 From 9a39392a7e6b3f180104856a4ea893e5baf86a02 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 14 Jan 2019 15:32:09 +0100 Subject: Fix notification socket Should be in core module to share the same subject to all the app --- client/src/app/menu/avatar-notification.component.html | 2 +- client/src/app/menu/avatar-notification.component.ts | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) (limited to 'client/src/app/menu') diff --git a/client/src/app/menu/avatar-notification.component.html b/client/src/app/menu/avatar-notification.component.html index 2f0b7c669..4ef3f0e89 100644 --- a/client/src/app/menu/avatar-notification.component.html +++ b/client/src/app/menu/avatar-notification.component.html @@ -17,7 +17,7 @@ > - + See all your notifications diff --git a/client/src/app/menu/avatar-notification.component.ts b/client/src/app/menu/avatar-notification.component.ts index 60e090726..f1af08096 100644 --- a/client/src/app/menu/avatar-notification.component.ts +++ b/client/src/app/menu/avatar-notification.component.ts @@ -2,7 +2,7 @@ import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core' import { User } from '../shared/users/user.model' import { UserNotificationService } from '@app/shared/users/user-notification.service' import { Subscription } from 'rxjs' -import { Notifier } from '@app/core' +import { Notifier, UserNotificationSocket } from '@app/core' import { NgbPopover } from '@ng-bootstrap/ng-bootstrap' import { NavigationEnd, Router } from '@angular/router' import { filter } from 'rxjs/operators' @@ -23,6 +23,7 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy { constructor ( private userNotificationService: UserNotificationService, + private userNotificationSocket: UserNotificationSocket, private notifier: Notifier, private router: Router ) {} @@ -53,7 +54,7 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy { } private subscribeToNotifications () { - this.notificationSub = this.userNotificationService.getMyNotificationsSocket() + this.notificationSub = this.userNotificationSocket.getMyNotificationsSocket() .subscribe(data => { if (data.type === 'new') return this.unreadNotifications++ if (data.type === 'read') return this.unreadNotifications-- -- cgit v1.2.3 From 457bb213b273a9b206cc5654eb085cede4e916ad Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 16 Jan 2019 16:05:40 +0100 Subject: Refactor how we use icons Inject them in an angular component so we can easily change their color --- client/src/app/menu/avatar-notification.component.scss | 2 +- client/src/app/menu/language-chooser.component.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'client/src/app/menu') diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss index 807385022..f6242eeae 100644 --- a/client/src/app/menu/avatar-notification.component.scss +++ b/client/src/app/menu/avatar-notification.component.scss @@ -42,7 +42,7 @@ justify-content: center; font-weight: $font-semibold; color: var(--mainForegroundColor); - height: 30px; + padding: 7px 0; } } } diff --git a/client/src/app/menu/language-chooser.component.html b/client/src/app/menu/language-chooser.component.html index c79609898..a62b33dda 100644 --- a/client/src/app/menu/language-chooser.component.html +++ b/client/src/app/menu/language-chooser.component.html @@ -1,7 +1,7 @@

Change the language

- +
-- cgit v1.2.3 From aa87909287c4f4d38696244e32828265b040c7d5 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 17 Jan 2019 11:51:08 +0100 Subject: Fix calendar in dark mode --- client/src/app/menu/avatar-notification.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'client/src/app/menu') diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss index f6242eeae..a21e7beac 100644 --- a/client/src/app/menu/avatar-notification.component.scss +++ b/client/src/app/menu/avatar-notification.component.scss @@ -73,7 +73,7 @@ justify-content: center; background-color: var(--mainColor); - color: var(--mainBackgroundColor); + color: var(#fff); font-size: 10px; font-weight: $font-semibold; -- cgit v1.2.3 From fdebd9a3bdcc3ea3881f2234a0f214c2588de3e4 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 21 Jan 2019 14:03:04 +0100 Subject: Fix notification popover width --- client/src/app/menu/avatar-notification.component.scss | 13 ++++++++++--- client/src/app/menu/menu.component.scss | 2 +- 2 files changed, 11 insertions(+), 4 deletions(-) (limited to 'client/src/app/menu') diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss index a21e7beac..e785db788 100644 --- a/client/src/app/menu/avatar-notification.component.scss +++ b/client/src/app/menu/avatar-notification.component.scss @@ -3,7 +3,7 @@ /deep/ { .popover-notifications.popover { - max-width: 400px; + max-width: none; .popover-body { padding: 0; @@ -11,9 +11,8 @@ font-family: $main-fonts; overflow-y: auto; max-height: 500px; - min-width: 200px; + width: 400px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30); - overflow-y: auto; .notifications-header { display: flex; @@ -82,3 +81,11 @@ height: 15px; } } + +@media screen and (max-width: $mobile-view) { + /deep/ { + .popover-notifications.popover .popover-body { + width: 400px; + } + } +} diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index a4aaadc7f..24b1a4db3 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -243,7 +243,7 @@ menu { } } -@media screen and (max-width: 400px) { +@media screen and (max-width: $mobile-view) { .menu-wrapper { width: 100% !important; } -- cgit v1.2.3 From 185a4abd23ba07ee252655574506755c0425c540 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 28 Jan 2019 09:55:09 +0100 Subject: Fix menu overflow on mobile screens --- client/src/app/menu/menu.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'client/src/app/menu') diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 24b1a4db3..f30b89413 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -16,7 +16,7 @@ menu { height: 100%; white-space: nowrap; text-overflow: ellipsis; - overflow: hidden; + overflow: auto; color: var(--menuForegroundColor); display: flex; flex-direction: column; -- cgit v1.2.3