From d50fe4f445f964ca109f39cfe777955e3cb047d6 Mon Sep 17 00:00:00 2001 From: nico-k3 Date: Fri, 1 Oct 2021 00:05:49 +0200 Subject: [PATCH 1/7] Camera Stream Reading. Todo: Camera feed Popup, Mount Component with popup, upload image button, write reading to imput --- package-lock.json | 228 ++++++++++++++++++++++++++++++++++++++++++---- package.json | 1 + src/interface.vue | 26 +++++- 3 files changed, 234 insertions(+), 21 deletions(-) diff --git a/package-lock.json b/package-lock.json index 529de00..dd9a8dc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -85,8 +85,7 @@ "@babel/parser": { "version": "7.15.3", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.3.tgz", - "integrity": "sha512-O0L6v/HvqbdJawj0iBEfVQMc3/6WP+AeOsovsIgBFyJaG+W2w7eqvZB7puddATmWuARlm1SX7DwxJ/JJUnDpEA==", - "dev": true + "integrity": "sha512-O0L6v/HvqbdJawj0iBEfVQMc3/6WP+AeOsovsIgBFyJaG+W2w7eqvZB7puddATmWuARlm1SX7DwxJ/JJUnDpEA==" }, "@babel/types": { "version": "7.15.0", @@ -407,6 +406,26 @@ "@types/node": "*" } }, + "@vue/compiler-core": { + "version": "3.2.19", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.19.tgz", + "integrity": "sha512-8dOPX0YOtaXol0Zf2cfLQ4NU/yHYl2H7DCKsLEZ7gdvPK6ZSEwGLJ7IdghhY2YEshEpC5RB9QKdC5I07z8Dtjg==", + "requires": { + "@babel/parser": "^7.15.0", + "@vue/shared": "3.2.19", + "estree-walker": "^2.0.2", + "source-map": "^0.6.1" + } + }, + "@vue/compiler-dom": { + "version": "3.2.19", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.19.tgz", + "integrity": "sha512-WzQoE8rfkFjPtIioc7SSgTsnz9g2oG61DU8KHnzPrRS7fW/lji6H2uCYJfp4Z6kZE8GjnHc1Ljwl3/gxDes0cw==", + "requires": { + "@vue/compiler-core": "3.2.19", + "@vue/shared": "3.2.19" + } + }, "@vue/compiler-sfc": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.2.tgz", @@ -516,6 +535,85 @@ "integrity": "sha512-quBx4Jjpexo6KDiNUGFr/zF/2A4srKM9S9v2uHgMXSU//hjgq1eGzqkIFql8T9gfX5ZaVOUzYBP3jIdIR3PKIA==", "dev": true }, + "@vue/reactivity": { + "version": "3.2.19", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.19.tgz", + "integrity": "sha512-FtachoYs2SnyrWup5UikP54xDX6ZJ1s5VgHcJp4rkGoutU3Ry61jhs+nCX7J64zjX992Mh9gGUC0LqTs8q9vCA==", + "requires": { + "@vue/shared": "3.2.19" + } + }, + "@vue/ref-transform": { + "version": "3.2.19", + "resolved": "https://registry.npmjs.org/@vue/ref-transform/-/ref-transform-3.2.19.tgz", + "integrity": "sha512-03wwUnoIAeKti5IGGx6Vk/HEBJ+zUcm5wrUM3+PQsGf7IYnXTbeIfHHpx4HeSeWhnLAjqZjADQwW8uA4rBmVbg==", + "requires": { + "@babel/parser": "^7.15.0", + "@vue/compiler-core": "3.2.19", + "@vue/shared": "3.2.19", + "estree-walker": "^2.0.2", + "magic-string": "^0.25.7" + } + }, + "@vue/runtime-core": { + "version": "3.2.19", + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.19.tgz", + "integrity": "sha512-qArZSWKxWsgKfxk9BelZ32nY0MZ31CAW2kUUyVJyxh4cTfHaXGbjiQB5JgsvKc49ROMNffv9t3/qjasQqAH+RQ==", + "requires": { + "@vue/reactivity": "3.2.19", + "@vue/shared": "3.2.19" + } + }, + "@vue/runtime-dom": { + "version": "3.2.19", + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.19.tgz", + "integrity": "sha512-hIRboxXwafeHhbZEkZYNV0MiJXPNf4fP0X6hM2TJb0vssz8BKhD9cF92BkRgZztTQevecbhk0gu4uAPJ3dxL9A==", + "requires": { + "@vue/runtime-core": "3.2.19", + "@vue/shared": "3.2.19", + "csstype": "^2.6.8" + } + }, + "@vue/server-renderer": { + "version": "3.2.19", + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.19.tgz", + "integrity": "sha512-A9FNT7fgQJXItwdzWREntAgWKVtKYuXHBKGev/H4+ByTu8vB7gQXGcim01QxaJshdNg4dYuH2tEBZXCNCNx+/w==", + "requires": { + "@vue/compiler-ssr": "3.2.19", + "@vue/shared": "3.2.19" + }, + "dependencies": { + "@vue/compiler-ssr": { + "version": "3.2.19", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.19.tgz", + "integrity": "sha512-oLon0Cn3O7WEYzzmzZavGoqXH+199LT+smdjBT3Uf3UX4HwDNuBFCmvL0TsqV9SQnIgKvBRbQ7lhbpnd4lqM3w==", + "requires": { + "@vue/compiler-dom": "3.2.19", + "@vue/shared": "3.2.19" + } + } + } + }, + "@vue/shared": { + "version": "3.2.19", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.19.tgz", + "integrity": "sha512-Knqhx7WieLdVgwCAZgTVrDCXZ50uItuecLh9JdLC8O+a5ayaSyIQYveUK3hCRNC7ws5zalHmZwfdLMGaS8r4Ew==" + }, + "@zxing/library": { + "version": "0.18.6", + "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.18.6.tgz", + "integrity": "sha512-bulZ9JHoLFd9W36pi+7e7DnEYNJhljYjZ1UTsKPOoLMU3qtC+REHITeCRNx40zTRJZx18W5TBRXt5pq2Uopjsw==", + "requires": { + "@zxing/text-encoding": "~0.9.0", + "ts-custom-error": "^3.0.0" + } + }, + "@zxing/text-encoding": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@zxing/text-encoding/-/text-encoding-0.9.0.tgz", + "integrity": "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==", + "optional": true + }, "accepts": { "version": "1.3.7", "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz", @@ -574,6 +672,15 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "barcode-detector": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/barcode-detector/-/barcode-detector-0.7.0.tgz", + "integrity": "sha512-SJh+LV6e+W5e6QJe70ralFfqcYwvaOUGWyr+GepuQ5swPH4jF2asyTxOIUZNSU9Z5isD3KWI5hlqQ+b/QaFFOg==", + "requires": { + "@zxing/library": "^0.18.4", + "jsqr": "^1.3.1" + } + }, "base64-js": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", @@ -722,6 +829,11 @@ "caller-callsite": "^2.0.0" } }, + "callforth": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/callforth/-/callforth-0.4.0.tgz", + "integrity": "sha512-k3kD3OBPRvYs3Sb41Fn1T7l6vvSmTMPq1a0jxh8QKD+wb+17G8oOq48eBi0stn8ahpNVUJtPlrlYwbfv9Cfhpg==" + }, "callsites": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", @@ -895,8 +1007,7 @@ "colorette": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.3.0.tgz", - "integrity": "sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==", - "dev": true + "integrity": "sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==" }, "commander": { "version": "8.1.0", @@ -952,6 +1063,11 @@ "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=", "dev": true }, + "core-js": { + "version": "3.18.1", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.18.1.tgz", + "integrity": "sha512-vJlUi/7YdlCZeL6fXvWNaLUPh/id12WXj3MbkMw5uOyF0PfWPBNOCNbs53YqgrvtujLNlt9JQpruyIKkUZ+PKA==" + }, "cosmiconfig": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz", @@ -1473,8 +1589,7 @@ "csstype": { "version": "2.6.17", "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz", - "integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==", - "dev": true + "integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==" }, "date-fns": { "version": "2.23.0", @@ -1678,8 +1793,7 @@ "estree-walker": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", - "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", - "dev": true + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==" }, "etag": { "version": "1.8.1", @@ -2252,6 +2366,11 @@ "universalify": "^2.0.0" } }, + "jsqr": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/jsqr/-/jsqr-1.4.0.tgz", + "integrity": "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A==" + }, "knex-schema-inspector": { "version": "1.5.13", "resolved": "https://registry.npmjs.org/knex-schema-inspector/-/knex-schema-inspector-1.5.13.tgz", @@ -2338,7 +2457,6 @@ "version": "0.25.7", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz", "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==", - "dev": true, "requires": { "sourcemap-codec": "^1.4.4" } @@ -2442,8 +2560,7 @@ "nanoid": { "version": "3.1.25", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.25.tgz", - "integrity": "sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==", - "dev": true + "integrity": "sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==" }, "negotiator": { "version": "0.6.2", @@ -2663,7 +2780,6 @@ "version": "8.3.6", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.6.tgz", "integrity": "sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==", - "dev": true, "requires": { "colorette": "^1.2.2", "nanoid": "^3.1.23", @@ -5175,6 +5291,18 @@ "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=", "dev": true }, + "qrcode-reader-vue3": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/qrcode-reader-vue3/-/qrcode-reader-vue3-3.1.2.tgz", + "integrity": "sha512-OqhJ4lkKHlyV42Fm5qptm7cdV3X2DRbtCgTNMjcFY7plkMNDqGo+bPxxlGkoPMCHowxXa1pPu9knWPfoqu5mUg==", + "requires": { + "barcode-detector": "^0.7", + "callforth": "^0.4", + "core-js": "^3", + "vue": "^3", + "webrtc-adapter": "^7" + } + }, "qrcode.vue": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/qrcode.vue/-/qrcode.vue-3.2.2.tgz", @@ -5396,6 +5524,14 @@ } } }, + "rtcpeerconnection-shim": { + "version": "1.2.15", + "resolved": "https://registry.npmjs.org/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz", + "integrity": "sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==", + "requires": { + "sdp": "^2.6.0" + } + }, "safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", @@ -5414,6 +5550,11 @@ "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "dev": true }, + "sdp": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/sdp/-/sdp-2.12.0.tgz", + "integrity": "sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw==" + }, "send": { "version": "0.17.1", "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz", @@ -5522,14 +5663,12 @@ "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" }, "source-map-js": { "version": "0.6.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz", - "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==", - "dev": true + "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==" }, "source-map-support": { "version": "0.5.19", @@ -5544,8 +5683,7 @@ "sourcemap-codec": { "version": "1.4.8", "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", - "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", - "dev": true + "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==" }, "split-on-first": { "version": "1.1.0", @@ -5856,6 +5994,11 @@ "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==", "dev": true }, + "ts-custom-error": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/ts-custom-error/-/ts-custom-error-3.2.0.tgz", + "integrity": "sha512-cBvC2QjtvJ9JfWLvstVnI45Y46Y5dMxIaG1TDMGAD/R87hpvqFL+7LhvUDhnRCfOnx/xitollFWWvUKKKhbN0A==" + }, "tslib": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", @@ -5950,6 +6093,46 @@ "integrity": "sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==", "dev": true }, + "vue": { + "version": "3.2.19", + "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.19.tgz", + "integrity": "sha512-6KAMdIfAtlK+qohTIUE4urwAv4A3YRuo8uAbByApUmiB0CziGAAPs6qVugN6oHPia8YIafHB/37K0O6KZ7sGmA==", + "requires": { + "@vue/compiler-dom": "3.2.19", + "@vue/compiler-sfc": "3.2.19", + "@vue/runtime-dom": "3.2.19", + "@vue/server-renderer": "3.2.19", + "@vue/shared": "3.2.19" + }, + "dependencies": { + "@vue/compiler-sfc": { + "version": "3.2.19", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.19.tgz", + "integrity": "sha512-pLlbgkO1UHTO02MSpa/sFOXUwIDxSMiKZ1ozE5n71CY4DM+YmI+G3gT/ZHZ46WBId7f3VTF/D8pGwMygcQbrQA==", + "requires": { + "@babel/parser": "^7.15.0", + "@vue/compiler-core": "3.2.19", + "@vue/compiler-dom": "3.2.19", + "@vue/compiler-ssr": "3.2.19", + "@vue/ref-transform": "3.2.19", + "@vue/shared": "3.2.19", + "estree-walker": "^2.0.2", + "magic-string": "^0.25.7", + "postcss": "^8.1.10", + "source-map": "^0.6.1" + } + }, + "@vue/compiler-ssr": { + "version": "3.2.19", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.19.tgz", + "integrity": "sha512-oLon0Cn3O7WEYzzmzZavGoqXH+199LT+smdjBT3Uf3UX4HwDNuBFCmvL0TsqV9SQnIgKvBRbQ7lhbpnd4lqM3w==", + "requires": { + "@vue/compiler-dom": "3.2.19", + "@vue/shared": "3.2.19" + } + } + } + }, "vue-router": { "version": "4.0.11", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.11.tgz", @@ -5968,6 +6151,15 @@ "defaults": "^1.0.3" } }, + "webrtc-adapter": { + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-7.7.1.tgz", + "integrity": "sha512-TbrbBmiQBL9n0/5bvDdORc6ZfRY/Z7JnEj+EYOD1ghseZdpJ+nF2yx14k3LgQKc7JZnG7HAcL+zHnY25So9d7A==", + "requires": { + "rtcpeerconnection-shim": "^1.2.15", + "sdp": "^2.12.0" + } + }, "which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/package.json b/package.json index f8d704c..34ca4cf 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@directus/extension-sdk": "^9.0.0-rc.90" }, "dependencies": { + "qrcode-reader-vue3": "^3.1.2", "qrcode.vue": "^3.2.2" } } diff --git a/src/interface.vue b/src/interface.vue index bf24c90..98050e7 100644 --- a/src/interface.vue +++ b/src/interface.vue @@ -11,24 +11,44 @@ :size="300" level="H" /> +

{{ error }}

+

+ Last result: {{ result }} +

+ From 66e60f250739f0cb3c2881fcff10ec2a2f087a77 Mon Sep 17 00:00:00 2001 From: nico-k3 Date: Sat, 16 Oct 2021 18:33:21 +0200 Subject: [PATCH 2/7] Basic Code Reader Functionality. --- src/interface.vue | 59 +++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 52 insertions(+), 7 deletions(-) diff --git a/src/interface.vue b/src/interface.vue index 98050e7..3949ebd 100644 --- a/src/interface.vue +++ b/src/interface.vue @@ -2,6 +2,7 @@
+ Camera
-

{{ error }}

-

- Last result: {{ result }} -

-
+ + + Scan QR-Code + +

{{ error }}

+

+ Last result: {{ result }} +

+
+ + + Close + +
+
- From b27bca313c2443bc6ef3b1a29bda264f5769007a Mon Sep 17 00:00:00 2001 From: nico-k3 Date: Sat, 16 Oct 2021 19:46:51 +0200 Subject: [PATCH 5/7] Updated for SCSS --- src/interface.vue | 56 +++++++++++++++++++++++------------------------ 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/src/interface.vue b/src/interface.vue index de32ff8..6fa909d 100644 --- a/src/interface.vue +++ b/src/interface.vue @@ -123,31 +123,31 @@ export default { border: var(--border-width) solid var(--border-normal); border-radius: var(--border-radius); transition: border-color var(--fast) var(--transition); -} -.input:hover { - --arrow-color: var(--border-normal-alt); - color: var(--v-input-color); - background-color: var(--background-input); - border-color: var(--border-normal-alt); -} -.input.active, -.input:focus-within { - --arrow-color: var(--border-normal-alt); - color: var(--v-input-color); - background-color: var(--background-input); - border-color: var(--v-input-border-color-focus); -} -.input input { - flex-grow: 1; - width: 20px; - height: 100%; - padding: var(--input-padding); - padding-right: 0; - padding-left: 0; - font-family: var(--v-input-font-family); - background-color: transparent; - border: none; - appearance: none; + &::hover { + --arrow-color: var(--border-normal-alt); + color: var(--v-input-color); + background-color: var(--background-input); + border-color: var(--border-normal-alt); + } + &.active, + &:focus-within { + --arrow-color: var(--border-normal-alt); + color: var(--v-input-color); + background-color: var(--background-input); + border-color: var(--v-input-border-color-focus); + } + input { + flex-grow: 1; + width: 20px; + height: 100%; + padding: var(--input-padding); + padding-right: 0; + padding-left: 0; + font-family: var(--v-input-font-family); + background-color: transparent; + border: none; + appearance: none; + } } .code { border: var(--border-width) solid var(--border-normal); @@ -161,9 +161,9 @@ export default { width: 300px !important; height: auto !important; max-width: 100%; -} -.qr.hidden { - display: none; + &.hidden { + display: none; + } } .hintText { // @include type-note; From 88888d22416e95f013f039ba4cbe461770a5d8e0 Mon Sep 17 00:00:00 2001 From: nico-k3 Date: Sat, 16 Oct 2021 19:49:40 +0200 Subject: [PATCH 6/7] Added SASS and QR-Reader to Build With --- README.md | 33 +++++++++++++++------------------ 1 file changed, 15 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 6c2f956..93171af 100644 --- a/README.md +++ b/README.md @@ -23,9 +23,8 @@ - - + ## About The Project This is a simple [Directus 9](https://directus.io/) Interface Extension, which allows to display QR-Codes directly inside of the Directus UI. @@ -33,25 +32,27 @@ It takes a String input and renders a QR-Code underneath the text field. To display the QR-Code in the Collection Overview check out [directus-display-qrcode](https://github.com/K3-Network/directus-display-qrcode). - ### Built With -* [Vue](https://github.com/vuejs/vue) -* [qrcode.vue](https://github.com/scopewu/qrcode.vue) - - +- [Vue](https://github.com/vuejs/vue) +- [qrcode.vue](https://github.com/scopewu/qrcode.vue) +- [qrcode-reader-vue3](https://github.com/scholtz/qrcode-reader-vue3) +- [SASS](https://github.com/sass/sass) + ## Getting Started There are 2 ways to get up and running. Either you compile the Extension yourself, or you download the precompiled Extension: ### Compile it yourself -1. Clone the repo - ```sh - git clone https://github.com/K3-Network/directus-interface-qrcode.git - ``` +1. Clone the repo + +```sh + git clone https://github.com/K3-Network/directus-interface-qrcode.git +``` + 2. Install NPM packages ```sh npm install @@ -67,28 +68,24 @@ There are 2 ways to get up and running. Either you compile the Extension yoursel ### Install the precompiled Extension 1. Download the [Binaries](https://github.com/K3-Network/directus-interface-qrcode/releases/latest/download/directus-interface-qrcode.zip) - 2. Extract the ZIP into `Your-Directus-Installation\extensions\interfaces\` 3. Restart Directus - - + ## Roadmap See the [open issues](https://github.com/K3-Network/directus-interface-qrcode/issues) for a list of proposed features (and known issues). - - + ## License Distributed under the ISC License. See `LICENSE` for more information. - - + ## Contact [Nicolas Mierbach](https://github.com/nico-k3) - K3.Network From 9222da4164484399b16ae6b84a742a8ec4f2cca7 Mon Sep 17 00:00:00 2001 From: nico-k3 Date: Sat, 16 Oct 2021 19:51:50 +0200 Subject: [PATCH 7/7] Error-Message Wording Change --- src/interface.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/interface.vue b/src/interface.vue index 6fa909d..bc95bdc 100644 --- a/src/interface.vue +++ b/src/interface.vue @@ -81,7 +81,7 @@ export default { "ERROR 401: It seems like you have denied Camera access. Please provide permission to this Website to use your Camera."; } else if (error.name === "NotFoundError") { // no suitable camera device installed - this.error = "ERROR 404: We could not detect a Camera device."; + this.error = "ERROR 404: Could not detect a Camera device."; } else if (error.name === "NotSupportedError") { // page is not served over HTTPS (or localhost) this.error =