File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Outputs
|
|
|
Outputs
|
viewInBrowser
|
Type : EventEmitter
|
|
|
Methods
|
navigateToLibrary
|
navigateToLibrary()
|
|
|
|
|
|
Public
resourceService
|
Type : ResourceService
|
|
|
To call resource service which helps to use language constant
|
|
showPopUp
|
Default value : true
|
|
|
import { Component, OnInit, EventEmitter , Output } from '@angular/core';
import { ResourceService } from '../../services/index';
import * as _ from 'lodash-es';
@Component({
selector: 'app-install-app',
templateUrl: './install-app.component.html',
styleUrls: ['./install-app.component.scss']
})
export class InstallAppComponent implements OnInit {
showPopUp = true;
@Output() viewInBrowser = new EventEmitter<any>();
instance: string;
/**
* To call resource service which helps to use language constant
*/
public resourceService: ResourceService;
constructor( resourceService: ResourceService ) {
this.resourceService = resourceService;
}
ngOnInit() {
this.instance = _.upperCase(this.resourceService.instance);
}
closePopUp() {
this.showPopUp = false;
}
navigateToLibrary() {
this.closePopUp();
this.viewInBrowser.emit();
}
}
<!-- App Install Popup -->
<div id="appSection" class="appPopup-cover js-appPopup">
<div class="ui grid padded mobile only tablet only appPopup-mobile" *ngIf="showPopUp">
<div class="ui dimmer modals page transition active p-0">
<div class="ui mini fixed-small modal active p-0 m-0">
<div class="header appPopup-header p-10">
<div class="appPopup-logo img-cover p-5 m-0 mr-15">
<img src="{{'assets/images/logo.png'}}" class="js-appLogo" alt="{{resourceService.frmelmnts?.lbl?.installAppTitle | interpolate:'{instance}': instance}}"/>
</div>
<div class="appPopup-title">
{{resourceService.frmelmnts?.lbl?.installAppTitle | interpolate:'{instance}': instance}} <br />
<p class="small text-lightGray m-0">{{resourceService.frmelmnts?.lbl?.installAppFree}}</p>
<p class="small text-lightGray m-0">{{resourceService.frmelmnts?.lbl?.installAppPlayStore}}</p>
</div>
</div>
<div class="content text-lightGray">
<p>{{resourceService.frmelmnts?.lbl?.installAppDesc}}</p>
</div>
<div class="actions pl-0 pr-0">
<a tabindex="0" (click) ="closePopUp()" class="ui mini button positive p-0" href="https://play.google.com/store/apps/details?id=in.gov.diksha.app" target="_blank" title="{{resourceService.frmelmnts?.lbl?.installApp}}" >
{{resourceService.frmelmnts?.lbl?.installApp}}
</a>
<button tabindex="0" (click) ="navigateToLibrary()" class="ui mini basic button positive p-0 js-setAppPopupCookie" title="{{resourceService.frmelmnts?.lbl?.viewInBrowser}}" >
{{resourceService.frmelmnts?.lbl?.viewInBrowser}}
</button>
</div>
</div>
</div>
</div>
</div>
<!-- /App Install Popup -->
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.appPopup-header {
font-weight: 500 !important;
font-size: 1rem !important;
display: flex !important;
align-content: flex-start;
}
.appPopup-header .small {
font-size: 0.7857rem;
line-height: 1.3;
}
.appPopup-logo {
width: calculateRem(65px);
height: calculateRem(65px);
float: left;
}
.appPopup-cover .ui .actions {
background: transparent !important;
justify-content: center !important;
display: flex;
}
.appPopup-mobile .modal .header {
padding-right: 1rem !important;
}
.appPopup-mobile .ui.button {
font-weight: 600;
width: calculateRem(135px);
height: calculateRem(38px);
line-height: calculateRem(38px);
margin-left: 0.25em !important;
}
.appPopup-computer .ui.button {
font-weight: 600;
min-width: calculateRem(170px);
}
.text-lightGray {
color: var(--gray-200) !important;
}
.ui.basic.button,
.ui.basic.buttons .button {
background-color: var(--white) !important;
}
.ui.positive.button,
.ui.positive.buttons .button {
background-color: var(--secondary-color);
}
.ui.positive.button:hover,
.ui.positive.buttons .button:hover {
opacity: 0.9;
}
.ui.basic.positive.button,
.ui.basic.positive.buttons .button {
border-color: var(--secondary-color) !important;
color: var(--secondary-color) !important;
}
.ui.basic.positive.button:hover,
.ui.basic.positive.buttons .button:hover {
opacity: 0.9;
}
.img-cover {
border: calculateRem(1px) solid var(--gray-200);
border-radius: calculateRem(2px);
background-color: var(--gray-0);
display: inline-flex;
align-items: center;
justify-content: center;
}
.img-cover img {
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
}
.modal.mini.fixed-small {
max-width: calculateRem(320px);
width: 100%;
transform: translate(-50%, -50%);
}
Legend
Html element with directive