Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Compatibility - How To Customize CSS on this Library? #389

Open
mochammadfawwaz opened this issue Jan 13, 2022 · 6 comments
Open

Compatibility - How To Customize CSS on this Library? #389

mochammadfawwaz opened this issue Jan 13, 2022 · 6 comments
Assignees
@mebjas @mohsinaav
Labels
compatibility

Comments

@mochammadfawwaz
Copy link

Describe the bug
A clear and concise description of what the bug is.

  • hey sir. I'm a newbie developer, and I have a question about How to customize the " Request Camera Permission button and another element HTML?" can you give a reference?

Describe the browser:

  • Windows 10
  • Chrome
  • Version: 97
    image
    image

Thank you
@laplacetw
Copy link

Pro Mode - if you want to implement your own user interface.

@mebjas
Copy link
Owner

mebjas commented Feb 19, 2022

@laplacetw thanks for the answer! -- that is the official answer for now.

There have been request to allow improvement in the CSS of the Html5QrcodeScanner as well. Ideas on the design are welcome.

This was referenced Oct 29, 2022
Closed
Closed
Closed
@mebjas
Copy link
Owner

mebjas commented Oct 29, 2022

@picocodes shared idea of adding css classes to the buttons. That seems doable - then the consumers can likely override the style with their own CSS.

@mebjas mebjas mentioned this issue Oct 30, 2022
Closed
@mebjas
Copy link
Owner

mebjas commented Oct 30, 2022 •
edited
Loading

Will add the css classes in v2.2.7 with some refactors.

@mebjas mebjas self-assigned this Oct 30, 2022
mebjas added a commit that referenced this issue Nov 4, 2022
@mebjas
Add ui classes and id, update file selection UI & graduate useBarCode…
8341c2b 
…DetectorIfSupported from experimental

#### Add support for custom CSS
Developer / User Story: As a developer I can write custom CSS for `Html5QrcodeScanner`.

Feature request: [Issue#389](#389)

List of CSS class and IDs added.

1. All key elements will have a common CSS class `html5-qrcode-element`. This way developers can customise element by element. For example:

```css
button.html5-qrcode-element {
    color: 'red' !important,
    border: '1px solid red' !important
}
```

Key elements are:
-    Request camera permission button.
-    "Scan and image file" vs "Scan using camera directly" link.
-    "File selection" input ('file')
-    Start or Stop camera button.
-    Camera selection Select element
-    Torch button

2. key elements will have specific IDs defined in `src/ui/scanner/base.ts`. This can be used to customise per elements.

##### TODOs
-   [ ] Document in a blog post
-   [ ] Add pointer in qrcode.minhazav.dev
-   [ ] Add pointer in Readme

#### Graduate `useBarCodeDetectorIfSupported` to `Html5QrcodeConfigs`.
`useBarCodeDetectorIfSupported` was tested as an experimental configuration for
a long time and has proven to be very efficient and well supported. It has been
tested in [ScanApp](https://scanapp.org) for quiet some time.

Considering this experimental API is not well documented, it makes it hard for
folks to discover it. By graduating this configuration to `Html5QrcodeConfigs` I
hope to make it more discoverable.

In this version the `ExperimentalFeaturesConfig#useBarCodeDetectorIfSupported`
has been marked deprecated but not removed due to backwards compatibility
reasons. Users can set either of them but `Html5QrcodeConfigs` one will take
precedence if set.

Once further support is added to browsers, this can be set as true by default.

##### TODOS
-    [ ] Update documentation on readme.
-    [ ] Update documentation on [qrcode.minhazav.dev](https://qrcode.minhazav.dev).
-    [ ] Publish article around this.
@mebjas mebjas mentioned this issue Nov 4, 2022
Merged
7 tasks
mebjas added a commit that referenced this issue Nov 4, 2022
@mebjas
Version 2.2.7 (see comment for list of changes) (#575)
ca5510c 
* Abstract UI element creation.

* Add ui classes and id, update file selection UI & graduate useBarCodeDetectorIfSupported from experimental

#### Add support for custom CSS
Developer / User Story: As a developer I can write custom CSS for `Html5QrcodeScanner`.

Feature request: [Issue#389](#389)

List of CSS class and IDs added.

1. All key elements will have a common CSS class `html5-qrcode-element`. This way developers can customise element by element. For example:

```css
button.html5-qrcode-element {
    color: 'red' !important,
    border: '1px solid red' !important
}
```

Key elements are:
-    Request camera permission button.
-    "Scan and image file" vs "Scan using camera directly" link.
-    "File selection" input ('file')
-    Start or Stop camera button.
-    Camera selection Select element
-    Torch button

2. key elements will have specific IDs defined in `src/ui/scanner/base.ts`. This can be used to customise per elements.

##### TODOs
-   [ ] Document in a blog post
-   [ ] Add pointer in qrcode.minhazav.dev
-   [ ] Add pointer in Readme

#### Graduate `useBarCodeDetectorIfSupported` to `Html5QrcodeConfigs`.
`useBarCodeDetectorIfSupported` was tested as an experimental configuration for
a long time and has proven to be very efficient and well supported. It has been
tested in [ScanApp](https://scanapp.org) for quiet some time.

Considering this experimental API is not well documented, it makes it hard for
folks to discover it. By graduating this configuration to `Html5QrcodeConfigs` I
hope to make it more discoverable.

In this version the `ExperimentalFeaturesConfig#useBarCodeDetectorIfSupported`
has been marked deprecated but not removed due to backwards compatibility
reasons. Users can set either of them but `Html5QrcodeConfigs` one will take
precedence if set.

Once further support is added to browsers, this can be set as true by default.

##### TODOS
-    [ ] Update documentation on readme.
-    [ ] Update documentation on [qrcode.minhazav.dev](https://qrcode.minhazav.dev).
-    [ ] Publish article around this.

* Misc fixes

* Abstract file selection UI to a separate class.

Created FileSelectionUi class to handle file selection logics.

* Update experimental.md

Resolving codacy concerns.

* Update changelog.md

* Fix codacy warnings.

* Add unit test for file-selection-ui

+ Misc changes.

* Codacy fixes and misc.
@mebjas
Copy link
Owner

mebjas commented Nov 4, 2022

Feature support published with version 2.2.7 along with many UI upgrades :)

Link to changelog

Documentation / blog posts to come soon on how to use.

@picocodes
Copy link

Thank you @mebjas

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mebjas mebjas

@mohsinaav mohsinaav

Labels
compatibility
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@mebjas @laplacetw @picocodes @mohsinaav @mochammadfawwaz