From 660d11e91e1643927028d2d6870a911f569b34d8 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Tue, 25 Sep 2018 15:42:58 +0200 Subject: [PATCH] refactor subscribe button and comment-add for visitor-interact UX (#1100) * refactor subscribe button for visitor-subscribe UX * refactor comment-add for visitor-interact UX --- .../video-channels.component.html | 2 +- client/src/app/search/search.component.html | 2 +- client/src/app/shared/shared.module.ts | 4 +- .../src/app/shared/user-subscription/index.ts | 1 + .../remote-subscribe.component.html | 25 +++++++ .../remote-subscribe.component.scss | 5 ++ .../remote-subscribe.component.ts | 43 ++++++++++++ .../subscribe-button.component.html | 60 ++++++++++++----- .../subscribe-button.component.scss | 67 +++++++++---------- .../subscribe-button.component.ts | 46 +++++++++++-- .../comment/video-comment-add.component.html | 26 ++++++- .../comment/video-comment-add.component.scss | 14 +++- .../comment/video-comment-add.component.ts | 57 +++++++++++++--- .../comment/video-comments.component.html | 1 - .../+video-watch/video-watch.component.html | 4 +- client/src/sass/application.scss | 9 +++ client/src/sass/include/_bootstrap.scss | 2 +- 17 files changed, 292 insertions(+), 76 deletions(-) create mode 100644 client/src/app/shared/user-subscription/remote-subscribe.component.html create mode 100644 client/src/app/shared/user-subscription/remote-subscribe.component.scss create mode 100644 client/src/app/shared/user-subscription/remote-subscribe.component.ts diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html index 8d6f81e1b..c65b5713d 100644 --- a/client/src/app/+video-channels/video-channels.component.html +++ b/client/src/app/+video-channels/video-channels.component.html @@ -9,7 +9,7 @@
{{ videoChannel.displayName }}
{{ videoChannel.nameWithHost }}
- +
{{ videoChannel.followersCount }} subscribers
diff --git a/client/src/app/search/search.component.html b/client/src/app/search/search.component.html index c4072b291..216905cf0 100644 --- a/client/src/app/search/search.component.html +++ b/client/src/app/search/search.component.html @@ -41,7 +41,7 @@
{{ result.followersCount }} subscribers
- +
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index 1e71feb86..076f1d275 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -53,7 +53,7 @@ import { PeertubeCheckboxComponent } from '@app/shared/forms/peertube-checkbox.c import { VideoImportService } from '@app/shared/video-import/video-import.service' import { ActionDropdownComponent } from '@app/shared/buttons/action-dropdown.component' import { NgbDropdownModule, NgbModalModule, NgbPopoverModule, NgbTabsetModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap' -import { SubscribeButtonComponent, UserSubscriptionService } from '@app/shared/user-subscription' +import { SubscribeButtonComponent, RemoteSubscribeComponent, UserSubscriptionService } from '@app/shared/user-subscription' import { InstanceFeaturesTableComponent } from '@app/shared/instance/instance-features-table.component' import { OverviewService } from '@app/shared/overview' @@ -93,6 +93,7 @@ import { OverviewService } from '@app/shared/overview' ReactiveFileComponent, PeertubeCheckboxComponent, SubscribeButtonComponent, + RemoteSubscribeComponent, InstanceFeaturesTableComponent ], @@ -127,6 +128,7 @@ import { OverviewService } from '@app/shared/overview' ReactiveFileComponent, PeertubeCheckboxComponent, SubscribeButtonComponent, + RemoteSubscribeComponent, InstanceFeaturesTableComponent, NumberFormatterPipe, diff --git a/client/src/app/shared/user-subscription/index.ts b/client/src/app/shared/user-subscription/index.ts index faddae66a..e76940f7b 100644 --- a/client/src/app/shared/user-subscription/index.ts +++ b/client/src/app/shared/user-subscription/index.ts @@ -1,2 +1,3 @@ export * from './user-subscription.service' export * from './subscribe-button.component' +export * from './remote-subscribe.component' diff --git a/client/src/app/shared/user-subscription/remote-subscribe.component.html b/client/src/app/shared/user-subscription/remote-subscribe.component.html new file mode 100644 index 000000000..3762142f2 --- /dev/null +++ b/client/src/app/shared/user-subscription/remote-subscribe.component.html @@ -0,0 +1,25 @@ +
+
+ +
+ + + + + +
\ No newline at end of file diff --git a/client/src/app/shared/user-subscription/remote-subscribe.component.scss b/client/src/app/shared/user-subscription/remote-subscribe.component.scss new file mode 100644 index 000000000..e49271079 --- /dev/null +++ b/client/src/app/shared/user-subscription/remote-subscribe.component.scss @@ -0,0 +1,5 @@ +@import '_mixins'; + +.btn-remote-follow { + @include orange-button; +} \ No newline at end of file diff --git a/client/src/app/shared/user-subscription/remote-subscribe.component.ts b/client/src/app/shared/user-subscription/remote-subscribe.component.ts new file mode 100644 index 000000000..7a81108cd --- /dev/null +++ b/client/src/app/shared/user-subscription/remote-subscribe.component.ts @@ -0,0 +1,43 @@ +import { Component, Input, OnInit } from '@angular/core' +import { FormReactive } from '@app/shared/forms/form-reactive' +import { + FormValidatorService, + UserValidatorsService +} from '@app/shared/forms/form-validators' + +@Component({ + selector: 'my-remote-subscribe', + templateUrl: './remote-subscribe.component.html', + styleUrls: ['./remote-subscribe.component.scss'] +}) +export class RemoteSubscribeComponent extends FormReactive implements OnInit { + @Input() account: string + @Input() interact = false + @Input() showHelp = false + + constructor ( + protected formValidatorService: FormValidatorService, + private userValidatorsService: UserValidatorsService + ) { + super() + } + + ngOnInit () { + this.buildForm({ + text: this.userValidatorsService.USER_EMAIL + }) + } + + onValidKey () { + this.onValueChanged() + if (!this.form.valid) return + + this.formValidated() + } + + formValidated () { + const address = this.form.value['text'] + const [ , hostname ] = address.split('@') + window.open(`https://${hostname}/authorize_interaction?acct=${this.account}`) + } +} diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.html b/client/src/app/shared/user-subscription/subscribe-button.component.html index 34c024c17..b62fb7dfa 100644 --- a/client/src/app/shared/user-subscription/subscribe-button.component.html +++ b/client/src/app/shared/user-subscription/subscribe-button.component.html @@ -1,15 +1,45 @@ - - - - Subscribed - Unsubscribe - - - {{ videoChannel.followersCount | myNumberFormatter }} - - +
+ + + +
+ +
+ +
Using an ActivityPub-compatible account
+ + + +
+ +
Using a syndication feed
+ + +
+
+
\ No newline at end of file diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.scss b/client/src/app/shared/user-subscription/subscribe-button.component.scss index b78d2f59c..7a8a8ee08 100644 --- a/client/src/app/shared/user-subscription/subscribe-button.component.scss +++ b/client/src/app/shared/user-subscription/subscribe-button.component.scss @@ -1,51 +1,46 @@ @import '_variables'; @import '_mixins'; -.subscribe-button { +.btn-group-subscribe { @include peertube-button; - @include orange-button; -} + @include disable-default-a-behaviour; + float: right; + padding: 0; -.unsubscribe-button { - @include peertube-button; - @include grey-button -} + &.btn-group > .btn:not(.dropdown-toggle) { + padding-right: 5px; + font-size: 15px; + } + &.btn-group > .btn-group:not(:first-child) > .btn { + padding-left: 2px; + } -.subscribe-button, -.unsubscribe-button { - display: inline-block; + &.subscribe-button { + .btn { + @include orange-button; + font-weight: 600; + } - &.small { - min-width: 75px; - height: 20px; - line-height: 20px; - font-size: 13px; + span.followers-count { + padding-left:5px; + } } - - &.normal { - min-width: 120px; - height: 30px; - line-height: 30px; - font-size: 16px; + &.unsubscribe-button { + .btn { + @include grey-button; + font-weight: 600; + } } -} -.unsubscribe-button { - .subscribed { - display: inline; + .dropdown-header { + padding-left: 1rem; } - .unsubscribe { - display: none; + /deep/ form { + padding: 0.25rem 1rem; } - &:hover { - .subscribed { - display: none; - } - - .unsubscribe { - display: inline; - } + input { + @include peertube-input-text(100%); } -} \ No newline at end of file +} diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.ts b/client/src/app/shared/user-subscription/subscribe-button.component.ts index b5873a2ee..e3c758942 100644 --- a/client/src/app/shared/user-subscription/subscribe-button.component.ts +++ b/client/src/app/shared/user-subscription/subscribe-button.component.ts @@ -1,4 +1,6 @@ import { Component, Input, OnInit } from '@angular/core' +import { Router } from '@angular/router' +import { AuthService } from '@app/core' import { UserSubscriptionService } from '@app/shared/user-subscription/user-subscription.service' import { VideoChannel } from '@app/shared/video-channel/video-channel.model' import { NotificationsService } from 'angular2-notifications' @@ -17,6 +19,8 @@ export class SubscribeButtonComponent implements OnInit { subscribed: boolean constructor ( + private authService: AuthService, + private router: Router, private notificationsService: NotificationsService, private userSubscriptionService: UserSubscriptionService, private i18n: I18n @@ -26,16 +30,30 @@ export class SubscribeButtonComponent implements OnInit { return this.videoChannel.name + '@' + this.videoChannel.host } + get uriAccount () { + return this.videoChannel.ownerAccount.name + '@' + this.videoChannel.host + } + ngOnInit () { - this.userSubscriptionService.isSubscriptionExists(this.uri) - .subscribe( - res => this.subscribed = res[this.uri], + if (this.isUserLoggedIn()) { + this.userSubscriptionService.isSubscriptionExists(this.uri) + .subscribe( + res => this.subscribed = res[this.uri], - err => this.notificationsService.error(this.i18n('Error'), err.message) - ) + err => this.notificationsService.error(this.i18n('Error'), err.message) + ) + } } subscribe () { + if (this.isUserLoggedIn()) { + this.localSubscribe() + } else { + this.gotoLogin() + } + } + + localSubscribe () { this.userSubscriptionService.addSubscription(this.uri) .subscribe( () => { @@ -52,6 +70,12 @@ export class SubscribeButtonComponent implements OnInit { } unsubscribe () { + if (this.isUserLoggedIn()) { + this.localUnsubscribe() + } + } + + localUnsubscribe () { this.userSubscriptionService.deleteSubscription(this.uri) .subscribe( () => { @@ -66,4 +90,16 @@ export class SubscribeButtonComponent implements OnInit { err => this.notificationsService.error(this.i18n('Error'), err.message) ) } + + isUserLoggedIn () { + return this.authService.isLoggedIn() + } + + gotoLogin () { + this.router.navigate([ '/login' ]) + } + + rssOpen () { + window.open('') + } } diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html index f65a88d20..9441edfb1 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html +++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html @@ -1,9 +1,11 @@
- Avatar + Avatar