Code cleaning, modal layout and prevent modal from closing when click…

…ing outside/pressing escape
dainst · Dec 12, 2023 · c40c2d5 · c40c2d5
1 parent 2ceddfe
commit c40c2d5
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 12 deletions.
diff --git a/desktop/src/app/components/docedit/docedit.component.ts b/desktop/src/app/components/docedit/docedit.component.ts
@@ -68,13 +68,12 @@ export class DoceditComponent {
             this.menus.setContext(MenuContext.MODAL);
             const modalRef: NgbModalRef = this.modalService.open(
                 QrCodeScannerModalComponent,
-                { animation: false }
+                { animation: false, backdrop: 'static' }
             );
 
             const scannedCode = await modalRef.result;
             this.documentHolder.clonedDocument.resource.id = scannedCode;
             console.log(scannedCode);
-            // TODO: Set id in documentholder clone gedöns
 
             return true;
         } catch (_) {

diff --git a/desktop/src/app/components/docedit/docedit.scss b/desktop/src/app/components/docedit/docedit.scss
@@ -64,6 +64,17 @@
     .sub-label {
       margin-left: 10px;
     }
+    #qr-scanner {
+      cursor: default;
+      border: none;
+      background: none;
+      box-shadow: none;
+      outline: none;
+
+      &:hover {
+        color: $link-hover-color;
+      }
+    }
   }
 
   .mdi-arrow-left {

diff --git a/desktop/src/app/components/resources/searchbar/resources-search-bar.component.ts b/desktop/src/app/components/resources/searchbar/resources-search-bar.component.ts
@@ -79,7 +79,7 @@ export class ResourcesSearchBarComponent extends SearchBarComponent {
          this.menus.setContext(MenuContext.MODAL);
             const modalRef: NgbModalRef = this.modalService.open(
                 QrCodeScannerModalComponent,
-                { animation: false }
+                { animation: false, backdrop: 'static' }
             );
 
             const qrCode = await modalRef.result;

diff --git a/desktop/src/app/components/resources/searchbar/resources-search-constraints.component.ts b/desktop/src/app/components/resources/searchbar/resources-search-constraints.component.ts
@@ -17,7 +17,7 @@ import { Routing } from '../../../services/routing';
     selector: 'resources-search-constraints',
     templateUrl: '../../widgets/search-constraints.html',
     host: {
-        '(document:click)': 'handleClick($event)',
+        '(document:click)': 'handleClick($event)'
     }
 })
 /**
@@ -139,7 +139,7 @@ export class ResourcesSearchConstraintsComponent extends SearchConstraintsCompon
             this.menus.setContext(MenuContext.MODAL);
             const modalRef: NgbModalRef = this.modalService.open(
                 QrCodeScannerModalComponent,
-                { animation: false }
+                { animation: false, backdrop: 'static' }
             );
 
             this.openDocument(await modalRef.result);
@@ -154,9 +154,9 @@ export class ResourcesSearchConstraintsComponent extends SearchConstraintsCompon
 
     // to open the scanned document
     private async openDocument(scannedCode: string) {
-        // split the scanned code with an '@'
+
         console.log(scannedCode);
-
+        // split the scanned code with an '@'
         const [uuid, projectName] = scannedCode.split('@');
         const document = (await this.datastore.get(uuid) as FieldDocument);
 

diff --git a/desktop/src/app/components/widgets/resources-search-modal-qr.html b/desktop/src/app/components/widgets/resources-search-modal-qr.html
@@ -6,11 +6,12 @@
 >
     Scanner
 </h1>
+<hr />
 <div>
     <video style="max-width: 100%"></video>
 </div>
 
-<h2 *ngIf="!hasCamera" style="text-align: center; color: red;">
+<h2 *ngIf="!hasCamera" style="text-align: center; color: red">
     <span
         class="mdi mdi-emoticon-sad-outline"
         style="
@@ -21,5 +22,11 @@ <h2 *ngIf="!hasCamera" style="text-align: center; color: red;">
             color: red;
         "
     ></span>
-    Sorry <br> Camera not found
+    Sorry <br />
+    Camera not found
 </h2>
+<div class="modal-footer">
+    <div type="button" class="btn btn-secondary" (click)="close()">
+        <span i18n="@@buttons.cancel">Abbrechen</span>
+    </div>
+</div>
diff --git a/desktop/src/app/components/widgets/resources-search-modal-qr.ts b/desktop/src/app/components/widgets/resources-search-modal-qr.ts
@@ -1,7 +1,6 @@
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { Routing } from '../../services/routing';
-import { Datastore, FieldDocument } from 'idai-field-core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { FieldDocument } from 'idai-field-core';
 import QrScanner from 'qr-scanner'; 
 
 @Component({