From b061c8edb053d4a7a02f09d93d406f6a8c58006e Mon Sep 17 00:00:00 2001
From: Rigel Kent <sendmemail@rigelk.eu>
Date: Wed, 8 Jan 2020 00:46:38 +0100
Subject: Add extra text to button when partially subscribed to all channels
---
.../user-subscription/subscribe-button.component.html | 17 ++++++++++++-----
.../user-subscription/subscribe-button.component.scss | 13 +++++++++++++
.../user-subscription/subscribe-button.component.ts | 6 ++++++
client/src/sass/include/_mixins.scss | 2 ++
4 files changed, 33 insertions(+), 5 deletions(-)
(limited to 'client/src')
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;
}
}
}
--
cgit v1.2.3