Touch up Subscriber List Dialog

Summary: Reduces images in ObjectLists to 40px over 50px, adds ability to show stackable lists in dialogs. Fixes T4891

Test Plan:
Tested People, Projects, Subscriber lists.

{F164265}

{F164264}

{F164266}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Maniphest Tasks: T4891

Differential Revision: https://secure.phabricator.com/D9426

resources/celerity/map.php

@@ -7,7 +7,7 @@
 return array(
   'names' =>
   array(
-    'core.pkg.css' => '703a28a5',
+    'core.pkg.css' => 'a4212efe',
     'core.pkg.js' => '5f0169b1',
     'darkconsole.pkg.js' => 'ca8671ce',
     'differential.pkg.css' => '4a93db37',
@@ -19,7 +19,7 @@ return array(
     'rsrc/css/aphront/aphront-bars.css' => '231ac33c',
     'rsrc/css/aphront/context-bar.css' => '1c3b0529',
     'rsrc/css/aphront/dark-console.css' => '6378ef3d',
-    'rsrc/css/aphront/dialog-view.css' => 'c01d24b4',
+    'rsrc/css/aphront/dialog-view.css' => '318fe7e1',
     'rsrc/css/aphront/error-view.css' => '9f1d5518',
     'rsrc/css/aphront/lightbox-attachment.css' => '7acac05d',
     'rsrc/css/aphront/list-filter-view.css' => '2ae43867',
@@ -101,7 +101,6 @@ return array(
     'rsrc/css/application/releeph/releeph-request-typeahead.css' => '667a48ae',
     'rsrc/css/application/search/search-results.css' => 'f240504c',
     'rsrc/css/application/slowvote/slowvote.css' => '266df6a1',
-    'rsrc/css/application/subscriptions/subscribers-list.css' => '5bb30c78',
     'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
     'rsrc/css/application/uiexample/example.css' => '528b19de',
     'rsrc/css/core/core.css' => '40151074',
@@ -135,7 +134,7 @@ return array(
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-list.css' => '43ed2d93',
     'rsrc/css/phui/phui-object-box.css' => 'ce92d8ec',
-    'rsrc/css/phui/phui-object-item-list-view.css' => '52a438e2',
+    'rsrc/css/phui/phui-object-item-list-view.css' => '59ff6ddb',
     'rsrc/css/phui/phui-pinboard-view.css' => '874c22f9',
     'rsrc/css/phui/phui-property-list-view.css' => '2f7199e8',
     'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b',
@@ -484,7 +483,7 @@ return array(
     'aphront-bars' => '231ac33c',
     'aphront-contextbar-view-css' => '1c3b0529',
     'aphront-dark-console-css' => '6378ef3d',
-    'aphront-dialog-view-css' => 'c01d24b4',
+    'aphront-dialog-view-css' => '318fe7e1',
     'aphront-error-view-css' => '9f1d5518',
     'aphront-list-filter-view-css' => '2ae43867',
     'aphront-multi-column-view-css' => '1b95ab2e',
@@ -762,7 +761,7 @@ return array(
     'phui-info-panel-css' => '27ea50a1',
     'phui-list-view-css' => '43ed2d93',
     'phui-object-box-css' => 'ce92d8ec',
-    'phui-object-item-list-view-css' => '52a438e2',
+    'phui-object-item-list-view-css' => '59ff6ddb',
     'phui-pinboard-view-css' => '874c22f9',
     'phui-property-list-view-css' => '2f7199e8',
     'phui-remarkup-preview-css' => '19ad512b',
@@ -804,7 +803,6 @@ return array(
     'sprite-payments-css' => 'cc085d44',
     'sprite-projects-css' => '7578fa56',
     'sprite-tokens-css' => '1706b943',
-    'subscribers-list-css' => '5bb30c78',
     'syntax-highlighting-css' => '3c18c1cb',
     'tokens-css' => '3d0f239e',
   ),

src/applications/subscriptions/controller/PhabricatorSubscriptionsListController.php

@@ -38,7 +38,7 @@ final class PhabricatorSubscriptionsListController
 
     $dialog = id(new SubscriptionListDialogBuilder())
       ->setViewer($viewer)
-      ->setTitle(pht('Subscribers for %s', $object_handle->getFullName()))
+      ->setTitle(pht('Subscribers'))
       ->setObjectPHID($phid)
       ->setHandles($handles)
       ->buildDialog();

src/applications/subscriptions/view/SubscriptionListDialogBuilder.php

@@ -50,10 +50,10 @@ final class SubscriptionListDialogBuilder {
     $object_handle = $handles[$phid];
     unset($handles[$phid]);
 
-    require_celerity_resource('subscribers-list-css');
     return id(new AphrontDialogView())
       ->setUser($this->getViewer())
-      ->setClass('subscriber-list-dialog')
+      ->setWidth(AphrontDialogView::WIDTH_FORM)
+      ->setFlush(true)
       ->setTitle($this->getTitle())
       ->appendChild($this->buildBody($this->getViewer(), $handles))
       ->addCancelButton($object_handle->getURI(), pht('Close'));
@@ -62,7 +62,8 @@ final class SubscriptionListDialogBuilder {
   private function buildBody(PhabricatorUser $viewer, array $handles) {
 
     $list = id(new PHUIObjectItemListView())
-      ->setUser($viewer);
+      ->setUser($viewer)
+      ->setStackable(true);
     foreach ($handles as $handle) {
       $item = id(new PHUIObjectItemView())
         ->setHeader($handle->getFullName())

src/view/AphrontDialogView.php

@@ -20,6 +20,7 @@ final class AphrontDialogView extends AphrontView {
   private $disableWorkflowOnCancel;
   private $width      = 'default';
   private $errors;
+  private $flush;
 
   const WIDTH_DEFAULT = 'default';
   const WIDTH_FORM    = 'form';
@@ -107,6 +108,11 @@ final class AphrontDialogView extends AphrontView {
     return $this;
   }
 
+  public function setFlush($flush) {
+    $this->flush = $flush;
+    return $this;
+  }
+
   public function setRenderDialogAsDiv() {
     // TODO: This API is awkward.
     $this->renderAsForm = false;
@@ -201,6 +207,9 @@ final class AphrontDialogView extends AphrontView {
     }
 
     $more = $this->class;
+    if ($this->flush) {
+      $more .= ' aphront-dialog-flush';
+    }
 
     switch ($this->width) {
       case self::WIDTH_FORM:

webroot/rsrc/css/aphront/dialog-view.css

@@ -33,6 +33,10 @@
   text-shadow: 0 1px 2px #fff;
 }
 
+.aphront-dialog-flush .aphront-dialog-body {
+  padding: 0;
+}
+
 .aphront-dialog-view-width-form {
   width: 600px;
 }
@@ -128,3 +132,19 @@
 .aphront-dialog-view-paragraph + .aphront-dialog-view-paragraph {
   margin-top: 16px;
 }
+
+.device-desktop .aphront-dialog-flush .phui-object-item-list-view {
+  margin: 0;
+  padding: 0;
+}
+
+.aphront-dialog-flush .phui-object-item-list-view.phui-object-list-stackable
+ .phui-object-item {
+  border: 0;
+}
+
+.aphront-dialog-flush .phui-object-item-list-view.phui-object-list-stackable
+ .phui-object-item-frame {
+  border: 0;
+  border-top: 1px solid {$thinblueborder};
+}

webroot/rsrc/css/application/subscriptions/subscribers-list.css

@@ -1,15 +0,0 @@
-/**
- * @provides subscribers-list-css
- */
-
-.subscriber-list-dialog {
-  width: 400px;
-}
-
-.subscriber-list-dialog .aphront-dialog-body {
-  padding: 0;
-}
-
-.subscriber-list-dialog .phui-object-item-list-view {
-  margin: 0;
-}

webroot/rsrc/css/phui/phui-object-item-list-view.css

@@ -599,19 +599,20 @@
 }
 
 .phui-object-item-image {
-  width: 50px;
+  width: 40px;
-  height: 50px;
+  height: 40px;
-  margin: 4px 4px 4px 4px;
+  background-size: 40px;
+  margin: 4px;
   position: absolute;
   background-color: {$lightbluebackground};
 }
 
 .phui-object-item-with-image .phui-object-item-frame {
-  min-height: 58px;
+  min-height: 48px;
 }
 
 .phui-object-item-with-image .phui-object-item-content-box {
-  margin-left: 54px;
+  margin-left: 44px;
 }
 
 /* - State ---------------------------------------------------------------------