diff --git a/resources/celerity/map.php b/resources/celerity/map.php --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -7,7 +7,7 @@ */ return array( 'names' => array( - 'core.pkg.css' => '1d1e9a3a', + 'core.pkg.css' => '4dd8bb4d', 'core.pkg.js' => '573e6664', 'darkconsole.pkg.js' => 'e7393ebb', 'differential.pkg.css' => '2de124c9', @@ -143,7 +143,7 @@ 'rsrc/css/phui/phui-object-item-list-view.css' => '26c30d3f', 'rsrc/css/phui/phui-pager.css' => 'bea33d23', 'rsrc/css/phui/phui-pinboard-view.css' => '2495140e', - 'rsrc/css/phui/phui-profile-menu.css' => '43826c43', + 'rsrc/css/phui/phui-profile-menu.css' => '0734510a', 'rsrc/css/phui/phui-property-list-view.css' => '27b2849e', 'rsrc/css/phui/phui-remarkup-preview.css' => '1a8f2591', 'rsrc/css/phui/phui-spacing.css' => '042804d6', @@ -500,7 +500,7 @@ 'rsrc/js/core/phtize.js' => 'd254d646', 'rsrc/js/phui/behavior-phui-dropdown-menu.js' => '54733475', 'rsrc/js/phui/behavior-phui-object-box-tabs.js' => '2bfa2836', - 'rsrc/js/phui/behavior-phui-profile-menu.js' => 'bfc2e675', + 'rsrc/js/phui/behavior-phui-profile-menu.js' => '12884df9', 'rsrc/js/phuix/PHUIXActionListView.js' => 'b5c256b8', 'rsrc/js/phuix/PHUIXActionView.js' => '8cf6d262', 'rsrc/js/phuix/PHUIXAutocomplete.js' => '21dc9144', @@ -649,7 +649,7 @@ 'javelin-behavior-pholio-mock-view' => 'fbe497e7', 'javelin-behavior-phui-dropdown-menu' => '54733475', 'javelin-behavior-phui-object-box-tabs' => '2bfa2836', - 'javelin-behavior-phui-profile-menu' => 'bfc2e675', + 'javelin-behavior-phui-profile-menu' => '12884df9', 'javelin-behavior-policy-control' => 'ae45872f', 'javelin-behavior-policy-rule-editor' => '5e9f347c', 'javelin-behavior-project-boards' => 'ba4fa35c', @@ -819,7 +819,7 @@ 'phui-object-item-list-view-css' => '26c30d3f', 'phui-pager-css' => 'bea33d23', 'phui-pinboard-view-css' => '2495140e', - 'phui-profile-menu-css' => '43826c43', + 'phui-profile-menu-css' => '0734510a', 'phui-property-list-view-css' => '27b2849e', 'phui-remarkup-preview-css' => '1a8f2591', 'phui-spacing-css' => '042804d6', @@ -926,6 +926,11 @@ 'javelin-install', 'javelin-util', ), + '12884df9' => array( + 'javelin-behavior', + 'javelin-stratcom', + 'javelin-dom', + ), '13c739ea' => array( 'javelin-behavior', 'javelin-stratcom', @@ -1774,11 +1779,6 @@ 'javelin-util', 'javelin-request', ), - 'bfc2e675' => array( - 'javelin-behavior', - 'javelin-stratcom', - 'javelin-dom', - ), 'bff6884b' => array( 'javelin-install', 'javelin-dom', diff --git a/webroot/rsrc/css/phui/phui-profile-menu.css b/webroot/rsrc/css/phui/phui-profile-menu.css --- a/webroot/rsrc/css/phui/phui-profile-menu.css +++ b/webroot/rsrc/css/phui/phui-profile-menu.css @@ -18,7 +18,6 @@ vertical-align: top; width: {$menu.profile.width}; max-width: {$menu.profile.width}; - transition: .2s; margin-top: 0; overflow: hidden; } @@ -110,7 +109,6 @@ .phui-list-item-href:hover { background-color: {$menu.profile.background.hover}; color: {$menu.profile.text.selected}; - transition: 0.2s; } .phui-profile-menu .phabricator-side-menu @@ -120,14 +118,12 @@ .phui-list-item-href:hover .phui-list-item-icon { color: {$menu.profile.text.selected}; - transition: 0.2s; } .phui-profile-menu .phabricator-side-menu .phui-list-item-selected .phui-list-item-href { background-color: {$menu.profile.background.selected}; color: {$menu.profile.text.selected}; - transition: 0.2s; } .phui-profile-menu .phabricator-side-menu .phui-divider { @@ -224,16 +220,87 @@ .phui-profile-menu .phui-profile-menu-footer-1, .phui-profile-menu .phui-profile-menu-footer-2 { width: {$menu.profile.width}; - transition: .2s; } .phui-profile-menu .phui-profile-menu-collapsed .phui-profile-menu-footer-1, .phui-profile-menu .phui-profile-menu-collapsed .phui-profile-menu-footer-2 { width: {$menu.profile.width.collapsed}; - transition: .2s; } .phui-profile-menu .phabricator-side-menu .phui-list-item-selected.phui-profile-menu-footer .phui-list-item-href { - background: transparent; + background: transparent; +} + +.phui-profile-menu .phui-profile-menu-collapsing + .phabricator-nav-local { + animation: profile-menu-collapse 0.2s; +} + +.phui-profile-menu .phui-profile-menu-expanding + .phabricator-nav-local { + animation: profile-menu-expand 0.2s; +} + +.phui-profile-menu .phui-profile-menu-collapsing + .phabricator-side-menu .phui-list-item-href { + animation: profile-menu-blink 0.2s; +} + +.phui-profile-menu .phui-profile-menu-expanding + .phabricator-side-menu .phui-list-item-href { + animation: profile-menu-blink 0.2s; +} + +@keyframes profile-menu-blink { + 0% { + opacity: 1.0; + } + 25% { + opacity: 0.0; + } + 75% { + opacity: 0.0; + } + 100% { + opacity: 1.0; + } +} + +@keyframes profile-menu-collapse { + 0% { + width: {$menu.profile.width}; + max-width: {$menu.profile.width}; + } + 33% { + width: {$menu.profile.width}; + max-width: {$menu.profile.width}; + } + 66% { + width: {$menu.profile.width.collapsed}; + max-width: {$menu.profile.width.collapsed}; + } + 100% { + width: {$menu.profile.width.collapsed}; + max-width: {$menu.profile.width.collapsed}; + } +} + +@keyframes profile-menu-expand { + 0% { + width: {$menu.profile.width.collapsed}; + max-width: {$menu.profile.width.collapsed}; + } + 33% { + width: {$menu.profile.width.collapsed}; + max-width: {$menu.profile.width.collapsed}; + } + 66% { + width: {$menu.profile.width}; + max-width: {$menu.profile.width}; + } + 100% { + width: {$menu.profile.width}; + max-width: {$menu.profile.width}; + } } diff --git a/webroot/rsrc/js/phui/behavior-phui-profile-menu.js b/webroot/rsrc/js/phui/behavior-phui-profile-menu.js --- a/webroot/rsrc/js/phui/behavior-phui-profile-menu.js +++ b/webroot/rsrc/js/phui/behavior-phui-profile-menu.js @@ -24,8 +24,22 @@ JX.DOM.listen(collapse_node, 'click', null, function(e) { is_collapsed = !is_collapsed; - JX.DOM.alterClass(menu_node, 'phui-profile-menu-collapsed', is_collapsed); - JX.DOM.alterClass(menu_node, 'phui-profile-menu-expanded', !is_collapsed); + + JX.DOM.alterClass(menu_node, 'phui-profile-menu-collapsing', is_collapsed); + JX.DOM.alterClass(menu_node, 'phui-profile-menu-expanding', !is_collapsed); + + var duration = 0.2; + + setTimeout(function() { + JX.DOM.alterClass(menu_node, 'phui-profile-menu-collapsed', is_collapsed); + JX.DOM.alterClass(menu_node, 'phui-profile-menu-expanded', !is_collapsed); + }, (duration / 2) * 1000); + + setTimeout(function() { + JX.DOM.alterClass(menu_node, 'phui-profile-menu-collapsing', false); + JX.DOM.alterClass(menu_node, 'phui-profile-menu-expanding', false); + }, duration * 1000); + if (config.settingsURI) { new JX.Request(config.settingsURI)