forks
/
peertube
1
0
Fork 0
Code Releases Activity

Add likes/dislikes counts in the buttons

This commit is contained in:
Chocobozzz 2019-12-05 16:28:05 +01:00
parent f56ebb3616
commit 0d3a9be9f1
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
3 changed files with 25 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/app/videos/+video-watch/video-watch.component.html
View File

@ -58,19 +58,21 @@
<div class="video-actions-rates">
<div class="video-actions fullWidth justify-content-end">
<div
*ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
[ngbPopover]="getRatePopoverText()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
class="action-button action-button-like" role="button" [attr.aria-pressed]="userRating === 'like'"
i18n-title title="Like this video"
>
<my-global-icon iconName="like"></my-global-icon>
<span *ngIf="video.likes" class="count">{{ video.likes }}</span>
</div>
<div
*ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
[ngbPopover]="getRatePopoverText()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
class="action-button action-button-dislike" role="button" [attr.aria-pressed]="userRating === 'dislike'"
i18n-title title="Dislike this video"
>
<my-global-icon iconName="dislike"></my-global-icon>
<span *ngIf="video.dislikes" class="count">{{ video.dislikes }}</span>
</div>
<div *ngIf="video.support" (click)="showSupportModal()" class="action-button action-button-support">

15
client/src/app/videos/+video-watch/video-watch.component.scss
View File

@ -239,9 +239,20 @@ $player-factor: 1.7; // 16/9
display: none;
}
.action-button-like,
.action-button-dislike {
.count {
margin-right: 5px;
}
}
&.action-button-like.activated {
background-color: $green;
.count {
color: #fff;
}
my-global-icon {
@include apply-svg-color(#fff);
}
@ -250,6 +261,10 @@ $player-factor: 1.7; // 16/9
&.action-button-dislike.activated {
background-color: $red;
.count {
color: #fff;
}
my-global-icon {
@include apply-svg-color(#fff);
}

6
client/src/app/videos/+video-watch/video-watch.component.ts
View File

@ -166,6 +166,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
else this.setRating('dislike')
}
getRatePopoverText () {
if (this.isUserLoggedIn()) return undefined
return this.i18n('You need to be connected to rate this content.')
}
showMoreDescription () {
if (this.completeVideoDescription === undefined) {
return this.loadCompleteDescription()