Prettier file embeds

Summary: Spruce up the file embeds a little more, hover state, icons, file size.

Test Plan:
Add a psd and pdf, see new icons. Check differential, still see icons there too. Test mobile, desktop.

{F2042539}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -9,7 +9,7 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => '0b64e988',
     'conpherence.pkg.js' => '6249a1cf',
-    'core.pkg.css' => '6ae56144',
+    'core.pkg.css' => 'adfb9c57',
     'core.pkg.js' => '519f84e8',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => 'a4ba74b5',
@@ -108,7 +108,7 @@ return array(
     'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
     'rsrc/css/application/uiexample/example.css' => '528b19de',
     'rsrc/css/core/core.css' => 'd0801452',
-    'rsrc/css/core/remarkup.css' => '8e3d4635',
+    'rsrc/css/core/remarkup.css' => '8606d9c6',
     'rsrc/css/core/syntax.css' => '769d3498',
     'rsrc/css/core/z-index.css' => 'd1270942',
     'rsrc/css/diviner/diviner-shared.css' => 'aa3656aa',
@@ -803,7 +803,7 @@ return array(
     'phabricator-object-selector-css' => '85ee8ce6',
     'phabricator-phtize' => 'd254d646',
     'phabricator-prefab' => '8d40ae75',
-    'phabricator-remarkup-css' => '8e3d4635',
+    'phabricator-remarkup-css' => '8606d9c6',
     'phabricator-search-results-css' => '7dea472c',
     'phabricator-shaped-request' => '7cbe244b',
     'phabricator-slowvote-css' => 'a94b7230',

src/__phutil_library_map__.php

@@ -1050,6 +1050,7 @@ phutil_register_library_map(array(
     'FileMailReceiver' => 'applications/files/mail/FileMailReceiver.php',
     'FileQueryChunksConduitAPIMethod' => 'applications/files/conduit/FileQueryChunksConduitAPIMethod.php',
     'FileReplyHandler' => 'applications/files/mail/FileReplyHandler.php',
+    'FileTypeIcon' => 'applications/files/constants/FileTypeIcon.php',
     'FileUploadChunkConduitAPIMethod' => 'applications/files/conduit/FileUploadChunkConduitAPIMethod.php',
     'FileUploadConduitAPIMethod' => 'applications/files/conduit/FileUploadConduitAPIMethod.php',
     'FileUploadHashConduitAPIMethod' => 'applications/files/conduit/FileUploadHashConduitAPIMethod.php',
@@ -5732,6 +5733,7 @@ phutil_register_library_map(array(
     'FileMailReceiver' => 'PhabricatorObjectMailReceiver',
     'FileQueryChunksConduitAPIMethod' => 'FileConduitAPIMethod',
     'FileReplyHandler' => 'PhabricatorApplicationTransactionReplyHandler',
+    'FileTypeIcon' => 'Phobject',
     'FileUploadChunkConduitAPIMethod' => 'FileConduitAPIMethod',
     'FileUploadConduitAPIMethod' => 'FileConduitAPIMethod',
     'FileUploadHashConduitAPIMethod' => 'FileConduitAPIMethod',

src/applications/differential/view/DifferentialChangesetDetailView.php

@@ -110,67 +110,6 @@ final class DifferentialChangesetDetailView extends AphrontView {
     return $this->vsChangesetID;
   }
 
-  public function getFileIcon($filename) {
-    $path_info = pathinfo($filename);
-    $extension = idx($path_info, 'extension');
-    switch ($extension) {
-      case 'psd':
-      case 'ai':
-        $icon = 'fa-eye';
-        break;
-      case 'conf':
-        $icon = 'fa-wrench';
-        break;
-      case 'wav':
-      case 'mp3':
-      case 'aiff':
-        $icon = 'fa-file-sound-o';
-        break;
-      case 'm4v':
-      case 'mov':
-        $icon = 'fa-file-movie-o';
-        break;
-      case 'sql':
-      case 'db':
-        $icon = 'fa-database';
-        break;
-      case 'xls':
-      case 'csv':
-        $icon = 'fa-file-excel-o';
-        break;
-      case 'ics':
-        $icon = 'fa-calendar';
-        break;
-      case 'zip':
-      case 'tar':
-      case 'bz':
-      case 'tgz':
-      case 'gz':
-        $icon = 'fa-file-archive-o';
-        break;
-      case 'png':
-      case 'jpg':
-      case 'bmp':
-      case 'gif':
-        $icon = 'fa-file-picture-o';
-        break;
-      case 'txt':
-        $icon = 'fa-file-text-o';
-        break;
-      case 'doc':
-      case 'docx':
-        $icon = 'fa-file-word-o';
-        break;
-      case 'pdf':
-        $icon = 'fa-file-pdf-o';
-        break;
-      default:
-        $icon = 'fa-file-code-o';
-        break;
-    }
-    return $icon;
-  }
-
   public function render() {
     $this->requireResource('differential-changeset-view-css');
     $this->requireResource('syntax-highlighting-css');
@@ -204,7 +143,7 @@ final class DifferentialChangesetDetailView extends AphrontView {
     }
 
     $display_filename = $changeset->getDisplayFilename();
-    $display_icon = $this->getFileIcon($display_filename);
+    $display_icon = FileTypeIcon::getFileIcon($display_filename);
     $icon = id(new PHUIIconView())
       ->setIcon($display_icon);
 

src/applications/files/constants/FileTypeIcon.php

@@ -0,0 +1,66 @@
+<?php
+
+final class FileTypeIcon extends Phobject {
+
+  public static function getFileIcon($filename) {
+    $path_info = pathinfo($filename);
+    $extension = idx($path_info, 'extension');
+    switch ($extension) {
+      case 'psd':
+      case 'ai':
+        $icon = 'fa-file-image-o';
+        break;
+      case 'conf':
+        $icon = 'fa-wrench';
+        break;
+      case 'wav':
+      case 'mp3':
+      case 'aiff':
+        $icon = 'fa-file-sound-o';
+        break;
+      case 'm4v':
+      case 'mov':
+        $icon = 'fa-file-movie-o';
+        break;
+      case 'sql':
+      case 'db':
+        $icon = 'fa-database';
+        break;
+      case 'xls':
+      case 'csv':
+        $icon = 'fa-file-excel-o';
+        break;
+      case 'ics':
+        $icon = 'fa-calendar';
+        break;
+      case 'zip':
+      case 'tar':
+      case 'bz':
+      case 'tgz':
+      case 'gz':
+        $icon = 'fa-file-archive-o';
+        break;
+      case 'png':
+      case 'jpg':
+      case 'bmp':
+      case 'gif':
+        $icon = 'fa-file-picture-o';
+        break;
+      case 'txt':
+        $icon = 'fa-file-text-o';
+        break;
+      case 'doc':
+      case 'docx':
+        $icon = 'fa-file-word-o';
+        break;
+      case 'pdf':
+        $icon = 'fa-file-pdf-o';
+        break;
+      default:
+        $icon = 'fa-file-text-o';
+        break;
+    }
+    return $icon;
+  }
+
+}

src/applications/files/markup/PhabricatorEmbedFileRemarkupRule.php

@@ -287,6 +287,7 @@ final class PhabricatorEmbedFileRemarkupRule
       ->setFileDownloadURI($file->getDownloadURI())
       ->setFileViewURI($file->getBestURI())
       ->setFileViewable((bool)$options['viewable'])
+      ->setFileSize(phutil_format_bytes($file->getByteSize()))
       ->setFileMonogram($file->getMonogram());
   }
 

src/view/layout/PhabricatorFileLinkView.php

@@ -8,6 +8,7 @@ final class PhabricatorFileLinkView extends AphrontView {
   private $fileViewable;
   private $filePHID;
   private $fileMonogram;
+  private $fileSize;
   private $customClass;
 
   public function setCustomClass($custom_class) {
@@ -73,6 +74,15 @@ final class PhabricatorFileLinkView extends AphrontView {
     return $this->fileName;
   }
 
+  public function setFileSize($file_size) {
+    $this->fileSize = $file_size;
+    return $this;
+  }
+
+  private function getFileSize() {
+    return $this->fileSize;
+  }
+
   public function getMetadata() {
     return array(
       'phid'     => $this->getFilePHID(),
@@ -97,8 +107,35 @@ final class PhabricatorFileLinkView extends AphrontView {
       $class = $this->getCustomClass();
     }
 
+    $filename = $this->getFileName();
+    $type_icon = FileTypeIcon::getFileIcon($filename);
+
     $icon = id(new PHUIIconView())
-      ->setIcon('fa-file-text-o');
+      ->setIcon($type_icon);
+
+    $info = phutil_tag(
+      'span',
+      array(
+        'class' => 'phabricator-remarkup-embed-layout-info',
+      ),
+      $this->getFileSize());
+
+    $name = phutil_tag(
+      'span',
+      array(
+        'class' => 'phabricator-remarkup-embed-layout-name',
+      ),
+      $filename);
+
+    $inner = phutil_tag(
+      'span',
+      array(
+        'class' => 'phabricator-remarkup-embed-layout-info-block',
+      ),
+      array(
+        $name,
+        $info,
+      ));
 
     return javelin_tag(
       'a',
@@ -111,7 +148,7 @@ final class PhabricatorFileLinkView extends AphrontView {
       ),
       array(
         $icon,
-        $this->getFileName(),
+        $inner,
       ));
   }
 }

webroot/rsrc/css/core/remarkup.css

@@ -370,20 +370,41 @@ video.phabricator-media {
 }
 
 .phabricator-remarkup-embed-layout-link {
-  padding: 2px 0;
+  padding: 8px 8px 8px 32px;
   border-radius: 3px;
-  margin: 0;
+  margin: 0 0 4px;
   display: inline-block;
   font-weight: bold;
-  color: {$anchor};
   -webkit-font-smoothing: antialiased;
+  border: 1px solid {$lightblueborder};
+  border-radius: 3px;
+  color: #000;
+  min-width: 240px;
+  position: relative;
+  height: 22px;
+  line-height: 20px;
 }
 
 .phabricator-remarkup-embed-layout-link .phui-icon-view {
   margin-right: 8px;
+  font-size: 20px;
+  position: absolute;
+  top: 8px;
+  left: 8px;
+}
+
+.phabricator-remarkup-embed-layout-info {
+  color: {$lightgreytext};
+  font-size: {$smallerfontsize};
+  font-weight: normal;
+  margin-left: 8px;
+}
+
+.phabricator-remarkup-embed-layout-link:hover {
+  border-color: {$violet};
+  text-decoration: none;
 }
 
-.phabricator-remarkup-embed-layout-link:hover,
 .phabricator-remarkup-embed-layout-link:hover .phui-icon-view {
   color: {$violet};
 }