1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-19 03:50:54 +01:00

Add a Stacked view for PropertyList

Summary: Turns a Property List into a stacked view like on tablet/mobile. Useful for where text is longer.

Test Plan:
Test a Herald Transcript page

{F148438}

{F148439}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Differential Revision: https://secure.phabricator.com/D8891
This commit is contained in:
Chad Little 2014-04-29 07:04:22 -07:00
parent b6fa4856d2
commit 3bc2db199a
4 changed files with 27 additions and 7 deletions

View file

@ -7,7 +7,7 @@
return array( return array(
'names' => 'names' =>
array( array(
'core.pkg.css' => '9e7cce62', 'core.pkg.css' => 'b39b2afb',
'core.pkg.js' => '417722ff', 'core.pkg.js' => '417722ff',
'darkconsole.pkg.js' => 'ca8671ce', 'darkconsole.pkg.js' => 'ca8671ce',
'differential.pkg.css' => '8a064eb7', 'differential.pkg.css' => '8a064eb7',
@ -138,7 +138,7 @@ return array(
'rsrc/css/phui/phui-object-box.css' => 'ce92d8ec', 'rsrc/css/phui/phui-object-box.css' => 'ce92d8ec',
'rsrc/css/phui/phui-object-item-list-view.css' => '8b459abe', 'rsrc/css/phui/phui-object-item-list-view.css' => '8b459abe',
'rsrc/css/phui/phui-pinboard-view.css' => '4b346c2a', 'rsrc/css/phui/phui-pinboard-view.css' => '4b346c2a',
'rsrc/css/phui/phui-property-list-view.css' => 'dbf53b12', 'rsrc/css/phui/phui-property-list-view.css' => 'c4d44192',
'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b', 'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b',
'rsrc/css/phui/phui-spacing.css' => '042804d6', 'rsrc/css/phui/phui-spacing.css' => '042804d6',
'rsrc/css/phui/phui-status.css' => '2f562399', 'rsrc/css/phui/phui-status.css' => '2f562399',
@ -760,7 +760,7 @@ return array(
'phui-object-box-css' => 'ce92d8ec', 'phui-object-box-css' => 'ce92d8ec',
'phui-object-item-list-view-css' => '8b459abe', 'phui-object-item-list-view-css' => '8b459abe',
'phui-pinboard-view-css' => '4b346c2a', 'phui-pinboard-view-css' => '4b346c2a',
'phui-property-list-view-css' => 'dbf53b12', 'phui-property-list-view-css' => 'c4d44192',
'phui-remarkup-preview-css' => '19ad512b', 'phui-remarkup-preview-css' => '19ad512b',
'phui-spacing-css' => '042804d6', 'phui-spacing-css' => '042804d6',
'phui-status-list-view-css' => '2f562399', 'phui-status-list-view-css' => '2f562399',

View file

@ -511,6 +511,7 @@ final class HeraldTranscriptController extends HeraldController {
} }
$property_list = new PHUIPropertyListView(); $property_list = new PHUIPropertyListView();
$property_list->setStacked(true);
foreach ($rows as $row) { foreach ($rows as $row) {
$property_list->addProperty($row[0], $row[1]); $property_list->addProperty($row[0], $row[1]);
} }

View file

@ -8,6 +8,7 @@ final class PHUIPropertyListView extends AphrontView {
private $invokedWillRenderEvent; private $invokedWillRenderEvent;
private $actionList; private $actionList;
private $classes = array(); private $classes = array();
private $stacked;
const ICON_SUMMARY = 'pl-summary'; const ICON_SUMMARY = 'pl-summary';
const ICON_TESTPLAN = 'pl-testplan'; const ICON_TESTPLAN = 'pl-testplan';
@ -26,6 +27,11 @@ final class PHUIPropertyListView extends AphrontView {
return $this; return $this;
} }
public function setStacked($stacked) {
$this->stacked = $stacked;
return $this;
}
public function addClass($class) { public function addClass($class) {
$this->classes[] = $class; $this->classes[] = $class;
return $this; return $this;
@ -158,10 +164,15 @@ final class PHUIPropertyListView extends AphrontView {
array($value, ' ')); array($value, ' '));
} }
$stacked = '';
if ($this->stacked) {
$stacked = 'phui-property-list-stacked';
}
$list = phutil_tag( $list = phutil_tag(
'dl', 'dl',
array( array(
'class' => 'phui-property-list-properties', 'class' => 'phui-property-list-properties '.$stacked,
), ),
$items); $items);

View file

@ -55,8 +55,13 @@
margin-bottom: 4px; margin-bottom: 4px;
} }
.device .phui-property-list-key { .device .phui-property-list-key,
padding-left: 8px; .phui-property-list-properties.phui-property-list-stacked
.phui-property-list-key {
padding-left: 12px;
text-align: left;
margin-left: 0;
width: 100%;
} }
.phui-property-list-value { .phui-property-list-value {
@ -71,9 +76,12 @@
margin-bottom: 4px; margin-bottom: 4px;
} }
.device .phui-property-list-value { .device .phui-property-list-value,
.phui-property-list-properties.phui-property-list-stacked
.phui-property-list-value {
padding-left: 16px; padding-left: 16px;
margin-bottom: 8px; margin-bottom: 8px;
width: 100%;
} }
.phui-property-list-section-header { .phui-property-list-section-header {