Pholio mocks embed in a fancy way

Summary: Pholio mocks are now embed in a fancy way

Test Plan: {F34804}

Reviewers: epriestley

Reviewed By: epriestley

CC: chad, aran, Korvin, AnhNhan

Maniphest Tasks: T2626

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

src/__celerity_resource_map__.php

@@ -3283,7 +3283,7 @@ celerity_register_resource_map(array(
   ),
   'pholio-css' =>
   array(
-    'uri' => '/res/3d3cc404/rsrc/css/application/pholio/pholio.css',
+    'uri' => '/res/4535277b/rsrc/css/application/pholio/pholio.css',
     'type' => 'css',
     'requires' =>
     array(

src/__phutil_library_map__.php

@@ -1467,6 +1467,7 @@ phutil_register_library_map(array(
     'PholioMockCommentController' => 'applications/pholio/controller/PholioMockCommentController.php',
     'PholioMockEditController' => 'applications/pholio/controller/PholioMockEditController.php',
     'PholioMockEditor' => 'applications/pholio/editor/PholioMockEditor.php',
+    'PholioMockEmbedView' => 'applications/pholio/view/PholioMockEmbedView.php',
     'PholioMockImagesView' => 'applications/pholio/view/PholioMockImagesView.php',
     'PholioMockListController' => 'applications/pholio/controller/PholioMockListController.php',
     'PholioMockQuery' => 'applications/pholio/query/PholioMockQuery.php',
@@ -2969,6 +2970,7 @@ phutil_register_library_map(array(
     'PholioMockCommentController' => 'PholioController',
     'PholioMockEditController' => 'PholioController',
     'PholioMockEditor' => 'PhabricatorApplicationTransactionEditor',
+    'PholioMockEmbedView' => 'AphrontView',
     'PholioMockImagesView' => 'AphrontView',
     'PholioMockListController' => 'PholioController',
     'PholioMockQuery' => 'PhabricatorCursorPagedPolicyAwareQuery',

src/applications/pholio/remarkup/PholioRemarkupRule.php

@@ -11,8 +11,17 @@ final class PholioRemarkupRule
     $viewer = $this->getEngine()->getConfig('viewer');
     return id(new PholioMockQuery())
       ->setViewer($viewer)
+      ->needImages(true)
+      ->needTokenCounts(true)
       ->withIDs($ids)
       ->execute();
   }
 
+  protected function renderObjectEmbed($object, $handle, $options) {
+    $embed_mock = id(new PholioMockEmbedView())
+      ->setMock($object);
+
+    return $embed_mock->render();
+  }
+
 }

src/applications/pholio/view/PholioMockEmbedView.php

@@ -0,0 +1,106 @@
+<?php
+
+final class PholioMockEmbedView extends AphrontView {
+
+  private $mock;
+
+  public function setMock(PholioMock $mock) {
+    $this->mock = $mock;
+    return $this;
+  }
+
+  public function render() {
+    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);
+
+    $thumbnails = array();
+    foreach (array_slice($this->mock->getImages(), 0, 4) 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(
+      'image' => count($this->mock->getImages()),
+      'like' => $this->mock->getTokenCount());
+
+    $icon_list = array();
+    foreach ($icons_data as $icon_name => $icon_value) {
+      $icon = phutil_tag(
+        'span',
+         array(
+           'class' =>
+             'pholio-mock-embed-icon sprite-icon action-'.$icon_name.'-grey',
+         ),
+         ' ');
+      $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);
+
+
+    $mock_view = phutil_tag(
+      'div',
+      array(
+        'class' => 'pholio-mock-embed'
+      ),
+      array($mock_header, $mock_body, $mock_footer));
+
+    return $this->renderSingleView($mock_view);
+  }
+}

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

@@ -126,3 +126,39 @@
 .pholio-device-lightbox-loading {
   background: url(/rsrc/image/darkload.gif) no-repeat center;
 }
+
+.pholio-mock-embed {
+  display: inline-block;
+  background-color: #282828;
+  padding: 5px;
+  color: #fff;
+}
+
+.pholio-mock-embed-head {
+  border-bottom: 1px solid #3d3d3d;
+  padding: 2px;
+  margin:2px;
+}
+
+.pholio-mock-embed-footer {
+  margin: 2px;
+  color: #aaa;
+}
+
+.pholio-mock-embed-icons {
+  float: left;
+  margin-left: 10px;
+}
+
+.pholio-mock-embed-icon {
+  height: 14px;
+  width: 14px;
+  float: left;
+  padding-left: 2px;
+  margin-right: 2px;
+}
+
+.pholio-mock-embed-head a {
+  color: #fff;
+  font-weight: bold;
+}