gabdlr/groceries-price-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(barcode reader): add close btn

Browse Source
This commit is contained in:
Gabriel De Los Rios
2026-01-17 18:51:37 -03:00
parent a8ff28829d
commit ead327d44f
2 changed files with 22 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
public/barcode-reader/barcode-reader.css
View File

@@ -14,6 +14,21 @@
background-color: #000000; background-color: #000000;
} }
.close-btn {
background: none;
border-radius: 50%;
border-style: none;
color: white;
font-size: 24px;
font-weight: bold;
margin-right: 12px;
margin-top: 12px;
position: absolute;
right: 0;
top: 0;
z-index: 101;
}
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
#container { #container {
min-width: 400px; min-width: 400px;

6
src/app/web-components/barcode-reader.ts
View File

@@ -24,10 +24,16 @@ export class BarcodeReader extends HTMLElement {
link.rel = 'stylesheet'; link.rel = 'stylesheet';
link.href = '/barcode-reader/barcode-reader.css'; link.href = '/barcode-reader/barcode-reader.css';
this.container.setAttribute('id', 'container'); this.container.setAttribute('id', 'container');
const closeBtn = document.createElement('button');
closeBtn.textContent = 'X';
closeBtn.onclick = this.stopScan.bind(this);
closeBtn.classList.add('close-btn')
this.container.appendChild(closeBtn);
const videoContainer = document.createElement('div'); const videoContainer = document.createElement('div');
videoContainer.setAttribute('id', 'video-container'); videoContainer.setAttribute('id', 'video-container');
this.container.appendChild(videoContainer); this.container.appendChild(videoContainer);
const overlay = document.createElement('div'); const overlay = document.createElement('div');
overlay.classList.add('overlay'); overlay.classList.add('overlay');
this.video.setAttribute('autoplay', ''); this.video.setAttribute('autoplay', '');