Mobile layouts for Diffusion

Summary: Implements a new mobile view thats more fullscreen, not boxed, so more space. Fixes issues with mobile tables when scrolling overflowed content. Test Plan: Test home, branch, tags, code, file browse, graph, compare, history, readme, open revisions, owners. Reviewers: epriestley Reviewed By: epriestley Spies: Korvin Differential Revision: https://secure.phabricator.com/D18505
2024-11-29 10:12:41 +01:00 · 2017-08-30 12:00:07 -07:00 · 2017-08-30 12:00:07 -07:00 · 2ba5968b76
commit 2ba5968b76
parent 67c658a7ed
13 changed files with 59 additions and 38 deletions
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@ -9,7 +9,7 @@ return array(
  'names' => array(
    'conpherence.pkg.css' => 'e68cf1fa',
    'conpherence.pkg.js' => 'b5b51108',
-    'core.pkg.css' => '0437a674',
+    'core.pkg.css' => '4ac857bf',
    'core.pkg.js' => '6c085267',
    'darkconsole.pkg.js' => '1f9a31bc',
    'differential.pkg.css' => '45951e9e',
@ -32,7 +32,7 @@ return array(
    'rsrc/css/aphront/notification.css' => '457861ec',
    'rsrc/css/aphront/panel-view.css' => '8427b78d',
    'rsrc/css/aphront/phabricator-nav-view.css' => 'faf6a6fc',
-    'rsrc/css/aphront/table-view.css' => 'a3aa6910',
+    'rsrc/css/aphront/table-view.css' => '8c9bbafe',
    'rsrc/css/aphront/tokenizer.css' => '15d5ff71',
    'rsrc/css/aphront/tooltip.css' => '173b9431',
    'rsrc/css/aphront/typeahead-browse.css' => 'f2818435',
@ -74,8 +74,8 @@ return array(
    'rsrc/css/application/diffusion/diffusion-icons.css' => '0c15255e',
    'rsrc/css/application/diffusion/diffusion-readme.css' => '419dd5b6',
    'rsrc/css/application/diffusion/diffusion-repository.css' => 'ee6f20ec',
-    'rsrc/css/application/diffusion/diffusion-source.css' => '47db8a7c',
-    'rsrc/css/application/diffusion/diffusion.css' => 'ceacf994',
+    'rsrc/css/application/diffusion/diffusion-source.css' => '69ac9399',
+    'rsrc/css/application/diffusion/diffusion.css' => '9d5bb76d',
    'rsrc/css/application/feed/feed.css' => 'ecd4ec57',
    'rsrc/css/application/files/global-drag-and-drop.css' => 'b556a948',
    'rsrc/css/application/flag/flag.css' => 'bba8f811',
@ -110,7 +110,7 @@ return array(
    'rsrc/css/application/releeph/releeph-preview-branch.css' => 'b7a6f4a5',
    'rsrc/css/application/releeph/releeph-request-differential-create-dialog.css' => '8d8b92cd',
    'rsrc/css/application/releeph/releeph-request-typeahead.css' => '667a48ae',
-    'rsrc/css/application/search/application-search-view.css' => '66ee5d46',
+    'rsrc/css/application/search/application-search-view.css' => '787f5b76',
    'rsrc/css/application/search/search-results.css' => '505dd8cf',
    'rsrc/css/application/slowvote/slowvote.css' => 'a94b7230',
    'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
@ -543,11 +543,11 @@ return array(
    'aphront-list-filter-view-css' => '5d6f0526',
    'aphront-multi-column-view-css' => '84cc6640',
    'aphront-panel-view-css' => '8427b78d',
-    'aphront-table-view-css' => 'a3aa6910',
+    'aphront-table-view-css' => '8c9bbafe',
    'aphront-tokenizer-control-css' => '15d5ff71',
    'aphront-tooltip-css' => '173b9431',
    'aphront-typeahead-control-css' => 'a4a21016',
-    'application-search-view-css' => '66ee5d46',
+    'application-search-view-css' => '787f5b76',
    'auth-css' => '0877ed6e',
    'bulk-job-css' => 'df9c1d4a',
    'conduit-api-css' => '7bc725c4',
@ -570,11 +570,11 @@ return array(
    'differential-revision-history-css' => '0e8eb855',
    'differential-revision-list-css' => 'f3c47d33',
    'differential-table-of-contents-css' => 'ae4b7a55',
-    'diffusion-css' => 'ceacf994',
+    'diffusion-css' => '9d5bb76d',
    'diffusion-icons-css' => '0c15255e',
    'diffusion-readme-css' => '419dd5b6',
    'diffusion-repository-css' => 'ee6f20ec',
-    'diffusion-source-css' => '47db8a7c',
+    'diffusion-source-css' => '69ac9399',
    'diviner-shared-css' => '896f1d43',
    'font-fontawesome' => 'e838e088',
    'font-lato' => 'c7ccd872',
--- a/src/applications/diffusion/controller/DiffusionBranchTableController.php
+++ b/src/applications/diffusion/controller/DiffusionBranchTableController.php
@ -57,6 +57,7 @@ final class DiffusionBranchTableController extends DiffusionController {
      $content = id(new PHUIObjectBoxView())
        ->setHeaderText($repository->getName())
        ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+        ->addClass('diffusion-mobile-view')
        ->setTable($list)
        ->setPager($pager);
    }
--- a/src/applications/diffusion/controller/DiffusionBrowseController.php
+++ b/src/applications/diffusion/controller/DiffusionBrowseController.php
@ -371,6 +371,7 @@ final class DiffusionBrowseController extends DiffusionController {
        ->setHeader($browse_header)
        ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
        ->setTable($browse_table)
+        ->addClass('diffusion-mobile-view')
        ->setPager($pager);

      $path = $drequest->getPath();
@ -595,6 +596,8 @@ final class DiffusionBrowseController extends DiffusionController {
      ),
      $rows);

+    $corpus_table = phutil_tag_div('diffusion-source-wrap', $corpus_table);
+
    if ($this->getRequest()->isAjax()) {
      return $corpus_table;
    }
@ -654,6 +657,7 @@ final class DiffusionBrowseController extends DiffusionController {
      ->setHeader($header)
      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
      ->appendChild($corpus)
+      ->addClass('diffusion-mobile-view')
      ->setCollapsed(true);

    $messages = array();
@ -860,6 +864,7 @@ final class DiffusionBrowseController extends DiffusionController {
      $view = id(new PHUIObjectBoxView())
        ->setHeaderText(pht('Owner Packages'))
        ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+        ->addClass('diffusion-mobile-view')
        ->setObjectList($ownership);
    }

@ -1341,6 +1346,7 @@ final class DiffusionBrowseController extends DiffusionController {
    return id(new PHUIObjectBoxView())
      ->setHeader($header)
      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+      ->addClass('diffusion-mobile-view')
      ->addPropertyList($properties);
  }

@ -1361,6 +1367,7 @@ final class DiffusionBrowseController extends DiffusionController {
    $box = id(new PHUIObjectBoxView())
      ->setHeader($header)
      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+      ->addClass('diffusion-mobile-view')
      ->appendChild($text);

    return $box;
@ -1693,15 +1700,20 @@ final class DiffusionBrowseController extends DiffusionController {
    $header = id(new PHUIHeaderView())
      ->setHeader(pht('Recently Open Revisions'));

-    $view = id(new DifferentialRevisionListView())
+    $list = id(new DifferentialRevisionListView())
+      ->setRevisions($revisions)
+      ->setUser($viewer)
+      ->setNoBox(true);
+
+    $phids = $list->getRequiredHandlePHIDs();
+    $handles = $this->loadViewerHandles($phids);
+    $list->setHandles($handles);
+
+    $view = id(new PHUIObjectBoxView())
      ->setHeader($header)
      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
-      ->setRevisions($revisions)
-      ->setUser($viewer);
-
-    $phids = $view->getRequiredHandlePHIDs();
-    $handles = $this->loadViewerHandles($phids);
-    $view->setHandles($handles);
+      ->addClass('diffusion-mobile-view')
+      ->appendChild($list);

    return $view;
  }
@ -1838,6 +1850,7 @@ final class DiffusionBrowseController extends DiffusionController {
    $corpus = id(new PHUIObjectBoxView())
      ->setHeader($header)
      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+      ->addClass('diffusion-mobile-view')
      ->setCollapsed(true);

    if ($messages) {
@ -1922,6 +1935,7 @@ final class DiffusionBrowseController extends DiffusionController {
    return id(new PHUIObjectBoxView())
      ->setHeader($header)
      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+      ->addClass('diffusion-mobile-view')
      ->setTable($history_table);
  }

--- a/src/applications/diffusion/controller/DiffusionCompareController.php
+++ b/src/applications/diffusion/controller/DiffusionCompareController.php
@ -15,6 +15,7 @@ final class DiffusionCompareController extends DiffusionController {
    $viewer = $this->getViewer();
    $drequest = $this->getDiffusionRequest();
    $repository = $drequest->getRepository();
+    require_celerity_resource('diffusion-css');

    if (!$repository->supportsBranchComparison()) {
      return $this->newDialog()
@ -315,6 +316,7 @@ final class DiffusionCompareController extends DiffusionController {
      ->setHeader($header)
      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
      ->setTable($history_table)
+      ->addClass('diffusion-mobile-view')
      ->setPager($pager);

  }
--- a/src/applications/diffusion/controller/DiffusionGraphController.php
+++ b/src/applications/diffusion/controller/DiffusionGraphController.php
@ -67,6 +67,7 @@ final class DiffusionGraphController extends DiffusionController {
      ->setHeaderText(pht('History Graph'))
      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
      ->setTable($graph)
+      ->addClass('diffusion-mobile-view')
      ->setPager($pager);

    $tabs = $this->buildTabsView('graph');
--- a/src/applications/diffusion/controller/DiffusionRepositoryController.php
+++ b/src/applications/diffusion/controller/DiffusionRepositoryController.php
@ -420,7 +420,8 @@ final class DiffusionRepositoryController extends DiffusionController {
    $history_table->setIsHead(true);

    $panel = id(new PHUIObjectBoxView())
-      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY);
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+      ->addClass('diffusion-mobile-view');
    $header = id(new PHUIHeaderView())
      ->setHeader(pht('Recent Commits'));
    $panel->setHeader($header);
@ -583,6 +584,7 @@ final class DiffusionRepositoryController extends DiffusionController {
      ->setHeaderText($header)
      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
      ->setTable($browse_table)
+      ->addClass('diffusion-mobile-view')
      ->setPager($pager);
  }

--- a/src/applications/diffusion/view/DiffusionBrowseTableView.php
+++ b/src/applications/diffusion/view/DiffusionBrowseTableView.php
@ -134,7 +134,7 @@ final class DiffusionBrowseTableView extends DiffusionView {
      array(
        true,
        false,
-        true,
+        false,
        false,
        false,
      ));
--- a/src/applications/diffusion/view/DiffusionHistoryListView.php
+++ b/src/applications/diffusion/view/DiffusionHistoryListView.php
@ -40,6 +40,7 @@ final class DiffusionHistoryListView extends DiffusionHistoryView {
        $view[] = id(new PHUIObjectBoxView())
          ->setHeader($header)
          ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+          ->addClass('diffusion-mobile-view')
          ->setObjectList($list);
      }

--- a/src/applications/diffusion/view/DiffusionReadmeView.php
+++ b/src/applications/diffusion/view/DiffusionReadmeView.php
@ -105,6 +105,7 @@ final class DiffusionReadmeView extends DiffusionView {
    return id(new PHUIObjectBoxView())
      ->setHeader($header)
      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+      ->addClass('diffusion-mobile-view')
      ->appendChild($document)
      ->addClass('diffusion-readme-view');
  }
--- a/webroot/rsrc/css/aphront/table-view.css
+++ b/webroot/rsrc/css/aphront/table-view.css
@ -4,6 +4,7 @@

 .aphront-table-wrap {
  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
 }

 .aphront-table-view {
@ -128,14 +129,8 @@ th.aphront-table-view-sortable-selected {
  padding: 8px 10px;
 }

-.device-tablet .aphront-table-view td,
-.device-phone .aphront-table-view td {
-  padding: 6px;
-}
-
 .device-tablet .aphront-table-view th,
 .device-phone .aphront-table-view th {
-  padding: 6px;
  overflow: hidden;
 }

--- a/webroot/rsrc/css/application/diffusion/diffusion-source.css
+++ b/webroot/rsrc/css/application/diffusion/diffusion-source.css
@ -5,6 +5,12 @@
 .diffusion-source {
  width: 100%;
  background: {$page.content};
+  overflow: hidden;
+}
+
+.device-phone .diffusion-source-wrap {
+  overflow: scroll;
+  -webkit-overflow-scrolling: touch;
 }

 .diffusion-source tr.phabricator-source-highlight th,
@ -27,6 +33,11 @@
  word-break: break-all;
 }

+.device .diffusion-source td {
+  word-break: normal;
+  white-space: nowrap;
+}
+
 .diffusion-browse-type-form {
  float: right;
 }
--- a/webroot/rsrc/css/application/diffusion/diffusion.css
+++ b/webroot/rsrc/css/application/diffusion/diffusion.css
@ -207,16 +207,6 @@
    border-color: {$thinblueborder};
 }

-.device-phone.diffusion-history-view .phui-two-column-view
-  .phui-two-column-footer .phui-header-view {
-    text-align: center;
-}
-
-.device-phone.diffusion-history-view .phui-two-column-content {
-  padding: 0;
-  margin: 0 -4px;
-}
-
 .device-phone.diffusion-history-view .phui-oi-attribute-spacer {
  display: none;
 }
@ -245,7 +235,10 @@
    margin: 0;
 }

-.device-phone.diffusion-history-view .diffusion-history-list .button.has-icon
-  .phui-icon-view {
-    display: none;
+.device-phone .phui-two-column-view .phui-two-column-content
+  .phui-object-box.diffusion-mobile-view {
+    margin: 0 -12px 20px;
+    border-left: none;
+    border-right: none;
+    border-color: {$thinblueborder};
 }
--- a/webroot/rsrc/css/application/search/application-search-view.css
+++ b/webroot/rsrc/css/application/search/application-search-view.css
@ -40,7 +40,7 @@
    padding: 12px 0;
 }

-.device-phone .application-search-results
+.device-phone.application-search-view .application-search-results
  .phui-profile-header.phui-header-shell {
  padding: 12px 0 12px 4px;
 }