File
Implements
Methods
|
close
|
close(getStartedClicked: boolean)
|
|
|
Parameters :
| Name |
Type |
Optional |
| getStartedClicked |
boolean
|
No
|
|
|
ionViewWillEnter
|
ionViewWillEnter()
|
|
|
|
|
|
backButtonFunc
|
Type : Subscription
|
|
|
|
isFromAddMember
|
Default value : false
|
|
|
import { Component, OnInit } from '@angular/core';
import { NavParams, PopoverController, Platform } from '@ionic/angular';
import {
CommonUtilService,
Environment,
ImpressionSubtype,
ImpressionType, InteractSubtype,
InteractType,
PageId,
TelemetryGeneratorService
} from '@app/services';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-my-groups-popover',
templateUrl: './sb-my-groups-popover.component.html',
styleUrls: ['./sb-my-groups-popover.component.scss'],
})
export class MyGroupsPopoverComponent implements OnInit {
title: string;
body: any;
buttonText: string;
isFromAddMember = false;
appName: string;
backButtonFunc: Subscription;
constructor(
private popOverCtrl: PopoverController,
private navParams: NavParams,
private commonUtilService: CommonUtilService,
private telemetryGeneratorService: TelemetryGeneratorService,
private platform: Platform
) { }
ngOnInit() {
this.backButtonFunc = this.platform.backButton.subscribeWithPriority(11, () => {
this.popOverCtrl.dismiss();
this.backButtonFunc.unsubscribe();
});
}
ionViewWillEnter() {
this.buttonText = this.navParams.get('buttonText');
this.isFromAddMember = this.navParams.get('isFromAddMember');
this.commonUtilService.getAppName().then((res) => { this.appName = res; });
if (this.isFromAddMember) {
this.telemetryGeneratorService.generateImpressionTelemetry(ImpressionType.VIEW,
ImpressionSubtype.DISPLAY_SUNBIRD_ID_TUTORIAL, PageId.ADD_MEMBER, Environment.GROUP);
} else {
this.telemetryGeneratorService.generateImpressionTelemetry(ImpressionType.VIEW,
ImpressionSubtype.GROUP_TUTORIAL, PageId.MY_GROUP, Environment.GROUP);
}
}
close(getStartedClicked: boolean) {
this.telemetryGeneratorService.generateInteractTelemetry(
InteractType.TOUCH,
getStartedClicked ? InteractSubtype.TUTORIAL_CONTINUE_CLICKED : InteractSubtype.CLOSE_CLICKED,
Environment.GROUP,
this.isFromAddMember ? PageId.ADD_MEMBER : PageId.MY_GROUP
);
this.popOverCtrl.dismiss();
}
getStarted() {
console.log('get started clicked');
this.close(true);
}
}
<div id="main-content">
<img class="close-icon" src="assets/imgs/close_tutorial.svg" alt="close-icon" role="button" (click)="close(false)">
<div class="tutorial-content">
<div class="mg-popup-container" *ngIf="!isFromAddMember">
<div class="mg-popup-content">
<h4 class="mg-popup-title mg-popup-flex-item">{{'POWER_OF_GROUPS'| translate}}</h4>
<div class="mg-flex-item text-center">
<img src="assets/imgs/my-groups-popup.svg" alt="">
</div>
<div class="mg-popup-content-body mg-popup-flex-item">{{'CREATE_GROUP_DESCRIPTION_POPUP' | translate}}</div>
<div class="mg-popup-btn-container mg-popup-flex-item">
<button class="mg-popup-btn sb-btn-large" (click)="getStarted()">
{{'GET_STARTED' | translate}}
<ion-icon class="mg-popup-btn-icon" name="arrow-forward"></ion-icon>
</button>
</div>
</div>
</div>
<div class="mg-popup-container" *ngIf="isFromAddMember">
<div class="mg-popup-content-member">
<div class="mg-popup-title mg-popup-flex-item">
<p class="am-title" [innerHTML]="'ADD_MEMBER_POPUP_TITLE' | translate: {'%s': appName }"></p>
<p class="am-desc" [innerHTML]="'ADD_MEMBER_POPUP_DESC' | translate: {'%s': appName }"></p>
</div>
<div>
<div class="mg-flex-item text-center mb-32">
<p class="am-step text-left" [innerHTML]="'ADD_MEMBER_POPUP_STEP_1' | translate"></p>
<img src="assets/imgs/add_member_step_1.png" alt="">
</div>
<div class="mg-popup-flex-item text-center">
<p class="am-step text-left" [innerHTML]="'ADD_MEMBER_POPUP_STEP_2' | translate: {'%s': appName }"></p>
<img src="assets/imgs/add_member_step_2.svg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
img.arrow-icon{
display: inline-block;
width: 1.375rem;
margin-top: -3px;
&.animate {
position: relative;
animation: dropDown 5s linear infinite;
animation-duration: 0.9s;
}
}
@keyframes dropDown {
0% {right: 0;}
50% {right: 10px;}
100% {right: 0;}
}
.tutorial-content {
height: 100%;
}
.mg-popup-btn-container{
padding-bottom: 16px;
button {
margin: 0;
}
}
.close-icon {
display: inline-block;
float: right;
position: absolute;
top: -0.825rem;
right: -0.825rem;
width: 2rem !important;
height: 2rem !important
}
#main-content {
height: calc(100vh - 52px);
padding: 16px;
overflow-y: scroll;
}
Legend
Html element with directive