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

Docking UX refinements #19179

Merged
merged 12 commits into from Nov 12, 2018
Merged

Docking UX refinements #19179

merged 12 commits into from Nov 12, 2018

Conversation

alanorozco
Copy link
Member

@alanorozco alanorozco commented Nov 7, 2018

  • Refines animation breakpoints, thresholds and timeouts.
  • Adds a repositioning transition for undocking.
  • No longer docks to bottom.
  • Fixes a variety of Chrome/Android issues.
  • Fixes clipping on Safari.
  • Adds placeholder treatment with icon and blurred poster.

* @return {!Element}
* @private
*/
const ShadowLayer = html =>
Copy link
Member Author

Choose a reason for hiding this comment

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

Structuring the templates like this has a few benefits:

  • Added readability.
  • Reduced length of constructor.
  • Automatic syntax highlighting in a lot of editors + plugins (by using html instead of htmlFor() directly).

'%s/experiments.html',
urls.cdn);
'%s',
urls.cdn + '/experiments.html');
Copy link
Member Author

Choose a reason for hiding this comment

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

Doing like this so string doesn't get split in console.

unmuteButton,
} = this.getControls_();
const overlay = this.getOverlay_();
installShowControlsOnTapOrHover_(element) {
Copy link
Member Author

Choose a reason for hiding this comment

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

Now shows up on hover.

if (this.isDragging_ ||
this.ignoreDueToSize_(video) ||
!this.isValidSize_(video) ||
Copy link
Member Author

Choose a reason for hiding this comment

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

Renamed.

* @private
*/
isValidScrollingDirection_() {
return this.currentlyDocked_ ||
Copy link
Member Author

Choose a reason for hiding this comment

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

Now only allows scrolling up for docking, while scrolling down works to undock as well.

return;
}
this.dock_(video, target);
if (this.currentlyDocked_) {
Copy link
Member Author

Choose a reason for hiding this comment

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

If the video is no longer dockable on resize, undock it.

@alanorozco alanorozco changed the title Docking pass (in progress) Docking UX refinements Nov 9, 2018
Copy link
Contributor

@aghassemi aghassemi left a comment

Choose a reason for hiding this comment

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

wow, so much math! 🔢

examples/article-with-docked-video.html Outdated Show resolved Hide resolved
@alanorozco alanorozco merged commit 94aa2f7 into ampproject:master Nov 12, 2018
@alanorozco alanorozco deleted the dock-scroll branch November 12, 2018 20:48
Enriqe pushed a commit to Enriqe/amphtml that referenced this pull request Nov 28, 2018
- Shows controls on hover.
- Refines animation breakpoints, thresholds and timeouts.
- Adds a repositioning transition for undocking.
- No longer docks to bottom.
- Fixes a variety of Chrome/Android issues.
- Fixes clipping on Safari.
- Adds placeholder treatment with icon and blurred poster.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants