diff --git a/resources/celerity/map.php b/resources/celerity/map.php
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -121,6 +121,8 @@
'rsrc/css/font/font-awesome.css' => '3883938a',
'rsrc/css/font/font-lato.css' => '23631304',
'rsrc/css/font/phui-font-icon-base.css' => '303c9b87',
+ 'rsrc/css/fuel/fuel-grid.css' => 'd87031e7',
+ 'rsrc/css/fuel/fuel-map.css' => 'd6e31510',
'rsrc/css/layout/phabricator-source-code-view.css' => '03d7ac28',
'rsrc/css/phui/button/phui-button-bar.css' => 'a4aa75c4',
'rsrc/css/phui/button/phui-button-simple.css' => '1ff278aa',
@@ -574,6 +576,8 @@
'diviner-shared-css' => '4bd263b0',
'font-fontawesome' => '3883938a',
'font-lato' => '23631304',
+ 'fuel-grid-css' => 'd87031e7',
+ 'fuel-map-css' => 'd6e31510',
'global-drag-and-drop-css' => '1d2713a4',
'harbormaster-css' => '8dfe16b2',
'herald-css' => '648d39e2',
diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php
--- a/src/__phutil_library_map__.php
+++ b/src/__phutil_library_map__.php
@@ -1305,6 +1305,13 @@
'FlagDeleteConduitAPIMethod' => 'applications/flag/conduit/FlagDeleteConduitAPIMethod.php',
'FlagEditConduitAPIMethod' => 'applications/flag/conduit/FlagEditConduitAPIMethod.php',
'FlagQueryConduitAPIMethod' => 'applications/flag/conduit/FlagQueryConduitAPIMethod.php',
+ 'FuelComponentView' => 'view/fuel/FuelComponentView.php',
+ 'FuelGridCellView' => 'view/fuel/FuelGridCellView.php',
+ 'FuelGridRowView' => 'view/fuel/FuelGridRowView.php',
+ 'FuelGridView' => 'view/fuel/FuelGridView.php',
+ 'FuelMapItemView' => 'view/fuel/FuelMapItemView.php',
+ 'FuelMapView' => 'view/fuel/FuelMapView.php',
+ 'FuelView' => 'view/fuel/FuelView.php',
'FundBacker' => 'applications/fund/storage/FundBacker.php',
'FundBackerCart' => 'applications/fund/phortune/FundBackerCart.php',
'FundBackerEditor' => 'applications/fund/editor/FundBackerEditor.php',
@@ -7439,6 +7446,13 @@
'FlagDeleteConduitAPIMethod' => 'FlagConduitAPIMethod',
'FlagEditConduitAPIMethod' => 'FlagConduitAPIMethod',
'FlagQueryConduitAPIMethod' => 'FlagConduitAPIMethod',
+ 'FuelComponentView' => 'FuelView',
+ 'FuelGridCellView' => 'FuelView',
+ 'FuelGridRowView' => 'FuelView',
+ 'FuelGridView' => 'FuelComponentView',
+ 'FuelMapItemView' => 'AphrontView',
+ 'FuelMapView' => 'FuelComponentView',
+ 'FuelView' => 'AphrontView',
'FundBacker' => array(
'FundDAO',
'PhabricatorPolicyInterface',
diff --git a/src/applications/diffusion/view/DiffusionCommitGraphView.php b/src/applications/diffusion/view/DiffusionCommitGraphView.php
--- a/src/applications/diffusion/view/DiffusionCommitGraphView.php
+++ b/src/applications/diffusion/view/DiffusionCommitGraphView.php
@@ -164,21 +164,23 @@
$this->addAuditAction($item_view, $hash);
if ($show_auditors) {
- $auditor_list = $item_view->newPropertyList();
+ $auditor_list = $item_view->newMapView();
if ($commit) {
$auditors = $this->newAuditorList($commit, $handles);
- $auditor_list->addProperty(pht('Auditors'), $auditors);
+ $auditor_list->newItem()
+ ->setName(pht('Auditors'))
+ ->setValue($auditors);
}
}
- $property_list = $item_view->newPropertyList();
+ $property_list = $item_view->newMapView();
if ($commit) {
$author_view = $this->getCommitAuthorView($commit);
if ($author_view) {
- $property_list->addProperty(
- pht('Author'),
- $this->getCommitAuthorView($commit));
+ $property_list->newItem()
+ ->setName(pht('Author'))
+ ->setValue($author_view);
}
}
@@ -189,9 +191,9 @@
$revision = head($revisions);
$handle = $handles[$revision->getPHID()];
- $property_list->addProperty(
- pht('Revision'),
- $handle->renderLink());
+ $property_list->newItem()
+ ->setName(pht('Revision'))
+ ->setValue($handle->renderLink());
}
}
}
diff --git a/src/view/fuel/FuelComponentView.php b/src/view/fuel/FuelComponentView.php
new file mode 100644
--- /dev/null
+++ b/src/view/fuel/FuelComponentView.php
@@ -0,0 +1,35 @@
+<?php
+
+abstract class FuelComponentView
+ extends FuelView {
+
+ private $classes = array();
+
+ final public function addClass($class) {
+ $this->classes[] = $class;
+ return $this;
+ }
+
+ private function getClasses() {
+ return $this->classes;
+ }
+
+ final protected function newComponentTag(
+ $tag,
+ array $attributes,
+ $content) {
+
+ $classes = $this->getClasses();
+ if (isset($attributes['class'])) {
+ $classes[] = $attributes['class'];
+ }
+
+ if ($classes) {
+ $classes = implode(' ', $classes);
+ $attributes['class'] = $classes;
+ }
+
+ return javelin_tag($tag, $attributes, $content);
+ }
+
+}
diff --git a/src/view/fuel/FuelGridCellView.php b/src/view/fuel/FuelGridCellView.php
new file mode 100644
--- /dev/null
+++ b/src/view/fuel/FuelGridCellView.php
@@ -0,0 +1,28 @@
+<?php
+
+final class FuelGridCellView
+ extends FuelView {
+
+ private $content;
+
+ public function setContent($content) {
+ $this->content = $content;
+ return $this;
+ }
+
+ public function getContent() {
+ return $this->content;
+ }
+
+ public function render() {
+ $content = $this->getContent();
+
+ return phutil_tag(
+ 'div',
+ array(
+ 'class' => 'fuel-grid-cell',
+ ),
+ $content);
+ }
+
+}
diff --git a/src/view/fuel/FuelGridRowView.php b/src/view/fuel/FuelGridRowView.php
new file mode 100644
--- /dev/null
+++ b/src/view/fuel/FuelGridRowView.php
@@ -0,0 +1,32 @@
+<?php
+
+final class FuelGridRowView
+ extends FuelView {
+
+ private $cells = array();
+
+ public function newCell() {
+ $cell = new FuelGridCellView();
+ $this->cells[] = $cell;
+ return $cell;
+ }
+
+ public function render() {
+ $cells = $this->cells;
+
+ $classes = array();
+ $classes[] = 'fuel-grid-row';
+
+ $classes[] = sprintf(
+ 'fuel-grid-cell-count-%d',
+ count($cells));
+
+ return phutil_tag(
+ 'div',
+ array(
+ 'class' => implode(' ', $classes),
+ ),
+ $cells);
+ }
+
+}
diff --git a/src/view/fuel/FuelGridView.php b/src/view/fuel/FuelGridView.php
new file mode 100644
--- /dev/null
+++ b/src/view/fuel/FuelGridView.php
@@ -0,0 +1,41 @@
+<?php
+
+final class FuelGridView
+ extends FuelComponentView {
+
+ private $rows = array();
+
+ public function newRow() {
+ $row = new FuelGridRowView();
+ $this->rows[] = $row;
+ return $row;
+ }
+
+ public function render() {
+ require_celerity_resource('fuel-grid-css');
+
+ $rows = $this->rows;
+
+ $body = phutil_tag(
+ 'div',
+ array(
+ 'class' => 'fuel-grid-body',
+ ),
+ $rows);
+
+ $grid = phutil_tag(
+ 'div',
+ array(
+ 'class' => 'fuel-grid',
+ ),
+ $body);
+
+ return $this->newComponentTag(
+ 'div',
+ array(
+ 'class' => 'fuel-grid-component',
+ ),
+ $grid);
+ }
+
+}
diff --git a/src/view/fuel/FuelMapItemView.php b/src/view/fuel/FuelMapItemView.php
new file mode 100644
--- /dev/null
+++ b/src/view/fuel/FuelMapItemView.php
@@ -0,0 +1,54 @@
+<?php
+
+final class FuelMapItemView
+ extends AphrontView {
+
+ private $name;
+ private $value;
+
+ public function setName($name) {
+ $this->name = $name;
+ return $this;
+ }
+
+ public function getName() {
+ return $this->name;
+ }
+
+ public function setValue($value) {
+ $this->value = $value;
+ return $this;
+ }
+
+ public function getValue() {
+ return $this->value;
+ }
+
+ public function render() {
+ $value = $this->getValue();
+
+ $view = array();
+
+ $view[] = phutil_tag(
+ 'div',
+ array(
+ 'class' => 'fuel-map-name',
+ ),
+ $this->getName());
+
+ $view[] = phutil_tag(
+ 'div',
+ array(
+ 'class' => 'fuel-map-value',
+ ),
+ $value);
+
+ return phutil_tag(
+ 'div',
+ array(
+ 'class' => 'fuel-map-pair',
+ ),
+ $view);
+ }
+
+}
diff --git a/src/view/fuel/FuelMapView.php b/src/view/fuel/FuelMapView.php
new file mode 100644
--- /dev/null
+++ b/src/view/fuel/FuelMapView.php
@@ -0,0 +1,45 @@
+<?php
+
+final class FuelMapView
+ extends FuelComponentView {
+
+ private $items = array();
+
+ public function newItem() {
+ $item = new FuelMapItemView();
+ $this->items[] = $item;
+ return $item;
+ }
+
+ public function render() {
+ require_celerity_resource('fuel-map-css');
+
+ $items = $this->items;
+
+ if (!$items) {
+ return null;
+ }
+
+ $body = phutil_tag(
+ 'div',
+ array(
+ 'class' => 'fuel-map-items',
+ ),
+ $items);
+
+ $map = phutil_tag(
+ 'div',
+ array(
+ 'class' => 'fuel-map',
+ ),
+ $body);
+
+ return $this->newComponentTag(
+ 'div',
+ array(
+ 'class' => 'fuel-map-component',
+ ),
+ $map);
+ }
+
+}
diff --git a/src/view/fuel/FuelView.php b/src/view/fuel/FuelView.php
new file mode 100644
--- /dev/null
+++ b/src/view/fuel/FuelView.php
@@ -0,0 +1,10 @@
+<?php
+
+abstract class FuelView
+ extends AphrontView {
+
+ final protected function canAppendChild() {
+ return false;
+ }
+
+}
diff --git a/src/view/phui/PHUIObjectItemView.php b/src/view/phui/PHUIObjectItemView.php
--- a/src/view/phui/PHUIObjectItemView.php
+++ b/src/view/phui/PHUIObjectItemView.php
@@ -30,7 +30,7 @@
private $coverImage;
private $description;
private $clickable;
- private $propertyLists = array();
+ private $mapViews = array();
private $selectableName;
private $selectableValue;
@@ -220,9 +220,10 @@
return $action;
}
- public function newPropertyList() {
- $list = new PHUIPropertyListView();
- $this->propertyLists[] = $list;
+ public function newMapView() {
+ $list = id(new FuelMapView())
+ ->addClass('fuel-map-property-list');
+ $this->mapViews[] = $list;
return $list;
}
@@ -612,12 +613,18 @@
'');
}
- $property_lists = null;
- if ($this->propertyLists) {
- $property_lists[] = phutil_tag(
- 'div',
- array(),
- $this->propertyLists);
+ $map_views = null;
+ if ($this->mapViews) {
+ $grid = id(new FuelGridView())
+ ->addClass('fuel-grid-property-list');
+
+ $row = $grid->newRow();
+ foreach ($this->mapViews as $map_view) {
+ $row->newCell()
+ ->setContent($map_view);
+ }
+
+ $map_views = $grid;
}
$content = phutil_tag(
@@ -628,7 +635,7 @@
array(
$subhead,
$attrs,
- $property_lists,
+ $map_views,
$this->renderChildren(),
));
diff --git a/webroot/rsrc/css/fuel/fuel-grid.css b/webroot/rsrc/css/fuel/fuel-grid.css
new file mode 100644
--- /dev/null
+++ b/webroot/rsrc/css/fuel/fuel-grid.css
@@ -0,0 +1,29 @@
+/**
+ * @provides fuel-grid-css
+ */
+
+.device-desktop .fuel-grid {
+ display: table;
+ table-layout: fixed;
+}
+
+.device-desktop .fuel-grid-body {
+ display: table-row-group;
+}
+
+.device-desktop .fuel-grid-row {
+ display: table-row;
+}
+
+.device-desktop .fuel-grid-cell {
+ display: table-cell;
+ vertical-align: top;
+}
+
+.device-desktop .fuel-grid-cell-count-2 > .fuel-grid-cell {
+ width: 50%;
+}
+
+.fuel-grid-property-list > .fuel-grid {
+ width: 100%;
+}
diff --git a/webroot/rsrc/css/fuel/fuel-map.css b/webroot/rsrc/css/fuel/fuel-map.css
new file mode 100644
--- /dev/null
+++ b/webroot/rsrc/css/fuel/fuel-map.css
@@ -0,0 +1,71 @@
+/**
+ * @provides fuel-map-css
+ */
+
+.device-desktop .fuel-map {
+ display: table;
+ table-layout: fixed;
+}
+
+.device-desktop .fuel-map-items {
+ display: table-row-group;
+}
+
+.device-desktop .fuel-map-pair {
+ display: table-row;
+}
+
+.device-desktop .fuel-map-name,
+.device-desktop .fuel-map-value {
+ display: table-cell;
+ vertical-align: top;
+}
+
+.fuel-map-property-list {
+ margin: 4px;
+}
+
+.fuel-map-property-list > .fuel-map {
+ overflow: hidden;
+ width: 100%;
+ max-width: 100%;
+}
+
+.fuel-map-property-list > .fuel-map > .fuel-map-items > .fuel-map-pair >
+ .fuel-map-name,
+.fuel-map-property-list > .fuel-map > .fuel-map-items > .fuel-map-pair >
+ .fuel-map-value {
+ padding: 2px 4px;
+ white-space: nowrap;
+}
+
+.fuel-map-property-list > .fuel-map > .fuel-map-items > .fuel-map-pair >
+ .fuel-map-name {
+ color: {$bluetext};
+}
+
+.fuel-map-property-list > .fuel-map > .fuel-map-items > .fuel-map-pair >
+ .fuel-map-value {
+ color: {$lightgreytext};
+}
+
+.device-desktop
+ .fuel-map-property-list > .fuel-map > .fuel-map-items > .fuel-map-pair >
+ .fuel-map-name {
+ text-align: right;
+ min-width: 80px;
+ width: 80px;
+}
+
+.device-desktop
+ .fuel-map-property-list > .fuel-map > .fuel-map-items > .fuel-map-pair >
+ .fuel-map-value {
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+.device
+ .fuel-map-property-list > .fuel-map > .fuel-map-items > .fuel-map-pair >
+ .fuel-map-value {
+ padding-left: 12px;
+}