mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-25 15:00:58 +01:00
Add setStackable to ObjectItemList and use in Config
Summary: This adds a new method for rendering the object list as a stackable set of items. Good for certain renderings like Config. u Test Plan: Review list on iOS, Chrome, FF. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D4637
This commit is contained in:
parent
8aea5cda26
commit
bf3d972e72
9 changed files with 78 additions and 55 deletions
|
@ -718,7 +718,7 @@ celerity_register_resource_map(array(
|
||||||
),
|
),
|
||||||
'config-options-css' =>
|
'config-options-css' =>
|
||||||
array(
|
array(
|
||||||
'uri' => '/res/6f7f64e8/rsrc/css/application/config/config-options.css',
|
'uri' => '/res/8f7f8a20/rsrc/css/application/config/config-options.css',
|
||||||
'type' => 'css',
|
'type' => 'css',
|
||||||
'requires' =>
|
'requires' =>
|
||||||
array(
|
array(
|
||||||
|
@ -2766,7 +2766,7 @@ celerity_register_resource_map(array(
|
||||||
),
|
),
|
||||||
'phabricator-object-item-list-view-css' =>
|
'phabricator-object-item-list-view-css' =>
|
||||||
array(
|
array(
|
||||||
'uri' => '/res/1f9c7ebb/rsrc/css/layout/phabricator-object-item-list-view.css',
|
'uri' => '/res/b2051a98/rsrc/css/layout/phabricator-object-item-list-view.css',
|
||||||
'type' => 'css',
|
'type' => 'css',
|
||||||
'requires' =>
|
'requires' =>
|
||||||
array(
|
array(
|
||||||
|
@ -3338,7 +3338,7 @@ celerity_register_resource_map(array(
|
||||||
), array(
|
), array(
|
||||||
'packages' =>
|
'packages' =>
|
||||||
array(
|
array(
|
||||||
'8fd19266' =>
|
'bae79082' =>
|
||||||
array(
|
array(
|
||||||
'name' => 'core.pkg.css',
|
'name' => 'core.pkg.css',
|
||||||
'symbols' =>
|
'symbols' =>
|
||||||
|
@ -3382,7 +3382,7 @@ celerity_register_resource_map(array(
|
||||||
36 => 'phabricator-object-item-list-view-css',
|
36 => 'phabricator-object-item-list-view-css',
|
||||||
37 => 'global-drag-and-drop-css',
|
37 => 'global-drag-and-drop-css',
|
||||||
),
|
),
|
||||||
'uri' => '/res/pkg/8fd19266/core.pkg.css',
|
'uri' => '/res/pkg/bae79082/core.pkg.css',
|
||||||
'type' => 'css',
|
'type' => 'css',
|
||||||
),
|
),
|
||||||
'66dca903' =>
|
'66dca903' =>
|
||||||
|
@ -3572,19 +3572,19 @@ celerity_register_resource_map(array(
|
||||||
'reverse' =>
|
'reverse' =>
|
||||||
array(
|
array(
|
||||||
'aphront-attached-file-view-css' => 'e30a3fa8',
|
'aphront-attached-file-view-css' => 'e30a3fa8',
|
||||||
'aphront-crumbs-view-css' => '8fd19266',
|
'aphront-crumbs-view-css' => 'bae79082',
|
||||||
'aphront-dialog-view-css' => '8fd19266',
|
'aphront-dialog-view-css' => 'bae79082',
|
||||||
'aphront-error-view-css' => '8fd19266',
|
'aphront-error-view-css' => 'bae79082',
|
||||||
'aphront-form-view-css' => '8fd19266',
|
'aphront-form-view-css' => 'bae79082',
|
||||||
'aphront-headsup-action-list-view-css' => 'ec01d039',
|
'aphront-headsup-action-list-view-css' => 'ec01d039',
|
||||||
'aphront-headsup-view-css' => '8fd19266',
|
'aphront-headsup-view-css' => 'bae79082',
|
||||||
'aphront-list-filter-view-css' => '8fd19266',
|
'aphront-list-filter-view-css' => 'bae79082',
|
||||||
'aphront-pager-view-css' => '8fd19266',
|
'aphront-pager-view-css' => 'bae79082',
|
||||||
'aphront-panel-view-css' => '8fd19266',
|
'aphront-panel-view-css' => 'bae79082',
|
||||||
'aphront-table-view-css' => '8fd19266',
|
'aphront-table-view-css' => 'bae79082',
|
||||||
'aphront-tokenizer-control-css' => '8fd19266',
|
'aphront-tokenizer-control-css' => 'bae79082',
|
||||||
'aphront-tooltip-css' => '8fd19266',
|
'aphront-tooltip-css' => 'bae79082',
|
||||||
'aphront-typeahead-control-css' => '8fd19266',
|
'aphront-typeahead-control-css' => 'bae79082',
|
||||||
'differential-changeset-view-css' => 'ec01d039',
|
'differential-changeset-view-css' => 'ec01d039',
|
||||||
'differential-core-view-css' => 'ec01d039',
|
'differential-core-view-css' => 'ec01d039',
|
||||||
'differential-inline-comment-editor' => 'ac53d36a',
|
'differential-inline-comment-editor' => 'ac53d36a',
|
||||||
|
@ -3598,7 +3598,7 @@ celerity_register_resource_map(array(
|
||||||
'differential-table-of-contents-css' => 'ec01d039',
|
'differential-table-of-contents-css' => 'ec01d039',
|
||||||
'diffusion-commit-view-css' => 'c8ce2d88',
|
'diffusion-commit-view-css' => 'c8ce2d88',
|
||||||
'diffusion-icons-css' => 'c8ce2d88',
|
'diffusion-icons-css' => 'c8ce2d88',
|
||||||
'global-drag-and-drop-css' => '8fd19266',
|
'global-drag-and-drop-css' => 'bae79082',
|
||||||
'inline-comment-summary-css' => 'ec01d039',
|
'inline-comment-summary-css' => 'ec01d039',
|
||||||
'javelin-aphlict' => '66dca903',
|
'javelin-aphlict' => '66dca903',
|
||||||
'javelin-behavior' => 'fbeded59',
|
'javelin-behavior' => 'fbeded59',
|
||||||
|
@ -3668,48 +3668,48 @@ celerity_register_resource_map(array(
|
||||||
'javelin-util' => 'fbeded59',
|
'javelin-util' => 'fbeded59',
|
||||||
'javelin-vector' => 'fbeded59',
|
'javelin-vector' => 'fbeded59',
|
||||||
'javelin-workflow' => 'fbeded59',
|
'javelin-workflow' => 'fbeded59',
|
||||||
'lightbox-attachment-css' => '8fd19266',
|
'lightbox-attachment-css' => 'bae79082',
|
||||||
'maniphest-task-summary-css' => 'e30a3fa8',
|
'maniphest-task-summary-css' => 'e30a3fa8',
|
||||||
'maniphest-transaction-detail-css' => 'e30a3fa8',
|
'maniphest-transaction-detail-css' => 'e30a3fa8',
|
||||||
'phabricator-busy' => '66dca903',
|
'phabricator-busy' => '66dca903',
|
||||||
'phabricator-content-source-view-css' => 'ec01d039',
|
'phabricator-content-source-view-css' => 'ec01d039',
|
||||||
'phabricator-core-buttons-css' => '8fd19266',
|
'phabricator-core-buttons-css' => 'bae79082',
|
||||||
'phabricator-core-css' => '8fd19266',
|
'phabricator-core-css' => 'bae79082',
|
||||||
'phabricator-crumbs-view-css' => '8fd19266',
|
'phabricator-crumbs-view-css' => 'bae79082',
|
||||||
'phabricator-directory-css' => '8fd19266',
|
'phabricator-directory-css' => 'bae79082',
|
||||||
'phabricator-drag-and-drop-file-upload' => 'ac53d36a',
|
'phabricator-drag-and-drop-file-upload' => 'ac53d36a',
|
||||||
'phabricator-dropdown-menu' => '66dca903',
|
'phabricator-dropdown-menu' => '66dca903',
|
||||||
'phabricator-file-upload' => '66dca903',
|
'phabricator-file-upload' => '66dca903',
|
||||||
'phabricator-filetree-view-css' => '8fd19266',
|
'phabricator-filetree-view-css' => 'bae79082',
|
||||||
'phabricator-flag-css' => '8fd19266',
|
'phabricator-flag-css' => 'bae79082',
|
||||||
'phabricator-form-view-css' => '8fd19266',
|
'phabricator-form-view-css' => 'bae79082',
|
||||||
'phabricator-header-view-css' => '8fd19266',
|
'phabricator-header-view-css' => 'bae79082',
|
||||||
'phabricator-jump-nav' => '8fd19266',
|
'phabricator-jump-nav' => 'bae79082',
|
||||||
'phabricator-keyboard-shortcut' => '66dca903',
|
'phabricator-keyboard-shortcut' => '66dca903',
|
||||||
'phabricator-keyboard-shortcut-manager' => '66dca903',
|
'phabricator-keyboard-shortcut-manager' => '66dca903',
|
||||||
'phabricator-main-menu-view' => '8fd19266',
|
'phabricator-main-menu-view' => 'bae79082',
|
||||||
'phabricator-menu-item' => '66dca903',
|
'phabricator-menu-item' => '66dca903',
|
||||||
'phabricator-nav-view-css' => '8fd19266',
|
'phabricator-nav-view-css' => 'bae79082',
|
||||||
'phabricator-notification' => '66dca903',
|
'phabricator-notification' => '66dca903',
|
||||||
'phabricator-notification-css' => '8fd19266',
|
'phabricator-notification-css' => 'bae79082',
|
||||||
'phabricator-notification-menu-css' => '8fd19266',
|
'phabricator-notification-menu-css' => 'bae79082',
|
||||||
'phabricator-object-item-list-view-css' => '8fd19266',
|
'phabricator-object-item-list-view-css' => 'bae79082',
|
||||||
'phabricator-object-selector-css' => 'ec01d039',
|
'phabricator-object-selector-css' => 'ec01d039',
|
||||||
'phabricator-paste-file-upload' => '66dca903',
|
'phabricator-paste-file-upload' => '66dca903',
|
||||||
'phabricator-prefab' => '66dca903',
|
'phabricator-prefab' => '66dca903',
|
||||||
'phabricator-project-tag-css' => 'e30a3fa8',
|
'phabricator-project-tag-css' => 'e30a3fa8',
|
||||||
'phabricator-remarkup-css' => '8fd19266',
|
'phabricator-remarkup-css' => 'bae79082',
|
||||||
'phabricator-shaped-request' => 'ac53d36a',
|
'phabricator-shaped-request' => 'ac53d36a',
|
||||||
'phabricator-side-menu-view-css' => '8fd19266',
|
'phabricator-side-menu-view-css' => 'bae79082',
|
||||||
'phabricator-standard-page-view' => '8fd19266',
|
'phabricator-standard-page-view' => 'bae79082',
|
||||||
'phabricator-textareautils' => '66dca903',
|
'phabricator-textareautils' => '66dca903',
|
||||||
'phabricator-tooltip' => '66dca903',
|
'phabricator-tooltip' => '66dca903',
|
||||||
'phabricator-transaction-view-css' => '8fd19266',
|
'phabricator-transaction-view-css' => 'bae79082',
|
||||||
'phabricator-zindex-css' => '8fd19266',
|
'phabricator-zindex-css' => 'bae79082',
|
||||||
'sprite-apps-large-css' => '8fd19266',
|
'sprite-apps-large-css' => 'bae79082',
|
||||||
'sprite-gradient-css' => '8fd19266',
|
'sprite-gradient-css' => 'bae79082',
|
||||||
'sprite-icon-css' => '8fd19266',
|
'sprite-icon-css' => 'bae79082',
|
||||||
'sprite-menu-css' => '8fd19266',
|
'sprite-menu-css' => 'bae79082',
|
||||||
'syntax-highlighting-css' => '8fd19266',
|
'syntax-highlighting-css' => 'bae79082',
|
||||||
),
|
),
|
||||||
));
|
));
|
||||||
|
|
|
@ -84,7 +84,6 @@ final class PhabricatorConfigAllController
|
||||||
$nav->appendChild($panel);
|
$nav->appendChild($panel);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return $this->buildApplicationPage(
|
return $this->buildApplicationPage(
|
||||||
$nav,
|
$nav,
|
||||||
array(
|
array(
|
||||||
|
|
|
@ -72,6 +72,7 @@ final class PhabricatorConfigGroupController
|
||||||
$engine->process();
|
$engine->process();
|
||||||
|
|
||||||
$list = new PhabricatorObjectItemListView();
|
$list = new PhabricatorObjectItemListView();
|
||||||
|
$list->setStackable();
|
||||||
foreach ($options as $option) {
|
foreach ($options as $option) {
|
||||||
$summary = $engine->getOutput($option, 'summary');
|
$summary = $engine->getOutput($option, 'summary');
|
||||||
|
|
||||||
|
|
|
@ -48,6 +48,7 @@ final class PhabricatorConfigIssueListController
|
||||||
private function buildIssueList(array $issues) {
|
private function buildIssueList(array $issues) {
|
||||||
assert_instances_of($issues, 'PhabricatorSetupIssue');
|
assert_instances_of($issues, 'PhabricatorSetupIssue');
|
||||||
$list = new PhabricatorObjectItemListView();
|
$list = new PhabricatorObjectItemListView();
|
||||||
|
$list->setStackable();
|
||||||
|
|
||||||
foreach ($issues as $issue) {
|
foreach ($issues as $issue) {
|
||||||
$href = $this->getApplicationURI('/issue/'.$issue->getIssueKey().'/');
|
$href = $this->getApplicationURI('/issue/'.$issue->getIssueKey().'/');
|
||||||
|
|
|
@ -46,6 +46,7 @@ final class PhabricatorConfigListController
|
||||||
assert_instances_of($groups, 'PhabricatorApplicationConfigOptions');
|
assert_instances_of($groups, 'PhabricatorApplicationConfigOptions');
|
||||||
|
|
||||||
$list = new PhabricatorObjectItemListView();
|
$list = new PhabricatorObjectItemListView();
|
||||||
|
$list->setStackable();
|
||||||
$groups = msort($groups, 'getName');
|
$groups = msort($groups, 'getName');
|
||||||
foreach ($groups as $group) {
|
foreach ($groups as $group) {
|
||||||
$item = id(new PhabricatorObjectItemView())
|
$item = id(new PhabricatorObjectItemView())
|
||||||
|
|
|
@ -5,6 +5,7 @@ final class PhabricatorObjectItemListView extends AphrontView {
|
||||||
private $header;
|
private $header;
|
||||||
private $items;
|
private $items;
|
||||||
private $pager;
|
private $pager;
|
||||||
|
private $stackable;
|
||||||
private $noDataString;
|
private $noDataString;
|
||||||
|
|
||||||
public function setHeader($header) {
|
public function setHeader($header) {
|
||||||
|
@ -27,9 +28,15 @@ final class PhabricatorObjectItemListView extends AphrontView {
|
||||||
return $this;
|
return $this;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public function setStackable() {
|
||||||
|
$this->stackable = true;
|
||||||
|
return $this;
|
||||||
|
}
|
||||||
|
|
||||||
public function render() {
|
public function render() {
|
||||||
require_celerity_resource('phabricator-object-item-list-view-css');
|
require_celerity_resource('phabricator-object-item-list-view-css');
|
||||||
|
|
||||||
|
$classes = array();
|
||||||
$header = null;
|
$header = null;
|
||||||
if (strlen($this->header)) {
|
if (strlen($this->header)) {
|
||||||
$header = phutil_render_tag(
|
$header = phutil_render_tag(
|
||||||
|
@ -55,10 +62,15 @@ final class PhabricatorObjectItemListView extends AphrontView {
|
||||||
$pager = $this->renderSingleView($this->pager);
|
$pager = $this->renderSingleView($this->pager);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$classes[] = 'phabricator-object-item-list-view';
|
||||||
|
if ($this->stackable) {
|
||||||
|
$classes[] = 'phabricator-object-list-stackable';
|
||||||
|
}
|
||||||
|
|
||||||
return phutil_render_tag(
|
return phutil_render_tag(
|
||||||
'div',
|
'ul',
|
||||||
array(
|
array(
|
||||||
'class' => 'phabricator-object-item-list-view',
|
'class' => implode(' ', $classes),
|
||||||
),
|
),
|
||||||
$header.$items.$pager);
|
$header.$items.$pager);
|
||||||
}
|
}
|
||||||
|
|
|
@ -166,7 +166,7 @@ final class PhabricatorObjectItemView extends AphrontView {
|
||||||
$header.$attrs.$this->renderChildren());
|
$header.$attrs.$this->renderChildren());
|
||||||
|
|
||||||
return phutil_render_tag(
|
return phutil_render_tag(
|
||||||
'div',
|
'li',
|
||||||
array(
|
array(
|
||||||
'class' => implode(' ', $classes),
|
'class' => implode(' ', $classes),
|
||||||
),
|
),
|
||||||
|
|
|
@ -38,10 +38,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.config-options-current-value {
|
.config-options-current-value {
|
||||||
padding: 0 6px 2px;
|
padding: 0 10px 10px;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.config-options-current-value span {
|
.config-options-current-value span {
|
||||||
color: #666666;
|
color: #777;
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,6 +7,10 @@
|
||||||
background: #f4f5f6;
|
background: #f4f5f6;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.phabricator-object-item-list-view.phabricator-object-list-stackable .phabricator-object-item {
|
||||||
|
margin: -1px 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
.device-desktop .phabricator-object-item-list-view {
|
.device-desktop .phabricator-object-item-list-view {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
@ -14,22 +18,27 @@
|
||||||
.phabricator-object-item {
|
.phabricator-object-item {
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: #d7d7d7 #e4e3e4 #bcbcbd #d7d7d7;
|
border-color: #c0c5d1;
|
||||||
border-width: 1px 1px 1px 3px;
|
border-width: 1px 1px 1px 3px;
|
||||||
margin: 3px 0;
|
margin: 5px 0;
|
||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.10);
|
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.10);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.phabricator-object-list-stackable .phabricator-object-item {
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
.device-desktop .phabricator-object-item {
|
.device-desktop .phabricator-object-item {
|
||||||
margin: 0 0 5px 0;
|
margin: 0 0 5px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.phabricator-object-item-name {
|
.phabricator-object-item-name {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 4px 8px 4px;
|
padding: 10px 10px 5px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.phabricator-object-item-content {
|
.phabricator-object-item-content {
|
||||||
|
@ -43,13 +52,13 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.phabricator-object-item-attributes {
|
.phabricator-object-item-attributes {
|
||||||
padding: 0px 8px 4px;
|
padding: 0px 10px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.phabricator-object-item-attribute {
|
.phabricator-object-item-attribute {
|
||||||
display: inline;
|
display: inline;
|
||||||
color: #555555;
|
color: #777;
|
||||||
font-size: 11px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.phabricator-object-item-attribute-spacer {
|
.phabricator-object-item-attribute-spacer {
|
||||||
|
@ -66,7 +75,7 @@
|
||||||
|
|
||||||
.phabricator-object-item-icons {
|
.phabricator-object-item-icons {
|
||||||
float: right;
|
float: right;
|
||||||
padding: 2px 4px 0;
|
padding: 10px 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* NOTE: The main content is an "overflow: hidden" div which we give a right
|
/* NOTE: The main content is an "overflow: hidden" div which we give a right
|
||||||
|
|
Loading…
Reference in a new issue