-
Notifications
You must be signed in to change notification settings - Fork 3k
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.
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
Uploaded image preview placeholder #7569
Uploaded image preview placeholder #7569
Conversation
…oundedBorder classes have their own white border
CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅ |
I have read the CLA Document and I hereby sign the CLA |
cc: @shawnborton Could you please review the design of the image preview? |
Is there a way we can make this more smooth? Could we detect the image dimensions upon upload and at least make it so that the preview area doesn't jump around as much? Also, I'm curious about ActivityIndicator we're using here. Do we have other examples of where we use it in the app and it has a solid background behind it? I would think we would just show the loading spinner on top of the content with no box around it. Let me know if that makes sense. |
Yes It can, but it is a different issue than this.
The activity indicator is default by operating system. I added a faded background because it's hard to see with photos which have light colors. (#7463 (comment)) If you provide me a design, I can set it to it. |
Why would you consider that a different issue than this? |
I thought this because we don't know the dimensions or ratio on the backend before uploaded. And doing this maybe needs changes that may affects the other parts of chat. @parasharrajat Could you please read this comment and correct me if I'm wrong or please tell me if you have an idea. I looked up code to how we can done the thing you want. I understand you because I'm keen attention the details too. But there are more complicated things than visible in this point. The box of thumbnail image is already created by fixed dimensions(before image loaded) and It's 200x200. App/src/components/ThumbnailImage.js Lines 27 to 37 in 8e6e31a
I have only two solution in my mind to solve jumping problem after loaded from backend,
Maybe it needs change the contentWidth in here: App/src/components/RenderHTML.js Lines 18 to 21 in 8e6e31a
As for the ActivityIndicator design, if you provide me a design or express it precisely, I will try my best. Thank you |
Ok. yeah. Thanks for your thoughts @okansahin.
I agree that this is not part of this PR and requires a bigger implementation change. But this is a good suggestion we can talk about this more on slack.
Let's try to work on this. @okansahin Do you have any suggestions? |
I thought this might be good for the ActivityIndicator to appear clear with every image. If you think the same with me that faded background is required I might fill the faded background over image. But as @shawnborton said this usage is not exists with the other ActivityIndicators. It cause degradation of the design integrity. We can use another spinner that you will choose, maybe with Lottie. Or I can completely remove the faded background. I think @shawnborton should decide this. Thank you |
This catches my attention too. Even if we apply the solutions I wrote above, this will continue to happen. It requires intervention to the general structure in chat window. If you open a topic in Slack I will be glad to research and participate in the solution. Even you don't upload a picture, this issue also happens when you open the app and click a chat room. (Here maybe retrieving images from the cache will fix the problem.)
I will do it in a short time and send the screenshots in here. |
The spinner looks a bit too transparent on iOS, but looks fine in Chrome IMO.
Hmm but I think where I am a bit confused is that in my post above, why does the second screenshot happen? Why can't we just go from 1 to 3 and this way the size only changes once? |
So, what do you want me to change. Is it okay like this?
Because it's about the way of loading messages. This "way" is not relational the code we have changed in this PR. |
Maybe for iOS, we can use our brand dark color for the base spinner color?
That's fair, I think we should create a separate follow up issue to address that then. |
That definitely looks hard to see. Could we see it using one of our light gray colors? |
I think that looks better. What do you think? |
Yes, it looks better. I push code to repo if you agree with it. |
Yup, I agree. |
waiting for you review. thank you. |
The iOS E2E tests failed with a timeout, just restarted them. Code looks pretty good to me other than that. It would be good to make the follow-up improvements that yourself and Shawn discussed. |
I saw that dotenv module not found in E2E test logs. Do I should merge main branch to this?
If you talking about for image jumping, I can create new bug request with that issue if you accept. |
I didn't look into the errors, but if you think it will help then please do this. |
I didn't merged, all checks have passed now. thank you @Julesssss |
name: PropTypes.string, | ||
size: PropTypes.number, | ||
type: PropTypes.string, | ||
uri: PropTypes.string, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please add comments to properties.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Doing quickly.
@@ -14,6 +14,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../../../componen | |||
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; | |||
import canUseTouchScreen from '../../../libs/canUseTouchscreen'; | |||
import compose from '../../../libs/compose'; | |||
import colors from '../../../styles/colors'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
use variables instead of colors.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I double checked it if colors.js are used in components. And I saw in so many files with this usage.
Do you want me to add a new variable as a theme variable?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, Please use variables as much as possible for maintaince. Try to match existing variables if any make sense here otherwise you can create new.
added comments of attachmentInfo properties
Testing shortly... on my list 1/5. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does this look fine @shawnborton? Or should we add a faded background over the image?
I think that's probably fine. In a separate follow up issue, it would be nice to standardize on the same style spinner everywhere instead of having differences between platforms. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM.
cc: @Julesssss
🎀 👀 🎀 C+ reviewed
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
@okansahin, Great job getting your first Expensify/App pull request over the finish line! 🎉 I know there's a lot of information in our contributing guidelines, so here are some points to take note of 📝:
So it might take a while before you're paid for your work, but we typically post multiple new jobs every day, so there's plenty of opportunity. I hope you've had a positive experience contributing to this repo! 😊 |
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
🚀 Deployed to staging by @Julesssss in version: 1.1.38-0 🚀
|
🚀 Deployed to production by @Julesssss in version: 1.1.38-3 🚀
|
…e-preview-placeholder Upload image preview placeholder - Follow-up #7569
@parasharrajat @JmillsExpensify
Details
Showing image preview until image uploaded.
Fixed Issues
$ #7463
Tests | QA Steps
Tested On
Screenshots
Web
Chrome
Screen.Recording.2022-02-04.at.12.44.48.mov
Safari
Screen.Recording.2022-02-04.at.12.45.48.mov
Mobile Web
Screen.Recording.2022-02-04.at.22.03.07.mov
Desktop
Screen.Recording.2022-02-04.at.14.12.33.mov
iOS
Screen.Recording.2022-02-04.at.21.43.22.mov
Android
Screen.Recording.2022-02-04.at.14.08.56.mov