Improve profile menu animation
ClosedPublic
Actions

Authored by epriestley on Jan 23 2016, 10:27 PM.

Details

Reviewers

chad

Commits

Restricted Diffusion Commit
rP9ecd82a9930c: Improve profile menu animation

Summary

The text sliding around feels a bit jank to me. Instead, here's an attempt at a three-part effect:

Fade out the content of the menu (first quarter of the animation).
Shrink the menu (half the animation).
Fade the menu content back in (final quarter).

This isn't perfect, but feels less weird to me since the text doesn't dance?

Test Plan

clickey clickey

Diff Detail

Repository

rP Phabricator

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

epriestley updated this revision to Diff 36452.Jan 23 2016, 10:27 PM

epriestley retitled this revision from to Improve profile menu animation.

epriestley updated this object.

epriestley edited the test plan for this revision. (Show Details)

epriestley added a reviewer: chad.

Herald edited edge metadata. · View Herald TranscriptJan 23 2016, 10:27 PM

Not at all attached to this if you like the old one or have another idea to try.

Regen celerity map properly to fix build failure.

Herald edited edge metadata. · View Herald TranscriptJan 23 2016, 10:31 PM

chad accepted this revision.Jan 23 2016, 10:37 PM

chad edited edge metadata.

This revision is now accepted and ready to land.Jan 23 2016, 10:37 PM

doesn't feel as smooth but the appear/disappear works well.

Ideally I'd like to fade the text but not the icon, transition the icon, then fade the text back in, since the most-janky part to me is the text jumping from beside to below. I think that would need a bunch of additional rules/states for the icons, though. I wasn't able to get it anywhere close to working without doing a ton of extra work, and ran into some weird bugs (e.g., opacity on an animation not affecting text-overflow: ellipsis).

Closed by commit rP9ecd82a9930c: Improve profile menu animation (authored by epriestley, committed by epriestley). · Explain WhyJan 23 2016, 10:48 PM

This revision was automatically updated to reflect the committed changes.

Sooooo 200px profile photos? I think that's simple to do now?

In PhabricatorFileThumbnailTransform, change this block:

id(new PhabricatorFileThumbnailTransform())
  ->setName(pht("Profile (100px \xC3\x97 100px)"))
  ->setKey(self::TRANSFORM_PROFILE)
  ->setDimensions(100, 100)
  ->setScaleUp(true),

...to 200s or 400s or 800s or whatever. I think that's it.

(We should be using background: 100% and such everywhere after the last time we bumped this up, so there should be no other meaningful changes required, I think.)