Merge pull request #73 from Nihu-Sharma/#238t4a0

Improved markup of scanner modal(#238t4a0)
hotwax · Mar 10, 2022 · 8a2b236 · 8a2b236
2 parents 52a344f + 0882e0a
commit 8a2b236
Showing 1 changed file with 23 additions and 17 deletions.
diff --git a/src/components/Scanner.vue b/src/components/Scanner.vue
@@ -1,34 +1,40 @@
 <template>
-  <ion-toolbar>
-    <ion-buttons slot="end" @click="closeScanner()" >
-      <ion-button >
-        <ion-icon :icon="closeOutline" />
-      </ion-button>
-    </ion-buttons>  
-  </ion-toolbar>   
-  <div class="scanner">
-    <StreamBarcodeReader
-      @decode="onDecode"
-      @loaded="onLoaded"
-    />
-  </div> 
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="end" @click="closeScanner()" >
+        <ion-button>
+          <ion-icon slot="icon-only" :icon="closeOutline" />
+        </ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    <div class="scanner">
+      <StreamBarcodeReader
+        @decode="onDecode"
+        @loaded="onLoaded"
+      />
+    </div>
+  </ion-content>
 </template>
 
 <script>
 import { StreamBarcodeReader } from "vue-barcode-reader";
-import { IonButton, IonButtons, IonIcon, IonToolbar, modalController } from '@ionic/vue';
-import { 
+import { IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonToolbar, modalController } from '@ionic/vue';
+import {
   closeOutline
 } from 'ionicons/icons';
 export default {
   name: 'Scanner',
   components: {
     IonButton,
     IonButtons,
+    IonContent,
+    IonHeader,
     IonIcon, 
     IonToolbar,
     StreamBarcodeReader,
-  },   
+  },
   methods: {
     onDecode(result) {
       modalController.dismiss({dismissed: true}, result);
@@ -43,4 +49,4 @@ export default {
     }
   }
 }
-</script> 
+</script>