Merge pull request #26 from tomfong/dev

Dev

README.md

@@ -108,7 +108,15 @@ Thanks for your support!
 
 ## Changelogs
 
-### 1.4.0 (Current)
+### 1.5.0 (Current)
+
+- Support Black color theme
+- Support zooming in QR code
+- Vibration effect update
+- Minor UI update
+- Improve performance and fix issues
+
+#### 1.4.0
 
 - Migrated the app to Capacitor
 - Improve experience when using "Special Actions" feature in Result page

android/app/build.gradle

@@ -6,8 +6,8 @@ android {
         applicationId "com.tomfong.simpleqr"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 10400
-        versionName "1.4.0.20211225"
+        versionCode 10500
+        versionName "1.5.0.20220110"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-qr",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "author": "Tom Fong",
   "homepage": "https://tomfong-io.web.app",
   "scripts": {
@@ -46,7 +46,6 @@
     "@ionic-native/sms": "^5.31.1",
     "@ionic-native/social-sharing": "^5.31.1",
     "@ionic-native/theme-detection": "^5.32.0",
-    "@ionic-native/vibration": "^5.31.1",
     "@ionic/angular": "^5.9.3",
     "@ionic/storage": "^3.0.2",
     "@ionic/storage-angular": "^3.0.2",
@@ -93,7 +92,6 @@
     "cordova-plugin-qrscanner": "^3.0.1",
     "cordova-plugin-statusbar": "^2.4.2",
     "cordova-plugin-theme-detection": "^1.3.0",
-    "cordova-plugin-vibration": "^3.1.1",
     "cordova-plugin-whitelist": "^1.3.3",
     "cordova-sms-plugin": "^1.0.1",
     "cordova-sqlite-storage": "^5.1.0",

src/app/app.module.ts

@@ -11,36 +11,35 @@ import { DeviceMotion } from '@ionic-native/device-motion/ngx';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
-import { Vibration } from '@ionic-native/vibration/ngx';
 import { IonicStorageModule } from '@ionic/storage-angular';
-//import { Clipboard } from '@ionic-native/clipboard/ngx';
 import { SocialSharing } from '@ionic-native/social-sharing/ngx';
 import { CallNumber } from '@ionic-native/call-number/ngx';
 import { SMS } from '@ionic-native/sms/ngx';
 import { ThemeDetection } from '@ionic-native/theme-detection/ngx';
-//import { Device } from '@ionic-native/device/ngx';
 import { AppVersion } from '@ionic-native/app-version/ngx';
 import { OpenNativeSettings } from '@ionic-native/open-native-settings/ngx';
-//import { Camera } from '@ionic-native/camera/ngx';
 import { File } from '@ionic-native/file/ngx';
 
-
-import { CreateContactPageModule } from './modals/create-contact/create-contact.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { HistoryTutorialPageModule } from './modals/history-tutorial/history-tutorial.module';
 import { DatePipe } from '@angular/common';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatButtonModule } from '@angular/material/button';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { MenuComponent } from './components/menu/menu.component';
+import { QrcodeComponent } from './components/qrcode/qrcode.component';
+import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode';
 
 export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
   return new TranslateHttpLoader(http, './assets/i18n/', '.json');
 }
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    MenuComponent,
+    QrcodeComponent
   ],
   entryComponents: [],
   imports: [
@@ -56,19 +55,18 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
       }
     }),
     IonicStorageModule.forRoot(),
-    CreateContactPageModule,
     HistoryTutorialPageModule,
     BrowserAnimationsModule,
     MatFormFieldModule,
     MatSlideToggleModule,
     MatButtonModule,
     NgbModule,
+    NgxQRCodeModule,
   ],
   providers: [
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     AppVersion,
     CallNumber,
-    // Camera,
     DatePipe,
     DeviceMotion,
     File,
@@ -77,7 +75,6 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
     SMS,
     SocialSharing,
     ThemeDetection,
-    Vibration,
   ],
   bootstrap: [AppComponent],
 })

src/app/components/menu/menu.component.html

@@ -0,0 +1,9 @@
+<ion-list>
+  <ng-container *ngFor="let item of menuItems; index as i">
+    <ion-item button [lines]="i === menuItems.length - 1? 'none' : 'full'" (click)="onPress(item.action)" detail="false">
+      <ion-icon *ngIf="item.icon?.nameOrSrc === 'name'" slot="start" [name]="item.icon?.ref" [color]="item.icon?.color"></ion-icon>
+      <ion-icon *ngIf="item.icon?.nameOrSrc === 'src'" slot="start" [src]="item.icon?.ref" [color]="item.icon?.color"></ion-icon>
+      <ion-label style="white-space: initial;">{{ item.label | translate }}</ion-label>
+    </ion-item>
+  </ng-container>
+</ion-list>

src/app/components/menu/menu.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input } from '@angular/core';
+import { PopoverController } from '@ionic/angular';
+import { MenuItem } from 'src/app/models/menu-item';
+
+@Component({
+  selector: 'app-menu',
+  templateUrl: './menu.component.html',
+  styleUrls: ['./menu.component.scss'],
+})
+export class MenuComponent {
+
+  @Input() menuItems: MenuItem[];
+
+  constructor(
+    private popoverController: PopoverController,
+  ) { }
+
+  onPress(action: string) {
+    this.popoverController.dismiss({ action });
+  }
+}

src/app/components/qrcode/qrcode.component.html

@@ -0,0 +1,10 @@
+<ion-content style="--background: transparent !important;">
+  <ion-row class="d-flex align-items-center justify-content-center" style="height: 100%;">
+    <ion-col class="ion-text-center ion-padding" style="max-width: 100% !important;">
+      <ngx-qrcode [elementType]="qrElementType" [value]="qrCodeContent" [width]="300"
+        [errorCorrectionLevel]="errorCorrectionLevel" [colorDark]="qrColorDark" [colorLight]="qrColorLight"
+        [margin]="qrMargin">
+      </ngx-qrcode>
+    </ion-col>
+  </ion-row>
+</ion-content>

src/app/components/qrcode/qrcode.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input } from '@angular/core';
+import { NgxQrcodeElementTypes, NgxQrcodeErrorCorrectionLevels } from '@techiediaries/ngx-qrcode';
+
+@Component({
+  selector: 'app-qrcode',
+  templateUrl: './qrcode.component.html',
+  styleUrls: ['./qrcode.component.scss'],
+})
+export class QrcodeComponent {
+
+  @Input() qrCodeContent: string;
+  qrElementType: NgxQrcodeElementTypes = NgxQrcodeElementTypes.CANVAS;
+  errorCorrectionLevel: NgxQrcodeErrorCorrectionLevels = NgxQrcodeErrorCorrectionLevels.LOW;
+  qrMargin: number = 3;
+
+  constructor() { }
+
+
+  get qrColorDark(): string {
+    return "#222428";
+  }
+
+  get qrColorLight(): string {
+    return "#ffffff";
+  }
+
+}