1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-25 16:22:43 +01:00

Make all of Drydock work on Mobile

Summary: This is probably not the most useful app to have work on mobile, but get the log view to do something fairly sensible.

Test Plan: Looked at all Drydock views in mobile.

Reviewers: btrahan

Reviewed By: btrahan

CC: aran

Maniphest Tasks: T2015

Differential Revision: https://secure.phabricator.com/D4224
This commit is contained in:
epriestley 2012-12-17 15:16:44 -08:00
parent cd46fd4afe
commit edd5c208a6
5 changed files with 213 additions and 92 deletions

View file

@ -690,7 +690,7 @@ celerity_register_resource_map(array(
),
'aphront-table-view-css' =>
array(
'uri' => '/res/d2cd4818/rsrc/css/aphront/table-view.css',
'uri' => '/res/94d76d56/rsrc/css/aphront/table-view.css',
'type' => 'css',
'requires' =>
array(
@ -1094,7 +1094,7 @@ celerity_register_resource_map(array(
),
'javelin-behavior-differential-accept-with-errors' =>
array(
'uri' => '/res/ba5144c5/rsrc/js/application/differential/behavior-accept-with-errors.js',
'uri' => '/res/8fea67b3/rsrc/js/application/differential/behavior-accept-with-errors.js',
'type' => 'js',
'requires' =>
array(
@ -3201,7 +3201,7 @@ celerity_register_resource_map(array(
), array(
'packages' =>
array(
'736c46dd' =>
'6d338e1d' =>
array(
'name' => 'core.pkg.css',
'symbols' =>
@ -3246,7 +3246,7 @@ celerity_register_resource_map(array(
37 => 'phabricator-object-item-list-view-css',
38 => 'global-drag-and-drop-css',
),
'uri' => '/res/pkg/736c46dd/core.pkg.css',
'uri' => '/res/pkg/6d338e1d/core.pkg.css',
'type' => 'css',
),
'70c8162b' =>
@ -3325,7 +3325,7 @@ celerity_register_resource_map(array(
'uri' => '/res/pkg/380df740/differential.pkg.css',
'type' => 'css',
),
'a8e8f2b7' =>
'8b98837e' =>
array(
'name' => 'differential.pkg.js',
'symbols' =>
@ -3350,7 +3350,7 @@ celerity_register_resource_map(array(
17 => 'javelin-behavior-differential-toggle-files',
18 => 'javelin-behavior-differential-user-select',
),
'uri' => '/res/pkg/a8e8f2b7/differential.pkg.js',
'uri' => '/res/pkg/8b98837e/differential.pkg.js',
'type' => 'js',
),
'c8ce2d88' =>
@ -3435,23 +3435,23 @@ celerity_register_resource_map(array(
'reverse' =>
array(
'aphront-attached-file-view-css' => '7839ae2d',
'aphront-crumbs-view-css' => '736c46dd',
'aphront-dialog-view-css' => '736c46dd',
'aphront-error-view-css' => '736c46dd',
'aphront-form-view-css' => '736c46dd',
'aphront-crumbs-view-css' => '6d338e1d',
'aphront-dialog-view-css' => '6d338e1d',
'aphront-error-view-css' => '6d338e1d',
'aphront-form-view-css' => '6d338e1d',
'aphront-headsup-action-list-view-css' => '380df740',
'aphront-headsup-view-css' => '736c46dd',
'aphront-list-filter-view-css' => '736c46dd',
'aphront-pager-view-css' => '736c46dd',
'aphront-panel-view-css' => '736c46dd',
'aphront-side-nav-view-css' => '736c46dd',
'aphront-table-view-css' => '736c46dd',
'aphront-tokenizer-control-css' => '736c46dd',
'aphront-tooltip-css' => '736c46dd',
'aphront-typeahead-control-css' => '736c46dd',
'aphront-headsup-view-css' => '6d338e1d',
'aphront-list-filter-view-css' => '6d338e1d',
'aphront-pager-view-css' => '6d338e1d',
'aphront-panel-view-css' => '6d338e1d',
'aphront-side-nav-view-css' => '6d338e1d',
'aphront-table-view-css' => '6d338e1d',
'aphront-tokenizer-control-css' => '6d338e1d',
'aphront-tooltip-css' => '6d338e1d',
'aphront-typeahead-control-css' => '6d338e1d',
'differential-changeset-view-css' => '380df740',
'differential-core-view-css' => '380df740',
'differential-inline-comment-editor' => 'a8e8f2b7',
'differential-inline-comment-editor' => '8b98837e',
'differential-local-commits-view-css' => '380df740',
'differential-results-table-css' => '380df740',
'differential-revision-add-comment-css' => '380df740',
@ -3462,32 +3462,32 @@ celerity_register_resource_map(array(
'differential-table-of-contents-css' => '380df740',
'diffusion-commit-view-css' => 'c8ce2d88',
'diffusion-icons-css' => 'c8ce2d88',
'global-drag-and-drop-css' => '736c46dd',
'global-drag-and-drop-css' => '6d338e1d',
'inline-comment-summary-css' => '380df740',
'javelin-aphlict' => '70c8162b',
'javelin-behavior' => 'db6d724d',
'javelin-behavior-aphlict-dropdown' => '70c8162b',
'javelin-behavior-aphlict-listen' => '70c8162b',
'javelin-behavior-aphront-basic-tokenizer' => '70c8162b',
'javelin-behavior-aphront-drag-and-drop' => 'a8e8f2b7',
'javelin-behavior-aphront-drag-and-drop-textarea' => 'a8e8f2b7',
'javelin-behavior-aphront-drag-and-drop' => '8b98837e',
'javelin-behavior-aphront-drag-and-drop-textarea' => '8b98837e',
'javelin-behavior-aphront-form-disable-on-submit' => '70c8162b',
'javelin-behavior-audit-preview' => '5e68be89',
'javelin-behavior-dark-console' => '8edbada5',
'javelin-behavior-dark-console-ajax' => '8edbada5',
'javelin-behavior-device' => '70c8162b',
'javelin-behavior-differential-accept-with-errors' => 'a8e8f2b7',
'javelin-behavior-differential-add-reviewers-and-ccs' => 'a8e8f2b7',
'javelin-behavior-differential-comment-jump' => 'a8e8f2b7',
'javelin-behavior-differential-diff-radios' => 'a8e8f2b7',
'javelin-behavior-differential-dropdown-menus' => 'a8e8f2b7',
'javelin-behavior-differential-edit-inline-comments' => 'a8e8f2b7',
'javelin-behavior-differential-feedback-preview' => 'a8e8f2b7',
'javelin-behavior-differential-keyboard-navigation' => 'a8e8f2b7',
'javelin-behavior-differential-populate' => 'a8e8f2b7',
'javelin-behavior-differential-show-more' => 'a8e8f2b7',
'javelin-behavior-differential-toggle-files' => 'a8e8f2b7',
'javelin-behavior-differential-user-select' => 'a8e8f2b7',
'javelin-behavior-differential-accept-with-errors' => '8b98837e',
'javelin-behavior-differential-add-reviewers-and-ccs' => '8b98837e',
'javelin-behavior-differential-comment-jump' => '8b98837e',
'javelin-behavior-differential-diff-radios' => '8b98837e',
'javelin-behavior-differential-dropdown-menus' => '8b98837e',
'javelin-behavior-differential-edit-inline-comments' => '8b98837e',
'javelin-behavior-differential-feedback-preview' => '8b98837e',
'javelin-behavior-differential-keyboard-navigation' => '8b98837e',
'javelin-behavior-differential-populate' => '8b98837e',
'javelin-behavior-differential-show-more' => '8b98837e',
'javelin-behavior-differential-toggle-files' => '8b98837e',
'javelin-behavior-differential-user-select' => '8b98837e',
'javelin-behavior-diffusion-commit-graph' => '5e68be89',
'javelin-behavior-diffusion-pull-lastmodified' => '5e68be89',
'javelin-behavior-error-log' => '8edbada5',
@ -3503,14 +3503,14 @@ celerity_register_resource_map(array(
'javelin-behavior-phabricator-autofocus' => '70c8162b',
'javelin-behavior-phabricator-keyboard-shortcuts' => '70c8162b',
'javelin-behavior-phabricator-nav' => '70c8162b',
'javelin-behavior-phabricator-object-selector' => 'a8e8f2b7',
'javelin-behavior-phabricator-object-selector' => '8b98837e',
'javelin-behavior-phabricator-oncopy' => '70c8162b',
'javelin-behavior-phabricator-remarkup-assist' => '70c8162b',
'javelin-behavior-phabricator-search-typeahead' => '70c8162b',
'javelin-behavior-phabricator-tooltips' => '70c8162b',
'javelin-behavior-phabricator-watch-anchor' => '70c8162b',
'javelin-behavior-refresh-csrf' => '70c8162b',
'javelin-behavior-repository-crossreference' => 'a8e8f2b7',
'javelin-behavior-repository-crossreference' => '8b98837e',
'javelin-behavior-toggle-class' => '70c8162b',
'javelin-behavior-workflow' => '70c8162b',
'javelin-dom' => 'db6d724d',
@ -3531,48 +3531,48 @@ celerity_register_resource_map(array(
'javelin-util' => 'db6d724d',
'javelin-vector' => 'db6d724d',
'javelin-workflow' => 'db6d724d',
'lightbox-attachment-css' => '736c46dd',
'lightbox-attachment-css' => '6d338e1d',
'maniphest-task-summary-css' => '7839ae2d',
'maniphest-transaction-detail-css' => '7839ae2d',
'phabricator-app-buttons-css' => '736c46dd',
'phabricator-app-buttons-css' => '6d338e1d',
'phabricator-busy' => '70c8162b',
'phabricator-content-source-view-css' => '380df740',
'phabricator-core-buttons-css' => '736c46dd',
'phabricator-core-css' => '736c46dd',
'phabricator-crumbs-view-css' => '736c46dd',
'phabricator-directory-css' => '736c46dd',
'phabricator-drag-and-drop-file-upload' => 'a8e8f2b7',
'phabricator-core-buttons-css' => '6d338e1d',
'phabricator-core-css' => '6d338e1d',
'phabricator-crumbs-view-css' => '6d338e1d',
'phabricator-directory-css' => '6d338e1d',
'phabricator-drag-and-drop-file-upload' => '8b98837e',
'phabricator-dropdown-menu' => '70c8162b',
'phabricator-file-upload' => '70c8162b',
'phabricator-filetree-view-css' => '736c46dd',
'phabricator-flag-css' => '736c46dd',
'phabricator-form-view-css' => '736c46dd',
'phabricator-header-view-css' => '736c46dd',
'phabricator-jump-nav' => '736c46dd',
'phabricator-filetree-view-css' => '6d338e1d',
'phabricator-flag-css' => '6d338e1d',
'phabricator-form-view-css' => '6d338e1d',
'phabricator-header-view-css' => '6d338e1d',
'phabricator-jump-nav' => '6d338e1d',
'phabricator-keyboard-shortcut' => '70c8162b',
'phabricator-keyboard-shortcut-manager' => '70c8162b',
'phabricator-main-menu-view' => '736c46dd',
'phabricator-main-menu-view' => '6d338e1d',
'phabricator-menu-item' => '70c8162b',
'phabricator-nav-view-css' => '736c46dd',
'phabricator-nav-view-css' => '6d338e1d',
'phabricator-notification' => '70c8162b',
'phabricator-notification-css' => '736c46dd',
'phabricator-notification-menu-css' => '736c46dd',
'phabricator-object-item-list-view-css' => '736c46dd',
'phabricator-notification-css' => '6d338e1d',
'phabricator-notification-menu-css' => '6d338e1d',
'phabricator-object-item-list-view-css' => '6d338e1d',
'phabricator-object-selector-css' => '380df740',
'phabricator-paste-file-upload' => '70c8162b',
'phabricator-prefab' => '70c8162b',
'phabricator-project-tag-css' => '7839ae2d',
'phabricator-remarkup-css' => '736c46dd',
'phabricator-shaped-request' => 'a8e8f2b7',
'phabricator-side-menu-view-css' => '736c46dd',
'phabricator-standard-page-view' => '736c46dd',
'phabricator-remarkup-css' => '6d338e1d',
'phabricator-shaped-request' => '8b98837e',
'phabricator-side-menu-view-css' => '6d338e1d',
'phabricator-standard-page-view' => '6d338e1d',
'phabricator-textareautils' => '70c8162b',
'phabricator-tooltip' => '70c8162b',
'phabricator-transaction-view-css' => '736c46dd',
'sprite-apps-large-css' => '736c46dd',
'sprite-gradient-css' => '736c46dd',
'sprite-icon-css' => '736c46dd',
'sprite-menu-css' => '736c46dd',
'syntax-highlighting-css' => '736c46dd',
'phabricator-transaction-view-css' => '6d338e1d',
'sprite-apps-large-css' => '6d338e1d',
'sprite-gradient-css' => '6d338e1d',
'sprite-icon-css' => '6d338e1d',
'sprite-menu-css' => '6d338e1d',
'syntax-highlighting-css' => '6d338e1d',
),
));

View file

@ -2,21 +2,6 @@
abstract class DrydockController extends PhabricatorController {
public function buildStandardPageResponse($view, array $data) {
$page = $this->buildStandardPageView();
$page->setApplicationName('Drydock');
$page->setBaseURI('/drydock/');
$page->setTitle(idx($data, 'title'));
$page->setGlyph("\xE2\x98\x82");
$page->appendChild($view);
$response = new AphrontWebpageResponse();
return $response->setContent($page->render());
}
final protected function buildSideNav($selected) {
$nav = new AphrontSideNavFilterView();
$nav->setBaseURI(new PhutilURI('/drydock/'));
@ -30,13 +15,15 @@ abstract class DrydockController extends PhabricatorController {
return $nav;
}
public function buildApplicationMenu() {
return $this->buildSideNav(null)->getMenu();
}
protected function buildLogTableView(array $logs) {
assert_instances_of($logs, 'DrydockLog');
$user = $this->getRequest()->getUser();
// TODO: It's probably a stretch to claim this works on mobile.
$rows = array();
foreach ($logs as $log) {
$resource_uri = '/resource/'.$log->getResourceID().'/';
@ -59,11 +46,12 @@ abstract class DrydockController extends PhabricatorController {
),
phutil_escape_html($log->getLeaseID())),
phutil_escape_html($log->getMessage()),
phabricator_datetime($log->getEpoch(), $user),
phabricator_date($log->getEpoch(), $user),
);
}
$table = new AphrontTableView($rows);
$table->setDeviceReadyTable(true);
$table->setHeaders(
array(
'Resource',
@ -71,6 +59,13 @@ abstract class DrydockController extends PhabricatorController {
'Message',
'Date',
));
$table->setShortHeaders(
array(
'R',
'L',
'Message',
'',
));
$table->setColumnClasses(
array(
'',
@ -79,11 +74,7 @@ abstract class DrydockController extends PhabricatorController {
'',
));
$panel = new AphrontPanelView();
$panel->setHeader('Logs');
$panel->appendChild($table);
return $panel;
return $table;
}
protected function buildLeaseListView(array $leases) {

View file

@ -27,15 +27,33 @@ final class DrydockLogController extends DrydockController {
$logs = $query->executeWithOffsetPager($pager);
$title = pht('Logs');
$header = id(new PhabricatorHeaderView())
->setHeader($title);
$table = $this->buildLogTableView($logs);
$table->appendChild($pager);
$nav->appendChild($table);
$nav->appendChild(
array(
$header,
$table,
$pager,
));
return $this->buildStandardPageResponse(
$crumbs = $this->buildApplicationCrumbs();
$crumbs->addCrumb(
id(new PhabricatorCrumbView())
->setName($title)
->setHref($this->getApplicationURI('/logs/')));
$nav->setCrumbs($crumbs);
return $this->buildApplicationPage(
$nav,
array(
'title' => 'Logs',
'title' => $title,
'device' => true,
));
}

View file

@ -4,6 +4,7 @@ final class AphrontTableView extends AphrontView {
protected $data;
protected $headers;
protected $shortHeaders;
protected $rowClasses = array();
protected $columnClasses = array();
protected $cellClasses = array();
@ -11,12 +12,14 @@ final class AphrontTableView extends AphrontView {
protected $noDataString;
protected $className;
protected $columnVisibility = array();
private $deviceVisibility = array();
protected $sortURI;
protected $sortParam;
protected $sortSelected;
protected $sortReverse;
protected $sortValues;
private $deviceReadyTable;
public function __construct(array $data) {
$this->data = $data;
@ -62,6 +65,21 @@ final class AphrontTableView extends AphrontView {
return $this;
}
public function setDeviceVisibility(array $device_visibility) {
$this->deviceVisibility = $device_visibility;
return $this;
}
public function setDeviceReadyTable($ready) {
$this->deviceReadyTable = $ready;
return $this;
}
public function setShortHeaders(array $short_headers) {
$this->shortHeaders = $short_headers;
return $this;
}
/**
* Parse a sorting parameter:
*
@ -94,6 +112,11 @@ final class AphrontTableView extends AphrontView {
require_celerity_resource('aphront-table-view-css');
$table_class = $this->className;
if ($this->deviceReadyTable) {
$table_class .= ' aphront-table-view-device-ready';
}
if ($table_class !== null) {
$table_class = ' class="aphront-table-view '.$table_class.'"';
} else {
@ -111,12 +134,20 @@ final class AphrontTableView extends AphrontView {
}
$visibility = array_values($this->columnVisibility);
$device_visibility = array_values($this->deviceVisibility);
$headers = $this->headers;
$short_headers = $this->shortHeaders;
$sort_values = $this->sortValues;
if ($headers) {
while (count($headers) > count($visibility)) {
$visibility[] = true;
}
while (count($headers) > count($device_visibility)) {
$device_visibility[] = true;
}
while (count($headers) > count($short_headers)) {
$short_headers[] = null;
}
while (count($headers) > count($sort_values)) {
$sort_values[] = null;
}
@ -132,6 +163,10 @@ final class AphrontTableView extends AphrontView {
$classes[] = $col_classes[$col_num];
}
if (empty($device_visiblity[$col_num])) {
$classes[] = 'aphront-table-nodevice';
}
if ($sort_values[$col_num] !== null) {
$classes[] = 'aphront-table-view-sortable';
@ -168,6 +203,23 @@ final class AphrontTableView extends AphrontView {
$class = null;
}
if ($short_headers[$col_num] !== null) {
$header_nodevice = phutil_render_tag(
'span',
array(
'class' => 'aphront-table-view-nodevice',
),
$header);
$header_device = phutil_render_tag(
'span',
array(
'class' => 'aphront-table-view-device',
),
phutil_escape_html($short_headers[$col_num]));
$header = $header_nodevice.$header_device;
}
$table[] = '<th'.$class.'>'.$header.'</th>';
}
$table[] = '</tr>';

View file

@ -16,7 +16,6 @@
.aphront-table-view th {
font-size: 12px;
font-weight: bold;
padding: 4px 8px;
background: #003366;
color: white;
white-space: nowrap;
@ -44,12 +43,49 @@
}
.aphront-table-view td {
padding: 4px 8px;
font-size: 11px;
white-space: nowrap;
vertical-align: middle;
}
/* - Padding -------------------------------------------------------------------
On desktops, we have more horizontal space and use it to space columns out.
On devices, we make each row slightly taller to create a larger hit target
for links.
*/
.aphront-table-view th {
padding: 4px 8px;
}
.aphront-table-view td {
padding: 4px 8px;
}
.device-tablet .aphront-table-view td,
.device-phone .aphront-table-view td {
padding: 6px;
}
.device-tablet .aphront-table-view td + td,
.device-phone .aphront-table-view td + td {
padding-left: 0px;
}
.device-tablet .aphront-table-view th,
.device-phone .aphront-table-view th {
padding: 6px;
overflow: hidden;
}
.device-tablet .aphront-table-view th + th,
.device-phone .aphront-table-view th + th {
padding-left: 0px;
}
.aphront-table-view td.sorted-column {
background: #f6f6fd;
}
@ -164,3 +200,27 @@ th a:hover .aphront-table-view-sort-glyph {
display: block;
color: white;
}
.device-desktop .aphront-table-view-device {
display: none;
}
.device-tablet .aphront-table-view-nodevice,
.device-phone .aphront-table-view-nodevice {
display: none;
}
.aphront-table-view-device-ready {
width: 99%;
margin: 8px auto;
}
.aphront-table-view td.link {
padding: 0;
}
.aphront-table-view td.link a {
display: block;
padding: 6px;
font-weight: bold;
}