aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-01-08 00:46:38 +0100
committerChocobozzz <chocobozzz@cpy.re>2020-01-10 10:12:09 +0100
commitb061c8edb053d4a7a02f09d93d406f6a8c58006e (patch)
treefdc2e4fcffd1f61c51921af9a8fa1fa4fb79ce79 /client
parent41eb700fceee1085dd0e1a9ce78ecbd0e111eb6e (diff)
downloadPeerTube-b061c8edb053d4a7a02f09d93d406f6a8c58006e.tar.gz
PeerTube-b061c8edb053d4a7a02f09d93d406f6a8c58006e.tar.zst
PeerTube-b061c8edb053d4a7a02f09d93d406f6a8c58006e.zip
Add extra text to button when partially subscribed to all channels
Diffstat (limited to 'client')
-rw-r--r--client/src/app/shared/user-subscription/subscribe-button.component.html17
-rw-r--r--client/src/app/shared/user-subscription/subscribe-button.component.scss13
-rw-r--r--client/src/app/shared/user-subscription/subscribe-button.component.ts6
-rw-r--r--client/src/sass/include/_mixins.scss2
4 files changed, 33 insertions, 5 deletions
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 a119beff6..6ac8af3de 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.html
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.html
@@ -2,10 +2,15 @@
2 [ngClass]="{'subscribe-button': !isAllChannelsSubscribed(), 'unsubscribe-button': isAllChannelsSubscribed()}"> 2 [ngClass]="{'subscribe-button': !isAllChannelsSubscribed(), 'unsubscribe-button': isAllChannelsSubscribed()}">
3 3
4 <ng-template #userLoggedOut> 4 <ng-template #userLoggedOut>
5 <span> 5 <span [ngClass]="{ 'extra-text': subscribeStatus(true).length > 0 }">
6 <ng-container *ngIf="account; then multiple; else single"></ng-container> 6 <ng-container *ngIf="account; then multiple; else single"></ng-container>
7 <ng-template i18n #single>Subscribe</ng-template> 7 <ng-template i18n #single>Subscribe</ng-template>
8 <ng-template i18n #multiple>Subscribe to all channels</ng-template> 8 <ng-template #multiple>
9 <span i18n>Subscribe to all channels</span>
10 <span *ngIf="subscribeStatus(true).length > 0">{{subscribeStatus(true).length}}/{{subscribed.size}}
11 <ng-container i18n>channels subscribed</ng-container>
12 </span>
13 </ng-template>
9 </span> 14 </span>
10 <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count"> 15 <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count">
11 {{ videoChannel.followersCount | myNumberFormatter }} 16 {{ videoChannel.followersCount | myNumberFormatter }}
@@ -24,9 +29,11 @@
24 class="btn btn-sm" role="button" 29 class="btn btn-sm" role="button"
25 (click)="unsubscribe()" i18n 30 (click)="unsubscribe()" i18n
26 > 31 >
27 <ng-container *ngIf="account; then multiple; else single"></ng-container> 32 <span>
28 <ng-template i18n #single>Unsubscribe</ng-template> 33 <ng-container *ngIf="account; then multiple; else single"></ng-container>
29 <ng-template i18n #multiple>Unsubscribe from all channels</ng-template> 34 <ng-template i18n #single>Unsubscribe</ng-template>
35 <ng-template i18n #multiple>Unsubscribe from all channels</ng-template>
36 </span>
30 </button> 37 </button>
31 </ng-template> 38 </ng-template>
32 39
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 92a28aad9..164b917b8 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.scss
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.scss
@@ -69,3 +69,16 @@
69 @include peertube-input-text(100%); 69 @include peertube-input-text(100%);
70 } 70 }
71} 71}
72
73.extra-text {
74 display: flex;
75 flex-direction: column;
76
77 span:first-child {
78 line-height: 75%;
79 }
80
81 span:not(:first-child) {
82 font-size: 60%;
83 }
84}
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 0c1f71c6c..f0bee9d47 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.ts
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.ts
@@ -15,6 +15,12 @@ import { forkJoin } from 'rxjs'
15 styleUrls: [ './subscribe-button.component.scss' ] 15 styleUrls: [ './subscribe-button.component.scss' ]
16}) 16})
17export class SubscribeButtonComponent implements OnInit { 17export class SubscribeButtonComponent implements OnInit {
18 /**
19 * SubscribeButtonComponent can be used with a single VideoChannel passed as [VideoChannel],
20 * or with an account and a full list of that account's videoChannels. The latter is intended
21 * to allow mass un/subscription from an account's page, while keeping the channel-centric
22 * subscription model.
23 */
18 @Input() account: Account 24 @Input() account: Account
19 @Input() videoChannels: VideoChannel[] 25 @Input() videoChannels: VideoChannel[]
20 @Input() displayFollowers = false 26 @Input() displayFollowers = false
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 88cbf3384..099a909bb 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -509,6 +509,8 @@
509 a { 509 a {
510 margin-top: 0; 510 margin-top: 0;
511 margin-bottom: 0; 511 margin-bottom: 0;
512 text-transform: uppercase;
513 font-weight: 600;
512 } 514 }
513 } 515 }
514} 516}