revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-18 12:52:42 +01:00
Code Issues Releases Wiki Activity

Improve profile menu animation

Browse source 
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
This commit is contained in:
epriestley 2016-01-23 14:24:09 -08:00
parent 0b4ed94cc6
commit 9ecd82a993
3 changed files with 100 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
resources/celerity/map.php
View file

@ -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 @@ return array(
'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 @@ return array(
'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 @@ return array(
'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 @@ return array(
'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 @@ return array(
'javelin-install',
'javelin-util',
),
'12884df9' => array(
'javelin-behavior',
'javelin-stratcom',
'javelin-dom',
),
'13c739ea' => array(
'javelin-behavior',
'javelin-stratcom',
@ -1774,11 +1779,6 @@ return array(
'javelin-util',
'javelin-request',
),
'bfc2e675' => array(
'javelin-behavior',
'javelin-stratcom',
'javelin-dom',
),
'bff6884b' => array(
'javelin-install',
'javelin-dom',

81
webroot/rsrc/css/phui/phui-profile-menu.css
View file

@ -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 @@ div.phui-profile-menu .phabricator-side-menu .phui-profile-menu-footer-2 {
.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};
}
}

18
webroot/rsrc/js/phui/behavior-phui-profile-menu.js
View file

@ -24,8 +24,22 @@ JX.behavior('phui-profile-menu', function(config) {
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)