android-apps-mirrors/SimpleQR
0
0
Fork 0
mirror of https://github.com/tomfong/simple-qr.git synced 2025-06-28 12:09:58 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: upgrade @angular/material, @ionic/storage, @ngx-translate and change to use angularx-qrcode

Browse source
This commit is contained in:
Tom Fong 2023-06-17 21:25:27 +08:00
parent f5dd413a93
commit 59791dfb42
17 changed files with 1120 additions and 335 deletions
Download patch file Download diff file Expand all files Collapse all files

1209
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

16
package.json
View file

@ -17,13 +17,13 @@
"private": true,
"dependencies": {
"@angular/animations": "^15.2.9",
"@angular/cdk": "^14.2.2",
"@angular/cdk": "^15.2.9",
"@angular/common": "^15.2.9",
"@angular/core": "^15.2.9",
"@angular/forms": "^15.2.9",
"@angular/localize": "^15.2.9",
"@angular/material": "^14.2.2",
"@angular/material-moment-adapter": "^14.2.7",
"@angular/material": "^15.2.9",
"@angular/material-moment-adapter": "^15.2.9",
"@angular/platform-browser": "^15.2.9",
"@angular/platform-browser-dynamic": "^15.2.9",
"@angular/router": "^15.2.9",
@ -52,12 +52,12 @@
"@capacitor/status-bar": "^4.1.1",
"@capacitor/toast": "^4.1.0",
"@ionic/angular": "^6.7.5",
"@ionic/storage": "^3.0.6",
"@ionic/storage-angular": "^3.0.6",
"@ionic/storage": "^4.0.0",
"@ionic/storage-angular": "^4.0.0",
"@ng-bootstrap/ng-bootstrap": "^14.2.0",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"@techiediaries/ngx-qrcode": "^9.1.0",
"@ngx-translate/core": "^14.0.0",
"@ngx-translate/http-loader": "^7.0.0",
"angularx-qrcode": "^15.0.1",
"bootstrap": "^5.3.0",
"cordova-plugin-aes256-encryption": "^2.0.1",
"cordova-plugin-chooser": "^1.3.2",

8
src/app/modals/qr-code/qr-code.module.ts
View file

@ -8,11 +8,7 @@ import { QrCodePage } from './qr-code.page';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient } from '@angular/common/http';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode';
import { QRCodeModule } from 'angularx-qrcode';
export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
@ -23,7 +19,7 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
CommonModule,
FormsModule,
IonicModule,
NgxQRCodeModule,
QRCodeModule,
TranslateModule.forChild({
loader: {
provide: TranslateLoader,

4
src/app/modals/qr-code/qr-code.page.html
View file

@ -11,10 +11,10 @@
<div class="d-flex align-items-center justify-content-top flex-column" style="height: 100%;">
<ion-row>
<ion-col class="ion-text-center ion-padding" style="max-width: 100% !important;">
<ngx-qrcode [elementType]="qrElementType" [value]="qrCodeContent" [width]="defaultWidth"
<qrcode [elementType]="qrElementType" [qrdata]="qrCodeContent" [width]="defaultWidth"
[errorCorrectionLevel]="errorCorrectionLevel" [colorDark]="qrColorDark" [colorLight]="qrColorLight"
[margin]="env.qrCodeMargin" #qrcode [hidden]="isSharing">
</ngx-qrcode>
</qrcode>
<div class="d-flex flex-column align-items-center" *ngIf="isSharing">
<ion-spinner class="my-3"></ion-spinner>
</div>

23
src/app/modals/qr-code/qr-code.page.ts
View file

@ -6,11 +6,11 @@ import { Haptics, ImpactStyle } from '@capacitor/haptics';
import { Toast } from '@capacitor/toast';
import { LoadingController, ModalController, Platform } from '@ionic/angular';
import { TranslateService } from '@ngx-translate/core';
import { NgxQrcodeElementTypes, NgxQrcodeErrorCorrectionLevels, QrcodeComponent } from '@techiediaries/ngx-qrcode';
import { EnvService } from 'src/app/services/env.service';
import { ScreenBrightness } from '@capacitor-community/screen-brightness';
import { rgbToHex } from 'src/app/utils/helpers';
import { Preferences } from '@capacitor/preferences';
import { QRCodeComponent, QRCodeElementType } from 'angularx-qrcode';
@Component({
selector: 'app-qr-code',
@ -21,11 +21,11 @@ export class QrCodePage {
modal: HTMLIonModalElement;
@ViewChild('qrcode') qrcodeElement: QrcodeComponent;
@ViewChild('qrcode') qrcodeElement: QRCodeComponent;
@Input() qrCodeContent: string;
qrElementType: NgxQrcodeElementTypes = NgxQrcodeElementTypes.CANVAS;
errorCorrectionLevel: NgxQrcodeErrorCorrectionLevels;
qrElementType: QRCodeElementType = "canvas";
errorCorrectionLevel: 'low' | 'medium' | 'quartile' | 'high' | 'L' | 'M' | 'Q' | 'H';
scale: number = 0.8;
readonly MAX_WIDTH = 350;
defaultWidth: number = window.innerHeight * 0.32 > this.MAX_WIDTH ? this.MAX_WIDTH : window.innerHeight * 0.32;
@ -64,7 +64,6 @@ export class QrCodePage {
if (this.qrcodeElement.width > this.MAX_WIDTH) {
this.qrcodeElement.width = this.MAX_WIDTH;
}
this.qrcodeElement.createQRCode();
}, 500)
}
}
@ -99,7 +98,6 @@ export class QrCodePage {
if (this.qrcodeElement.width > this.MAX_WIDTH) {
this.qrcodeElement.width = this.MAX_WIDTH;
}
this.qrcodeElement.createQRCode();
}
})
this.modal.onDidDismiss().then(
@ -132,19 +130,19 @@ export class QrCodePage {
setErrorCorrectionLevel() {
switch (this.env.errorCorrectionLevel) {
case 'L':
this.errorCorrectionLevel = NgxQrcodeErrorCorrectionLevels.LOW;
this.errorCorrectionLevel = 'low';
break;
case 'M':
this.errorCorrectionLevel = NgxQrcodeErrorCorrectionLevels.MEDIUM;
this.errorCorrectionLevel = 'medium';
break;
case 'Q':
this.errorCorrectionLevel = NgxQrcodeErrorCorrectionLevels.QUARTILE;
this.errorCorrectionLevel = 'quartile';
break;
case 'H':
this.errorCorrectionLevel = NgxQrcodeErrorCorrectionLevels.HIGH;
this.errorCorrectionLevel = 'high';
break;
default:
this.errorCorrectionLevel = NgxQrcodeErrorCorrectionLevels.MEDIUM;
this.errorCorrectionLevel = 'medium';
}
}
@ -170,7 +168,6 @@ export class QrCodePage {
this.isSharing = true;
const currentWidth = this.qrcodeElement.width;
this.qrcodeElement.width = 1000;
this.qrcodeElement.createQRCode();
setTimeout(async () => {
const canvases = document.querySelectorAll("canvas") as NodeListOf<HTMLCanvasElement>;
const canvas = canvases[canvases.length - 1];
@ -183,7 +180,6 @@ export class QrCodePage {
await this.socialSharing.share(this.translate.instant('MSG.SHARE_QR'), this.translate.instant('SIMPLE_QR'), this.qrImageDataUrl, null).then(
_ => {
this.qrcodeElement.width = currentWidth;
this.qrcodeElement.createQRCode();
delete this.qrImageDataUrl;
this.isSharing = false;
loading2.dismiss();
@ -194,7 +190,6 @@ export class QrCodePage {
this.presentToast("Error when call SocialSharing.share: " + JSON.stringify(err), "long", "top");
}
this.qrcodeElement.width = currentWidth;
this.qrcodeElement.createQRCode();
delete this.qrImageDataUrl;
this.isSharing = false;
loading2.dismiss();

64
src/app/pages/generate/generate.page.html
View file

@ -25,20 +25,22 @@
<ion-row class="ion-padding-horizontal">
<ion-col>
<mat-form-field [class]="ngMatThemeClass" color="accent" appearance="legacy">
<mat-form-field [class]="ngMatThemeClass" color="accent" appearance="outline" [floatLabel]="'always'">
<mat-label>{{ 'CONTENT_TYPE' | translate}}</mat-label>
<mat-select [(ngModel)]="contentType">
<mat-select-trigger>
<div style="display: flex; align-items: center;">
<mat-icon style="margin-right: 16px; vertical-align: middle;">
{{ getIcon(contentType) }}
<div class="d-flex">
<mat-icon class="me-3" [fontIcon]="getIcon(contentType)">
</mat-icon>
<span>{{ getText(contentType) }}</span>
</div>
</mat-select-trigger>
<mat-option [value]="type.value" *ngFor="let type of contentTypes">
<mat-icon>{{ getIcon(type.value) }}</mat-icon>
<span>{{ type.text }}</span>
<div class="d-flex">
<mat-icon class="me-3" [fontIcon]="getIcon(type.value)">
</mat-icon>
<span>{{ type.text }}</span>
</div>
</mat-option>
</mat-select>
</mat-form-field>
@ -69,7 +71,7 @@
<mat-label>{{ 'EMAIL_RECIPIENT' | translate}}</mat-label>
<input matInput [(ngModel)]="toEmails[i]" type="email" maxlength="254" #emailToInput>
<mat-hint align="end">{{ emailToInput.value?.length || 0 }}/254</mat-hint>
<mat-icon matSuffix color="accent">alternate_email</mat-icon>
<mat-icon matSuffix color="accent" fontIcon="alternate_email"></mat-icon>
<mat-hint>{{'MSG.EMAIL_MAX_LENGTH' | translate}}</mat-hint>
</mat-form-field>
</ion-col>
@ -98,7 +100,7 @@
<mat-label>{{ 'CC' | translate}}</mat-label>
<input matInput [(ngModel)]="ccEmails[i]" type="email" maxlength="254" #emailCcInput>
<mat-hint align="end">{{ emailCcInput.value?.length || 0 }}/254</mat-hint>
<mat-icon matSuffix color="accent">alternate_email</mat-icon>
<mat-icon matSuffix color="accent" fontIcon="alternate_email"></mat-icon>
<mat-hint>{{'MSG.EMAIL_MAX_LENGTH' | translate}}</mat-hint>
</mat-form-field>
</ion-col>
@ -127,7 +129,7 @@
<mat-label>{{ 'BCC' | translate}}</mat-label>
<input matInput [(ngModel)]="bccEmails[i]" type="email" maxlength="254" #emailBccInput>
<mat-hint align="end">{{ emailBccInput.value?.length || 0 }}/254</mat-hint>
<mat-icon matSuffix color="accent">alternate_email</mat-icon>
<mat-icon matSuffix color="accent" fontIcon="alternate_email"></mat-icon>
<mat-hint>{{'MSG.EMAIL_MAX_LENGTH' | translate}}</mat-hint>
</mat-form-field>
</ion-col>
@ -182,7 +184,7 @@
<mat-label>{{ 'EMAIL_RECIPIENT' | translate}}</mat-label>
<input matInput [(ngModel)]="toEmails[0]" type="email" maxlength="254" #emailToInput>
<mat-hint align="end">{{ emailToInput.value?.length || 0 }}/254</mat-hint>
<mat-icon matSuffix color="accent">alternate_email</mat-icon>
<mat-icon matSuffix color="accent" fontIcon="alternate_email"></mat-icon>
<mat-hint>{{'MSG.EMAIL_MAX_LENGTH' | translate}}</mat-hint>
</mat-form-field>
</ion-col>
@ -219,7 +221,7 @@
<mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
<mat-label>{{ 'PHONE_NUMBER' | translate}}</mat-label>
<input matInput [(ngModel)]="phoneNumber" type="tel" #phoneNumberInput>
<mat-icon matSuffix color="accent">call</mat-icon>
<mat-icon matSuffix color="accent" fontIcon="call"></mat-icon>
</mat-form-field>
</ion-col>
</ion-row>
@ -231,7 +233,7 @@
<mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
<mat-label>{{ 'PHONE_NUMBER' | translate}}</mat-label>
<input matInput [(ngModel)]="phoneNumber" type="tel" #phoneNumberInput>
<mat-icon matSuffix color="accent">call</mat-icon>
<mat-icon matSuffix color="accent" fontIcon="call"></mat-icon>
</mat-form-field>
</ion-col>
</ion-row>
@ -254,7 +256,7 @@
<mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
<mat-label>{{ 'URL' | translate}}</mat-label>
<input matInput [(ngModel)]="url" type="url" #urlInput maxlength="1817">
<mat-icon matSuffix color="accent">link</mat-icon>
<mat-icon matSuffix color="accent" fontIcon="link"></mat-icon>
<mat-hint align="end">{{ (urlInput.value?.length) || 0 }}/1817</mat-hint>
<mat-hint>{{'MSG.CREATE_QRCODE_MAX_LENGTH' | translate}}</mat-hint>
</mat-form-field>
@ -278,7 +280,7 @@
<mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
<mat-label>{{ 'FIRST_NAME' | translate}}</mat-label>
<input matInput [(ngModel)]="firstName" #firstNameInput />
<mat-icon matSuffix color="accent">badge</mat-icon>
<mat-icon matSuffix color="accent" fontIcon="badge"></mat-icon>
</mat-form-field>
</ion-col>
</ion-row>
@ -287,7 +289,7 @@
<mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
<mat-label>{{ 'LAST_NAME' | translate}}</mat-label>
<input matInput [(ngModel)]="lastName" #lastNameInput />
<mat-icon matSuffix color="accent">badge</mat-icon>
<mat-icon matSuffix color="accent" fontIcon="badge"></mat-icon>
</mat-form-field>
</ion-col>
</ion-row>
@ -306,7 +308,7 @@
<mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
<mat-label>{{ 'MOBILE_PHONE_NUMBER' | translate}}</mat-label>
<input matInput [(ngModel)]="mobilePhoneNumber" #mobilePhoneInput type="tel" />
<mat-icon matSuffix color="accent">call</mat-icon>
<mat-icon matSuffix color="accent" fontIcon="call"></mat-icon>
</mat-form-field>
</ion-col>
</ion-row>
@ -315,7 +317,7 @@
<mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
<mat-label>{{ 'HOME_PHONE_NUMBER' | translate}}</mat-label>
<input matInput [(ngModel)]="homePhoneNumber" #homePhoneInput type="tel" />
<mat-icon matSuffix color="accent">call</mat-icon>
<mat-icon matSuffix color="accent" fontIcon="call"></mat-icon>
</mat-form-field>
</ion-col>
</ion-row>
@ -324,7 +326,7 @@
<mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
<mat-label>{{ 'WORK_PHONE_NUMBER' | translate}}</mat-label>
<input matInput [(ngModel)]="workPhoneNumber" #workPhoneInput type="tel" />
<mat-icon matSuffix color="accent">call</mat-icon>
<mat-icon matSuffix color="accent" fontIcon="call"></mat-icon>
</mat-form-field>
</ion-col>
</ion-row>
@ -333,7 +335,7 @@
<mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
<mat-label>{{ 'FAX_NUMBER' | translate}}</mat-label>
<input matInput [(ngModel)]="faxNumber" #faxInput type="tel" />
<mat-icon matSuffix color="accent">print</mat-icon>
<mat-icon matSuffix color="accent" fontIcon="print"></mat-icon>
</mat-form-field>
</ion-col>
</ion-row>
@ -342,7 +344,7 @@
<mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
<mat-label>{{ 'EMAIL_ADDRESS' | translate}}</mat-label>
<input matInput [(ngModel)]="email" #emailInput type="email" />
<mat-icon matSuffix color="accent">alternate_email</mat-icon>
<mat-icon matSuffix color="accent" fontIcon="alternate_email"></mat-icon>
</mat-form-field>
</ion-col>
</ion-row>
@ -361,7 +363,7 @@
<mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
<mat-label>{{ 'ORGANIZATION' | translate}}</mat-label>
<input matInput [(ngModel)]="organization" #organizationInput type="text" />
<mat-icon matSuffix color="accent">business</mat-icon>
<mat-icon matSuffix color="accent" fontIcon="business"></mat-icon>
</mat-form-field>
</ion-col>
</ion-row>
@ -370,7 +372,7 @@
<mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
<mat-label>{{ 'JOB_TITLE' | translate}}</mat-label>
<input matInput [(ngModel)]="jobTitle" #jobTitleInput type="text" />
<mat-icon matSuffix color="accent">business</mat-icon>
<mat-icon matSuffix color="accent" fontIcon="business"></mat-icon>
</mat-form-field>
</ion-col>
</ion-row>
@ -389,7 +391,7 @@
<mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
<mat-label>{{ 'STREET' | translate}}</mat-label>
<input matInput [(ngModel)]="street" #streetInput type="text" />
<mat-icon matSuffix color="accent">home</mat-icon>
<mat-icon matSuffix color="accent" fontIcon="home"></mat-icon>
</mat-form-field>
</ion-col>
</ion-row>
@ -398,7 +400,7 @@
<mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
<mat-label>{{ 'CITY' | translate}}</mat-label>
<input matInput [(ngModel)]="city" #cityInput type="text" />
<mat-icon matSuffix color="accent">home</mat-icon>
<mat-icon matSuffix color="accent" fontIcon="home"></mat-icon>
</mat-form-field>
</ion-col>
</ion-row>
@ -407,7 +409,7 @@
<mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
<mat-label>{{ 'STATE' | translate}}</mat-label>
<input matInput [(ngModel)]="state" #stateInput type="text" />
<mat-icon matSuffix color="accent">home</mat-icon>
<mat-icon matSuffix color="accent" fontIcon="home"></mat-icon>
</mat-form-field>
</ion-col>
</ion-row>
@ -416,7 +418,7 @@
<mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
<mat-label>{{ 'POSTAL_CODE' | translate}}</mat-label>
<input matInput [(ngModel)]="postalCode" #postalCodeInput type="text" />
<mat-icon matSuffix color="accent">home</mat-icon>
<mat-icon matSuffix color="accent" fontIcon="home"></mat-icon>
</mat-form-field>
</ion-col>
</ion-row>
@ -425,7 +427,7 @@
<mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
<mat-label>{{ 'COUNTRY' | translate}}</mat-label>
<input matInput [(ngModel)]="country" #countryInput type="text" />
<mat-icon matSuffix color="accent">home</mat-icon>
<mat-icon matSuffix color="accent" fontIcon="home"></mat-icon>
</mat-form-field>
</ion-col>
</ion-row>
@ -445,7 +447,7 @@
<mat-label>{{ 'DATE_OF_BIRTH' | translate}}</mat-label>
<input [ngModel]="birthday | date:'yyyy-MM-dd'" (ngModelChange)="birthday = $event" matInput type="date"
[max]="today">
<mat-icon matSuffix color="accent">cake</mat-icon>
<mat-icon matSuffix color="accent" fontIcon="cake"></mat-icon>
</mat-form-field>
</ion-col>
</ion-row>
@ -466,7 +468,7 @@
<mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
<mat-label>{{ 'WEBSITE' | translate}}</mat-label>
<input matInput [(ngModel)]="personalUrl" type="url" #personalUrlInput>
<mat-icon matSuffix color="accent">link</mat-icon>
<mat-icon matSuffix color="accent" fontIcon="link"></mat-icon>
</mat-form-field>
</ion-col>
</ion-row>
@ -478,7 +480,7 @@
<mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
<mat-label>{{ 'WIFI_SSID' | translate}}</mat-label>
<input matInput [(ngModel)]="ssid" #ssidInput maxlength="32">
<mat-icon matSuffix color="accent">wifi</mat-icon>
<mat-icon matSuffix color="accent" fontIcon="wifi"></mat-icon>
<mat-hint align="end">{{ (ssidInput.value?.length) || 0 }}/32</mat-hint>
<mat-hint>{{'MSG.SSID_MAX_LENGTH' | translate}}</mat-hint>
</mat-form-field>
@ -489,7 +491,7 @@
<mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent">
<mat-label>{{ 'PASSWORD' | translate}}</mat-label>
<input matInput [(ngModel)]="wifiPassword" #wifiPasswordInput type="password">
<mat-icon matSuffix color="accent">lock</mat-icon>
<mat-icon matSuffix color="accent" fontIcon="lock"></mat-icon>
</mat-form-field>
</ion-col>
</ion-row>

2
src/app/pages/import-image/import-image.module.ts
View file

@ -9,7 +9,6 @@ import { ImportImagePageRoutingModule } from './import-image-routing.module';
import { ImportImagePage } from './import-image.page';
import { HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { MatButtonModule } from '@angular/material/button';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
@ -29,7 +28,6 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
}
}),
ImportImagePageRoutingModule,
MatButtonModule,
],
declarations: [ImportImagePage]
})

1
src/app/pages/result/result.module.ts
View file

@ -7,7 +7,6 @@ import { IonicModule } from '@ionic/angular';
import { ResultPageRoutingModule } from './result-routing.module';
import { ResultPage } from './result.page';
import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient } from '@angular/common/http';

63
src/app/pages/result/result.page.html
View file

@ -18,8 +18,7 @@
<ion-col>
<ion-badge class="p-2" color="primary">
<div class="d-flex align-items-center">
<mat-icon *ngIf="contentTypeIcon != ''" style="margin-right: 16px;">
{{ contentTypeIcon }}
<mat-icon class="me-3" *ngIf="contentTypeIcon != ''" [fontIcon]="contentTypeIcon">
</mat-icon>
<span>{{ contentTypeText }}</span>
</div>
@ -224,99 +223,99 @@
<ng-container *ngIf="env.resultPageButtons === 'detailed'">
<ion-row class="ion-padding-horizontal py-2">
<div class="d-flex justify-content-between detailed-action-button-container">
<ion-button class="pr-1"
<ion-button class="pe-1"
*ngIf="!resultSaved && this.env.scanRecordLogging == 'off' && this.qrCodeContent != null && this.qrCodeContent != '' "
(click)="tapHaptic(); saveRecord()" [color]="env.colorTheme === 'light'? 'dark' : 'light'" fill="outline"
shape="round" [@inAnimation]>
<ion-icon class="pr-2" src="assets/icon/history.svg"></ion-icon>
<ion-icon class="pe-2" src="assets/icon/history.svg"></ion-icon>
<ion-label>{{ 'SAVE' | translate }}</ion-label>
</ion-button>
<ion-button class="pr-1"
<ion-button class="pe-1"
*ngIf="contentType === 'freeText' && env.showOpenFoodFactsButton === 'on' && isValidEan"
(click)="tapHaptic(); searchOpenFoodFacts()" [color]="env.colorTheme === 'light'? 'dark' : 'light'"
fill="outline" shape="round" [@inAnimation]>
<ion-icon class="pr-2" name="fast-food"></ion-icon>
<ion-icon class="pe-2" name="fast-food"></ion-icon>
<ion-label>Facts</ion-label>
</ion-button>
<ion-button class="pr-1" *ngIf="contentType === 'url' && env.showBrowseButton === 'on' && isHttp"
<ion-button class="pe-1" *ngIf="contentType === 'url' && env.showBrowseButton === 'on' && isHttp"
(click)="tapHaptic(); browseWebsite()" [color]="env.colorTheme === 'light'? 'dark' : 'light'" fill="outline"
shape="round" [@inAnimation]>
<ion-icon class="pr-2" name="globe"></ion-icon>
<ion-icon class="pe-2" name="globe"></ion-icon>
<ion-label>{{ 'BROWSE' | translate}}</ion-label>
</ion-button>
<ion-button class="pr-1" *ngIf="contentType === 'url' && env.showOpenUrlButton === 'on' && !isHttp"
<ion-button class="pe-1" *ngIf="contentType === 'url' && env.showOpenUrlButton === 'on' && !isHttp"
(click)="tapHaptic(); openLink()" [color]="env.colorTheme === 'light'? 'dark' : 'light'" fill="outline"
shape="round" [@inAnimation]>
<ion-icon class="pr-2" name="open"></ion-icon>
<ion-icon class="pe-2" name="open"></ion-icon>
<ion-label>{{ 'OPEN' | translate}}</ion-label>
</ion-button>
<ion-button class="pr-1"
<ion-button class="pe-1"
*ngIf="(contentType === 'contact' || contentType === 'phone' || contentType === 'sms') && env.showAddContactButton === 'on'"
(click)="tapHaptic(); addContact()" [color]="env.colorTheme === 'light'? 'dark' : 'light'" fill="outline"
shape="round" [@inAnimation]>
<ion-icon class="pr-2" name="person-add-sharp"></ion-icon>
<ion-icon class="pe-2" name="person-add-sharp"></ion-icon>
<ion-label>{{ 'ADD' | translate}}</ion-label>
</ion-button>
<ion-button class="pr-1" *ngIf="contentType === 'phone' && env.showCallButton === 'on'"
<ion-button class="pe-1" *ngIf="contentType === 'phone' && env.showCallButton === 'on'"
(click)="tapHaptic(); callPhone()" [color]="env.colorTheme === 'light'? 'dark' : 'light'" fill="outline"
shape="round" [@inAnimation]>
<ion-icon class="pr-2" name="call"></ion-icon>
<ion-icon class="pe-2" name="call"></ion-icon>
<ion-label>{{ 'CALL' | translate}}</ion-label>
</ion-button>
<ion-button class="pr-1" *ngIf="contentType === 'sms' && smsContent && env.showSendMessageButton === 'on'"
<ion-button class="pe-1" *ngIf="contentType === 'sms' && smsContent && env.showSendMessageButton === 'on'"
(click)="tapHaptic(); sendSms()" [color]="env.colorTheme === 'light'? 'dark' : 'light'" fill="outline"
shape="round" [@inAnimation]>
<ion-icon class="pr-2" name="send"></ion-icon>
<ion-icon class="pe-2" name="send"></ion-icon>
<ion-label>{{ 'SEND' | translate}}</ion-label>
</ion-button>
<ion-button class="pr-1"
<ion-button class="pe-1"
*ngIf="(contentType === 'emailW3C' || contentType === 'emailDocomo') && env.showSendEmailButton === 'on'"
(click)="tapHaptic(); sendEmail()" [color]="env.colorTheme === 'light'? 'dark' : 'light'" fill="outline"
shape="round" [@inAnimation]>
<ion-icon class="pr-2" name="mail"></ion-icon>
<ion-icon class="pe-2" name="mail"></ion-icon>
<ion-label>{{ 'SEND' | translate}}</ion-label>
</ion-button>
<ion-button class="pr-1" *ngIf="env.showSearchButton === 'on'" (click)="tapHaptic(); webSearch()"
<ion-button class="pe-1" *ngIf="env.showSearchButton === 'on'" (click)="tapHaptic(); webSearch()"
[color]="env.colorTheme === 'light'? 'dark' : 'light'" fill="outline" shape="round" [@inAnimation]
[disabled]="!qrCodeContent || (qrCodeContent && qrCodeContent.trim().length <= 0)">
<ion-icon class="pr-2" *ngIf="env.searchEngine === 'google'" slot="icon-only" name="logo-google">
<ion-icon class="pe-2" *ngIf="env.searchEngine === 'google'" slot="icon-only" name="logo-google">
</ion-icon>
<ion-icon class="pr-2" *ngIf="env.searchEngine === 'bing'" slot="icon-only"
<ion-icon class="pe-2" *ngIf="env.searchEngine === 'bing'" slot="icon-only"
src="assets/icon/microsoft-bing.svg">
</ion-icon>
<ion-icon class="pr-2" *ngIf="env.searchEngine === 'yahoo'" slot="icon-only" src="assets/icon/yahoo.svg">
<ion-icon class="pe-2" *ngIf="env.searchEngine === 'yahoo'" slot="icon-only" src="assets/icon/yahoo.svg">
</ion-icon>
<ion-icon class="pr-2" *ngIf="env.searchEngine === 'duckduckgo'" slot="icon-only"
<ion-icon class="pe-2" *ngIf="env.searchEngine === 'duckduckgo'" slot="icon-only"
src="assets/icon/duck-duck-go.svg">
</ion-icon>
<ion-icon class="pr-2" *ngIf="env.searchEngine === 'yandex'" slot="icon-only" src="assets/icon/yandex.svg">
<ion-icon class="pe-2" *ngIf="env.searchEngine === 'yandex'" slot="icon-only" src="assets/icon/yandex.svg">
</ion-icon>
<ion-icon class="pr-2" *ngIf="env.searchEngine === 'ecosia'" slot="icon-only" src="assets/icon/ecosia.svg">
<ion-icon class="pe-2" *ngIf="env.searchEngine === 'ecosia'" slot="icon-only" src="assets/icon/ecosia.svg">
</ion-icon>
<ion-label>{{ 'SEARCH' | translate}}</ion-label>
</ion-button>
<ion-button class="pr-1" *ngIf="env.showCopyButton === 'on'" (click)="tapHaptic(); copyText()"
<ion-button class="pe-1" *ngIf="env.showCopyButton === 'on'" (click)="tapHaptic(); copyText()"
[color]="env.colorTheme === 'light'? 'dark' : 'light'" fill="outline" shape="round" [@inAnimation]
[disabled]="!qrCodeContent || (qrCodeContent && qrCodeContent.trim().length <= 0)">
<ion-icon class="pr-2" slot="icon-only" name="copy"></ion-icon>
<ion-icon class="pe-2" slot="icon-only" name="copy"></ion-icon>
<ion-label>{{ 'COPY' | translate}}</ion-label>
</ion-button>
<ion-button class="pr-1" *ngIf="env.showBase64Button === 'on'" (click)="tapHaptic(); base64()"
<ion-button class="pe-1" *ngIf="env.showBase64Button === 'on'" (click)="tapHaptic(); base64()"
[color]="env.colorTheme === 'light'? 'dark' : 'light'" fill="outline" shape="round" [@inAnimation]
[disabled]="!qrCodeContent || (qrCodeContent && qrCodeContent.trim().length <= 0)">
<ion-icon class="pr-2" slot="icon-only" name="code-working"></ion-icon>
<ion-icon class="pe-2" slot="icon-only" name="code-working"></ion-icon>
<ion-label>{{ 'BASE64' | translate}}</ion-label>
</ion-button>
<ion-button class="pr-1" *ngIf="env.showEnlargeButton === 'on'" (click)="tapHaptic(); enlarge()"
<ion-button class="pe-1" *ngIf="env.showEnlargeButton === 'on'" (click)="tapHaptic(); enlarge()"
[color]="env.colorTheme === 'light'? 'dark' : 'light'" fill="outline" shape="round" [@inAnimation]
[disabled]="!qrCodeContent || (qrCodeContent && qrCodeContent.trim().length <= 0)">
<ion-icon class="pr-2" slot="icon-only" name="qr-code-sharp"></ion-icon>
<ion-icon class="pe-2" slot="icon-only" name="qr-code-sharp"></ion-icon>
<ion-label>{{ 'SHOW' | translate}}</ion-label>
</ion-button>
<ion-button *ngIf="env.showBookmarkButton === 'on'" (click)="tapHaptic(); handleBookmark()"
[color]="!bookmarked? (env.colorTheme === 'light'? 'dark' : 'light') : 'warning'" fill="outline" shape="round"
[@inAnimation] [disabled]="!qrCodeContent || (qrCodeContent && qrCodeContent.trim().length <= 0)">
<ion-icon class="pr-2" slot="icon-only" name="bookmark"></ion-icon>
<ion-icon class="pe-2" slot="icon-only" name="bookmark"></ion-icon>
<ion-label *ngIf="!bookmarked">{{ 'BOOKMARK' | translate}}</ion-label>
<ion-label *ngIf="bookmarked">{{ 'BOOKMARKED' | translate}}</ion-label>
</ion-button>

8
src/app/pages/result/result.page.ts
View file

@ -5,7 +5,6 @@ import { SMS } from '@awesome-cordova-plugins/sms/ngx';
import { Haptics, ImpactStyle } from '@capacitor/haptics';
import { AlertController, LoadingController, ModalController, Platform } from '@ionic/angular';
import { TranslateService } from '@ngx-translate/core';
import { NgxQrcodeElementTypes, NgxQrcodeErrorCorrectionLevels } from '@techiediaries/ngx-qrcode';
import { VCardContact } from 'src/app/models/v-card-contact';
import { EnvService } from 'src/app/services/env.service';
import { Toast } from '@capacitor/toast';
@ -14,6 +13,7 @@ import { BarcodeScanner } from '@capacitor-community/barcode-scanner';
import { QrCodePage } from 'src/app/modals/qr-code/qr-code.page';
import { fadeIn } from 'src/app/utils/animations';
import { Router } from '@angular/router';
import { QRCodeElementType } from 'angularx-qrcode';
@Component({
selector: 'app-result',
@ -26,8 +26,8 @@ export class ResultPage {
contentType: "freeText" | "url" | "contact" | "phone" | "sms" | "emailW3C" | "emailDocomo" | "wifi" = "freeText";
qrCodeContent: string;
qrElementType: NgxQrcodeElementTypes = NgxQrcodeElementTypes.CANVAS;
errorCorrectionLevel: NgxQrcodeErrorCorrectionLevels = NgxQrcodeErrorCorrectionLevels.LOW;
qrElementType: QRCodeElementType = "canvas";
errorCorrectionLevel: 'low' | 'medium' | 'quartile' | 'high' | 'L' | 'M' | 'Q' | 'H' = 'low';
qrMargin: number = 3;
phoneNumber: string;
@ -596,7 +596,7 @@ export class ResultPage {
} else if (!failEncoded && failDecoded) {
await this.presentToast(this.translate.instant('MSG.NOT_BASE64_DE'), "short", "center");
}
setTimeout(() => this.formFields?.forEach(ff => ff.updateOutlineGap()), 100);
// setTimeout(() => this.formFields?.forEach(ff => ff.updateOutlineGap()), 100);
}
generateVCardContact(): void {

4
src/app/pages/setting-qr/setting-qr.module.ts
View file

@ -10,7 +10,7 @@ import { SettingQrPage } from './setting-qr.page';
import { HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode';
import { QRCodeModule } from 'angularx-qrcode';
export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
@ -21,7 +21,7 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
CommonModule,
FormsModule,
IonicModule,
NgxQRCodeModule,
QRCodeModule,
TranslateModule.forChild({
loader: {
provide: TranslateLoader,

4
src/app/pages/setting-qr/setting-qr.page.html
View file

@ -20,10 +20,10 @@
<div class="d-flex align-items-center justify-content-top flex-column ion-padding-bottom" slot="content">
<ion-row class="ion-padding-vertical">
<ion-col class="ion-text-center" style="max-width: 100% !important;">
<ngx-qrcode [elementType]="qrElementType" [value]="qrCodeContent" [width]="defaultWidth"
<qrcode [elementType]="qrElementType" [qrdata]="qrCodeContent" [width]="defaultWidth"
[errorCorrectionLevel]="errorCorrectionLevel" [colorDark]="qrColorDark" [colorLight]="qrColorLight"
[margin]="env.qrCodeMargin" #qrcode>
</ngx-qrcode>
</qrcode>
</ion-col>
</ion-row>
<ion-row>

16
src/app/pages/setting-qr/setting-qr.page.ts
View file

@ -4,7 +4,7 @@ import { Preferences } from '@capacitor/preferences';
import { Toast } from '@capacitor/toast';
import { AlertController, Platform } from '@ionic/angular';
import { TranslateService } from '@ngx-translate/core';
import { NgxQrcodeElementTypes, NgxQrcodeErrorCorrectionLevels } from '@techiediaries/ngx-qrcode';
import { QRCodeElementType } from 'angularx-qrcode';
import { EnvService } from 'src/app/services/env.service';
import { rgbToHex } from 'src/app/utils/helpers';
@ -16,8 +16,8 @@ import { rgbToHex } from 'src/app/utils/helpers';
export class SettingQrPage {
qrCodeContent: string = 'https://github.com/tomfong/simple-qr';
qrElementType: NgxQrcodeElementTypes = NgxQrcodeElementTypes.CANVAS;
errorCorrectionLevel: NgxQrcodeErrorCorrectionLevels;
qrElementType: QRCodeElementType = "canvas";
errorCorrectionLevel: 'low' | 'medium' | 'quartile' | 'high' | 'L' | 'M' | 'Q' | 'H';
readonly MAX_WIDTH = 300;
defaultWidth: number = window.innerWidth * 0.4 > this.MAX_WIDTH ? this.MAX_WIDTH : window.innerWidth * 0.4;
@ -51,19 +51,19 @@ export class SettingQrPage {
setErrorCorrectionLevel() {
switch (this.env.errorCorrectionLevel) {
case 'L':
this.errorCorrectionLevel = NgxQrcodeErrorCorrectionLevels.LOW;
this.errorCorrectionLevel = 'low';
break;
case 'M':
this.errorCorrectionLevel = NgxQrcodeErrorCorrectionLevels.MEDIUM;
this.errorCorrectionLevel = 'medium';
break;
case 'Q':
this.errorCorrectionLevel = NgxQrcodeErrorCorrectionLevels.QUARTILE;
this.errorCorrectionLevel = 'quartile';
break;
case 'H':
this.errorCorrectionLevel = NgxQrcodeErrorCorrectionLevels.HIGH;
this.errorCorrectionLevel = 'high';
break;
default:
this.errorCorrectionLevel = NgxQrcodeErrorCorrectionLevels.MEDIUM;
this.errorCorrectionLevel = 'medium';
}
}

2
src/app/pages/setting-record/setting-record.page.html
View file

@ -56,7 +56,7 @@
<ion-modal #tutorialModal trigger="open-tutorial-modal" [initialBreakpoint]="0.8" [breakpoints]="[0, 0.8]">
<ng-template>
<ion-content [color]="color">
<ion-list-header class="mt-4 ml-3" style="font-size: x-large;">{{ 'TUTORIAL' | translate }}</ion-list-header>
<ion-list-header class="mt-4 ms-3" style="font-size: x-large;">{{ 'TUTORIAL' | translate }}</ion-list-header>
<ion-item class="content-item ion-no-padding" lines="none" [color]="color">
<ion-icon class="ion-padding-horizontal" src="assets/icon/swipe-left.svg" [color]="'primary'"></ion-icon>
<ion-label>

10
src/app/services/env.service.ts
View file

@ -44,7 +44,7 @@ export class EnvService {
public scanRecordLogging: OnOffType = 'on';
public recordsLimit: 30 | 50 | 100 | -1 = -1;
public showNumberOfRecords: OnOffType = 'on';
public autoMaxBrightness: OnOffType = 'on';
public autoMaxBrightness: OnOffType = 'off';
public errorCorrectionLevel: ErrorCorrectionLevelType = 'M';
public qrCodeLightR: number = 255;
public qrCodeLightG: number = 255;
@ -500,7 +500,7 @@ export class EnvService {
if (value != null) {
this.autoMaxBrightness = value;
} else {
this.autoMaxBrightness = 'on';
this.autoMaxBrightness = 'off';
}
await Preferences.set({
key: this.KEY_AUTO_MAX_BRIGHTNESS,
@ -995,7 +995,7 @@ export class EnvService {
if (result.value != null) {
this.autoMaxBrightness = result.value as OnOffType;
} else {
this.autoMaxBrightness = 'on';
this.autoMaxBrightness = 'off';
}
}
);
@ -1193,7 +1193,7 @@ export class EnvService {
this.scanRecordLogging = 'on';
this.recordsLimit = -1;
this.showNumberOfRecords = 'on';
this.autoMaxBrightness = 'on';
this.autoMaxBrightness = 'off';
this.errorCorrectionLevel = 'M';
this.qrCodeLightR = 255;
this.qrCodeLightG = 255;
@ -1264,7 +1264,7 @@ export class EnvService {
this.showNumberOfRecords = 'on';
await Preferences.set({ key: this.KEY_SHOW_NUMBER_OF_RECORDS, value: this.showNumberOfRecords });
this.autoMaxBrightness = 'on';
this.autoMaxBrightness = 'off';
await Preferences.set({ key: this.KEY_AUTO_MAX_BRIGHTNESS, value: this.autoMaxBrightness });
this.errorCorrectionLevel = 'M';

5
src/global.scss
View file

@ -133,4 +133,9 @@ ion-tab-button:not(.tab-selected)::part(native):hover {
.pre-line {
white-space: pre-line !important;
}
.mat-icon {
height: 28px !important;
width: 28px !important;
}

16
src/theme/variables.scss
View file

@ -1,6 +1,15 @@
@use "@angular/material" as mat;
@import "@angular/material/theming";
@include mat.core();
// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
// The following line adds:
// 1. Default typography styles for all components
// 2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
// If you specify typography styles for the components you use elsewhere, you should delete this line.
// If you don't need the default component typographies but still want the hierarchy styles,
// you can delete this line and instead use:
// `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());
@include mat.legacy-core();
$app-primary: mat.define-palette(mat.$cyan-palette, 600);
$app-warn: mat.define-palette(mat.$red-palette);
$app-light-theme: mat.define-light-theme(
@ -27,7 +36,7 @@ $app-black-theme: mat.define-dark-theme(
primary: $app-primary,
accent: $app-primary,
warn: $app-warn,
),
)
)
);
@ -41,6 +50,9 @@ $app-black-theme: mat.define-dark-theme(
.ng-mat-black {
@include mat.all-component-themes($app-black-theme);
.mdc-menu-surface {
background-color: #0f0f0f !important;
}
}
:root {