OpenCloud
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix "subscribe to all channels" button ui

pull/6711/head
Chocobozzz 2024-10-23 10:47:41 +02:00
parent 049d12c274
commit be42ccb3f5
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
3 changed files with 26 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
client/src/app/shared/shared-user-subscription/subscribe-button.component.html
View File

@ -4,16 +4,17 @@
> >
<ng-template #userLoggedOut> <ng-template #userLoggedOut>
<span [ngClass]="{ 'extra-text': isAtLeastOneChannelSubscribed }"> <div [ngClass]="{ 'extra-text': isAtLeastOneChannelSubscribed }">
<ng-container i18n *ngIf="isSingleSubscribe">Subscribe</ng-container> @if (isSingleSubscribe) {
<ng-container i18n>Subscribe</ng-container>
} @else {
<div i18n>Subscribe to all channels</div>
<ng-container *ngIf="!isSingleSubscribe"> <div class="mt-1 fs-8" *ngIf="isAtLeastOneChannelSubscribed" i18n>
<span i18n>Subscribe to all channels</span> {{ subscribeStatus(true).length }}/{{ subscribed.size }} channels subscribed
<span *ngIf="isAtLeastOneChannelSubscribed">{{ subscribeStatus(true).length }}/{{ subscribed.size }} </div>
<ng-container i18n>channels subscribed</ng-container> }
</span> </div>
</ng-container>
</span>
<span *ngIf="!isBigButton && displayFollowers && videoChannels.length > 1 && videoChannel.followersCount !== 0" class="followers-count"> <span *ngIf="!isBigButton && displayFollowers && videoChannels.length > 1 && videoChannel.followersCount !== 0" class="followers-count">
{{ videoChannels[0].followersCount | myNumberFormatter }} {{ videoChannels[0].followersCount | myNumberFormatter }}
@ -21,13 +22,15 @@
</ng-template> </ng-template>
<ng-template #userLoggedIn> <ng-template #userLoggedIn>
<button *ngIf="!isAllChannelsSubscribed" type="button" class="btn" (click)="subscribe()"> @if (isAllChannelsSubscribed) {
<ng-template [ngTemplateOutlet]="userLoggedOut"></ng-template> <button type="button" class="btn" role="button" (click)="unsubscribe()">
</button>
<button *ngIf="isAllChannelsSubscribed" type="button" class="btn" role="button" (click)="unsubscribe()">
<ng-container i18n>{account + "", select, undefined {Unsubscribe} other {Unsubscribe from all channels}}</ng-container> <ng-container i18n>{account + "", select, undefined {Unsubscribe} other {Unsubscribe from all channels}}</ng-container>
</button> </button>
} @else {
<button type="button" class="btn" (click)="subscribe()">
<ng-template [ngTemplateOutlet]="userLoggedOut"></ng-template>
</button>
}
</ng-template> </ng-template>
<ng-container <ng-container

30
client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
View File

@ -15,25 +15,11 @@
white-space: nowrap; white-space: nowrap;
} }
&.big { &.big > button:first-child {
height: 35px;
> button:first-child {
width: max-content; width: max-content;
min-width: 175px; min-width: 175px;
} }
button .extra-text {
span:first-child {
line-height: 80%;
}
span:not(:first-child) {
font-size: 75%;
}
}
}
// Unlogged // Unlogged
> .dropdown > .dropdown-toggle span { > .dropdown > .dropdown-toggle span {
@include padding-right(5px); @include padding-right(5px);
@ -104,17 +90,3 @@
@include peertube-input-text(100%); @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%;
text-align: start;
}
}

4
client/src/sass/class-helpers/_custom-bootstrap-helpers.scss
View File

@ -11,6 +11,10 @@
@include font-size(14px); @include font-size(14px);
} }
.fs-8 {
@include font-size(12px);
}
// Handle dynamically RTL layouts // Handle dynamically RTL layouts
.text-start { .text-start {