matt/opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Support for Barcode reader (#650)

Browse Source 
* Add Barcode Input Component and Integrate Quagga for Scanning

- Introduced a new BarcodeInput component for scanning barcodes using the Quagga library.
- Updated package.json and package-lock.json to include Quagga as a dependency.
- Enhanced form themes to accommodate the new BarcodeInput component.
- Added localization support for barcode scanning actions in English.
- Updated blocks_types.json to register the new barcode input type.

These changes improve the application's functionality by allowing users to scan barcodes directly within forms, enhancing user experience and data input efficiency.

* Update Barcode scanner UI

* Barcode decoder as user selection

* improve barcode
This commit is contained in:
Chirag Chhatrala
2025-01-03 20:37:58 +05:30
committed by GitHub
parent 09c4417731
commit 1285dc18d3
29 changed files with 839 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
client/lib/forms/themes/form-themes.js vendored
View File

@@ -55,7 +55,9 @@ export const themes = {
},
SelectInput: {
input:
'relative w-full flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full bg-white text-gray-700 placeholder-gray-400 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-600 shadow-sm text-base focus:outline-none focus:ring-2 focus:border-transparent',
'relative w-full flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full text-gray-700 dark:text-gray-300 dark:placeholder-gray-600 shadow-sm text-base focus:outline-none focus:ring-2 focus:border-transparent',
background: 'bg-white dark:bg-notion-dark-light',
chevronGradient: 'bg-gradient-to-r from-transparent to-white dark:to-notion-dark-light',
dropdown: 'border border-gray-300 dark:border-gray-600',
option: 'rounded',
minHeight: {
@@ -206,7 +208,9 @@ export const themes = {
},
SelectInput: {
input:
'relative w-full flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full bg-white text-gray-700 placeholder-gray-400 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-600 text-base focus:outline-none focus:ring-2 focus:border-transparent',
'relative w-full flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full text-gray-700 dark:text-gray-300 dark:placeholder-gray-600 text-base focus:outline-none focus:ring-2 focus:border-transparent',
background: 'bg-white dark:bg-notion-dark-light',
chevronGradient: 'bg-gradient-to-r from-transparent to-white dark:to-notion-dark-light',
dropdown: 'border border-gray-300 dark:border-gray-600',
option: 'rounded',
minHeight: {
@@ -351,7 +355,9 @@ export const themes = {
},
SelectInput: {
input:
'relative w-full border-transparent flex-1 appearance-none bg-notion-input-background shadow-inner-notion w-full text-gray-900 placeholder-gray-400 dark:bg-notion-dark-light dark:placeholder-gray-500 text-base focus:outline-none focus:ring-0 focus:border-transparent focus:shadow-focus-notion',
'relative w-full border-transparent flex-1 appearance-none shadow-inner-notion w-full text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 text-base focus:outline-none focus:ring-0 focus:border-transparent focus:shadow-focus-notion',
background: 'bg-notion-input-background dark:bg-notion-dark-light',
chevronGradient: 'bg-gradient-to-r from-transparent to-notion-input-background dark:to-notion-dark-light',
dropdown: 'border border-gray-300 dark:border-gray-600',
option: 'rounded',
minHeight: {