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

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

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

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

@ -6,42 +6,45 @@
cursor: col-resize;
}
.phabricator-nav-col {
.phabricator-nav-column-background {
position: fixed;
top: 44px;
top: 0;
left: 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;
background: #ececec;
border-right: 1px solid #999c9e;
box-shadow: inset -3px 0 4px rgba(0, 0, 0, 0.05);
background-image: url(/rsrc/image/menu_texture.png);
}
.device .phabricator-nav-local {
.phabricator-nav-column-background,
.phabricator-nav-local,
.phabricator-nav-drag {
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 {
position: fixed;
top: 0;
bottom: 0;
left: 179px;
width: 7px;
bottom: 0;
z-index: 4;
cursor: col-resize;
@ -57,49 +60,7 @@
background-repeat: no-repeat;
}
.device .phabricator-nav-drag {
display: none;
}
.has-local-nav .phabricator-nav-content {
.device-desktop .has-local-nav .phabricator-nav-content {
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)
.setData({visible: config.visible ? 1 : 0})
.send();
// Force resize listeners to take effect.
JX.Stratcom.invoke('resize');
})
.register();

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

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