cicscareers / 320-S20-Track1

Integration Track 1
BSD 3-Clause "New" or "Revised" License
11 stars 3 forks source link

Change insert image ui #415

Open sahiljoshi515 opened 4 years ago

sahiljoshi515 commented 4 years ago

@ishchhabra I have changed the UI by removing the upload profile textfield and adding the camera icon as you wanted. You can tap into the props onChange and onError to store the data to the backend. Let me know if changes are required.

mattrheault commented 4 years ago

Do you have an image or gif of this feature in action?!

(licecap is a great screengrab gif creation tool!)

ishchhabra commented 4 years ago

Do you have an image or gif of this feature in action?!

(licecap is a great screengrab gif creation tool!)

This is how the UI for this PR looks currently. The image selected there is being uploaded to the S3 bucket, however the new picture won't be visible as the profile picture right now because #417 is not approved yet which works with the backend changes related to this. Also, something that I did need help with was how to set the image inside the Dialog to contain the Dialog and removing the overflow (scrollbar).

profile

powellsl99 commented 4 years ago

Do you have an image or gif of this feature in action?! (licecap is a great screengrab gif creation tool!)

This is how the UI for this PR looks currently. The image selected there is being uploaded to the S3 bucket, however the new picture won't be visible as the profile picture right now because #417 is not approved yet which works with the backend changes related to this. Also, something that I did need help with was how to set the image inside the Dialog to contain the Dialog and removing the overflow (scrollbar).

profile

I think you want something like this as the style class for the img. You'll just have to play around with the exact size you want image: { maxHeight: '100%', width: 'auto' }

ishchhabra commented 4 years ago

Do you have an image or gif of this feature in action?! (licecap is a great screengrab gif creation tool!)

This is how the UI for this PR looks currently. The image selected there is being uploaded to the S3 bucket, however the new picture won't be visible as the profile picture right now because #417 is not approved yet which works with the backend changes related to this. Also, something that I did need help with was how to set the image inside the Dialog to contain the Dialog and removing the overflow (scrollbar). profile

I think you want something like this as the style class for the img. You'll just have to play around with the exact size you want image: { maxHeight: '100%', width: 'auto' }

@powellsl99 I adjusted the styling. Looks like this should be totally functional after #417 is approved.