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

Make the filetree view width sticky across show/hide and reload

Browse source 
Summary:
Ref T13090. The default width changed recently to become much wider, but the behavior on this control isn't great. Instead:

  - Pick a default width somewhere between the two.
  - Make the width sticky across show/hide (pressing "f" twice remembers your width instead of resetting it).
  - Make the width sticky across reloads (dragging the bar, then reloading the page keeps the bar in the same place).

Test Plan:
  - Without settings, loaded page: got medium-width bar.
  - Dragged bar wide/narrow, toggled on/off with "f", got persistent width.
  - Dragged bar wide/narrow, reloaded page, got persistent width.
  - Dragged bar wide/narrow, toggled it off, reloaded page, toggled it on, got persistent width.

Maniphest Tasks: T13090

Differential Revision: https://secure.phabricator.com/D19129
This commit is contained in:
epriestley 2018-02-22 13:31:20 -08:00
parent 8ae01fdc6b
commit 4c7370a1a3
9 changed files with 124 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
resources/celerity/map.php
View file

@ -9,8 +9,8 @@ return array(
'names' => array(
'conpherence.pkg.css' => 'e68cf1fa',
'conpherence.pkg.js' => '15191c65',
'core.pkg.css' => 'e4f098a5',
'core.pkg.js' => 'bd19de1c',
'core.pkg.css' => '2fa91e14',
'core.pkg.js' => 'dc13d4b7',
'darkconsole.pkg.js' => '1f9a31bc',
'differential.pkg.css' => '113e692c',
'differential.pkg.js' => 'f6d809c0',
@ -31,7 +31,7 @@ return array(
'rsrc/css/aphront/multi-column.css' => '84cc6640',
'rsrc/css/aphront/notification.css' => '457861ec',
'rsrc/css/aphront/panel-view.css' => '8427b78d',
'rsrc/css/aphront/phabricator-nav-view.css' => '028126f6',
'rsrc/css/aphront/phabricator-nav-view.css' => 'a9e3e6d5',
'rsrc/css/aphront/table-view.css' => '8c9bbafe',
'rsrc/css/aphront/tokenizer.css' => '15d5ff71',
'rsrc/css/aphront/tooltip.css' => '173b9431',
@ -498,7 +498,7 @@ return array(
'rsrc/js/core/behavior-more.js' => 'a80d0378',
'rsrc/js/core/behavior-object-selector.js' => '77c1f0b0',
'rsrc/js/core/behavior-oncopy.js' => '2926fff2',
'rsrc/js/core/behavior-phabricator-nav.js' => '81144dfa',
'rsrc/js/core/behavior-phabricator-nav.js' => '836f966d',
'rsrc/js/core/behavior-phabricator-remarkup-assist.js' => 'acd29eee',
'rsrc/js/core/behavior-read-only-warning.js' => 'ba158207',
'rsrc/js/core/behavior-refresh-csrf.js' => 'ab2f381b',
@ -657,7 +657,7 @@ return array(
'javelin-behavior-phabricator-keyboard-pager' => 'a8da01f0',
'javelin-behavior-phabricator-keyboard-shortcuts' => '01fca1f0',
'javelin-behavior-phabricator-line-linker' => '1499a8cb',
'javelin-behavior-phabricator-nav' => '81144dfa',
'javelin-behavior-phabricator-nav' => '836f966d',
'javelin-behavior-phabricator-notification-example' => '8ce821c5',
'javelin-behavior-phabricator-object-selector' => '77c1f0b0',
'javelin-behavior-phabricator-oncopy' => '2926fff2',
@ -789,7 +789,7 @@ return array(
'phabricator-keyboard-shortcut' => '1ae869f2',
'phabricator-keyboard-shortcut-manager' => 'c19dd9b9',
'phabricator-main-menu-view' => '1802a242',
'phabricator-nav-view-css' => '028126f6',
'phabricator-nav-view-css' => 'a9e3e6d5',
'phabricator-notification' => '008faf9c',
'phabricator-notification-css' => '457861ec',
'phabricator-notification-menu-css' => '10685bd4',
@ -1563,7 +1563,11 @@ return array(
'phuix-icon-view',
'phabricator-prefab',
),
'81144dfa' => array(
'834a1173' => array(
'javelin-behavior',
'javelin-scrollbar',
),
'836f966d' => array(
'javelin-behavior',
'javelin-behavior-device',
'javelin-stratcom',
@ -1573,10 +1577,6 @@ return array(
'javelin-request',
'javelin-util',
),
'834a1173' => array(
'javelin-behavior',
'javelin-scrollbar',
),
'8499b6ab' => array(
'javelin-behavior',
'javelin-dom',

2
src/__phutil_library_map__.php
View file

@ -3046,6 +3046,7 @@ phutil_register_library_map(array(
'PhabricatorFilesOnDiskBuiltinFile' => 'applications/files/builtin/PhabricatorFilesOnDiskBuiltinFile.php',
'PhabricatorFilesOutboundRequestAction' => 'applications/files/action/PhabricatorFilesOutboundRequestAction.php',
'PhabricatorFiletreeVisibleSetting' => 'applications/settings/setting/PhabricatorFiletreeVisibleSetting.php',
'PhabricatorFiletreeWidthSetting' => 'applications/settings/setting/PhabricatorFiletreeWidthSetting.php',
'PhabricatorFlag' => 'applications/flag/storage/PhabricatorFlag.php',
'PhabricatorFlagAddFlagHeraldAction' => 'applications/flag/herald/PhabricatorFlagAddFlagHeraldAction.php',
'PhabricatorFlagColor' => 'applications/flag/constants/PhabricatorFlagColor.php',
@ -8613,6 +8614,7 @@ phutil_register_library_map(array(
'PhabricatorFilesOnDiskBuiltinFile' => 'PhabricatorFilesBuiltinFile',
'PhabricatorFilesOutboundRequestAction' => 'PhabricatorSystemAction',
'PhabricatorFiletreeVisibleSetting' => 'PhabricatorInternalSetting',
'PhabricatorFiletreeWidthSetting' => 'PhabricatorInternalSetting',
'PhabricatorFlag' => array(
'PhabricatorFlagDAO',
'PhabricatorPolicyInterface',

4
src/applications/differential/controller/DifferentialRevisionViewController.php
View file

@ -473,10 +473,14 @@ final class DifferentialRevisionViewController extends DifferentialController {
$collapsed_key = PhabricatorFiletreeVisibleSetting::SETTINGKEY;
$collapsed_value = $viewer->getUserSetting($collapsed_key);
$width_key = PhabricatorFiletreeWidthSetting::SETTINGKEY;
$width_value = $viewer->getUserSetting($width_key);
$nav = id(new DifferentialChangesetFileTreeSideNavBuilder())
->setTitle($monogram)
->setBaseURI(new PhutilURI($revision->getURI()))
->setCollapsed((bool)$collapsed_value)
->setWidth((int)$width_value)
->build($changesets);
}

15
src/applications/differential/view/DifferentialChangesetFileTreeSideNavBuilder.php
View file

@ -6,6 +6,7 @@ final class DifferentialChangesetFileTreeSideNavBuilder extends Phobject {
private $baseURI;
private $anchorName;
private $collapsed = false;
private $width;
public function setAnchorName($anchor_name) {
$this->anchorName = $anchor_name;
@ -36,13 +37,19 @@ final class DifferentialChangesetFileTreeSideNavBuilder extends Phobject {
return $this;
}
public function setWidth($width) {
$this->width = $width;
return $this;
}
public function build(array $changesets) {
assert_instances_of($changesets, 'DifferentialChangeset');
$nav = new AphrontSideNavFilterView();
$nav->setBaseURI($this->getBaseURI());
$nav->setFlexible(true);
$nav->setCollapsed($this->collapsed);
$nav = id(new AphrontSideNavFilterView())
->setBaseURI($this->getBaseURI())
->setFlexible(true)
->setCollapsed($this->collapsed)
->setWidth($this->width);
$anchor = $this->getAnchorName();

12
src/applications/diffusion/controller/DiffusionCommitController.php
View file

@ -415,17 +415,21 @@ final class DiffusionCommitController extends DiffusionController {
PhabricatorShowFiletreeSetting::SETTINGKEY,
PhabricatorShowFiletreeSetting::VALUE_ENABLE_FILETREE);
$pref_collapse = PhabricatorFiletreeVisibleSetting::SETTINGKEY;
$collapsed = $viewer->getUserSetting($pref_collapse);
$nav = null;
if ($show_changesets && $filetree_on) {
$pref_collapse = PhabricatorFiletreeVisibleSetting::SETTINGKEY;
$collapsed = $viewer->getUserSetting($pref_collapse);
$pref_width = PhabricatorFiletreeWidthSetting::SETTINGKEY;
$width = $viewer->getUserSetting($pref_width);
$nav = id(new DifferentialChangesetFileTreeSideNavBuilder())
->setTitle($commit->getDisplayName())
->setBaseURI(new PhutilURI($commit->getURI()))
->build($changesets)
->setCrumbs($crumbs)
->setCollapsed((bool)$collapsed);
->setCollapsed((bool)$collapsed)
->setWidth((int)$width);
}
$view = id(new PHUITwoColumnView())

12
src/applications/settings/setting/PhabricatorFiletreeWidthSetting.php Normal file
View file

@ -0,0 +1,12 @@
<?php
final class PhabricatorFiletreeWidthSetting
extends PhabricatorInternalSetting {
const SETTINGKEY = 'filetree.width';
public function getSettingName() {
return pht('Filetree Width');
}
}

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

@ -30,6 +30,7 @@ final class AphrontSideNavFilterView extends AphrontView {
private $mainID;
private $isProfileMenu;
private $footer = array();
private $width;
public function setMenuID($menu_id) {
$this->menuID = $menu_id;
@ -82,6 +83,11 @@ final class AphrontSideNavFilterView extends AphrontView {
return $this;
}
public function setWidth($width) {
$this->width = $width;
return $this;
}
public function getMenuView() {
return $this->menu;
}
@ -216,6 +222,24 @@ final class AphrontSideNavFilterView extends AphrontView {
$local_menu = null;
$main_id = $this->getMainID();
$width = $this->width;
if ($width) {
$width = min($width, 600);
$width = max($width, 150);
} else {
$width = null;
}
if ($width && !$this->collapsed) {
$width_drag_style = 'left: '.$width.'px';
$width_panel_style = 'width: '.$width.'px';
$width_margin_style = 'margin-left: '.($width + 7).'px';
} else {
$width_drag_style = null;
$width_panel_style = null;
$width_margin_style = null;
}
if ($this->flexible) {
$drag_id = celerity_generate_unique_node_id();
$flex_bar = phutil_tag(
@ -223,6 +247,7 @@ final class AphrontSideNavFilterView extends AphrontView {
array(
'class' => 'phabricator-nav-drag',
'id' => $drag_id,
'style' => $width_drag_style,
),
'');
} else {
@ -238,14 +263,14 @@ final class AphrontSideNavFilterView extends AphrontView {
$nav_classes[] = 'has-local-nav';
}
$local_menu =
phutil_tag(
'div',
array(
'class' => 'phabricator-nav-local phabricator-side-menu',
'id' => $local_id,
),
$this->menu->setID($this->getMenuID()));
$local_menu = phutil_tag(
'div',
array(
'class' => 'phabricator-nav-local phabricator-side-menu',
'id' => $local_id,
'style' => $width_panel_style,
),
$this->menu->setID($this->getMenuID()));
}
$crumbs = null;
@ -264,12 +289,13 @@ final class AphrontSideNavFilterView extends AphrontView {
Javelin::initBehavior(
'phabricator-nav',
array(
'mainID' => $main_id,
'localID' => $local_id,
'dragID' => $drag_id,
'contentID' => $content_id,
'backgroundID' => $background_id,
'collapsed' => $this->collapsed,
'mainID' => $main_id,
'localID' => $local_id,
'dragID' => $drag_id,
'contentID' => $content_id,
'backgroundID' => $background_id,
'collapsed' => $this->collapsed,
'width' => $width,
));
if ($this->active) {
@ -297,6 +323,7 @@ final class AphrontSideNavFilterView extends AphrontView {
array(
'class' => 'phabricator-nav-content plb',
'id' => $content_id,
'style' => $width_margin_style,
),
array(
$crumbs,

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

@ -44,7 +44,7 @@
position: fixed;
top: 0;
bottom: 0;
left: 410px;
left: 310px;
width: 7px;
cursor: col-resize;
@ -66,7 +66,7 @@
.device-desktop .phabricator-standard-page-body .has-drag-nav
.phabricator-nav-content {
margin-left: 417px;
margin-left: 317px;
}
.device-desktop .phabricator-standard-page-body .has-drag-nav
@ -81,7 +81,7 @@
}
.device-desktop .phui-navigation-shell .has-drag-nav .phabricator-nav-local {
width: 410px;
width: 310px;
padding: 0;
background: transparent;
}

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

@ -18,7 +18,6 @@ JX.behavior('phabricator-nav', function(config) {
var main = JX.$(config.mainID);
var drag = JX.$(config.dragID);
// - Flexible Navigation Column ------------------------------------------------
@ -98,22 +97,52 @@ JX.behavior('phabricator-nav', function(config) {
}
JX.DOM.alterClass(document.body, 'jx-drag-col', false);
dragging = false;
new JX.Request('/settings/adjust/', JX.bag)
.setData(
{
key: 'filetree.width',
value: JX.$V(drag).x
})
.send();
});
function resetdrag() {
var saved_width = config.width;
function savedrag() {
saved_width = JX.$V(drag).x;
local.style.width = '';
drag.style.left = '';
content.style.marginLeft = '';
}
function restoredrag() {
if (!saved_width) {
return;
}
local.style.width = saved_width + 'px';
drag.style.left = saved_width + 'px';
content.style.marginLeft = (saved_width + JX.Vector.getDim(drag).x) + 'px';
}
var collapsed = config.collapsed;
JX.Stratcom.listen('differential-filetree-toggle', null, function() {
collapsed = !collapsed;
if (collapsed) {
savedrag();
}
JX.DOM.alterClass(main, 'has-local-nav', !collapsed);
JX.DOM.alterClass(main, 'has-drag-nav', !collapsed);
JX.DOM.alterClass(main, 'has-closed-nav', collapsed);
resetdrag();
if (!collapsed) {
restoredrag();
}
new JX.Request('/settings/adjust/', JX.bag)
.setData({ key : 'nav-collapsed', value : (collapsed ? 1 : 0) })
.send();