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: 'collection-acions',
templateUrl: './collection-acions.component.html',
styleUrls: ['../detail-card/detail-card.component.scss'],
})
export class CollectionActionsComponent {
@Input() contentDetail: Content;
@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();
}
showOverflowMenu() {
this.showOverflowMenuEvent.emit();
}
share() {
this.shareEvent.emit();
}
}
<div class="sb-dt-card">
<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()">
<ion-icon name="cloud-download" class="sb-dt-card-blue-icon"></ion-icon>
<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)">
<ion-icon name="trash" class="sb-dt-card-danger-icon"></ion-icon>
<span class="sb-btn-footer-text">{{ 'REMOVE' | translate }}</span>
</button>
<button class="sb-btn-tile" (click)="share()">
<ion-icon name="share" class="sb-dt-card-blue-icon"></ion-icon>
<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