Use PHUIPinboard UI for embedding Pholio Mocks

Summary: Changes the old dark embed to match the PinboardView. Retains ability to target individual files. Removes "carousel" of files (not super useful?)

Test Plan:
Tested embedding Mocks, with and without targeting specific files. Tested Pholio Pinboard, Macro Pinboard.

{F166451}

{F166452}

{F166453}

{F166454}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

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

resources/celerity/map.php

@@ -81,7 +81,7 @@ return array(
     'rsrc/css/application/phame/phame.css' => '19ecc703',
     'rsrc/css/application/pholio/pholio-edit.css' => 'b9e59b6d',
     'rsrc/css/application/pholio/pholio-inline-comments.css' => '52be33f0',
-    'rsrc/css/application/pholio/pholio.css' => 'e059f955',
+    'rsrc/css/application/pholio/pholio.css' => '005be8e1',
     'rsrc/css/application/phortune/phortune-credit-card-form.css' => 'b25b4beb',
     'rsrc/css/application/phrequent/phrequent.css' => 'ffc185ad',
     'rsrc/css/application/phriction/phriction-document-css.css' => '7d7f0071',
@@ -135,7 +135,7 @@ return array(
     'rsrc/css/phui/phui-list.css' => '43ed2d93',
     'rsrc/css/phui/phui-object-box.css' => 'ce92d8ec',
     'rsrc/css/phui/phui-object-item-list-view.css' => '46e12abc',
-    'rsrc/css/phui/phui-pinboard-view.css' => '32e8e1a9',
+    'rsrc/css/phui/phui-pinboard-view.css' => '2c8abb19',
     'rsrc/css/phui/phui-property-list-view.css' => '2f7199e8',
     'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b',
     'rsrc/css/phui/phui-spacing.css' => '042804d6',
@@ -739,7 +739,7 @@ return array(
     'phabricator-uiexample-reactor-sendproperties' => '551add57',
     'phabricator-zindex-css' => 'efb673ac',
     'phame-css' => '19ecc703',
-    'pholio-css' => 'e059f955',
+    'pholio-css' => '005be8e1',
     'pholio-edit-css' => 'b9e59b6d',
     'pholio-inline-comments-css' => '52be33f0',
     'phortune-credit-card-form' => '2290aeef',
@@ -764,7 +764,7 @@ return array(
     'phui-list-view-css' => '43ed2d93',
     'phui-object-box-css' => 'ce92d8ec',
     'phui-object-item-list-view-css' => '46e12abc',
-    'phui-pinboard-view-css' => '32e8e1a9',
+    'phui-pinboard-view-css' => '2c8abb19',
     'phui-property-list-view-css' => '2f7199e8',
     'phui-remarkup-preview-css' => '19ad512b',
     'phui-spacing-css' => '042804d6',

src/applications/pholio/remarkup/PholioRemarkupRule.php

@@ -14,6 +14,7 @@ final class PholioRemarkupRule
     $viewer = $this->getEngine()->getConfig('viewer');
     return id(new PholioMockQuery())
       ->setViewer($viewer)
+      ->needCoverFiles(true)
       ->needImages(true)
       ->needTokenCounts(true)
       ->withIDs($ids)

src/applications/pholio/view/PholioMockEmbedView.php

@@ -22,98 +22,35 @@ final class PholioMockEmbedView extends AphrontView {
     if (!$this->mock) {
       throw new Exception('Call setMock() before render()!');
     }
-
-    require_celerity_resource('pholio-css');
-
-    $mock_link = phutil_tag(
-      'a',
-      array(
-        'href' => '/M'.$this->mock->getID(),
-      ),
-      'M'.$this->mock->getID().' '.$this->mock->getName());
-
-    $mock_header = phutil_tag(
-      'div',
-      array(
-        'class' => 'pholio-mock-embed-head',
-      ),
-      $mock_link);
+    $mock = $this->mock;
 
     $images_to_show = array();
+    $thumbnail = null;
     if (!empty($this->images)) {
       $images_to_show = array_intersect_key(
         $this->mock->getImages(), array_flip($this->images));
+      foreach ($images_to_show as $image) {
+        $thumbfile = $image->getFile();
+        $thumbnail = $thumbfile->getThumb280x210URI();
+      }
+      $header = 'M'.$mock->getID().' '.$mock->getName().
+        ' (#'.$image->getID().')';
+      $uri = '/M'.$this->mock->getID().'/'.$image->getID().'/';
+    } else {
+      $thumbnail = $mock->getCoverFile()->getThumb280x210URI();
+      $header = 'M'.$mock->getID().' '.$mock->getName();
+      $uri = '/M'.$this->mock->getID();
     }
 
-    if (empty($images_to_show)) {
-      $images_to_show = array_slice($this->mock->getImages(), 0, 4);
-    }
+    $item = id(new PHUIPinboardItemView())
+      ->setHeader($header)
+      ->setURI($uri)
+      ->setImageURI($thumbnail)
+      ->setImageSize(280, 210)
+      ->setDisabled($mock->isClosed())
+      ->addIconCount('fa-picture-o', count($mock->getImages()))
+      ->addIconCount('fa-trophy', $mock->getTokenCount());
 
-    $thumbnails = array();
-    foreach ($images_to_show as $image) {
-      $thumbfile = $image->getFile();
-
-      $dimensions = PhabricatorImageTransformer::getPreviewDimensions(
-        $thumbfile,
-        140);
-
-      $tag = phutil_tag(
-        'img',
-        array(
-            'width' => $dimensions['sdx'],
-            'height' => $dimensions['sdy'],
-            'class' => 'pholio-mock-carousel-thumbnail',
-            'src' => $thumbfile->getPreview140URI(),
-            'style' => 'top: '.floor((140 - $dimensions['sdy'] ) / 2).'px',
-          ));
-
-        $thumbnails[] = javelin_tag(
-          'a',
-          array(
-            'class' => 'pholio-mock-carousel-thumb-item',
-            'href' => '/M'.$this->mock->getID().'/'.$image->getID().'/',
-          ),
-          $tag);
-    }
-
-    $mock_body = phutil_tag(
-      'div',
-      array(),
-      $thumbnails);
-
-    $icons_data = array(
-      'fa-picture-o' => count($this->mock->getImages()),
-      'fa-trophy' => $this->mock->getTokenCount());
-
-    $icon_list = array();
-    foreach ($icons_data as $icon_name => $icon_value) {
-      $icon = id(new PHUIIconView())
-        ->setIconFont($icon_name.' white')
-        ->addClass('pholio-mock-embed-icon');
-
-      $count = phutil_tag('span', array(), $icon_value);
-
-      $icon_list[] = phutil_tag(
-        'span',
-        array(
-          'class' => 'pholio-mock-embed-icons'
-        ),
-        array($icon, $count));
-    }
-
-    $mock_footer = phutil_tag(
-      'div',
-      array(
-         'class' => 'pholio-mock-embed-footer',
-      ),
-      $icon_list);
-
-
-    return phutil_tag(
-      'div',
-      array(
-        'class' => 'pholio-mock-embed'
-      ),
-      array($mock_header, $mock_body, $mock_footer));
+    return $item;
   }
 }

src/view/phui/PHUIPinboardItemView.php

@@ -43,6 +43,7 @@ final class PHUIPinboardItemView extends AphrontView {
   }
 
   public function render() {
+    require_celerity_resource('phui-pinboard-view-css');
     $header = null;
     if ($this->header) {
       if ($this->disabled) {
@@ -59,19 +60,22 @@ final class PHUIPinboardItemView extends AphrontView {
         phutil_tag('a', array('href' => $this->uri), $this->header));
     }
 
-    $image = phutil_tag(
-      'a',
-      array(
-        'href' => $this->uri,
-        'class' => 'phui-pinboard-item-image-link',
-      ),
-      phutil_tag(
-        'img',
+    $image = null;
+    if ($this->imageWidth) {
+      $image = phutil_tag(
+        'a',
         array(
-          'src'     => $this->imageURI,
-          'width'   => $this->imageWidth,
-          'height'  => $this->imageHeight,
-        )));
+          'href' => $this->uri,
+          'class' => 'phui-pinboard-item-image-link',
+        ),
+        phutil_tag(
+          'img',
+          array(
+            'src'     => $this->imageURI,
+            'width'   => $this->imageWidth,
+            'height'  => $this->imageHeight,
+          )));
+    }
 
     $icons = array();
     if ($this->iconBlock) {
@@ -121,8 +125,8 @@ final class PHUIPinboardItemView extends AphrontView {
       array(
         $header,
         $image,
-        $icons,
         $content,
+        $icons,
       ));
   }
 

webroot/rsrc/css/application/pholio/pholio.css

@@ -146,40 +146,6 @@
   background: url(/rsrc/image/darkload.gif) no-repeat center;
 }
 
-.pholio-mock-embed {
-  display: inline-block;
-  background-color: #282828;
-  padding: 5px;
-  color: #fff;
-  margin: 2px;
-}
-
-.pholio-mock-embed-head {
-  border-bottom: 1px solid #3d3d3d;
-  padding: 2px;
-  margin:2px;
-}
-
-.pholio-mock-embed-footer {
-  margin: 2px 0;
-}
-
-.pholio-mock-embed-icons {
-  float: left;
-  margin-left: 10px;
-}
-
-.pholio-mock-embed-icon {
-  height: 14px;
-  width: 14px;
-  padding: 2px 4px 0 0;
-}
-
-.pholio-mock-embed-head a {
-  color: #fff;
-  font-weight: bold;
-}
-
 .pholio-transaction-inline-comment {
   display: table-row;
 }

webroot/rsrc/css/phui/phui-pinboard-view.css

@@ -18,9 +18,12 @@
   border-radius: 3px;
   border: 1px solid {$lightblueborder};
   border-bottom: 1px solid {$blueborder};
-  float: left;
-  width: 288px;
   text-align: left;
+  width: 288px;
+}
+
+.phui-pinboard-view .phui-pinboard-item-view {
+  float: left;
 }
 
 .device-desktop .phui-pinboard-item-view:hover {
@@ -34,7 +37,7 @@
 }
 
 .phui-pinboard-item-header {
-  padding: 4px 8px;
+  padding: 6px 8px;
   display: block;
   font-weight: bold;
   border-top-left-radius: 3px;
@@ -54,10 +57,15 @@
 }
 
 .phui-pinboard-item-content {
-  padding: 0 8px 4px;
+  padding: 8px;
   overflow: hidden;
-  color: {$greytext};
-  font-size: 11px;
+  color: {$bluetext};
+  font-size: 12px;
+}
+
+.phui-pinboard-item-content + .phui-pinboard-icons,
+.phui-pinboard-item-image-link + .phui-pinboard-icons {
+  border-top: 1px solid {$thinblueborder};
 }
 
 .phui-pinboard-item-count {
@@ -66,10 +74,8 @@
 }
 
 .phui-pinboard-icons {
-  padding: 0 8px 8px 0;
+  padding: 4px 8px 4px 0;
   color: {$darkbluetext};
-  border-bottom: 1px solid {$lightblueborder};
-  margin-bottom: 5px;
   overflow: hidden;
 }