EditGravatar: Add image editor step #9317
Conversation
v18
added
[Feature] User & Account Settings (/me)
v18
force-pushed
the
add/gravatar-image-editor
branch
2 times, most recently
from
1e5bbcd to
224b054
Compare
v18
added
[Status] Needs Review
| isEditingImage: true, | ||
| image: imageObjectUrl | ||
| } ); | ||
| } |
| translate( "We couldn't save that image, please try another one" ) | ||
| ); | ||
| return; | ||
| } |
There was a problem hiding this comment.
I think you mean for the onImageEditorDone function - if so, added.
| @@ -21,14 +25,26 @@ import { | |||
| } from 'state/current-user/gravatar-status/selectors'; | |||
| import { isOffline } from 'state/application/selectors'; | |||
| import Spinner from 'components/spinner'; | |||
| import { uploadGravatar } from 'state/current-user/gravatar-status/actions'; | |||
| import { | |||
| receiveImageFailed, | |||
There was a problem hiding this comment.
Maybe we should rename this to receiveGravatarImageFailed in gravatar-status/actions in case we move toward global actions too.
| receiveImageFailed: receiveImageFailedAction, | ||
| translate | ||
| } = this.props; | ||
| const extension = path.extname( files[ 0 ].name ).toLowerCase(); |
There was a problem hiding this comment.
Might want to remove the leading . here too.
| } else { | ||
| debug( 'Oops - no bearer token.' ); | ||
| } | ||
| } | ||
|
|
||
| hideImageEditor = ( imageEditorProps ) => { | ||
| const { resetAllImageEditorState } = imageEditorProps; |
There was a problem hiding this comment.
Just a heads up that we'll likely refactor this in the future so callers need to import the resetAllImageEditorState action instead of being passed back in the callback
There was a problem hiding this comment.
Nice, thanks for the heads up. I updated it to use the action directly now.
| @@ -20,3 +20,31 @@ | |||
| left: 50%; | |||
| transform: translate(-50%, -50%); | |||
| } | |||
|
|
|||
| .edit-gravatar-modal.dialog.card { | |||
There was a problem hiding this comment.
Do we need all 3 classes here to override the default specificity? Or can we get away with just .edit-gravatar-modal?
There was a problem hiding this comment.
Yes, looks like we do. The reason is because the original CSS uses both classes in components/dialog/style.scss and we need to override some things.
| import useMockery from 'test/helpers/use-mockery'; | ||
| import { useSandbox } from 'test/helpers/use-sinon'; | ||
|
|
||
| describe( 'EditGravatar', function() { |
There was a problem hiding this comment.
We chatted over this. Since I'm using mockery only for mocking event, matches-selector and lib/oauth-token, and shallow for the tests, we're all set.
There was a problem hiding this comment.
Yup sorry, misread that last night
|
Looking good so far 👍 I did notice that I'm not seeing an error message if the bearer token is missing. |
v18
force-pushed
the
add/gravatar-image-editor
branch
from
224b054 to
de6c9e0
Compare
|
Thanks! Added an error message when the bearer token is missing. |
|
Great Job! |
gwwar
added
[Status] Ready to Merge
and removed
[Status] Needs Review
This PR adds the ability to edit and crop an image to a square before uploading it to Gravatar. Here's what it looks like:
Steps to test
ENABLE_FEATURES=me/edit-gravatar make runIf you have 2FA enabled, you can add this extra parameter to the call:
--data-urlencode "wpcom_otp=one-time-password", or you can create a new application password to use instead.localStorage.setItem('bearerToken', 'your_bearer_token');/meand upload a new Gravatar, see that you can edit it before uploadingStill to do: