File
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Constructor
constructor(platform: Platform)
|
|
|
Parameters :
| Name |
Type |
Optional |
| platform |
Platform
|
No
|
|
|
cancelKey
|
Type : string
|
Default value : 'CANCEL'
|
|
|
|
icon
|
Type : string
|
Default value : './assets/imgs/ic_coming_soon.png'
|
|
|
|
invalidContent
|
Type : boolean
|
Default value : false
|
|
|
|
messageKey
|
Type : string
|
Default value : 'UNKNOWN_QR'
|
|
|
|
tryAgainKey
|
Type : string
|
Default value : 'TRY_AGAIN'
|
|
|
|
Public
platform
|
Type : Platform
|
|
|
|
showOnlyPrimaryBtn
|
Default value : false
|
|
|
|
skipKey
|
Type : string
|
Default value : 'SKIP'
|
|
|
|
unregisterBackButton
|
Default value : undefined
|
|
|
import { Component, Input } from '@angular/core';
import { Platform } from '@ionic/angular';
@Component({
selector: 'app-qrscanner-alert',
templateUrl: './qrscanner-alert.page.html',
styleUrls: ['./qrscanner-alert.page.scss'],
})
export class QRScannerAlert {
skipKey = 'SKIP';
unregisterBackButton = undefined;
showOnlyPrimaryBtn = false;
@Input("callback") callback: QRAlertCallBack;
@Input("invalidContent") invalidContent = false;
@Input("messageKey") messageKey = 'UNKNOWN_QR';
@Input("tryAgainKey") tryAgainKey = 'TRY_AGAIN';
@Input("icon") icon = './assets/imgs/ic_coming_soon.png';
@Input("cancelKey") cancelKey = 'CANCEL';
constructor(public platform: Platform) {
if (this.cancelKey === 'hide') {
this.showOnlyPrimaryBtn = true;
this.cancelKey = undefined;
}
}
tryAgain() {
if (this.callback) {
this.callback.tryAgain();
}
}
cancel() {
if (this.callback) {
this.callback.cancel();
}
}
}
export interface QRAlertCallBack {
tryAgain(): any;
cancel(): any;
}
<div class="invalidContent" *ngIf="!invalidContent">
<ion-content>
<ion-grid>
<ion-row>
<ion-col size="12" class="img-container">
<img [src]="icon" width="auto" height="120px" alt="icon" />
</ion-col>
</ion-row>
<ion-row>
<ion-col offset="2" size="7" class="msg ion-text-center">
<p> {{ messageKey | translate }}</p>
</ion-col>
</ion-row>
<ion-row class="ion-text-center" *ngIf="showOnlyPrimaryBtn">
<ion-col size="12">
<a block (click)="tryAgain()"> {{ tryAgainKey | translate }}</a>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
<ion-footer class="ion-padding">
<ion-button expand="block" slot="end" (click)="cancel()"> {{ skipKey | translate }}
<ion-icon name="arrow-forward" role="button" class="icon icon-md ion-md-arrow-round-forward pull-right"
aria-label="skip" ng-reflect-name="skip"></ion-icon>
</ion-button>
</ion-footer>
</div>
<div class="invalidContent" *ngIf="invalidContent">
<ion-content class="ion-padding">
<ion-grid>
<ion-row>
<ion-col size="12" class="img-container">
<img [src]="icon" width="auto" height="120px" alt="icon" />
</ion-col>
</ion-row>
<ion-row>
<ion-col offset="2" size="8" class="ion-text-center msg">
<p><strong> {{ messageKey | translate }} </strong></p>
</ion-col>
</ion-row>
<ion-row class="ion-text-center" *ngIf="!showOnlyPrimaryBtn">
<ion-col size="12">
<a block (click)="tryAgain()"> {{ tryAgainKey | translate }}</a>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
<ion-footer class="ion-padding">
<ion-button class="arrow-icon" expand="block" slot="end" (click)="cancel()"> {{ skipKey | translate }}
<ion-icon name="arrow-forward" title="skip" role="button" class="icon icon-md ion-md-arrow-round-forward pull-right"
aria-label="arrow round-forward" ng-reflect-name="arrow-round-forward"></ion-icon>
</ion-button>
</ion-footer>
</div>
/* @import "src/global.scss";
.msg {
color: map-get($colors, black);
font-size: medium;
padding: 16px;
@extend .font-weight-bold;
}
.qr-alert .popover-content {
margin: 0;
width: 100%;
height: auto;
box-shadow: unset;
position: fixed;
@include ltr() {
left: 0 !important;
}
@include rtl() {
right: 0 !important;
}
top: unset !important;
bottom: 0;
transform-origin: bottom -100% !important;
transform: translateY(0) !important;
}
.qr-alert ion-backdrop {
background-color: #000 !important;
opacity: 0.4 !important;
}
.qr-alert-invalid .popover-content {
margin: 0;
width: 100%;
height: 100%;
box-shadow: unset;
position: fixed;
@include ltr() {
left: 0 !important;
}
@include rtl() {
right: 0 !important;
}
top: unset !important;
bottom: 0;
transform-origin: bottom -100% !important;
transform: translateY(0) !important;
}
.qr-alert-invalid .popover-content {
max-height: 100% !important;
}
.qr-alert-invalid ion-backdrop {
background-color: #000 !important;
opacity: 0.4 !important;
}
.qr-alert-invalid .invalidContent {
.img-container {
text-align: center;
margin-top: 10vh !important;
margin-bottom: 20px !important;
}
.button-inner {
display: initial !important;
}
.arrow-icon {
@include padding(null, null, null, 2.8em !important);
}
ion-icon {
@include ltr() {
float: right !important;
}
@include rtl() {
float: left !important;
}
}
.footer-md::before {
top: 0;
bottom: auto;
height: 0px !important;
}
}
*/
Legend
Html element with directive