Add extra text to button when partially subscribed to all channels

This commit is contained in:
Rigel Kent 2020-01-08 00:46:38 +01:00 committed by Chocobozzz
parent 41eb700fce
commit b061c8edb0
4 changed files with 33 additions and 5 deletions

View File

@ -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
>
<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>

View File

@ -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%;
}
}

View File

@ -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

View File

@ -509,6 +509,8 @@
a {
margin-top: 0;
margin-bottom: 0;
text-transform: uppercase;
font-weight: 600;
}
}
}