recaptime.dev / phorge
@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.) hq.recaptime.dev/wiki/Phorge
phorge phabricator
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

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

Reviewers: chad

Reviewed By: chad

Differential Revision: https://secure.phabricator.com/D15098

epriestley 9ecd82a9 0b4ed94c

+100 -19
+10 -10
resources/celerity/map.php
··· 7 7 */ 8 8 return array( 9 9 'names' => array( 10 - 'core.pkg.css' => '1d1e9a3a', 10 + 'core.pkg.css' => '4dd8bb4d', 11 11 'core.pkg.js' => '573e6664', 12 12 'darkconsole.pkg.js' => 'e7393ebb', 13 13 'differential.pkg.css' => '2de124c9', ··· 143 143 'rsrc/css/phui/phui-object-item-list-view.css' => '26c30d3f', 144 144 'rsrc/css/phui/phui-pager.css' => 'bea33d23', 145 145 'rsrc/css/phui/phui-pinboard-view.css' => '2495140e', 146 - 'rsrc/css/phui/phui-profile-menu.css' => '43826c43', 146 + 'rsrc/css/phui/phui-profile-menu.css' => '0734510a', 147 147 'rsrc/css/phui/phui-property-list-view.css' => '27b2849e', 148 148 'rsrc/css/phui/phui-remarkup-preview.css' => '1a8f2591', 149 149 'rsrc/css/phui/phui-spacing.css' => '042804d6', ··· 500 500 'rsrc/js/core/phtize.js' => 'd254d646', 501 501 'rsrc/js/phui/behavior-phui-dropdown-menu.js' => '54733475', 502 502 'rsrc/js/phui/behavior-phui-object-box-tabs.js' => '2bfa2836', 503 - 'rsrc/js/phui/behavior-phui-profile-menu.js' => 'bfc2e675', 503 + 'rsrc/js/phui/behavior-phui-profile-menu.js' => '12884df9', 504 504 'rsrc/js/phuix/PHUIXActionListView.js' => 'b5c256b8', 505 505 'rsrc/js/phuix/PHUIXActionView.js' => '8cf6d262', 506 506 'rsrc/js/phuix/PHUIXAutocomplete.js' => '21dc9144', ··· 649 649 'javelin-behavior-pholio-mock-view' => 'fbe497e7', 650 650 'javelin-behavior-phui-dropdown-menu' => '54733475', 651 651 'javelin-behavior-phui-object-box-tabs' => '2bfa2836', 652 - 'javelin-behavior-phui-profile-menu' => 'bfc2e675', 652 + 'javelin-behavior-phui-profile-menu' => '12884df9', 653 653 'javelin-behavior-policy-control' => 'ae45872f', 654 654 'javelin-behavior-policy-rule-editor' => '5e9f347c', 655 655 'javelin-behavior-project-boards' => 'ba4fa35c', ··· 819 819 'phui-object-item-list-view-css' => '26c30d3f', 820 820 'phui-pager-css' => 'bea33d23', 821 821 'phui-pinboard-view-css' => '2495140e', 822 - 'phui-profile-menu-css' => '43826c43', 822 + 'phui-profile-menu-css' => '0734510a', 823 823 'phui-property-list-view-css' => '27b2849e', 824 824 'phui-remarkup-preview-css' => '1a8f2591', 825 825 'phui-spacing-css' => '042804d6', ··· 926 926 'javelin-install', 927 927 'javelin-util', 928 928 ), 929 + '12884df9' => array( 930 + 'javelin-behavior', 931 + 'javelin-stratcom', 932 + 'javelin-dom', 933 + ), 929 934 '13c739ea' => array( 930 935 'javelin-behavior', 931 936 'javelin-stratcom', ··· 1773 1778 'javelin-dom', 1774 1779 'javelin-util', 1775 1780 'javelin-request', 1776 - ), 1777 - 'bfc2e675' => array( 1778 - 'javelin-behavior', 1779 - 'javelin-stratcom', 1780 - 'javelin-dom', 1781 1781 ), 1782 1782 'bff6884b' => array( 1783 1783 'javelin-install',
+74 -7
webroot/rsrc/css/phui/phui-profile-menu.css
··· 18 18 vertical-align: top; 19 19 width: {$menu.profile.width}; 20 20 max-width: {$menu.profile.width}; 21 - transition: .2s; 22 21 margin-top: 0; 23 22 overflow: hidden; 24 23 } ··· 110 109 .phui-list-item-href:hover { 111 110 background-color: {$menu.profile.background.hover}; 112 111 color: {$menu.profile.text.selected}; 113 - transition: 0.2s; 114 112 } 115 113 116 114 .phui-profile-menu .phabricator-side-menu ··· 120 118 .phui-list-item-href:hover 121 119 .phui-list-item-icon { 122 120 color: {$menu.profile.text.selected}; 123 - transition: 0.2s; 124 121 } 125 122 126 123 .phui-profile-menu .phabricator-side-menu .phui-list-item-selected 127 124 .phui-list-item-href { 128 125 background-color: {$menu.profile.background.selected}; 129 126 color: {$menu.profile.text.selected}; 130 - transition: 0.2s; 131 127 } 132 128 133 129 .phui-profile-menu .phabricator-side-menu .phui-divider { ··· 224 220 .phui-profile-menu .phui-profile-menu-footer-1, 225 221 .phui-profile-menu .phui-profile-menu-footer-2 { 226 222 width: {$menu.profile.width}; 227 - transition: .2s; 228 223 } 229 224 230 225 .phui-profile-menu .phui-profile-menu-collapsed .phui-profile-menu-footer-1, 231 226 .phui-profile-menu .phui-profile-menu-collapsed .phui-profile-menu-footer-2 { 232 227 width: {$menu.profile.width.collapsed}; 233 - transition: .2s; 234 228 } 235 229 236 230 .phui-profile-menu .phabricator-side-menu 237 231 .phui-list-item-selected.phui-profile-menu-footer .phui-list-item-href { 238 - background: transparent; 232 + background: transparent; 233 + } 234 + 235 + .phui-profile-menu .phui-profile-menu-collapsing 236 + .phabricator-nav-local { 237 + animation: profile-menu-collapse 0.2s; 238 + } 239 + 240 + .phui-profile-menu .phui-profile-menu-expanding 241 + .phabricator-nav-local { 242 + animation: profile-menu-expand 0.2s; 243 + } 244 + 245 + .phui-profile-menu .phui-profile-menu-collapsing 246 + .phabricator-side-menu .phui-list-item-href { 247 + animation: profile-menu-blink 0.2s; 248 + } 249 + 250 + .phui-profile-menu .phui-profile-menu-expanding 251 + .phabricator-side-menu .phui-list-item-href { 252 + animation: profile-menu-blink 0.2s; 253 + } 254 + 255 + @keyframes profile-menu-blink { 256 + 0% { 257 + opacity: 1.0; 258 + } 259 + 25% { 260 + opacity: 0.0; 261 + } 262 + 75% { 263 + opacity: 0.0; 264 + } 265 + 100% { 266 + opacity: 1.0; 267 + } 268 + } 269 + 270 + @keyframes profile-menu-collapse { 271 + 0% { 272 + width: {$menu.profile.width}; 273 + max-width: {$menu.profile.width}; 274 + } 275 + 33% { 276 + width: {$menu.profile.width}; 277 + max-width: {$menu.profile.width}; 278 + } 279 + 66% { 280 + width: {$menu.profile.width.collapsed}; 281 + max-width: {$menu.profile.width.collapsed}; 282 + } 283 + 100% { 284 + width: {$menu.profile.width.collapsed}; 285 + max-width: {$menu.profile.width.collapsed}; 286 + } 287 + } 288 + 289 + @keyframes profile-menu-expand { 290 + 0% { 291 + width: {$menu.profile.width.collapsed}; 292 + max-width: {$menu.profile.width.collapsed}; 293 + } 294 + 33% { 295 + width: {$menu.profile.width.collapsed}; 296 + max-width: {$menu.profile.width.collapsed}; 297 + } 298 + 66% { 299 + width: {$menu.profile.width}; 300 + max-width: {$menu.profile.width}; 301 + } 302 + 100% { 303 + width: {$menu.profile.width}; 304 + max-width: {$menu.profile.width}; 305 + } 239 306 }
+16 -2
webroot/rsrc/js/phui/behavior-phui-profile-menu.js
··· 24 24 25 25 JX.DOM.listen(collapse_node, 'click', null, function(e) { 26 26 is_collapsed = !is_collapsed; 27 - JX.DOM.alterClass(menu_node, 'phui-profile-menu-collapsed', is_collapsed); 28 - JX.DOM.alterClass(menu_node, 'phui-profile-menu-expanded', !is_collapsed); 27 + 28 + JX.DOM.alterClass(menu_node, 'phui-profile-menu-collapsing', is_collapsed); 29 + JX.DOM.alterClass(menu_node, 'phui-profile-menu-expanding', !is_collapsed); 30 + 31 + var duration = 0.2; 32 + 33 + setTimeout(function() { 34 + JX.DOM.alterClass(menu_node, 'phui-profile-menu-collapsed', is_collapsed); 35 + JX.DOM.alterClass(menu_node, 'phui-profile-menu-expanded', !is_collapsed); 36 + }, (duration / 2) * 1000); 37 + 38 + setTimeout(function() { 39 + JX.DOM.alterClass(menu_node, 'phui-profile-menu-collapsing', false); 40 + JX.DOM.alterClass(menu_node, 'phui-profile-menu-expanding', false); 41 + }, duration * 1000); 42 + 29 43 30 44 if (config.settingsURI) { 31 45 new JX.Request(config.settingsURI)