feat: directly edit content of QR ccode in Result page

This commit is contained in:
Tom Fong 2023-07-07 13:45:16 +08:00
parent 475146a8a0
commit 5210141b9c
5 changed files with 19 additions and 3 deletions

View file

@ -106,6 +106,10 @@ export class GeneratePage {
async ionViewDidEnter() {
await SplashScreen.hide()
if (this.env.editingContent) {
this.qrCodeContent = this.env.resultContent;
this.env.editingContent = false;
}
this.freeTxtText = this.translate.instant("FREE_TEXT");
this.urlText = this.translate.instant("URL");
this.contactText = this.translate.instant("VCARD_CONTACT");

View file

@ -27,7 +27,7 @@
</ion-row>
<ng-container *ngIf="qrCodeContent && qrCodeContent.trim().length > 0" [ngTemplateOutlet]="contentBlock"
[ngTemplateOutletContext]="{ label: barcodeFormat + ('CONTENT' | translate), content: qrCodeContent, hint: env.resultContentFormat }">
[ngTemplateOutletContext]="{ label: barcodeFormat + ('CONTENT' | translate), content: qrCodeContent, hint: env.resultContentFormat, showEdit: true }">
</ng-container>
<ng-container *ngIf="base64Encoded && qrCodeContent && qrCodeContent.trim().length > 0"
@ -294,7 +294,8 @@
</ion-icon>
<ion-icon class="pe-2" *ngIf="env.searchEngine === 'ecosia'" slot="icon-only" src="assets/icon/ecosia.svg">
</ion-icon>
<ion-icon class="pe-2" *ngIf="env.searchEngine === 'brave'" slot="icon-only" src="assets/icon/brave-search.svg">
<ion-icon class="pe-2" *ngIf="env.searchEngine === 'brave'" slot="icon-only"
src="assets/icon/brave-search.svg">
</ion-icon>
<ion-label>{{ 'SEARCH' | translate}}</ion-label>
</ion-button>
@ -329,7 +330,7 @@
</ion-footer>
<ng-template #contentBlock let-label="label" let-content="content" let-hint="hint">
<ng-template #contentBlock let-label="label" let-content="content" let-hint="hint" let-showEdit="showEdit">
<ion-row class="ion-padding-horizontal" [@inAnimation]>
<ion-col>
<mat-form-field [class]="ngMatThemeClass" appearance="outline" color="accent" [floatLabel]="'always'"
@ -339,6 +340,9 @@
[cdkAutosizeMaxRows]="20" readonly>
</textarea>
<mat-hint *ngIf="hint && hint != ''" style="opacity: 0.5;">{{ hint }}</mat-hint>
<button mat-button color="primary" (click)="editContent()" *ngIf="showEdit" class="m-0 p-0 mt-3" style="background-color: transparent !important; color: var(--ion-color-primary) !important;">
{{ 'EDIT' | translate }}
</button>
</mat-form-field>
</ion-col>
</ion-row>

View file

@ -210,6 +210,11 @@ export class ResultPage {
return "#ffffff";
}
editContent() {
this.env.editingContent = true;
this.router.navigate(['tabs/generate'], { replaceUrl: true });
}
searchOpenFoodFacts() {
window.open(`https://world.openfoodfacts.org/product/${this.qrCodeContent}`, '_system', 'location=yes');
}

View file

@ -147,6 +147,7 @@ export class EnvService {
public readonly PRIVACY_POLICY: string = "https://www.privacypolicies.com/live/771b1123-99bb-4bfe-815e-1046c0437a0f";
resultContent: string = '';
editingContent: boolean = false;
resultContentFormat: string = '';
scanRecords: ScanRecord[] = [];
bookmarks: Bookmark[] = [];

View file

@ -10,6 +10,8 @@
// `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());
@include mat.legacy-core();
@include mat.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(