Add extra text to button when partially subscribed to all channels

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 a119beff6f92651cfcd6d19b516df65987aa2787..6ac8af3de92c94bde674c14c4ef3869039b1a8e2 100644 (file)
--- 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 92a28aad9af4ee765e7de69945b42730528157da..164b917b866cc6170998e6d867c40bf9813faa97 100644 (file)
--- 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 0c1f71c6c2062cb671fda641efddbc4655be72c4..f0bee9d4779f605ba19d3d1e7538a95c87e325cb 100644 (file)
--- 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 88cbf33845540a98a93d003b4664dcced54f5ceb..099a909bbc4c42e590ad2ead5ab23bd097245bff 100644 (file)
--- 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;
     }
   }
 }