mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-27 01:02:42 +01:00
Always collapse the left nav on desktops
Summary: There is basically no reason for anyone to ever use the uncollapsed mode for more than the first 2 minutes of using the tool. Delete all code related to collapse/expand. (I'm going to add tooltips next.) Also move the drag bar a few pixels to the right, so it does not overlap with the scrollbar on the "local" nav if there is one. Test Plan: Viewed in desktop/tablet/phone modes. Reviewers: vrana Reviewed By: vrana CC: aran Differential Revision: https://secure.phabricator.com/D3413
This commit is contained in:
parent
c4ed47929c
commit
5c006193dd
5 changed files with 11 additions and 134 deletions
|
@ -1518,7 +1518,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'javelin-behavior-phabricator-nav' =>
|
||||
array(
|
||||
'uri' => '/res/dc349915/rsrc/js/application/core/behavior-phabricator-nav.js',
|
||||
'uri' => '/res/6e550189/rsrc/js/application/core/behavior-phabricator-nav.js',
|
||||
'type' => 'js',
|
||||
'requires' =>
|
||||
array(
|
||||
|
@ -1528,9 +1528,8 @@ celerity_register_resource_map(array(
|
|||
3 => 'javelin-dom',
|
||||
4 => 'javelin-magical-init',
|
||||
5 => 'javelin-vector',
|
||||
6 => 'javelin-request',
|
||||
7 => 'javelin-util',
|
||||
8 => 'javelin-fx',
|
||||
6 => 'javelin-util',
|
||||
7 => 'javelin-fx',
|
||||
),
|
||||
'disk' => '/rsrc/js/application/core/behavior-phabricator-nav.js',
|
||||
),
|
||||
|
@ -2477,7 +2476,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'phabricator-nav-view-css' =>
|
||||
array(
|
||||
'uri' => '/res/289a0aed/rsrc/css/aphront/phabricator-nav-view.css',
|
||||
'uri' => '/res/1d3e1353/rsrc/css/aphront/phabricator-nav-view.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
|
|
|
@ -33,7 +33,6 @@ final class PhabricatorUserPreferences extends PhabricatorUserDAO {
|
|||
const PREFERENCE_DIFFUSION_VIEW = 'diffusion-view';
|
||||
const PREFERENCE_DIFFUSION_SYMBOLS = 'diffusion-symbols';
|
||||
|
||||
const PREFERENCE_NAV_COLLAPSED = 'nav-collapsed';
|
||||
const PREFERENCE_NAV_WIDTH = 'nav-width';
|
||||
|
||||
protected $userPHID;
|
||||
|
|
|
@ -77,48 +77,19 @@ final class AphrontSideNavView extends AphrontView {
|
|||
$nav_id = null;
|
||||
$drag_id = null;
|
||||
$content_id = celerity_generate_unique_node_id();
|
||||
$collapse_id = null;
|
||||
$expand_id = null;
|
||||
$local_id = null;
|
||||
$local_menu = null;
|
||||
$main_id = celerity_generate_unique_node_id();
|
||||
|
||||
$apps = $this->renderApplications();
|
||||
|
||||
$key = PhabricatorUserPreferences::PREFERENCE_NAV_COLLAPSED;
|
||||
if ($user->loadPreferences()->getPreference($key)) {
|
||||
$nav_classes[] = 'phabricator-nav-app-collapsed';
|
||||
}
|
||||
|
||||
$collapse_id = celerity_generate_unique_node_id();
|
||||
$expand_id = celerity_generate_unique_node_id();
|
||||
|
||||
$collapse_button = phutil_render_tag(
|
||||
'a',
|
||||
array(
|
||||
'href' => '#',
|
||||
'class' => 'phabricator-nav-app-button-collapse',
|
||||
'id' => $collapse_id,
|
||||
),
|
||||
'« Collapse');
|
||||
$expand_button = phutil_render_tag(
|
||||
'a',
|
||||
array(
|
||||
'href' => '#',
|
||||
'class' => 'phabricator-nav-app-button-expand',
|
||||
'id' => $expand_id,
|
||||
),
|
||||
'»');
|
||||
|
||||
$app_menu = phutil_render_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'phabricator-nav-col phabricator-nav-app',
|
||||
'id' => $app_id,
|
||||
),
|
||||
$apps->render()).
|
||||
$expand_button.
|
||||
$collapse_button;
|
||||
$apps->render());
|
||||
|
||||
if ($this->flexible) {
|
||||
$drag_id = celerity_generate_unique_node_id();
|
||||
|
@ -154,9 +125,6 @@ final class AphrontSideNavView extends AphrontView {
|
|||
'localID' => $local_id,
|
||||
'dragID' => $drag_id,
|
||||
'contentID' => $content_id,
|
||||
'collapseID' => $collapse_id,
|
||||
'expandID' => $expand_id,
|
||||
'collapseKey' => $key,
|
||||
));
|
||||
|
||||
if ($this->active && $local_id) {
|
||||
|
|
|
@ -43,7 +43,7 @@
|
|||
.phabricator-nav-drag {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 327px;
|
||||
left: 217px;
|
||||
width: 7px;
|
||||
bottom: 0;
|
||||
z-index: 4;
|
||||
|
@ -66,10 +66,6 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-nav-app-collapsed .phabricator-nav-drag {
|
||||
left: 215px;
|
||||
}
|
||||
|
||||
.phabricator-nav-col a,
|
||||
.phabricator-nav-col span {
|
||||
display: block;
|
||||
|
@ -79,7 +75,7 @@
|
|||
left: 150px;
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-nav-app-collapsed .phabricator-nav-local {
|
||||
.device-desktop .phabricator-nav-local {
|
||||
left: 38px;
|
||||
}
|
||||
|
||||
|
@ -91,12 +87,11 @@
|
|||
margin-left: 330px;
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-nav-app-collapsed .phabricator-nav-content {
|
||||
margin-left: 36px;
|
||||
.device-desktop .phabricator-nav-content {
|
||||
margin-left: 38px;
|
||||
}
|
||||
|
||||
.device-desktop .has-local-nav.phabricator-nav-app-collapsed
|
||||
.phabricator-nav-content {
|
||||
.device-desktop .has-local-nav .phabricator-nav-content {
|
||||
margin-left: 216px;
|
||||
}
|
||||
|
||||
|
@ -153,51 +148,10 @@ span.phabricator-nav-app-item-icon {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
a.phabricator-nav-app-button-expand,
|
||||
a.phabricator-nav-app-button-collapse {
|
||||
position: fixed;
|
||||
display: none;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
padding: 4px;
|
||||
z-index: 4;
|
||||
background: #44494d;
|
||||
line-height: 14px;
|
||||
border-top: 1px solid #222222;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
box-shadow: inset -1px -1px 3px rgba(0, 0, 0, 0.1);
|
||||
color: #c0c0c0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.phabricator-nav-app-button-collapse {
|
||||
width: 141px;
|
||||
}
|
||||
|
||||
.phabricator-nav-app-button-expand {
|
||||
width: 29px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-nav-app-button-expand,
|
||||
.device-desktop .phabricator-nav-app-button-collapse {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-nav-app-collapsed .phabricator-nav-app {
|
||||
.device-desktop .phabricator-nav-app {
|
||||
width: 37px;
|
||||
}
|
||||
|
||||
.phabricator-nav-app-collapsed .phabricator-nav-app-button-collapse {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-nav-app-collapsed
|
||||
.phabricator-nav-app-button-expand {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.device-desktop .phabricator-nav-head {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
@ -6,7 +6,6 @@
|
|||
* javelin-dom
|
||||
* javelin-magical-init
|
||||
* javelin-vector
|
||||
* javelin-request
|
||||
* javelin-util
|
||||
* javelin-fx
|
||||
* @javelin
|
||||
|
@ -85,48 +84,6 @@ JX.behavior('phabricator-nav', function(config) {
|
|||
}
|
||||
|
||||
|
||||
// - Application Menu Collapse/Expand ------------------------------------------
|
||||
|
||||
function collapse(state, skip_save) {
|
||||
// As necessary, adjust the drag bar and content positioning. Do this first,
|
||||
// so we don't end up measuring things after the collapse takes effect.
|
||||
|
||||
// This is the difference between the widths of the uncollapsed application
|
||||
// nav (150px) and the collapsed one (38px).
|
||||
var delta = 112;
|
||||
delta = state ? -delta : delta;
|
||||
if (config.dragID) {
|
||||
var drag = JX.$(config.dragID);
|
||||
var p = JX.$V(drag);
|
||||
p.x += delta;
|
||||
p.y = null;
|
||||
p.setPos(drag);
|
||||
}
|
||||
|
||||
var c = parseInt(getComputedStyle(content).marginLeft, 10);
|
||||
content.style.marginLeft = (c + delta) + 'px';
|
||||
|
||||
JX.DOM.alterClass(
|
||||
JX.$(config.mainID),
|
||||
'phabricator-nav-app-collapsed',
|
||||
state);
|
||||
|
||||
if (!skip_save) {
|
||||
new JX.Request('/settings/adjust/', JX.bag)
|
||||
.setData({key: config.collapseKey, value: state ? 1 : ''})
|
||||
.send();
|
||||
}
|
||||
}
|
||||
|
||||
JX.DOM.listen(JX.$(config.collapseID), 'click', null, function(e) {
|
||||
collapse(true);
|
||||
});
|
||||
|
||||
JX.DOM.listen(JX.$(config.expandID), 'click', null, function(e) {
|
||||
collapse(false);
|
||||
});
|
||||
|
||||
|
||||
// - Flexible Navigation Column ------------------------------------------------
|
||||
|
||||
if (config.dragID) {
|
||||
|
|
Loading…
Reference in a new issue