File
Implements
Constructor
constructor(preference: SharedPreferences, popoverCtrl: PopoverController, navParams: NavParams, appHeaderService: AppHeaderService)
|
|
|
Parameters :
| Name |
Type |
Optional |
| preference |
SharedPreferences
|
No
|
| popoverCtrl |
PopoverController
|
No
|
| navParams |
NavParams
|
No
|
| appHeaderService |
AppHeaderService
|
No
|
|
Methods
|
Async
closePopover
|
closePopover()
|
|
|
|
|
|
Async
switchToJoyfulTheme
|
switchToJoyfulTheme()
|
|
|
|
|
|
Async
switchToNewTheme
|
switchToNewTheme()
|
|
|
|
|
|
appName
|
Type : string
|
Default value : ''
|
|
|
|
appTheme
|
Default value : AppThemes.DEFAULT
|
|
|
|
isPopoverPresent
|
Default value : false
|
|
|
import { Component, Inject, OnInit } from '@angular/core';
import { NavParams, PopoverController } from '@ionic/angular';
import { AppThemes } from '@app/app/app.constant';
import { SharedPreferences } from 'sunbird-sdk';
import { AppHeaderService } from '@app/services';
@Component({
selector: 'app-joyful-theme-popup',
templateUrl: './joyful-theme-popup.component.html',
styleUrls: ['./joyful-theme-popup.component.scss']
})
export class JoyfulThemePopupComponent implements OnInit {
appName = '';
appTheme = AppThemes.DEFAULT;
isPopoverPresent = false;
constructor(
@Inject('SHARED_PREFERENCES') private preference: SharedPreferences,
private popoverCtrl: PopoverController,
private navParams: NavParams,
private appHeaderService: AppHeaderService
) {
}
ngOnInit() {
this.appTheme = document.querySelector('html').getAttribute('data-theme');
this.appName = this.navParams.get('appLabel');
setTimeout(() => {
this.isPopoverPresent = true;
}, 2000);
}
async closePopover() {
await this.switchToJoyfulTheme();
this.popoverCtrl.dismiss();
}
async switchToNewTheme() {
await this.switchToJoyfulTheme();
this.popoverCtrl.dismiss();
}
async switchToJoyfulTheme() {
if (document.querySelector('html').getAttribute('data-theme') === AppThemes.DEFAULT) {
this.appTheme = AppThemes.JOYFUL;
await this.preference.putString('current_selected_theme', this.appTheme).toPromise();
this.appHeaderService.showStatusBar().then();
}
}
}
<div>
<div class="header-info">
<div class="close-icon-info">
<img src="assets/imgs/close.png" alt="close-icon" (click)="closePopover()">
</div>
<h4 class="theme-header-info">{{'JOYFULPOPUP_HEADING' | translate}}</h4>
<p class="learning-info">{{'JOYFUL_LEARNING_TEXT' | translate}}</p>
<img src="./assets/imgs/ic_new-theme-img.svg" alt="">
</div>
<div>
<div>
<p class="chng-theme-text"><span class="sb-color-warning">*</span>{{'JOYFUL_WARNING_TEXT' | translate}}</p>
</div>
<div class="btn-info">
<button class="letsgo-info" (click)="switchToNewTheme()"><span>{{'LETS_GO' | translate}}</span>
<img class="arrow-icon" src="assets/imgs/ic_back.svg" alt="arrow-icon"
[class.animate]="isPopoverPresent">
</button>
</div>
</div>
</div>
@import "src/assets/styles/_variables.scss";
.header-info {
background-color: $blue;
}
.btn-info{
padding: 12px;
text-align: center;
}
.letsgo-info{
color: white;
background-color: $blue;
font-size: 1rem;
padding: 8px 0;
margin-left: 18px;
border: 2px solid $blue;
width: 34%;
float: right;
border-radius: 20px !important;
}
.theme-header-info {
margin-top: 0px;
color: map-get($colors, white);
padding: 1rem 0.5rem 0 1rem;
}
.close-icon-info {
float: right;
background-color: aliceblue;
border-radius: 50%;
width: 2rem;
height: 2rem;
margin-right: 6px;
margin-top: 5px;
padding: 5px;
}
.learning-info{
color: white;
padding: 8px 8px 0px 16px
}
.chng-theme-text{
padding: 8px
}
img.arrow-icon{
display: inline-block;
width: 1.125rem;
margin-top: -3px;
margin-left: 10px;
&.animate {
position: relative;
animation: dropDown 5s linear infinite;
animation-duration: 0.9s;
}
}
Legend
Html element with directive