Add extra text to button when partially subscribed to all channels

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 @@
     [ngClass]="{'subscribe-button': !isAllChannelsSubscribed(), 'unsubscribe-button': isAllChannelsSubscribed()}">
 
   <ng-template #userLoggedOut>
-    <span>
+    <span [ngClass]="{ 'extra-text': subscribeStatus(true).length > 0 }">
       <ng-container *ngIf="account; then multiple; else single"></ng-container>
       <ng-template i18n #single>Subscribe</ng-template>
-      <ng-template i18n #multiple>Subscribe to all channels</ng-template>
+      <ng-template #multiple>
+        <span i18n>Subscribe to all channels</span>
+        <span *ngIf="subscribeStatus(true).length > 0">{{subscribeStatus(true).length}}/{{subscribed.size}} 
+          <ng-container i18n>channels subscribed</ng-container>
+        </span>
+      </ng-template>
     </span>
     <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count">
       {{ videoChannel.followersCount | myNumberFormatter }}
@@ -24,9 +29,11 @@
       class="btn btn-sm" role="button"
       (click)="unsubscribe()" i18n
     >
-      <ng-container *ngIf="account; then multiple; else single"></ng-container>
-      <ng-template i18n #single>Unsubscribe</ng-template>
-      <ng-template i18n #multiple>Unsubscribe from all channels</ng-template>
+      <span>
+        <ng-container *ngIf="account; then multiple; else single"></ng-container>
+        <ng-template i18n #single>Unsubscribe</ng-template>
+        <ng-template i18n #multiple>Unsubscribe from all channels</ng-template>
+      </span>
     </button>
   </ng-template>
 
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 @@
     @include peertube-input-text(100%);
   }
 }
+
+.extra-text {
+  display: flex;
+  flex-direction: column;
+
+  span:first-child {
+    line-height: 75%;
+  }
+
+  span:not(:first-child) {
+    font-size: 60%;
+  }
+}
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'
   styleUrls: [ './subscribe-button.component.scss' ]
 })
 export class SubscribeButtonComponent implements OnInit {
+  /**
+   * SubscribeButtonComponent can be used with a single VideoChannel passed as [VideoChannel],
+   * or with an account and a full list of that account's videoChannels. The latter is intended
+   * to allow mass un/subscription from an account's page, while keeping the channel-centric
+   * subscription model.
+   */
   @Input() account: Account
   @Input() videoChannels: VideoChannel[]
   @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 @@
     a {
       margin-top: 0;
       margin-bottom: 0;
+      text-transform: uppercase;
+      font-weight: 600;
     }
   }
 }