File
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
|
contentDetail
|
Type : Content
|
|
|
|
trackDownloads
|
Type : Observable<DownloadTracking>
|
|
|
Outputs
|
downloadAllContent
|
Type : EventEmitter
|
|
|
|
shareEvent
|
Type : EventEmitter
|
|
|
|
showOverflowMenuEvent
|
Type : EventEmitter
|
|
|
Methods
|
downloadAllContents
|
downloadAllContents()
|
|
|
|
|
|
showOverflowMenu
|
showOverflowMenu()
|
|
|
|
|
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Content, DownloadTracking } from 'sunbird-sdk';
import { CommonUtilService } from '@app/services';
import { Observable } from 'rxjs';
@Component({
selector: 'app-detail-card',
templateUrl: './detail-card.component.html',
styleUrls: ['./detail-card.component.scss'],
})
export class DetailCardComponent {
@Input() contentDetail: Content;
@Input() defaultAppIcon: string;
@Input() localImage: string;
@Input() showDownloadBtn: boolean;
@Input() isDepthChild: boolean;
@Input() trackDownloads: Observable<DownloadTracking>;
@Output() downloadAllContent = new EventEmitter();
@Output() showOverflowMenuEvent = new EventEmitter();
@Output() shareEvent = new EventEmitter();
text: string;
constructor(public commonUtil: CommonUtilService) {}
downloadAllContents() {
this.downloadAllContent.emit();
console.log('emited!');
}
showOverflowMenu() {
this.showOverflowMenuEvent.emit();
}
share() {
this.shareEvent.emit();
}
}
<div class="sb-dt-card">
<app-toc-header [contentData]="contentDetail?.contentData"></app-toc-header>
<div class="sb-dt-content pt-0">
<div class="left">
</div>
<div class="right">
<div *ngIf="contentDetail?.contentData?.me_averageRating" (click)="rateContent()" aria-label="content rating" class="sb-rating-view">
<span class="sb-rating-value">{{ contentDetail?.contentData?.me_averageRating }}</span>
<span class="sb-rating-star">
<ion-icon name="star"></ion-icon>
</span>
</div>
</div>
</div>
<div class="sb-separator-line"></div>
<div class="sb-dt-card-actions">
<div class="sb-btn-tile-group">
<ng-container *ngIf="trackDownloads | async; let downloads">
<button class="sb-btn-tile" *ngIf="showDownloadBtn && !isDepthChild" [disabled]="downloads.queued.length"
(click)="downloadAllContents()">
<img src="assets/imgs/outline_download.svg" alt="download content" class="mb-4">
<span *ngIf="!downloads.queued.length" class="sb-btn-footer-text">{{ 'DOWNLOAD' | translate }}</span>
<span *ngIf="downloads.queued.length" class="btn-popover-progress-container">
<span class="btn-progress-highlight" [ngStyle]="{'width': (downloads.completed.length/(downloads.queued.length+downloads.completed.length))*100 + '%'}">
</span>
</span>
</button>
<button class="sb-btn-tile" *ngIf="contentDetail?.isAvailableLocally" [disabled]="downloads.queued.length" (click)="showOverflowMenu($event)">
<img src="assets/imgs/outline_delete.svg" alt="delete content" class="mb-4">
<span class="sb-btn-footer-text">{{ 'REMOVE' | translate }}</span>
</button>
<button class="sb-btn-tile" (click)="share()">
<img src="assets/imgs/outline_share.svg" alt="share content" class="mb-4">
<span class="sb-btn-footer-text">{{ 'SHARE' | translate }}</span>
</button>
</ng-container>
</div>
</div>
</div>
@import "src/assets/styles/base/_variables.scss";
:host {
.btn-progress-highlight{
left: 0px;
background: $primary-800;
height: 0.313rem;
position: absolute;
border-radius: inherit;
border: 0px;
}
.btn-popover-progress-container{
position: relative;
border-radius: 33px;
display: inline-block;
background: $primary-200;
height: 0.313rem;
width: 3.5rem;
}
}
Legend
Html element with directive