revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2025-02-06 20:08:29 +01:00
Code Issues Releases Wiki Activity

Simplify side nav CSS and fix various glitches

Browse source 
Summary:
Fixes glitches in the side nav. Resolves T1828. Resolves T2156.

  - Elastic scrolling (T2156): in Safari on OSX, using a scroll touch on the trackpad to scroll up past the top of the document caused newer-style side menus to scroll down, leaving a visible whitespace bar.
  - Whitespace glitch: Particularly in Safari, scrolling down the document quickly from the top caused the top menu to scroll away before the side menu rose to meet it. Use a fixed background color bar that extends under the menu so this doesn't happen.
  - Use of "!important": use CSS better so we don't need to "!important" things.
  - Dark Console (T1828): Instead of hard-coding the top position, determine it dynamically by looking at where the content is. This also fixes the menu overlapping with the red "there are errors on this page" development bar.
  - General "fixed" glitchiness: don't use fixed-position for menu content other than flexible (draggable) menus.

Test Plan:
  - Viewed and scrolled menus in Paste. Opened and closed DarkConsole. Switched devices.
  - Viewed and scrolled flexible menus in Differential and Diffusion. Opened and closed DarkConsole. Switched devices.

Reviewers: vrana, chad, btrahan

Reviewed By: vrana

CC: aran

Maniphest Tasks: T1828, T2156

Differential Revision: https://secure.phabricator.com/D4185
This commit is contained in:
epriestley 2012-12-14 15:14:14 -08:00
parent 07401cd99b
commit 081163ab6d
5 changed files with 258 additions and 284 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

219
src/__celerity_resource_map__.php
View file

@ -462,13 +462,6 @@ celerity_register_resource_map(array(
'disk' => '/rsrc/image/menu_texture.png', 'disk' => '/rsrc/image/menu_texture.png',
'type' => 'png', 'type' => 'png',
), ),
'/rsrc/image/nyan.gif' =>
array(
'hash' => '03c40be4e004e6468d62b503756a587e',
'uri' => '/res/03c40be4/rsrc/image/nyan.gif',
'disk' => '/rsrc/image/nyan.gif',
'type' => 'gif',
),
'/rsrc/image/search.png' => '/rsrc/image/search.png' =>
array( array(
'hash' => 'ff7da044e6f923b8f569dec11f97e5e5', 'hash' => 'ff7da044e6f923b8f569dec11f97e5e5',
@ -580,7 +573,7 @@ celerity_register_resource_map(array(
), ),
'aphront-contextbar-view-css' => 'aphront-contextbar-view-css' =>
array( array(
'uri' => '/res/9e0c2ed7/rsrc/css/aphront/context-bar.css', 'uri' => '/res/ecfd5ba9/rsrc/css/aphront/context-bar.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -734,7 +727,7 @@ celerity_register_resource_map(array(
), ),
'differential-changeset-view-css' => 'differential-changeset-view-css' =>
array( array(
'uri' => '/res/ffd0559c/rsrc/css/application/differential/changeset-view.css', 'uri' => '/res/657e4191/rsrc/css/application/differential/changeset-view.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -743,7 +736,7 @@ celerity_register_resource_map(array(
), ),
'differential-core-view-css' => 'differential-core-view-css' =>
array( array(
'uri' => '/res/587d8eeb/rsrc/css/application/differential/core.css', 'uri' => '/res/85fe5117/rsrc/css/application/differential/core.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -767,7 +760,7 @@ celerity_register_resource_map(array(
), ),
'differential-local-commits-view-css' => 'differential-local-commits-view-css' =>
array( array(
'uri' => '/res/da84a7c9/rsrc/css/application/differential/local-commits-view.css', 'uri' => '/res/86432ba7/rsrc/css/application/differential/local-commits-view.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -794,7 +787,7 @@ celerity_register_resource_map(array(
), ),
'differential-revision-comment-css' => 'differential-revision-comment-css' =>
array( array(
'uri' => '/res/baad4547/rsrc/css/application/differential/revision-comment.css', 'uri' => '/res/361bfbd3/rsrc/css/application/differential/revision-comment.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -812,7 +805,7 @@ celerity_register_resource_map(array(
), ),
'differential-revision-history-css' => 'differential-revision-history-css' =>
array( array(
'uri' => '/res/6699b0ef/rsrc/css/application/differential/revision-history.css', 'uri' => '/res/71cffe43/rsrc/css/application/differential/revision-history.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -830,7 +823,7 @@ celerity_register_resource_map(array(
), ),
'differential-table-of-contents-css' => 'differential-table-of-contents-css' =>
array( array(
'uri' => '/res/0ac99a19/rsrc/css/application/differential/table-of-contents.css', 'uri' => '/res/4fde8bfc/rsrc/css/application/differential/table-of-contents.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -1061,7 +1054,7 @@ celerity_register_resource_map(array(
), ),
'javelin-behavior-dark-console' => 'javelin-behavior-dark-console' =>
array( array(
'uri' => '/res/3269c0bb/rsrc/js/application/core/behavior-dark-console.js', 'uri' => '/res/aa6f8a71/rsrc/js/application/core/behavior-dark-console.js',
'type' => 'js', 'type' => 'js',
'requires' => 'requires' =>
array( array(
@ -1396,7 +1389,7 @@ celerity_register_resource_map(array(
), ),
'javelin-behavior-konami' => 'javelin-behavior-konami' =>
array( array(
'uri' => '/res/5f4b32fe/rsrc/js/application/core/behavior-konami.js', 'uri' => '/res/2199602f/rsrc/js/application/core/behavior-konami.js',
'type' => 'js', 'type' => 'js',
'requires' => 'requires' =>
array( array(
@ -1591,7 +1584,7 @@ celerity_register_resource_map(array(
), ),
'javelin-behavior-phabricator-nav' => 'javelin-behavior-phabricator-nav' =>
array( array(
'uri' => '/res/c2b1d50c/rsrc/js/application/core/behavior-phabricator-nav.js', 'uri' => '/res/230d0df2/rsrc/js/application/core/behavior-phabricator-nav.js',
'type' => 'js', 'type' => 'js',
'requires' => 'requires' =>
array( array(
@ -2622,7 +2615,7 @@ celerity_register_resource_map(array(
), ),
'phabricator-nav-view-css' => 'phabricator-nav-view-css' =>
array( array(
'uri' => '/res/7be2ad5c/rsrc/css/aphront/phabricator-nav-view.css', 'uri' => '/res/8dce78bc/rsrc/css/aphront/phabricator-nav-view.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -2663,7 +2656,7 @@ celerity_register_resource_map(array(
), ),
'phabricator-object-item-list-view-css' => 'phabricator-object-item-list-view-css' =>
array( array(
'uri' => '/res/945fabe9/rsrc/css/layout/phabricator-object-item-list-view.css', 'uri' => '/res/619499f5/rsrc/css/layout/phabricator-object-item-list-view.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -3208,7 +3201,7 @@ celerity_register_resource_map(array(
), array( ), array(
'packages' => 'packages' =>
array( array(
'ba5cb698' => '186ea458' =>
array( array(
'name' => 'core.pkg.css', 'name' => 'core.pkg.css',
'symbols' => 'symbols' =>
@ -3252,10 +3245,10 @@ celerity_register_resource_map(array(
36 => 'phabricator-crumbs-view-css', 36 => 'phabricator-crumbs-view-css',
37 => 'phabricator-object-item-list-view-css', 37 => 'phabricator-object-item-list-view-css',
), ),
'uri' => '/res/pkg/ba5cb698/core.pkg.css', 'uri' => '/res/pkg/186ea458/core.pkg.css',
'type' => 'css', 'type' => 'css',
), ),
'8243143a' => 'f7e6114f' =>
array( array(
'name' => 'core.pkg.js', 'name' => 'core.pkg.js',
'symbols' => 'symbols' =>
@ -3292,10 +3285,10 @@ celerity_register_resource_map(array(
29 => 'phabricator-textareautils', 29 => 'phabricator-textareautils',
30 => 'phabricator-file-upload', 30 => 'phabricator-file-upload',
), ),
'uri' => '/res/pkg/8243143a/core.pkg.js', 'uri' => '/res/pkg/f7e6114f/core.pkg.js',
'type' => 'js', 'type' => 'js',
), ),
'3c5efda9' => '8edbada5' =>
array( array(
'name' => 'darkconsole.pkg.js', 'name' => 'darkconsole.pkg.js',
'symbols' => 'symbols' =>
@ -3304,10 +3297,10 @@ celerity_register_resource_map(array(
1 => 'javelin-behavior-dark-console', 1 => 'javelin-behavior-dark-console',
2 => 'javelin-behavior-error-log', 2 => 'javelin-behavior-error-log',
), ),
'uri' => '/res/pkg/3c5efda9/darkconsole.pkg.js', 'uri' => '/res/pkg/8edbada5/darkconsole.pkg.js',
'type' => 'js', 'type' => 'js',
), ),
'7cf15508' => '94cb8965' =>
array( array(
'name' => 'differential.pkg.css', 'name' => 'differential.pkg.css',
'symbols' => 'symbols' =>
@ -3327,7 +3320,7 @@ celerity_register_resource_map(array(
12 => 'differential-local-commits-view-css', 12 => 'differential-local-commits-view-css',
13 => 'inline-comment-summary-css', 13 => 'inline-comment-summary-css',
), ),
'uri' => '/res/pkg/7cf15508/differential.pkg.css', 'uri' => '/res/pkg/94cb8965/differential.pkg.css',
'type' => 'css', 'type' => 'css',
), ),
'7ecd31fa' => '7ecd31fa' =>
@ -3440,46 +3433,46 @@ celerity_register_resource_map(array(
'reverse' => 'reverse' =>
array( array(
'aphront-attached-file-view-css' => '7839ae2d', 'aphront-attached-file-view-css' => '7839ae2d',
'aphront-crumbs-view-css' => 'ba5cb698', 'aphront-crumbs-view-css' => '186ea458',
'aphront-dialog-view-css' => 'ba5cb698', 'aphront-dialog-view-css' => '186ea458',
'aphront-error-view-css' => 'ba5cb698', 'aphront-error-view-css' => '186ea458',
'aphront-form-view-css' => 'ba5cb698', 'aphront-form-view-css' => '186ea458',
'aphront-headsup-action-list-view-css' => '7cf15508', 'aphront-headsup-action-list-view-css' => '94cb8965',
'aphront-headsup-view-css' => 'ba5cb698', 'aphront-headsup-view-css' => '186ea458',
'aphront-list-filter-view-css' => 'ba5cb698', 'aphront-list-filter-view-css' => '186ea458',
'aphront-pager-view-css' => 'ba5cb698', 'aphront-pager-view-css' => '186ea458',
'aphront-panel-view-css' => 'ba5cb698', 'aphront-panel-view-css' => '186ea458',
'aphront-side-nav-view-css' => 'ba5cb698', 'aphront-side-nav-view-css' => '186ea458',
'aphront-table-view-css' => 'ba5cb698', 'aphront-table-view-css' => '186ea458',
'aphront-tokenizer-control-css' => 'ba5cb698', 'aphront-tokenizer-control-css' => '186ea458',
'aphront-tooltip-css' => 'ba5cb698', 'aphront-tooltip-css' => '186ea458',
'aphront-typeahead-control-css' => 'ba5cb698', 'aphront-typeahead-control-css' => '186ea458',
'differential-changeset-view-css' => '7cf15508', 'differential-changeset-view-css' => '94cb8965',
'differential-core-view-css' => '7cf15508', 'differential-core-view-css' => '94cb8965',
'differential-inline-comment-editor' => '7ecd31fa', 'differential-inline-comment-editor' => '7ecd31fa',
'differential-local-commits-view-css' => '7cf15508', 'differential-local-commits-view-css' => '94cb8965',
'differential-results-table-css' => '7cf15508', 'differential-results-table-css' => '94cb8965',
'differential-revision-add-comment-css' => '7cf15508', 'differential-revision-add-comment-css' => '94cb8965',
'differential-revision-comment-css' => '7cf15508', 'differential-revision-comment-css' => '94cb8965',
'differential-revision-comment-list-css' => '7cf15508', 'differential-revision-comment-list-css' => '94cb8965',
'differential-revision-history-css' => '7cf15508', 'differential-revision-history-css' => '94cb8965',
'differential-revision-list-css' => '7cf15508', 'differential-revision-list-css' => '94cb8965',
'differential-table-of-contents-css' => '7cf15508', 'differential-table-of-contents-css' => '94cb8965',
'diffusion-commit-view-css' => 'c8ce2d88', 'diffusion-commit-view-css' => 'c8ce2d88',
'diffusion-icons-css' => 'c8ce2d88', 'diffusion-icons-css' => 'c8ce2d88',
'inline-comment-summary-css' => '7cf15508', 'inline-comment-summary-css' => '94cb8965',
'javelin-aphlict' => '8243143a', 'javelin-aphlict' => 'f7e6114f',
'javelin-behavior' => 'db6d724d', 'javelin-behavior' => 'db6d724d',
'javelin-behavior-aphlict-dropdown' => '8243143a', 'javelin-behavior-aphlict-dropdown' => 'f7e6114f',
'javelin-behavior-aphlict-listen' => '8243143a', 'javelin-behavior-aphlict-listen' => 'f7e6114f',
'javelin-behavior-aphront-basic-tokenizer' => '8243143a', 'javelin-behavior-aphront-basic-tokenizer' => 'f7e6114f',
'javelin-behavior-aphront-drag-and-drop' => '7ecd31fa', 'javelin-behavior-aphront-drag-and-drop' => '7ecd31fa',
'javelin-behavior-aphront-drag-and-drop-textarea' => '7ecd31fa', 'javelin-behavior-aphront-drag-and-drop-textarea' => '7ecd31fa',
'javelin-behavior-aphront-form-disable-on-submit' => '8243143a', 'javelin-behavior-aphront-form-disable-on-submit' => 'f7e6114f',
'javelin-behavior-audit-preview' => '5e68be89', 'javelin-behavior-audit-preview' => '5e68be89',
'javelin-behavior-dark-console' => '3c5efda9', 'javelin-behavior-dark-console' => '8edbada5',
'javelin-behavior-dark-console-ajax' => '3c5efda9', 'javelin-behavior-dark-console-ajax' => '8edbada5',
'javelin-behavior-device' => '8243143a', 'javelin-behavior-device' => 'f7e6114f',
'javelin-behavior-differential-accept-with-errors' => '7ecd31fa', 'javelin-behavior-differential-accept-with-errors' => '7ecd31fa',
'javelin-behavior-differential-add-reviewers-and-ccs' => '7ecd31fa', 'javelin-behavior-differential-add-reviewers-and-ccs' => '7ecd31fa',
'javelin-behavior-differential-comment-jump' => '7ecd31fa', 'javelin-behavior-differential-comment-jump' => '7ecd31fa',
@ -3494,28 +3487,28 @@ celerity_register_resource_map(array(
'javelin-behavior-differential-user-select' => '7ecd31fa', 'javelin-behavior-differential-user-select' => '7ecd31fa',
'javelin-behavior-diffusion-commit-graph' => '5e68be89', 'javelin-behavior-diffusion-commit-graph' => '5e68be89',
'javelin-behavior-diffusion-pull-lastmodified' => '5e68be89', 'javelin-behavior-diffusion-pull-lastmodified' => '5e68be89',
'javelin-behavior-error-log' => '3c5efda9', 'javelin-behavior-error-log' => '8edbada5',
'javelin-behavior-konami' => '8243143a', 'javelin-behavior-konami' => 'f7e6114f',
'javelin-behavior-lightbox-attachments' => '8243143a', 'javelin-behavior-lightbox-attachments' => 'f7e6114f',
'javelin-behavior-maniphest-batch-selector' => '7707de41', 'javelin-behavior-maniphest-batch-selector' => '7707de41',
'javelin-behavior-maniphest-subpriority-editor' => '7707de41', 'javelin-behavior-maniphest-subpriority-editor' => '7707de41',
'javelin-behavior-maniphest-transaction-controls' => '7707de41', 'javelin-behavior-maniphest-transaction-controls' => '7707de41',
'javelin-behavior-maniphest-transaction-expand' => '7707de41', 'javelin-behavior-maniphest-transaction-expand' => '7707de41',
'javelin-behavior-maniphest-transaction-preview' => '7707de41', 'javelin-behavior-maniphest-transaction-preview' => '7707de41',
'javelin-behavior-phabricator-active-nav' => '8243143a', 'javelin-behavior-phabricator-active-nav' => 'f7e6114f',
'javelin-behavior-phabricator-autofocus' => '8243143a', 'javelin-behavior-phabricator-autofocus' => 'f7e6114f',
'javelin-behavior-phabricator-keyboard-shortcuts' => '8243143a', 'javelin-behavior-phabricator-keyboard-shortcuts' => 'f7e6114f',
'javelin-behavior-phabricator-nav' => '8243143a', 'javelin-behavior-phabricator-nav' => 'f7e6114f',
'javelin-behavior-phabricator-object-selector' => '7ecd31fa', 'javelin-behavior-phabricator-object-selector' => '7ecd31fa',
'javelin-behavior-phabricator-oncopy' => '8243143a', 'javelin-behavior-phabricator-oncopy' => 'f7e6114f',
'javelin-behavior-phabricator-remarkup-assist' => '8243143a', 'javelin-behavior-phabricator-remarkup-assist' => 'f7e6114f',
'javelin-behavior-phabricator-search-typeahead' => '8243143a', 'javelin-behavior-phabricator-search-typeahead' => 'f7e6114f',
'javelin-behavior-phabricator-tooltips' => '8243143a', 'javelin-behavior-phabricator-tooltips' => 'f7e6114f',
'javelin-behavior-phabricator-watch-anchor' => '8243143a', 'javelin-behavior-phabricator-watch-anchor' => 'f7e6114f',
'javelin-behavior-refresh-csrf' => '8243143a', 'javelin-behavior-refresh-csrf' => 'f7e6114f',
'javelin-behavior-repository-crossreference' => '7ecd31fa', 'javelin-behavior-repository-crossreference' => '7ecd31fa',
'javelin-behavior-toggle-class' => '8243143a', 'javelin-behavior-toggle-class' => 'f7e6114f',
'javelin-behavior-workflow' => '8243143a', 'javelin-behavior-workflow' => 'f7e6114f',
'javelin-dom' => 'db6d724d', 'javelin-dom' => 'db6d724d',
'javelin-event' => 'db6d724d', 'javelin-event' => 'db6d724d',
'javelin-install' => 'db6d724d', 'javelin-install' => 'db6d724d',
@ -3534,48 +3527,48 @@ celerity_register_resource_map(array(
'javelin-util' => 'db6d724d', 'javelin-util' => 'db6d724d',
'javelin-vector' => 'db6d724d', 'javelin-vector' => 'db6d724d',
'javelin-workflow' => 'db6d724d', 'javelin-workflow' => 'db6d724d',
'lightbox-attachment-css' => 'ba5cb698', 'lightbox-attachment-css' => '186ea458',
'maniphest-task-summary-css' => '7839ae2d', 'maniphest-task-summary-css' => '7839ae2d',
'maniphest-transaction-detail-css' => '7839ae2d', 'maniphest-transaction-detail-css' => '7839ae2d',
'phabricator-app-buttons-css' => 'ba5cb698', 'phabricator-app-buttons-css' => '186ea458',
'phabricator-busy' => '8243143a', 'phabricator-busy' => 'f7e6114f',
'phabricator-content-source-view-css' => '7cf15508', 'phabricator-content-source-view-css' => '94cb8965',
'phabricator-core-buttons-css' => 'ba5cb698', 'phabricator-core-buttons-css' => '186ea458',
'phabricator-core-css' => 'ba5cb698', 'phabricator-core-css' => '186ea458',
'phabricator-crumbs-view-css' => 'ba5cb698', 'phabricator-crumbs-view-css' => '186ea458',
'phabricator-directory-css' => 'ba5cb698', 'phabricator-directory-css' => '186ea458',
'phabricator-drag-and-drop-file-upload' => '7ecd31fa', 'phabricator-drag-and-drop-file-upload' => '7ecd31fa',
'phabricator-dropdown-menu' => '8243143a', 'phabricator-dropdown-menu' => 'f7e6114f',
'phabricator-file-upload' => '8243143a', 'phabricator-file-upload' => 'f7e6114f',
'phabricator-filetree-view-css' => 'ba5cb698', 'phabricator-filetree-view-css' => '186ea458',
'phabricator-flag-css' => 'ba5cb698', 'phabricator-flag-css' => '186ea458',
'phabricator-form-view-css' => 'ba5cb698', 'phabricator-form-view-css' => '186ea458',
'phabricator-header-view-css' => 'ba5cb698', 'phabricator-header-view-css' => '186ea458',
'phabricator-jump-nav' => 'ba5cb698', 'phabricator-jump-nav' => '186ea458',
'phabricator-keyboard-shortcut' => '8243143a', 'phabricator-keyboard-shortcut' => 'f7e6114f',
'phabricator-keyboard-shortcut-manager' => '8243143a', 'phabricator-keyboard-shortcut-manager' => 'f7e6114f',
'phabricator-main-menu-view' => 'ba5cb698', 'phabricator-main-menu-view' => '186ea458',
'phabricator-menu-item' => '8243143a', 'phabricator-menu-item' => 'f7e6114f',
'phabricator-nav-view-css' => 'ba5cb698', 'phabricator-nav-view-css' => '186ea458',
'phabricator-notification' => '8243143a', 'phabricator-notification' => 'f7e6114f',
'phabricator-notification-css' => 'ba5cb698', 'phabricator-notification-css' => '186ea458',
'phabricator-notification-menu-css' => 'ba5cb698', 'phabricator-notification-menu-css' => '186ea458',
'phabricator-object-item-list-view-css' => 'ba5cb698', 'phabricator-object-item-list-view-css' => '186ea458',
'phabricator-object-selector-css' => '7cf15508', 'phabricator-object-selector-css' => '94cb8965',
'phabricator-paste-file-upload' => '8243143a', 'phabricator-paste-file-upload' => 'f7e6114f',
'phabricator-prefab' => '8243143a', 'phabricator-prefab' => 'f7e6114f',
'phabricator-project-tag-css' => '7839ae2d', 'phabricator-project-tag-css' => '7839ae2d',
'phabricator-remarkup-css' => 'ba5cb698', 'phabricator-remarkup-css' => '186ea458',
'phabricator-shaped-request' => '7ecd31fa', 'phabricator-shaped-request' => '7ecd31fa',
'phabricator-side-menu-view-css' => 'ba5cb698', 'phabricator-side-menu-view-css' => '186ea458',
'phabricator-standard-page-view' => 'ba5cb698', 'phabricator-standard-page-view' => '186ea458',
'phabricator-textareautils' => '8243143a', 'phabricator-textareautils' => 'f7e6114f',
'phabricator-tooltip' => '8243143a', 'phabricator-tooltip' => 'f7e6114f',
'phabricator-transaction-view-css' => 'ba5cb698', 'phabricator-transaction-view-css' => '186ea458',
'sprite-apps-large-css' => 'ba5cb698', 'sprite-apps-large-css' => '186ea458',
'sprite-gradient-css' => 'ba5cb698', 'sprite-gradient-css' => '186ea458',
'sprite-icon-css' => 'ba5cb698', 'sprite-icon-css' => '186ea458',
'sprite-menu-css' => 'ba5cb698', 'sprite-menu-css' => '186ea458',
'syntax-highlighting-css' => 'ba5cb698', 'syntax-highlighting-css' => '186ea458',
), ),
)); ));

44
src/view/layout/AphrontSideNavFilterView.php
View file

@ -175,6 +175,7 @@ final class AphrontSideNavFilterView extends AphrontView {
$drag_id = null; $drag_id = null;
$content_id = celerity_generate_unique_node_id(); $content_id = celerity_generate_unique_node_id();
$local_id = null; $local_id = null;
$background_id = null;
$local_menu = null; $local_menu = null;
$main_id = celerity_generate_unique_node_id(); $main_id = celerity_generate_unique_node_id();
@ -194,12 +195,21 @@ final class AphrontSideNavFilterView extends AphrontView {
$nav_menu = null; $nav_menu = null;
if ($this->menu->getItems()) { if ($this->menu->getItems()) {
$local_id = celerity_generate_unique_node_id(); $local_id = celerity_generate_unique_node_id();
$background_id = celerity_generate_unique_node_id();
$nav_classes[] = 'has-local-nav'; $nav_classes[] = 'has-local-nav';
$local_menu = phutil_render_tag(
$menu_background = phutil_render_tag(
'div', 'div',
array( array(
'class' => 'phabricator-nav-col phabricator-nav-local '. 'class' => 'phabricator-nav-column-background',
'phabricator-side-menu', 'id' => $background_id,
),
'');
$local_menu = $menu_background.phutil_render_tag(
'div',
array(
'class' => 'phabricator-nav-local phabricator-side-menu',
'id' => $local_id, 'id' => $local_id,
), ),
self::renderSingleView($this->menu)); self::renderSingleView($this->menu));
@ -211,22 +221,24 @@ final class AphrontSideNavFilterView extends AphrontView {
$nav_classes[] = 'has-crumbs'; $nav_classes[] = 'has-crumbs';
} }
Javelin::initBehavior( if ($this->flexible) {
'phabricator-nav',
array(
'mainID' => $main_id,
'localID' => $local_id,
'dragID' => $drag_id,
'contentID' => $content_id,
'menuSize' => ($crumbs ? 76 : 44),
));
if ($this->active && $local_id) {
Javelin::initBehavior( Javelin::initBehavior(
'phabricator-active-nav', 'phabricator-nav',
array( array(
'localID' => $local_id, 'mainID' => $main_id,
'localID' => $local_id,
'dragID' => $drag_id,
'contentID' => $content_id,
'backgroundID' => $background_id,
)); ));
if ($this->active) {
Javelin::initBehavior(
'phabricator-active-nav',
array(
'localID' => $local_id,
));
}
} }
return $crumbs.phutil_render_tag( return $crumbs.phutil_render_tag(

83
webroot/rsrc/css/aphront/phabricator-nav-view.css
View file

@ -6,42 +6,45 @@
cursor: col-resize; cursor: col-resize;
} }
.phabricator-nav-col { .phabricator-nav-column-background {
position: fixed; position: fixed;
top: 44px; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
overflow-y: auto;
overflow-x: hidden;
white-space: nowrap;
z-index: 3;
}
.has-crumbs .phabricator-nav-col {
top: 76px;
}
.phabricator-nav-local {
width: 179px; width: 179px;
background: #ececec; background: #ececec;
border-right: 1px solid #999c9e; border-right: 1px solid #999c9e;
box-shadow: inset -3px 0 4px rgba(0, 0, 0, 0.05); box-shadow: inset -3px 0 4px rgba(0, 0, 0, 0.05);
background-image: url(/rsrc/image/menu_texture.png); background-image: url(/rsrc/image/menu_texture.png);
} }
.device .phabricator-nav-local { .phabricator-nav-column-background,
.phabricator-nav-local,
.phabricator-nav-drag {
display: none; display: none;
} }
.device-desktop .has-local-nav .phabricator-nav-column-background,
.device-desktop .has-local-nav .phabricator-nav-local,
.device-desktop .has-local-nav .phabricator-nav-drag {
display: block;
}
.phabricator-nav-local {
width: 179px;
position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: auto;
}
.phabricator-nav-drag { .phabricator-nav-drag {
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0;
left: 179px; left: 179px;
width: 7px; width: 7px;
bottom: 0;
z-index: 4; z-index: 4;
cursor: col-resize; cursor: col-resize;
@ -57,49 +60,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.device .phabricator-nav-drag { .device-desktop .has-local-nav .phabricator-nav-content {
display: none;
}
.has-local-nav .phabricator-nav-content {
margin-left: 180px; margin-left: 180px;
} }
.device-desktop .has-local-nav .phabricator-nav-content {
margin-left: 178px;
}
.device-desktop .local-nav-collapsed .phabricator-nav-local {
width: 0px !important;
}
.device-desktop .local-nav-collapsed .phabricator-nav-drag {
display: none;
}
.device-desktop .local-nav-collapsed .phabricator-nav-content {
margin-left: 0px !important;
}
.device .phabricator-nav-col {
position: absolute;
top: 0px;
}
.device .phabricator-nav-local {
left: -300px;
}
.device .phabricator-nav {
overflow-x: hidden;
position: relative;
}
.device .phabricator-nav-content {
width: 100%;
}
.device .phabricator-nav-content {
margin-left: 0;
position: relative;
}

3
webroot/rsrc/js/application/core/behavior-dark-console.js
View file

@ -56,6 +56,9 @@ JX.behavior('dark-console', function(config) {
new JX.Request(config.uri, JX.bag) new JX.Request(config.uri, JX.bag)
.setData({visible: config.visible ? 1 : 0}) .setData({visible: config.visible ? 1 : 0})
.send(); .send();
// Force resize listeners to take effect.
JX.Stratcom.invoke('resize');
}) })
.register(); .register();

193
webroot/rsrc/js/application/core/behavior-phabricator-nav.js
View file

@ -12,130 +12,135 @@
JX.behavior('phabricator-nav', function(config) { JX.behavior('phabricator-nav', function(config) {
var content = JX.$(config.contentID); var content = JX.$(config.contentID);
var local = config.localID ? JX.$(config.localID) : null; var local = JX.$(config.localID);
var main = JX.$(config.mainID); var main = JX.$(config.mainID);
var drag = JX.$(config.dragID);
var background = JX.$(config.backgroundID);
// - Flexible Navigation Column ------------------------------------------------ // - Flexible Navigation Column ------------------------------------------------
if (config.dragID) {
var dragging;
var track;
var drag = JX.$(config.dragID); var dragging;
JX.enableDispatch(document.body, 'mousemove'); var track;
JX.DOM.listen(drag, 'mousedown', null, function(e) { JX.enableDispatch(document.body, 'mousemove');
dragging = JX.$V(e);
// Show the "col-resize" cursor on the whole document while we're JX.DOM.listen(drag, 'mousedown', null, function(e) {
// dragging, since the mouse will slip off the actual bar fairly often and dragging = JX.$V(e);
// we don't want it to flicker.
JX.DOM.alterClass(document.body, 'jx-drag-col', true);
track = [ // Show the "col-resize" cursor on the whole document while we're
{ // dragging, since the mouse will slip off the actual bar fairly often and
element: local, // we don't want it to flicker.
parameter: 'width', JX.DOM.alterClass(document.body, 'jx-drag-col', true);
start: JX.Vector.getDim(local).x,
scale: 1,
width: JX.Vector.getDim(local).x, track = [
minWidth: 1, {
minScale: 1 element: local,
}, parameter: 'width',
{ start: JX.Vector.getDim(local).x,
element: drag, width: JX.Vector.getDim(local).x,
parameter: 'left', minWidth: 1
start: JX.$V(drag).x, },
scale: 1 {
}, element: background,
{ parameter: 'width',
element: content, start: JX.Vector.getDim(background).x,
parameter: 'marginLeft', start: JX.Vector.getDim(background).x,
start: parseInt(getComputedStyle(content).marginLeft, 10), minWidth: 1
scale: 1, },
{
width: JX.Vector.getDim(content).x, element: drag,
minWidth: 300, parameter: 'left',
minScale: -1 start: JX.$V(drag).x
} },
]; {
element: content,
e.kill(); parameter: 'marginLeft',
}); start: parseInt(getComputedStyle(content).marginLeft, 10),
width: JX.Vector.getDim(content).x,
JX.Stratcom.listen('mousemove', null, function(e) { minWidth: 300,
if (!dragging) { minScale: -1
return;
} }
];
var dx = JX.$V(e).x - dragging.x; e.kill();
var panel; });
for (var k = 0; k < track.length; k++) { JX.Stratcom.listen('mousemove', null, function(e) {
panel = track[k]; if (!dragging) {
if (!panel.minWidth) { return;
continue; }
}
var new_width = panel.width + (dx * panel.minScale); var dx = JX.$V(e).x - dragging.x;
if (new_width < panel.minWidth) { var panel;
dx = (panel.minWidth - panel.width) * panel.minScale;
} for (var k = 0; k < track.length; k++) {
panel = track[k];
if (!panel.minWidth) {
continue;
} }
var new_width = panel.width + (dx * (panel.minScale || 1));
for (var k = 0; k < track.length; k++) { if (new_width < panel.minWidth) {
panel = track[k]; dx = (panel.minWidth - panel.width) * panel.minScale;
var v = (panel.start + (dx * panel.scale));
panel.element.style[panel.parameter] = v + 'px';
} }
}); }
JX.Stratcom.listen('mouseup', null, function(e) { for (var k = 0; k < track.length; k++) {
if (!dragging) { panel = track[k];
return; var v = (panel.start + (dx * (panel.scale || 1)));
} panel.element.style[panel.parameter] = v + 'px';
JX.DOM.alterClass(document.body, 'jx-drag-col', false); }
dragging = false; });
});
var collapsed = false; JX.Stratcom.listen('mouseup', null, function(e) {
JX.Stratcom.listen('differential-filetree-toggle', null, function(e) { if (!dragging) {
collapsed = !collapsed; return;
JX.DOM.alterClass(main, 'local-nav-collapsed', collapsed); }
}); JX.DOM.alterClass(document.body, 'jx-drag-col', false);
} dragging = false;
});
var collapsed = false;
JX.Stratcom.listen('differential-filetree-toggle', null, function(e) {
collapsed = !collapsed;
JX.DOM.alterClass(main, 'has-local-nav', !collapsed);
});
// - Scroll -------------------------------------------------------------------- // - Scroll --------------------------------------------------------------------
// When the user scrolls down on the desktop, we move the local nav up until // When the user scrolls or resizes the window, anchor the menu to to the top
// it hits the top of the page. // of the navigation bar.
if (local) { function onresize(e) {
JX.Stratcom.listen(['scroll', 'resize'], null, function(e) { if (JX.Device.getDevice() != 'desktop') {
if (JX.Device.getDevice() != 'desktop') { return;
return; }
}
var y = Math.max(0, config.menuSize - JX.Vector.getScroll().y); local.style.top = Math.max(
local.style.top = y + 'px'; 0,
}); JX.$V(content).y - Math.max(0, JX.Vector.getScroll().y)) + 'px';
} }
local.style.position = 'fixed';
local.style.bottom = 0;
local.style.left = 0;
JX.Stratcom.listen(['scroll', 'resize'], null, onresize);
onresize();
// - Navigation Reset ---------------------------------------------------------- // - Navigation Reset ----------------------------------------------------------
JX.Stratcom.listen('phabricator-device-change', null, function(event) { JX.Stratcom.listen('phabricator-device-change', null, function(event) {
if (local) { local.style.width = '';
local.style.left = ''; background.style.width = '';
local.style.width = ''; drag.style.left = '';
local.style.top = '';
}
if (drag) {
drag.style.left = '';
}
content.style.marginLeft = ''; content.style.marginLeft = '';
onresize();
}); });
}); });