Added a new signature pad element and styling for the new element #1576
Conversation
Added signature pad element and added styling for the new signature pad element
|
Thank you for your contribution, I'll give this a test run. Could you please create some Jest tests to ensure the control is working as expected? |
|
@keerthi-balaji Has the code for the signature pad come from another project or is this an original implementation? I know of a few plugins out there https://github.com/szimek/signature_pad with advanced implementations of a canvas signatory pad. |
There was a problem hiding this comment.
Excellent contribution! Signature pad is a long requested feature and I like that this is a simple implementation that is small enough to be bundled with formBuilder.
As @lucasnetau mentioned it needs some tests, here is an example of a custom control test here: https://github.com/kevinchappell/formBuilder/blob/master/tests/form-builder-custom.test.js
Some additional thoughts:
- The label needs some work when rendered
- Can the Clear button be moved to appear inside the signature pad to avoid confusing it with a form clear button?
- The
valueis not saved with other user values in FormData or theuserData
Overall great addition, just needs a few minor tweaks.
src/sass/_controls.scss
Outdated
| } | ||
|
|
||
| .signature-pad { | ||
| //display: block; |
src/sass/form-render.scss
Outdated
| } | ||
|
|
||
| .signature-pad { | ||
| //display: block; |
It is an original implementation... I was just wanting to add a signature pad element to the form builder. |
…he button to 'clear signature', and styled the button to match the background
merge new changes
Fixed the label and placed the clear button within the canvas
Saved the signature to form data and created the tests
|
Hi, sorry it took so long but I did make the changes as requested. |
There was a problem hiding this comment.
looks good, will do some local testing. Thanks for addressing the concerns and adding tests! i still think we will want to move this to a plugin in the near future as signature pad doesn't seem to be a common control and a new one appear after an update might not be a desired effect.
| background-color: #f9f9f9; | ||
| } | ||
| .clear-button { | ||
| top: 10px; /* Adjust as needed */ |
There was a problem hiding this comment.
✂️ these comment, looks ai generated.
| background-color: #f9f9f9; | ||
| } | ||
| .clear-button { | ||
| top: 10px; /* Adjust as needed */ |
There was a problem hiding this comment.
this looks repeated from above. maybe signature style can be its own file that is imported where needed.
The signature pad element is designed using canvas and styled the element to differentiate it from its surrounding space.