sunbirded-mobile-app documentation
  1. Components
  2. SbGenericPopoverComponent

File

src/app/components/popups/sb-generic-popover/sb-generic-popover.component.ts

Implements

OnInit OnDestroy

Metadata

selector app-sb-generic-popover
styleUrls ./sb-generic-popover.component.scss
templateUrl ./sb-generic-popover.component.html

Index

Properties
Methods
Inputs

Constructor

constructor(popoverCtrl: PopoverController, platform: Platform, events: Events)
Defined in src/app/components/popups/sb-generic-popover/sb-generic-popover.component.ts:21
Parameters :
Name Type Optional
popoverCtrl PopoverController No
platform Platform No
events Events No

Inputs

actionsButtons
Type : any
Defined in src/app/components/popups/sb-generic-popover/sb-generic-popover.component.ts:13
icon
Type : any
Defined in src/app/components/popups/sb-generic-popover/sb-generic-popover.component.ts:14
metaInfo
Type : any
Defined in src/app/components/popups/sb-generic-popover/sb-generic-popover.component.ts:15
sbPopoverContent
Type : any
Defined in src/app/components/popups/sb-generic-popover/sb-generic-popover.component.ts:16
sbPopoverHeading
Type : any
Defined in src/app/components/popups/sb-generic-popover/sb-generic-popover.component.ts:17
sbPopoverMainTitle
Type : any
Defined in src/app/components/popups/sb-generic-popover/sb-generic-popover.component.ts:18
selectedContents
Type : any
Defined in src/app/components/popups/sb-generic-popover/sb-generic-popover.component.ts:19
showHeader
Type : boolean
Default value : true
Defined in src/app/components/popups/sb-generic-popover/sb-generic-popover.component.ts:20

Methods

closePopover
closePopover()
Defined in src/app/components/popups/sb-generic-popover/sb-generic-popover.component.ts:44
Returns : void
deleteContent
deleteContent(buttonIndex: number)
Defined in src/app/components/popups/sb-generic-popover/sb-generic-popover.component.ts:48
Parameters :
Name Type Optional Default value
buttonIndex number No 0
Returns : void
ngOnDestroy
ngOnDestroy()
Defined in src/app/components/popups/sb-generic-popover/sb-generic-popover.component.ts:39
Returns : void
ngOnInit
ngOnInit()
Defined in src/app/components/popups/sb-generic-popover/sb-generic-popover.component.ts:28
Returns : void

Properties

backButtonFunc
Type : Subscription
Defined in src/app/components/popups/sb-generic-popover/sb-generic-popover.component.ts:21
Public popoverCtrl
Type : PopoverController
Defined in src/app/components/popups/sb-generic-popover/sb-generic-popover.component.ts:24
 
import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { Platform, PopoverController } from '@ionic/angular';
import { Events } from '@app/util/events';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-sb-generic-popover',
  templateUrl: './sb-generic-popover.component.html',
  styleUrls: ['./sb-generic-popover.component.scss'],
})
export class SbGenericPopoverComponent implements OnInit, OnDestroy {

  @Input() actionsButtons: any;
  @Input() icon: any;
  @Input() metaInfo: any;
  @Input() sbPopoverContent: any;
  @Input() sbPopoverHeading: any;
  @Input() sbPopoverMainTitle: any;
  @Input() selectedContents: any;
  @Input() showHeader = true;
  backButtonFunc: Subscription;

  constructor(
    public popoverCtrl: PopoverController,
    private platform: Platform,
    private events: Events) { }

  ngOnInit() {
    this.backButtonFunc = this.platform.backButton.subscribeWithPriority(11, () => {
      this.popoverCtrl.dismiss({ isLeftButtonClicked: null });
      this.backButtonFunc.unsubscribe();
    });

    this.events.subscribe('selectedContents:changed', (data) => {
      this.selectedContents = data.selectedContents;
    });
  }

  ngOnDestroy(): void {
    this.events.unsubscribe('selectedContents:changed');
    this.backButtonFunc.unsubscribe();
  }

  closePopover() {
    this.popoverCtrl.dismiss({ isLeftButtonClicked: null });
  }

  deleteContent(buttonIndex: number = 0) {
    this.popoverCtrl.dismiss({ isLeftButtonClicked: !Boolean(buttonIndex) });
  }

}
<ion-header class="sb-popover-header" *ngIf="showHeader">
  <ion-toolbar class="sb-popover-toolbar">
    <ion-title role="heading" class="sb-popover-title">{{sbPopoverHeading}}
      <ion-icon name="close" class="sb-modal-close" (click)="closePopover()"></ion-icon>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="sb-popover-container ion-no-padding">
  <div class="sb-popover-items">
    <div class="icon-container" *ngIf="icon">
      <ion-icon ios="{{icon?.ios}}" md="{{icon?.md}}"></ion-icon>
    </div>

    <div class="sb-popover-content-details">
      <div class="main-title">
        {{selectedContents?.count}} {{sbPopoverMainTitle}} <span
          *ngIf="selectedContents">({{selectedContents?.totalSize | fileSize}})</span>
        <div class="meta-info" *ngIf="metaInfo">
          {{metaInfo}}
        </div>
      </div>
      <div class="sb-popover-content" *ngIf="sbPopoverContent">
        {{sbPopoverContent}}
      </div>
    </div>
  </div>
</ion-content>

<ion-footer>
  <div class="sb-popover-footer">
    <button class="sb-popover-action-btn " [ngClass]="btn.btnClass"
      *ngFor="let btn of actionsButtons,let btn_index=index" (click)="deleteContent(btn_index)">
      {{btn.btntext }}</button>
  </div>
</ion-footer>

./sb-generic-popover.component.scss 

@import "src/assets/styles/base/_variables.scss";
@import "src/assets/styles/_variables.scss";
.flex-grow-1{
    flex-grow: 1;
}

.sb-popover .sb-popover-footer .sb-popover-action-btn.sb-btn-outline-info {
    color: $primary-color;
    margin: 0 10px;
}

.sb-dw-delete-popover{
    top: auto;
    .popover-content{
        box-shadow: 0 0 4px 2px map-get($colors, medium_gray);
        .sb-popover-items{
            padding-bottom: 0 !important;
        }
        .sb-popover-footer {
            .sb-popover-action-btn{
                box-shadow: none;
                width: 30%;
                border-radius: 3px;
                @extend .flex-grow-1;
            }
        } 
    }
}

.dw-active-downloads-popover{
    .popover-content{
        .sb-popover-footer {
            .sb-popover-action-btn{
                box-shadow: none;
            }
        }
    }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""