src/lib/elements/load-alert/load-alert.component.ts
OnInit
| selector | lib-load-alert |
| styleUrls | ./load-alert.component.scss |
| templateUrl | ./load-alert.component.html |
Methods |
Outputs |
constructor(telemetryUtils: TelemetryUtilsService)
|
||||||
|
Parameters :
|
| close | |
Type : EventEmitter
|
|
| exit | |
Type : EventEmitter
|
|
| closeModal | ||||
closeModal(event)
|
||||
|
Parameters :
Returns :
void
|
| exitForum | ||||||
exitForum(event: string)
|
||||||
|
Parameters :
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { DiscussionService } from './../../services/discussion.service';
import { Component, OnInit, ElementRef, ViewChild, Input, Output, EventEmitter } from '@angular/core';
import { NSDiscussData } from './../../models/discuss.model';
import { TelemetryUtilsService } from './../../telemetry-utils.service';
import { DiscussUtilsService } from '../../services/discuss-utils.service';
/* tslint:disable */
import * as _ from 'lodash'
import { ConfigService } from '../../services/config.service';
import { DiscussionEventsService } from '../../discussion-events.service';
/* tslint:enable */
@Component({
selector: 'lib-load-alert',
templateUrl: './load-alert.component.html',
styleUrls: ['./load-alert.component.scss']
})
export class LoadAlertComponent implements OnInit {
@Output() close = new EventEmitter();
@Output() exit = new EventEmitter();
constructor(
private telemetryUtils: TelemetryUtilsService,
) { }
ngOnInit() {
this.telemetryUtils.logImpression(NSDiscussData.IPageName.LOAD_ALERT);
}
exitForum(event: string) {
this.telemetryUtils.logInteract(event, NSDiscussData.IPageName.LOAD_ALERT);
this.exit.emit(event);
}
closeModal(event){
this.telemetryUtils.logInteract(event, NSDiscussData.IPageName.LOAD_ALERT);
this.close.emit();
}
}
<div class="modal fade" id="alertModal">
<div class="df-dimmer-alert-modal">
<div class="df-alert-modal">
<div class="df-alert-modal-header">Alert</div>
<div class="df-alert-modal-content">
<label class="df-alert-label">We are experiencing high traffic.Please try after sometime.</label>
</div>
<div class="df-alert-modal-buttons">
<button class="df-btn df-btn-normal df-btn-primary df-alert-close-btn" id="load-alert-close" (click)="exitForum($event)">Close</button>
</div>
</div>
</div>
</div>
./load-alert.component.scss
#alertModal {
display: block;
opacity: 2 !important;
}
.df-dimmer-alert-modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .8);
z-index: 99999;
opacity: 1;
transition: opacity .1s ease-in;
pointer-events: auto;
.df-alert-modal {
max-width: 30rem;
width: 100%;
margin: 0 auto;
border-radius: 0.1875rem;
background: var(--white);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: auto;
height: auto;
.df-alert-modal-header {
background-color: var(--primary);
color: var(--white);
font-weight: 700;
font-size: 1rem;
padding: .5rem 1rem;
border-bottom: 0 solid var(--gray-100);
min-height: 2.5rem;
line-height: 1.5rem;
}
.df-alert-modal-content {
padding: 1rem;
min-height: 3.75rem;
.df-alert-label {
display: inline-block;
margin-bottom: 0;
font-size: .8125rem;
font-weight: 700;
}
}
.df-alert-modal-buttons {
padding: .5rem 1rem;
background: var(--white);
border-top: .0625rem solid var(--gray-100);
min-height: 3.5rem;
display: flex;
flex-direction: row-reverse;
align-items: center;
cursor: pointer;
}
}
}