(fix) O3-2709: wrong image placeholder used for add image in patient registration #1580
Conversation
| @@ -31,7 +31,7 @@ const CapturePhoto: React.FC<CapturePhotoProps> = ({ initialState, onCapturePhot | |||
| return ( | |||
| <div style={{ display: 'flex', alignItems: 'center' }}> | |||
| <div style={{ maxWidth: '64px' }}> | |||
| <img src={dataUri || initialState || placeholder} alt="Preview" style={{ width: '100%' }} /> | |||
| <img src={dataUri || initialState || placeholder} onClick={showCam} alt="Preview" style={{ width: '100%' }} /> | |||
There was a problem hiding this comment.
If you make something clickable, it must either follow the link (a) contract or the button contract. See https://benmyers.dev/blog/clickable-divs/ . Or just use a <button> element with a CSS reset (this is usually the way to go).
There was a problem hiding this comment.
@brandones Really thankyou for the review. I didn't know about the standard practice for clickable items, thankyou for your valuable time and guidance.
I have made a new commit which incorporates the changes you suggested, kindly take a look. If more changes are required please let me know.
|
@psworld The checkboxes in the PR description are to inform reviewers what has been done and what has not. They are not strictly requirements (other than the first one). It is not helpful to check boxes that have nothing to do with your work, or which are untrue.
The second checkbox, about designs, is clearly false, as what you have implemented is different from the designs. The designs can be found on Zeplin. In general, do not check this box if you have not looked at the designs when doing a piece of work. So for work that involves no UI changes or for which the designs are not relevant, leave the box unchecked. The third checkbox asks about tests. This is obviously false. It wouldn't make sense to test this change. So do not check the box. |
@brandones I will definitely keep these things in mind. Thankyou so much 🙏 |
| <button | ||
| type="button" | ||
| onClick={showCam} | ||
| style={{ border: 'none', maxWidth: '64px', padding: 0, margin: 0, background: 'none', cursor: 'pointer' }} |
There was a problem hiding this comment.
This should be in a style (scss) file
There was a problem hiding this comment.
@brandones,
I have added a new file named capture-photo.scss and added a class named .buttonCssReset
There was no existing css file for this component nor it was importing styles from any other css file. So I created a new one
Thanks 🙏 |
Requirements
Summary
A
broken image iconwas used as a placeholder for the image in Add Image in patient registration. A svgpalceholder.svgwas being used as placeholder. I did not found any other usage or places wher thisplaceholder.svgis referenced, so I felt free to change it. Thisplaceholder.svgwas only being used in thecapture-photo.component.tsxScreenshots
Before
After
Image placeholder is clickable and opens the cam same as the
Add image +buttonRelated Issue
https://openmrs.atlassian.net/browse/O3-2709