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.

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

[RNMobile] Fix media upload placeholder #19497

Merged
merged 4 commits into from
Jan 13, 2020

Conversation

cameronvoell
Copy link
Member

@cameronvoell cameronvoell commented Jan 7, 2020

Description

Fixes gutenberg-mobile #1544
This change refines the mobile image and video block placeholder shown during upload.

How has this been tested?

See gutenberg-mobile PR: wordpress-mobile/gutenberg-mobile#1757
Uploading images can be tested using the WordPress Android and iOS apps using the following steps:

  1. Add new Image or Video block
  2. Click to upload a new image from wordpress media library or from device
  3. Note that during upload we briefly see the improved placeholder.

Screenshots

Placeholders before the change:
image

After Change
image

Video:
image-upload-gif

Types of changes

This change is introducing deliberate, consistent styles for both light and dark mode for image and video placeholder icons and backgrounds during upload.
There is also a small refactor for fetching icons in an easier to comprehend way and removing unreachable code.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR. .

@cameronvoell cameronvoell added the Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) label Jan 7, 2020
@cameronvoell cameronvoell marked this pull request as ready for review January 7, 2020 22:30
Copy link
Contributor

@etoledom etoledom left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks and works great! Thank you for this @cameronvoell 🎉

Added a small code comment but it's just a small detail. 👍

Comment on lines 63 to 66
.iconUploadDark {
fill: $gray-70;
width: 100%;
height: 100%;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the dark version of the style we don't need to re-define other than the color properties. All properties that are the same will be copied from the light version.

(Same for all other Dark style definitions)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah I see, thanks! Updated f32aab3

Copy link
Contributor

@etoledom etoledom left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the update @cameronvoell
Great job! 🎉

@cameronvoell cameronvoell merged commit 4aad528 into master Jan 13, 2020
@cameronvoell cameronvoell deleted the rnmobile/fix-media-upload-placeholder branch January 13, 2020 17:15
@ellatrix ellatrix added this to the Gutenberg 7.3 milestone Jan 20, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Refine background/icon of image block transitional state
3 participants