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

Editor: Fix Safari inability to right-click text #517

Merged
merged 1 commit into from
Nov 23, 2015

Conversation

aduth
Copy link
Contributor

@aduth aduth commented Nov 23, 2015

Fixes 12499-gh-calypso-pre-oss
Fixes #327

This pull request seeks to resolve an issue where right-clicking text in the post editor would present the user with a set of options related to using the post preview iframe in Safari.

Before:

image

After:

image

Implementation notes:

The key change here was to set the height of the preview to zero, only to be restored to 100% as the preview is visible. A delay is added to the height transition in the default state to ensure that the "fade out" transition has time to be shown to the user.

Some styles were shifted around to manage z-index and opacity in the .web-preview styles.

Testing instructions:

Verify that right-click presents the correct text formatting options in Safari and in your preferred browser. Ensure that transitions still occurs as expected when previewing the post. Also check that previous issues with iOS Safari editor usability are not reintroduced here (10332-gh-calypso-pre-oss).

  1. Navigate to the Calypso post editor
  2. Select a site, if prompted
  3. Add some text to the post editor
  4. Right click the text
  5. Note that the formatting options right-click dialog is shown
  6. Click Preview
  7. Note that the preview is shown and transitions with opacity effects
  8. Dismiss the preview
  9. Note that the preview is hidden and transitions with opacity effects

Caveats:

Without text in the post editor area, a right-click may show the iframe options. These are the options for the TinyMCE frame and is expected when there is no text occupying that area of the editor.

@aduth aduth added [Feature] Post/Page Editor The editor for editing posts and pages. [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. Components labels Nov 23, 2015
@aduth aduth self-assigned this Nov 23, 2015
@kriskarkoski
Copy link
Contributor

This tests well for me and returns Safari to matching behavior with the other browsers noted in #223 (comment)

@nylen
Copy link
Contributor

nylen commented Nov 23, 2015

Looks good & works well in desktop browsers (Safari, Chrome, Firefox) and iOS Safari.

@nylen nylen added [Status] Ready to Merge and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Nov 23, 2015
aduth added a commit that referenced this pull request Nov 23, 2015
…-click

Editor: Fix Safari inability to right-click text
@aduth aduth merged commit 9ea3ce4 into master Nov 23, 2015
@aduth aduth deleted the fix/12499-editor-safari-right-click branch November 23, 2015 20:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Components [Feature] Post/Page Editor The editor for editing posts and pages.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Editor: on-page search doesn't work as expected
4 participants