mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-22 14:52:41 +01:00
Roughly style the new "flank" paths UI
Summary: Ref T13516. Apply basic UI styling to the new UI and make some more interaction work. Test Plan: {F7374096} Maniphest Tasks: T13516 Differential Revision: https://secure.phabricator.com/D21153
This commit is contained in:
epriestley
parent
8cd1f9a309
commit
ba8071bbef
15 changed files with 378 additions and 125 deletions
|
|
@ -10,9 +10,9 @@ return array(
|
|||
'conpherence.pkg.css' => '3c8a0668',
|
||||
'conpherence.pkg.js' => '020aebcf',
|
||||
'core.pkg.css' => 'a4a2417c',
|
||||
'core.pkg.js' => '4355a8d3',
|
||||
'core.pkg.js' => 'd092ddaf',
|
||||
'differential.pkg.css' => '607c84be',
|
||||
'differential.pkg.js' => '688775a9',
|
||||
'differential.pkg.js' => '58e09368',
|
||||
'diffusion.pkg.css' => '42c75c37',
|
||||
'diffusion.pkg.js' => 'a98c0bf7',
|
||||
'maniphest.pkg.css' => '35995d6d',
|
||||
|
|
@ -59,6 +59,7 @@ return array(
|
|||
'rsrc/css/application/countdown/timer.css' => 'bff8012f',
|
||||
'rsrc/css/application/daemon/bulk-job.css' => '73af99f5',
|
||||
'rsrc/css/application/dashboard/dashboard.css' => '5a205b9d',
|
||||
'rsrc/css/application/diff/diff-tree-view.css' => 'ce58c3d1',
|
||||
'rsrc/css/application/diff/inline-comment-summary.css' => '81eb368d',
|
||||
'rsrc/css/application/differential/add-comment.css' => '7e5900d9',
|
||||
'rsrc/css/application/differential/changeset-view.css' => '489b6995',
|
||||
|
|
@ -155,7 +156,7 @@ return array(
|
|||
'rsrc/css/phui/phui-fontkit.css' => '1ec937e5',
|
||||
'rsrc/css/phui/phui-form-view.css' => '01b796c0',
|
||||
'rsrc/css/phui/phui-form.css' => '1f177cb7',
|
||||
'rsrc/css/phui/phui-formation-view.css' => 'e87a0801',
|
||||
'rsrc/css/phui/phui-formation-view.css' => '82a3b73e',
|
||||
'rsrc/css/phui/phui-head-thing.css' => 'd7f293df',
|
||||
'rsrc/css/phui/phui-header-view.css' => '36c86a58',
|
||||
'rsrc/css/phui/phui-hovercard.css' => '6ca90fa0',
|
||||
|
|
@ -378,11 +379,11 @@ return array(
|
|||
'rsrc/js/application/dashboard/behavior-dashboard-move-panels.js' => 'a2ab19be',
|
||||
'rsrc/js/application/dashboard/behavior-dashboard-query-panel-select.js' => '1e413dc9',
|
||||
'rsrc/js/application/dashboard/behavior-dashboard-tab-panel.js' => '0116d3e8',
|
||||
'rsrc/js/application/diff/DiffChangeset.js' => 'd1eda7b4',
|
||||
'rsrc/js/application/diff/DiffChangesetList.js' => '469beba0',
|
||||
'rsrc/js/application/diff/DiffChangeset.js' => 'ea6e377d',
|
||||
'rsrc/js/application/diff/DiffChangesetList.js' => '5a351998',
|
||||
'rsrc/js/application/diff/DiffInline.js' => '16e97ebc',
|
||||
'rsrc/js/application/diff/DiffPathView.js' => 'e5166692',
|
||||
'rsrc/js/application/diff/DiffTreeView.js' => '4055adeb',
|
||||
'rsrc/js/application/diff/DiffPathView.js' => '8337f4c7',
|
||||
'rsrc/js/application/diff/DiffTreeView.js' => 'a5823e4d',
|
||||
'rsrc/js/application/diff/behavior-preview-link.js' => 'f51e9c17',
|
||||
'rsrc/js/application/differential/behavior-diff-radios.js' => '925fe8cd',
|
||||
'rsrc/js/application/differential/behavior-populate.js' => 'b86ef6c2',
|
||||
|
|
@ -457,7 +458,7 @@ return array(
|
|||
'rsrc/js/core/FileUpload.js' => 'ab85e184',
|
||||
'rsrc/js/core/Hovercard.js' => '074f0783',
|
||||
'rsrc/js/core/KeyboardShortcut.js' => '1a844c06',
|
||||
'rsrc/js/core/KeyboardShortcutManager.js' => 'ef926938',
|
||||
'rsrc/js/core/KeyboardShortcutManager.js' => '81debc48',
|
||||
'rsrc/js/core/MultirowRowManager.js' => '5b54c823',
|
||||
'rsrc/js/core/Notification.js' => 'a9b91e3f',
|
||||
'rsrc/js/core/Prefab.js' => '5793d835',
|
||||
|
|
@ -529,7 +530,7 @@ return array(
|
|||
'rsrc/js/phuix/PHUIXDropdownMenu.js' => '7acfd98b',
|
||||
'rsrc/js/phuix/PHUIXExample.js' => 'c2c500a7',
|
||||
'rsrc/js/phuix/PHUIXFormControl.js' => '38c1f3fb',
|
||||
'rsrc/js/phuix/PHUIXFormationColumnView.js' => '8afd2cb1',
|
||||
'rsrc/js/phuix/PHUIXFormationColumnView.js' => '4bcc1f78',
|
||||
'rsrc/js/phuix/PHUIXFormationFlankView.js' => '6648270a',
|
||||
'rsrc/js/phuix/PHUIXFormationView.js' => 'cef53b3e',
|
||||
'rsrc/js/phuix/PHUIXIconView.js' => 'a5257c4e',
|
||||
|
|
@ -561,6 +562,7 @@ return array(
|
|||
'conpherence-thread-manager' => 'aec8e38c',
|
||||
'conpherence-transaction-css' => '3a3f5e7e',
|
||||
'd3' => '9d068042',
|
||||
'diff-tree-view-css' => 'ce58c3d1',
|
||||
'differential-changeset-view-css' => '489b6995',
|
||||
'differential-core-view-css' => '7300a73e',
|
||||
'differential-revision-add-comment-css' => '7e5900d9',
|
||||
|
|
@ -780,11 +782,11 @@ return array(
|
|||
'phabricator-darklog' => '3b869402',
|
||||
'phabricator-darkmessage' => '26cd4b73',
|
||||
'phabricator-dashboard-css' => '5a205b9d',
|
||||
'phabricator-diff-changeset' => 'd1eda7b4',
|
||||
'phabricator-diff-changeset-list' => '469beba0',
|
||||
'phabricator-diff-changeset' => 'ea6e377d',
|
||||
'phabricator-diff-changeset-list' => '5a351998',
|
||||
'phabricator-diff-inline' => '16e97ebc',
|
||||
'phabricator-diff-path-view' => 'e5166692',
|
||||
'phabricator-diff-tree-view' => '4055adeb',
|
||||
'phabricator-diff-path-view' => '8337f4c7',
|
||||
'phabricator-diff-tree-view' => 'a5823e4d',
|
||||
'phabricator-drag-and-drop-file-upload' => '4370900d',
|
||||
'phabricator-draggable-list' => '0169e425',
|
||||
'phabricator-fatal-config-template-css' => '20babf50',
|
||||
|
|
@ -794,7 +796,7 @@ return array(
|
|||
'phabricator-filetree-view-css' => '56cdd875',
|
||||
'phabricator-flag-css' => '2b77be8d',
|
||||
'phabricator-keyboard-shortcut' => '1a844c06',
|
||||
'phabricator-keyboard-shortcut-manager' => 'ef926938',
|
||||
'phabricator-keyboard-shortcut-manager' => '81debc48',
|
||||
'phabricator-main-menu-view' => 'bcec20f0',
|
||||
'phabricator-nav-view-css' => 'f8a0c1bf',
|
||||
'phabricator-notification' => 'a9b91e3f',
|
||||
|
|
@ -852,7 +854,7 @@ return array(
|
|||
'phui-fontkit-css' => '1ec937e5',
|
||||
'phui-form-css' => '1f177cb7',
|
||||
'phui-form-view-css' => '01b796c0',
|
||||
'phui-formation-view-css' => 'e87a0801',
|
||||
'phui-formation-view-css' => '82a3b73e',
|
||||
'phui-head-thing-view-css' => 'd7f293df',
|
||||
'phui-header-view-css' => '36c86a58',
|
||||
'phui-hovercard' => '074f0783',
|
||||
|
|
@ -895,7 +897,7 @@ return array(
|
|||
'phuix-button-view' => '55a24e84',
|
||||
'phuix-dropdown-menu' => '7acfd98b',
|
||||
'phuix-form-control-view' => '38c1f3fb',
|
||||
'phuix-formation-column-view' => '8afd2cb1',
|
||||
'phuix-formation-column-view' => '4bcc1f78',
|
||||
'phuix-formation-flank-view' => '6648270a',
|
||||
'phuix-formation-view' => 'cef53b3e',
|
||||
'phuix-icon-view' => 'a5257c4e',
|
||||
|
|
@ -1267,9 +1269,6 @@ return array(
|
|||
'phabricator-drag-and-drop-file-upload',
|
||||
'phabricator-draggable-list',
|
||||
),
|
||||
'4055adeb' => array(
|
||||
'javelin-dom',
|
||||
),
|
||||
'407ee861' => array(
|
||||
'javelin-behavior',
|
||||
'javelin-uri',
|
||||
|
|
@ -1319,11 +1318,6 @@ return array(
|
|||
'javelin-util',
|
||||
'phabricator-busy',
|
||||
),
|
||||
'469beba0' => array(
|
||||
'javelin-install',
|
||||
'phuix-button-view',
|
||||
'phabricator-diff-tree-view',
|
||||
),
|
||||
'47a0728b' => array(
|
||||
'javelin-behavior',
|
||||
'javelin-dom',
|
||||
|
|
@ -1369,6 +1363,10 @@ return array(
|
|||
'javelin-util',
|
||||
'javelin-request',
|
||||
),
|
||||
'4bcc1f78' => array(
|
||||
'javelin-install',
|
||||
'javelin-dom',
|
||||
),
|
||||
'4dffaeb2' => array(
|
||||
'javelin-behavior',
|
||||
'javelin-stratcom',
|
||||
|
|
@ -1474,6 +1472,11 @@ return array(
|
|||
'javelin-dom',
|
||||
'javelin-history',
|
||||
),
|
||||
'5a351998' => array(
|
||||
'javelin-install',
|
||||
'phuix-button-view',
|
||||
'phabricator-diff-tree-view',
|
||||
),
|
||||
'5a6f6a06' => array(
|
||||
'javelin-behavior',
|
||||
'javelin-quicksand',
|
||||
|
|
@ -1647,6 +1650,16 @@ return array(
|
|||
'javelin-install',
|
||||
'javelin-typeahead-source',
|
||||
),
|
||||
'81debc48' => array(
|
||||
'javelin-install',
|
||||
'javelin-util',
|
||||
'javelin-stratcom',
|
||||
'javelin-dom',
|
||||
'javelin-vector',
|
||||
),
|
||||
'8337f4c7' => array(
|
||||
'javelin-dom',
|
||||
),
|
||||
83754533 => array(
|
||||
'javelin-install',
|
||||
'javelin-util',
|
||||
|
|
@ -1691,10 +1704,6 @@ return array(
|
|||
'javelin-dom',
|
||||
'phabricator-draggable-list',
|
||||
),
|
||||
'8afd2cb1' => array(
|
||||
'javelin-install',
|
||||
'javelin-dom',
|
||||
),
|
||||
'8b5c7d65' => array(
|
||||
'javelin-behavior',
|
||||
'javelin-stratcom',
|
||||
|
|
@ -1866,6 +1875,9 @@ return array(
|
|||
'javelin-install',
|
||||
'javelin-dom',
|
||||
),
|
||||
'a5823e4d' => array(
|
||||
'javelin-dom',
|
||||
),
|
||||
'a61c2d11' => array(
|
||||
'javelin-behavior',
|
||||
'phabricator-keyboard-shortcut',
|
||||
|
|
@ -2096,18 +2108,6 @@ return array(
|
|||
'javelin-workflow',
|
||||
'javelin-util',
|
||||
),
|
||||
'd1eda7b4' => array(
|
||||
'javelin-dom',
|
||||
'javelin-util',
|
||||
'javelin-stratcom',
|
||||
'javelin-install',
|
||||
'javelin-workflow',
|
||||
'javelin-router',
|
||||
'javelin-behavior-device',
|
||||
'javelin-vector',
|
||||
'phabricator-diff-inline',
|
||||
'phabricator-diff-path-view',
|
||||
),
|
||||
'd3799cb4' => array(
|
||||
'javelin-install',
|
||||
),
|
||||
|
|
@ -2134,9 +2134,6 @@ return array(
|
|||
'javelin-dom',
|
||||
'phuix-dropdown-menu',
|
||||
),
|
||||
'e5166692' => array(
|
||||
'javelin-dom',
|
||||
),
|
||||
'e5bdb730' => array(
|
||||
'javelin-behavior',
|
||||
'javelin-stratcom',
|
||||
|
|
@ -2164,6 +2161,18 @@ return array(
|
|||
'javelin-install',
|
||||
'javelin-event',
|
||||
),
|
||||
'ea6e377d' => array(
|
||||
'javelin-dom',
|
||||
'javelin-util',
|
||||
'javelin-stratcom',
|
||||
'javelin-install',
|
||||
'javelin-workflow',
|
||||
'javelin-router',
|
||||
'javelin-behavior-device',
|
||||
'javelin-vector',
|
||||
'phabricator-diff-inline',
|
||||
'phabricator-diff-path-view',
|
||||
),
|
||||
'ebe83a6b' => array(
|
||||
'javelin-install',
|
||||
),
|
||||
|
|
@ -2178,13 +2187,6 @@ return array(
|
|||
'javelin-dom',
|
||||
'javelin-stratcom',
|
||||
),
|
||||
'ef926938' => array(
|
||||
'javelin-install',
|
||||
'javelin-util',
|
||||
'javelin-stratcom',
|
||||
'javelin-dom',
|
||||
'javelin-vector',
|
||||
),
|
||||
'f166c949' => array(
|
||||
'javelin-behavior',
|
||||
'javelin-behavior-device',
|
||||
|
|
|
|||
|
|
@ -43,13 +43,15 @@ final class DifferentialFileTreeEngine
|
|||
return $content;
|
||||
}
|
||||
|
||||
require_celerity_resource('diff-tree-view-css');
|
||||
|
||||
$width = $this->getWidth();
|
||||
$is_visible = $this->getIsVisible();
|
||||
|
||||
$formation_view = new PHUIFormationView();
|
||||
|
||||
$flank_view = $formation_view->newFlankColumn()
|
||||
->setHeaderText(pht('Affected Paths'))
|
||||
->setHeaderText(pht('Paths'))
|
||||
->setIsResizable(true)
|
||||
->setIsFixed(true)
|
||||
->setIsVisible($is_visible)
|
||||
|
|
@ -60,45 +62,34 @@ final class DifferentialFileTreeEngine
|
|||
$viewer = $this->getViewer();
|
||||
if ($viewer->isLoggedIn()) {
|
||||
$flank_view
|
||||
->setExpanderTooltip(pht('Show Paths Panel'))
|
||||
->setVisibleSettingKey($this->getVisibleSettingKey())
|
||||
->setWidthSettingKey($this->getWidthSettingKey());
|
||||
}
|
||||
|
||||
$flank_view->setHead(
|
||||
array(
|
||||
phutil_tag('div', array(),
|
||||
array(
|
||||
id(new PHUIIconView())->setIcon('fa-list'),
|
||||
pht('Table of Contents'),
|
||||
'[t]',
|
||||
)),
|
||||
));
|
||||
$head_view = id(new PHUIListView())
|
||||
->addMenuItem(
|
||||
id(new PHUIListItemView())
|
||||
->setIcon('fa-list')
|
||||
->setName(pht('Table of Contents'))
|
||||
->setKeyCommand('t')
|
||||
->setHref('#'));
|
||||
$flank_view->setHead($head_view);
|
||||
|
||||
$flank_view->setBody(
|
||||
phutil_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'phui-flank-loading',
|
||||
),
|
||||
pht('Loading...')));
|
||||
|
||||
$flank_view->setTail(
|
||||
array(
|
||||
phutil_tag('div', array(),
|
||||
array(
|
||||
id(new PHUIIconView())->setIcon('fa-chevron-left'),
|
||||
pht('Hide Panel'),
|
||||
'[f]',
|
||||
)),
|
||||
phutil_tag(
|
||||
'div',
|
||||
array(),
|
||||
array(
|
||||
id(new PHUIIconView())->setIcon('fa-keyboard-o'),
|
||||
pht('Keyboard Reference'),
|
||||
'[?]',
|
||||
)),
|
||||
));
|
||||
$tail_view = id(new PHUIListView())
|
||||
->addMenuItem(
|
||||
id(new PHUIListItemView())
|
||||
->setIcon('fa-chevron-left')
|
||||
->setName(pht('Hide Panel'))
|
||||
->setKeyCommand('f')
|
||||
->setHref('#'))
|
||||
->addMenuItem(
|
||||
id(new PHUIListItemView())
|
||||
->setIcon('fa-keyboard-o')
|
||||
->setName(pht('Keyboard Reference'))
|
||||
->setKeyCommand('?')
|
||||
->setHref('#'));
|
||||
$flank_view->setTail($tail_view);
|
||||
|
||||
$main_column = $formation_view->newContentColumn()
|
||||
->appendChild($content);
|
||||
|
|
|
|||
|
|
@ -287,7 +287,7 @@ final class DifferentialChangesetDetailView extends AphrontView {
|
|||
return null;
|
||||
}
|
||||
|
||||
return '/settings/panel/display/';
|
||||
return '/settings/panel/editor/';
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,16 @@ abstract class PHUIFormationColumnDynamicView
|
|||
private $visibleSettingKey;
|
||||
private $minimumWidth;
|
||||
private $maximumWidth;
|
||||
private $expanderTooltip;
|
||||
|
||||
public function setExpanderTooltip($expander_tooltip) {
|
||||
$this->expanderTooltip = $expander_tooltip;
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function getExpanderTooltip() {
|
||||
return $this->expanderTooltip;
|
||||
}
|
||||
|
||||
public function setIsVisible($is_visible) {
|
||||
$this->isVisible = $is_visible;
|
||||
|
|
|
|||
|
|
@ -50,4 +50,8 @@ abstract class PHUIFormationColumnView
|
|||
return null;
|
||||
}
|
||||
|
||||
public function getExpanderTooltip() {
|
||||
return null;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -167,15 +167,20 @@ final class PHUIFormationView
|
|||
private function generateExpanders(array $items) {
|
||||
foreach ($items as $item) {
|
||||
$control_item = $item->getControlItem();
|
||||
if ($control_item) {
|
||||
if (!$control_item) {
|
||||
continue;
|
||||
}
|
||||
|
||||
$expander = $this->newColumnExpanderView();
|
||||
|
||||
$tip = $item->getColumn()->getExpanderTooltip();
|
||||
$expander->setTooltip($tip);
|
||||
|
||||
$expander->setColumnItem($item);
|
||||
$item->setExpander($expander);
|
||||
|
||||
$control_item->appendExpander($expander);
|
||||
}
|
||||
}
|
||||
|
||||
return $items;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ final class PHUIListItemView extends AphrontTagView {
|
|||
private $count;
|
||||
private $rel;
|
||||
private $dropdownMenu;
|
||||
private $keyCommand;
|
||||
|
||||
public function setOpenInNewWindow($open_in_new_window) {
|
||||
$this->openInNewWindow = $open_in_new_window;
|
||||
|
|
@ -220,6 +221,15 @@ final class PHUIListItemView extends AphrontTagView {
|
|||
return 'li';
|
||||
}
|
||||
|
||||
public function setKeyCommand($key_command) {
|
||||
$this->keyCommand = $key_command;
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function getKeyCommand() {
|
||||
return $this->keyCommand;
|
||||
}
|
||||
|
||||
protected function getTagAttributes() {
|
||||
$classes = array();
|
||||
$classes[] = 'phui-list-item-view';
|
||||
|
|
@ -277,12 +287,12 @@ final class PHUIListItemView extends AphrontTagView {
|
|||
$name = null;
|
||||
$icon = null;
|
||||
$meta = null;
|
||||
$sigil = null;
|
||||
$sigil = array();
|
||||
|
||||
if ($this->name) {
|
||||
if ($this->getRenderNameAsTooltip()) {
|
||||
Javelin::initBehavior('phabricator-tooltips');
|
||||
$sigil = 'has-tooltip';
|
||||
$sigil[] = 'has-tooltip';
|
||||
$meta = array(
|
||||
'tip' => $this->name,
|
||||
'align' => 'E',
|
||||
|
|
@ -290,7 +300,7 @@ final class PHUIListItemView extends AphrontTagView {
|
|||
} else {
|
||||
if ($this->tooltip) {
|
||||
Javelin::initBehavior('phabricator-tooltips');
|
||||
$sigil = 'has-tooltip';
|
||||
$sigil[] = 'has-tooltip';
|
||||
$meta = array(
|
||||
'tip' => $this->tooltip,
|
||||
'align' => 'E',
|
||||
|
|
@ -383,13 +393,25 @@ final class PHUIListItemView extends AphrontTagView {
|
|||
|
||||
$icons = $this->getIcons();
|
||||
|
||||
$key_command = null;
|
||||
if ($this->keyCommand) {
|
||||
$key_command = phutil_tag(
|
||||
'span',
|
||||
array(
|
||||
'class' => 'keyboard-shortcut-key',
|
||||
),
|
||||
$this->keyCommand);
|
||||
$sigil[] = 'has-key-command';
|
||||
$meta['keyCommand'] = $this->keyCommand;
|
||||
}
|
||||
|
||||
$list_item = javelin_tag(
|
||||
$this->href ? 'a' : 'div',
|
||||
array(
|
||||
'href' => $this->href,
|
||||
'class' => implode(' ', $classes),
|
||||
'meta' => $meta,
|
||||
'sigil' => $sigil,
|
||||
'sigil' => implode(' ', $sigil),
|
||||
'target' => $this->getOpenInNewWindow() ? '_blank' : null,
|
||||
'rel' => $this->rel,
|
||||
),
|
||||
|
|
@ -400,6 +422,7 @@ final class PHUIListItemView extends AphrontTagView {
|
|||
$this->renderChildren(),
|
||||
$name,
|
||||
$count,
|
||||
$key_command,
|
||||
$caret,
|
||||
));
|
||||
|
||||
|
|
|
|||
47
webroot/rsrc/css/application/diff/diff-tree-view.css
Normal file
47
webroot/rsrc/css/application/diff/diff-tree-view.css
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
/**
|
||||
* @provides diff-tree-view-css
|
||||
*/
|
||||
|
||||
.diff-tree-view {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.diff-tree-path {
|
||||
position: relative;
|
||||
height: 20px;
|
||||
color: {$greytext};
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.diff-tree-path-icon {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.diff-tree-path-name {
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.diff-tree-path-changeset {
|
||||
cursor: pointer;
|
||||
color: {$darkbluetext};
|
||||
}
|
||||
|
||||
.diff-tree-path-focused {
|
||||
background: {$darkgreybackground};
|
||||
}
|
||||
|
||||
.diff-tree-path-selected {
|
||||
background: {$yellow};
|
||||
}
|
||||
|
||||
.device-desktop .diff-tree-path-changeset:hover {
|
||||
background: {$lightblueborder};
|
||||
transition: 0.1s;
|
||||
}
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
|
||||
.phui-flank-header {
|
||||
padding: 8px;
|
||||
background: {$greybackground};
|
||||
background: {$bluebackground};
|
||||
border-bottom: 1px solid {$lightgreyborder};
|
||||
}
|
||||
|
||||
|
|
@ -144,8 +144,40 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.phui-flank-loading {
|
||||
color: {$lightgreytext};
|
||||
text-align: center;
|
||||
margin: 16px;
|
||||
.phui-flank-view .phui-list-view {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.phui-flank-view .phui-list-item-view {
|
||||
height: 20px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.phui-flank-view .phui-list-item-view .phui-icon-view {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.phui-flank-view .phui-list-item-view .phui-list-item-href {
|
||||
display: block;
|
||||
color: {$darkbluetext};
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.device-desktop .phui-flank-view .phui-list-item-view:hover {
|
||||
background: {$lightblueborder};
|
||||
transition: 0.1s;
|
||||
}
|
||||
|
||||
.phui-flank-view .keyboard-shortcut-key {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 4px;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
line-height: 18px;
|
||||
padding: 0;
|
||||
color: {$lightgreytext};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -897,9 +897,14 @@ JX.install('DiffChangeset', {
|
|||
|
||||
getPathView: function() {
|
||||
if (!this._pathView) {
|
||||
this._pathView = new JX.DiffPathView()
|
||||
var view = new JX.DiffPathView()
|
||||
.setChangeset(this)
|
||||
.setPath(this._pathParts);
|
||||
|
||||
view.getIcon()
|
||||
.setIcon(this.getIcon());
|
||||
|
||||
this._pathView = view;
|
||||
}
|
||||
|
||||
return this._pathView;
|
||||
|
|
|
|||
|
|
@ -194,6 +194,13 @@ JX.install('DiffChangesetList', {
|
|||
'Jump to previous inline comment, including collapsed comments.');
|
||||
this._installJumpKey('P', label, -1, 'comment', true);
|
||||
|
||||
var formation = this.getFormationView();
|
||||
if (formation) {
|
||||
var filetree = formation.getColumn(0);
|
||||
var toggletree = JX.bind(filetree, filetree.toggleVisibility);
|
||||
this._installKey('f', 'diff-vis', label, toggletree);
|
||||
}
|
||||
|
||||
if (!standalone) {
|
||||
label = pht('Hide or show the current file.');
|
||||
this._installKey('h', 'diff-vis', label, this._onkeytogglefile);
|
||||
|
|
@ -683,6 +690,13 @@ JX.install('DiffChangesetList', {
|
|||
return;
|
||||
}
|
||||
|
||||
var tree = this._getTreeView();
|
||||
if (cursor.changeset) {
|
||||
tree.setSelectedPath(cursor.changeset.getPathView());
|
||||
} else {
|
||||
tree.setSelectedPath(null);
|
||||
}
|
||||
|
||||
this.setFocus(cursor.nodes.begin, cursor.nodes.end);
|
||||
|
||||
if (scroll) {
|
||||
|
|
@ -1139,6 +1153,11 @@ JX.install('DiffChangesetList', {
|
|||
},
|
||||
|
||||
setFocus: function(node, extended_node) {
|
||||
if (!node) {
|
||||
var tree = this._getTreeView();
|
||||
tree.setSelectedPath(null);
|
||||
}
|
||||
|
||||
this._focusStart = node;
|
||||
this._focusEnd = extended_node;
|
||||
this._redrawFocus();
|
||||
|
|
@ -1493,7 +1512,7 @@ JX.install('DiffChangesetList', {
|
|||
if (!changeset) {
|
||||
this._bannerChangeset = null;
|
||||
JX.DOM.remove(node);
|
||||
tree.setSelectedPath(null);
|
||||
tree.setFocusedPath(null);
|
||||
|
||||
if (formation) {
|
||||
formation.repaint();
|
||||
|
|
@ -1513,7 +1532,7 @@ JX.install('DiffChangesetList', {
|
|||
for (var ii = 0; ii < paths.length; ii++) {
|
||||
var path = paths[ii];
|
||||
if (path.getChangeset() === changeset) {
|
||||
tree.setSelectedPath(path);
|
||||
tree.setFocusedPath(path);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,19 +9,25 @@ JX.install('DiffPathView', {
|
|||
construct: function() {
|
||||
},
|
||||
|
||||
properties: {
|
||||
changeset: null
|
||||
},
|
||||
|
||||
members: {
|
||||
_node: null,
|
||||
_path: null,
|
||||
_depth: 0,
|
||||
_selected: false,
|
||||
_focused: false,
|
||||
_icon: null,
|
||||
|
||||
_indentNode: null,
|
||||
_pathNode: null,
|
||||
_changeset: null,
|
||||
|
||||
getNode: function() {
|
||||
if (!this._node) {
|
||||
this._node = JX.$N('li');
|
||||
var attrs = {
|
||||
className: 'diff-tree-path'
|
||||
};
|
||||
|
||||
this._node = JX.$N('li', attrs, this._getIndentNode());
|
||||
|
||||
var onclick = JX.bind(this, this._onclick);
|
||||
JX.DOM.listen(this._node, 'click', null, onclick);
|
||||
|
|
@ -29,25 +35,62 @@ JX.install('DiffPathView', {
|
|||
return this._node;
|
||||
},
|
||||
|
||||
getIcon: function() {
|
||||
if (!this._icon) {
|
||||
this._icon = new JX.PHUIXIconView();
|
||||
}
|
||||
return this._icon;
|
||||
},
|
||||
|
||||
setPath: function(path) {
|
||||
this._path = path;
|
||||
this._redraw();
|
||||
|
||||
var display = this._path[this._path.length - 1];
|
||||
JX.DOM.setContent(this._getPathNode(), display);
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
setChangeset: function(changeset) {
|
||||
this._changeset = changeset;
|
||||
|
||||
var node = this.getNode();
|
||||
JX.DOM.alterClass(node, 'diff-tree-path-changeset', !!changeset);
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
getChangeset: function() {
|
||||
return this._changeset;
|
||||
},
|
||||
|
||||
getPath: function() {
|
||||
return this._path;
|
||||
},
|
||||
|
||||
setDepth: function(depth) {
|
||||
this._depth = depth;
|
||||
this._redraw();
|
||||
|
||||
this._getIndentNode().style.marginLeft = (8 * this._depth) + 'px';
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
setIsSelected: function(selected) {
|
||||
this._selected = selected;
|
||||
this._redraw();
|
||||
|
||||
var node = this.getNode();
|
||||
JX.DOM.alterClass(node, 'diff-tree-path-selected', this._selected);
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
setIsFocused: function(focused) {
|
||||
this._focused = focused;
|
||||
|
||||
var node = this.getNode();
|
||||
JX.DOM.alterClass(node, 'diff-tree-path-focused', this._focused);
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
|
@ -64,18 +107,37 @@ JX.install('DiffPathView', {
|
|||
e.kill();
|
||||
},
|
||||
|
||||
_redraw: function() {
|
||||
var node = this.getNode();
|
||||
_getIndentNode: function() {
|
||||
if (!this._indentNode) {
|
||||
var content = [
|
||||
this._getIconNode(),
|
||||
this._getPathNode(),
|
||||
];
|
||||
|
||||
node.style.paddingLeft = (8 * this._depth) + 'px';
|
||||
|
||||
var display = this._path[this._path.length - 1];
|
||||
|
||||
if (this._selected) {
|
||||
display = ['*', display];
|
||||
this._indentNode = JX.$N('div', {}, content);
|
||||
}
|
||||
|
||||
JX.DOM.setContent(node, display);
|
||||
return this._indentNode;
|
||||
},
|
||||
|
||||
_getPathNode: function() {
|
||||
if (!this._pathNode) {
|
||||
var attrs = {
|
||||
className: 'diff-tree-path-name'
|
||||
};
|
||||
this._pathNode = JX.$N('div', attrs);
|
||||
}
|
||||
return this._pathNode;
|
||||
},
|
||||
|
||||
_getIconNode: function() {
|
||||
if (!this._iconNode) {
|
||||
var attrs = {
|
||||
className: 'diff-tree-path-icon',
|
||||
};
|
||||
this._iconNode = JX.$N('div', attrs, this.getIcon().getNode());
|
||||
}
|
||||
return this._iconNode;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,10 +21,15 @@ JX.install('DiffTreeView', {
|
|||
_dirty: false,
|
||||
_paths: null,
|
||||
_selectedPath: null,
|
||||
_focusedPath: null,
|
||||
|
||||
getNode: function() {
|
||||
if (!this._node) {
|
||||
this._node = JX.$N('ul');
|
||||
var attrs = {
|
||||
className: 'diff-tree-view'
|
||||
};
|
||||
|
||||
this._node = JX.$N('ul', attrs);
|
||||
}
|
||||
|
||||
if (this._dirty) {
|
||||
|
|
@ -64,6 +69,21 @@ JX.install('DiffTreeView', {
|
|||
return this;
|
||||
},
|
||||
|
||||
setFocusedPath: function(path) {
|
||||
if (this._focusedPath) {
|
||||
this._focusedPath.setIsFocused(false);
|
||||
this._focusedPath = null;
|
||||
}
|
||||
|
||||
if (path) {
|
||||
path.setIsFocused(true);
|
||||
}
|
||||
|
||||
this._focusedPath = path;
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
redraw: function() {
|
||||
if (!this._dirty) {
|
||||
return;
|
||||
|
|
@ -83,6 +103,10 @@ JX.install('DiffTreeView', {
|
|||
if (!path) {
|
||||
path = new JX.DiffPathView()
|
||||
.setPath(tree.parts);
|
||||
|
||||
path.getIcon()
|
||||
.setIcon('fa-folder-open-o');
|
||||
|
||||
tree.pathObject = path;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,9 @@ JX.install('KeyboardShortcutManager', {
|
|||
JX.Stratcom.listen('keypress', null, JX.bind(this, this._onkeypress));
|
||||
JX.Stratcom.listen('keydown', null, JX.bind(this, this._onkeydown));
|
||||
JX.Stratcom.listen('keyup', null, JX.bind(this, this._onkeyup));
|
||||
|
||||
var onelement = JX.bind(this, this._onelement);
|
||||
JX.Stratcom.listen('click', 'has-key-command', onelement);
|
||||
},
|
||||
|
||||
statics : {
|
||||
|
|
@ -118,18 +121,29 @@ JX.install('KeyboardShortcutManager', {
|
|||
|
||||
var key = this._getKey(e);
|
||||
|
||||
var handled = this._handleKey(key);
|
||||
|
||||
if (handled) {
|
||||
e.kill();
|
||||
}
|
||||
},
|
||||
|
||||
_handleKey: function(key) {
|
||||
var shortcuts = this._shortcuts;
|
||||
|
||||
for (var ii = 0; ii < shortcuts.length; ii++) {
|
||||
var keys = shortcuts[ii].getKeys();
|
||||
for (var jj = 0; jj < keys.length; jj++) {
|
||||
if (keys[jj] == key) {
|
||||
shortcuts[ii].getHandler()(this);
|
||||
e.kill(); // Consume the event
|
||||
return;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
_onkeydown : function(e) {
|
||||
this._handleTooltipKeyEvent(e, true);
|
||||
|
||||
|
|
@ -143,6 +157,12 @@ JX.install('KeyboardShortcutManager', {
|
|||
_getKey : function(e) {
|
||||
return e.getSpecialKey() || String.fromCharCode(e.getRawEvent().charCode);
|
||||
},
|
||||
_onelement: function(e) {
|
||||
var data = e.getNodeData('has-key-command');
|
||||
this._handleKey(data.keyCommand);
|
||||
|
||||
e.kill();
|
||||
},
|
||||
_handleTooltipKeyEvent : function(e, is_keydown) {
|
||||
if (e.getRawEvent().keyCode != 18) {
|
||||
// If this isn't the alt/option key, don't do anything.
|
||||
|
|
|
|||
|
|
@ -135,7 +135,14 @@ JX.install('PHUIXFormationColumnView', {
|
|||
|
||||
_setVisibility: function(visible, e) {
|
||||
e.kill();
|
||||
this.setVisibility(visible);
|
||||
},
|
||||
|
||||
toggleVisibility: function() {
|
||||
return this.setVisibility(!this.getIsVisible());
|
||||
},
|
||||
|
||||
setVisibility: function(visible) {
|
||||
this.setIsVisible(visible);
|
||||
this.repaint();
|
||||
|
||||
|
|
@ -143,6 +150,8 @@ JX.install('PHUIXFormationColumnView', {
|
|||
if (visible_key) {
|
||||
this._adjustSetting(visible_key, visible ? 1 : 0);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
_adjustSetting: function(key, value) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue