Move Timeline icons to Fonts

Summary: Throwing this up for testing, swapped out all icons in timeline for their font equivelants. Used better icons where I could as well. We should feel free to use more / be fun with the icons when possible since there is no penalty anymore.

Test Plan: I browsed many, not all, timelines in my sandbox and in IE8. Some of these were just swagged, but I'm expecting we'll do more SB testing before landing.

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

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

resources/celerity/map.php

@@ -144,7 +144,7 @@ return array(
     'rsrc/css/phui/phui-status.css' => '2f562399',
     'rsrc/css/phui/phui-tag-view.css' => '295d81c4',
     'rsrc/css/phui/phui-text.css' => '23e9b4b7',
-    'rsrc/css/phui/phui-timeline-view.css' => '18035042',
+    'rsrc/css/phui/phui-timeline-view.css' => '66803fc3',
     'rsrc/css/phui/phui-workboard-view.css' => '84f2c272',
     'rsrc/css/phui/phui-workpanel-view.css' => '97b69459',
     'rsrc/css/sprite-actions.css' => '969ad0e5',
@@ -764,7 +764,7 @@ return array(
     'phui-status-list-view-css' => '2f562399',
     'phui-tag-view-css' => '295d81c4',
     'phui-text-css' => '23e9b4b7',
-    'phui-timeline-view-css' => '18035042',
+    'phui-timeline-view-css' => '66803fc3',
     'phui-workboard-view-css' => '84f2c272',
     'phui-workpanel-view-css' => '97b69459',
     'policy-css' => '957ea14c',

src/applications/auth/storage/PhabricatorAuthProviderConfigTransaction.php

@@ -41,9 +41,9 @@ final class PhabricatorAuthProviderConfigTransaction
     switch ($this->getTransactionType()) {
       case self::TYPE_ENABLE:
         if ($new) {
-          return 'new';
+          return 'fa-play';
         } else {
-          return 'delete';
+          return 'fa-pause';
         }
     }
 

src/applications/config/storage/PhabricatorConfigTransaction.php

@@ -59,7 +59,7 @@ final class PhabricatorConfigTransaction
   public function getIcon() {
     switch ($this->getTransactionType()) {
       case self::TYPE_EDIT:
-        return 'edit';
+        return 'fa-pencil';
     }
 
     return parent::getIcon();

src/applications/differential/storage/DifferentialTransaction.php

@@ -335,39 +335,40 @@ final class DifferentialTransaction extends PhabricatorApplicationTransaction {
   public function getIcon() {
     switch ($this->getTransactionType()) {
       case self::TYPE_INLINE:
-        return 'comment';
+        return 'fa-comment';
       case self::TYPE_UPDATE:
-        return 'refresh';
+        return 'fa-refresh';
       case self::TYPE_STATUS:
         switch ($this->getNewValue()) {
           case ArcanistDifferentialRevisionStatus::ACCEPTED:
-            return 'enable';
+            return 'fa-check';
           case ArcanistDifferentialRevisionStatus::NEEDS_REVISION:
-            return 'delete';
+            return 'fa-times';
           case ArcanistDifferentialRevisionStatus::NEEDS_REVIEW:
-            return 'refresh';
+            return 'fa-undo';
         }
         break;
       case self::TYPE_ACTION:
         switch ($this->getNewValue()) {
           case DifferentialAction::ACTION_CLOSE:
-            return 'ok';
+            return 'fa-check-square-o';
           case DifferentialAction::ACTION_ACCEPT:
-            return 'enable';
+            return 'fa-check';
           case DifferentialAction::ACTION_REJECT:
+            return 'fa-times';
           case DifferentialAction::ACTION_ABANDON:
-            return 'delete';
+            return 'fa-plane';
           case DifferentialAction::ACTION_RETHINK:
-            return 'disable';
+            return 'fa-headphones';
           case DifferentialAction::ACTION_REQUEST:
-            return 'refresh';
+            return 'fa-refresh';
           case DifferentialAction::ACTION_RECLAIM:
           case DifferentialAction::ACTION_REOPEN:
-            return 'new';
+            return 'fa-bullhorn';
           case DifferentialAction::ACTION_RESIGN:
-            return 'undo';
+            return 'fa-flag';
           case DifferentialAction::ACTION_CLAIM:
-            return 'user';
+            return 'fa-flag';
         }
     }
 

src/applications/harbormaster/storage/configuration/HarbormasterBuildPlanTransaction.php

@@ -25,7 +25,7 @@ final class HarbormasterBuildPlanTransaction
     switch ($this->getTransactionType()) {
       case self::TYPE_NAME:
         if ($old === null) {
-          return 'create';
+          return 'fa-plus';
         }
         break;
     }

src/applications/harbormaster/storage/configuration/HarbormasterBuildStepTransaction.php

@@ -37,7 +37,7 @@ final class HarbormasterBuildStepTransaction
 
     switch ($this->getTransactionType()) {
       case self::TYPE_CREATE:
-        return 'create';
+        return 'fa-plus';
     }
 
     return parent::getIcon();

src/applications/herald/storage/HeraldRuleTransaction.php

@@ -57,9 +57,9 @@ final class HeraldRuleTransaction
     switch ($this->getTransactionType()) {
       case self::TYPE_DISABLE:
         if ($new) {
-          return 'disable';
+          return 'fa-pause';
         } else {
-          return 'enable';
+          return 'fa-play';
         }
     }
 

src/applications/macro/storage/PhabricatorMacroTransaction.php

@@ -255,21 +255,21 @@ final class PhabricatorMacroTransaction
 
     switch ($this->getTransactionType()) {
       case PhabricatorMacroTransactionType::TYPE_NAME:
-        return 'edit';
+        return 'fa-pencil';
       case PhabricatorMacroTransactionType::TYPE_FILE:
         if ($old === null) {
-          return 'create';
+          return 'fa-plus';
         } else {
-          return 'edit';
+          return 'fa-pencil';
         }
       case PhabricatorMacroTransactionType::TYPE_DISABLED:
         if ($new) {
-          return 'delete';
+          return 'fa-times';
         } else {
-          return 'undo';
+          return 'fa-undo';
         }
       case PhabricatorMacroTransactionType::TYPE_AUDIO:
-        return 'herald';
+        return 'fa-headphones';
     }
 
     return parent::getIcon();

src/applications/maniphest/storage/ManiphestTransaction.php

@@ -244,17 +244,17 @@ final class ManiphestTransaction
 
     switch ($this->getTransactionType()) {
       case self::TYPE_OWNER:
-        return 'user';
+        return 'fa-user';
 
       case self::TYPE_CCS:
-        return 'meta-mta';
+        return 'fa-envelope';
 
       case self::TYPE_TITLE:
         if ($old === null) {
-          return 'create';
+          return 'fa-pencil';
         }
 
-        return 'edit';
+        return 'fa-pencil';
 
       case self::TYPE_STATUS:
         $action = ManiphestTaskStatus::getStatusIcon($new);
@@ -263,33 +263,33 @@ final class ManiphestTransaction
         }
 
         if (ManiphestTaskStatus::isClosedStatus($new)) {
-          return 'check';
+          return 'fa-check-square-o';
         } else {
-          return 'edit';
+          return 'fa-pencil';
         }
 
       case self::TYPE_DESCRIPTION:
-        return 'edit';
+        return 'fa-pencil';
 
       case self::TYPE_PROJECTS:
-        return 'project';
+        return 'fa-briefcase';
 
       case self::TYPE_PROJECT_COLUMN:
-        return 'workboard';
+        return 'fa-columns';
 
       case self::TYPE_PRIORITY:
         if ($old == ManiphestTaskPriority::getDefaultPriority()) {
-          return 'normal-priority';
+          return 'fa-arrow-right';
           return pht('Triaged');
         } else if ($old > $new) {
-          return 'lower-priority';
+          return 'fa-arrow-down';
         } else {
-          return 'raise-priority';
+          return 'fa-arrow-up';
         }
 
       case self::TYPE_EDGE:
       case self::TYPE_ATTACH:
-        return 'attach';
+        return 'fa-thumb-tack';
 
     }
 

src/applications/paste/storage/PhabricatorPasteTransaction.php

@@ -44,11 +44,11 @@ final class PhabricatorPasteTransaction
   public function getIcon() {
     switch ($this->getTransactionType()) {
       case self::TYPE_CREATE:
-        return 'create';
+        return 'fa-plus';
         break;
       case self::TYPE_TITLE:
       case self::TYPE_LANGUAGE:
-        return 'edit';
+        return 'fa-pencil';
         break;
     }
     return parent::getIcon();

src/applications/pholio/storage/PholioTransaction.php

@@ -63,16 +63,16 @@ final class PholioTransaction extends PhabricatorApplicationTransaction {
   public function getIcon() {
     switch ($this->getTransactionType()) {
       case PholioTransactionType::TYPE_INLINE:
-        return 'comment';
+        return 'fa-comment';
       case PholioTransactionType::TYPE_NAME:
       case PholioTransactionType::TYPE_DESCRIPTION:
       case PholioTransactionType::TYPE_IMAGE_NAME:
       case PholioTransactionType::TYPE_IMAGE_DESCRIPTION:
       case PholioTransactionType::TYPE_IMAGE_SEQUENCE:
-        return 'edit';
+        return 'fa-pencil';
       case PholioTransactionType::TYPE_IMAGE_FILE:
       case PholioTransactionType::TYPE_IMAGE_REPLACE:
-        return 'attach';
+        return 'fa-picture-o';
     }
 
     return parent::getIcon();

src/applications/ponder/storage/PonderQuestionTransaction.php

@@ -91,16 +91,16 @@ final class PonderQuestionTransaction
     switch ($this->getTransactionType()) {
       case self::TYPE_TITLE:
       case self::TYPE_CONTENT:
-        return 'edit';
+        return 'fa-pencil';
       case self::TYPE_STATUS:
         switch ($new) {
           case PonderQuestionStatus::STATUS_OPEN:
-            return 'enable';
+            return 'fa-check-circle';
           case PonderQuestionStatus::STATUS_CLOSED:
-            return 'disable';
+            return 'fa-minus-circle';
         }
       case self::TYPE_ANSWERS:
-        return 'new';
+        return 'fa-plus';
     }
 
     return parent::getIcon();

src/applications/releeph/storage/ReleephProductTransaction.php

@@ -37,9 +37,9 @@ final class ReleephProductTransaction
     switch ($this->getTransactionType()) {
       case self::TYPE_ACTIVE:
         if ($new) {
-          return 'edit';
+          return 'fa-pencil';
         } else {
-          return 'delete';
+          return 'fa-times';
         }
         break;
     }

src/applications/repository/storage/PhabricatorRepositoryTransaction.php

@@ -89,7 +89,7 @@ final class PhabricatorRepositoryTransaction
   public function getIcon() {
     switch ($this->getTransactionType()) {
       case self::TYPE_VCS:
-        return 'create';
+        return 'fa-plus';
     }
     return parent::getIcon();
   }

src/applications/slowvote/storage/PhabricatorSlowvoteTransaction.php

@@ -85,10 +85,16 @@ final class PhabricatorSlowvoteTransaction
 
     switch ($this->getTransactionType()) {
       case PhabricatorSlowvoteTransaction::TYPE_QUESTION:
+        if ($old === null) {
+          return 'fa-plus';
+        } else {
+          return 'fa-pencil';
+        }
       case PhabricatorSlowvoteTransaction::TYPE_DESCRIPTION:
       case PhabricatorSlowvoteTransaction::TYPE_RESPONSES:
+        return 'fa-pencil';
       case PhabricatorSlowvoteTransaction::TYPE_SHUFFLE:
-        return 'edit';
+        return 'fa-refresh';
     }
 
     return parent::getIcon();

src/applications/transactions/storage/PhabricatorApplicationTransaction.php

@@ -326,26 +326,26 @@ abstract class PhabricatorApplicationTransaction
   public function getIcon() {
     switch ($this->getTransactionType()) {
       case PhabricatorTransactions::TYPE_COMMENT:
-        return 'comment';
+        return 'fa-comment';
       case PhabricatorTransactions::TYPE_SUBSCRIBERS:
-        return 'message';
+        return 'fa-envelope';
       case PhabricatorTransactions::TYPE_VIEW_POLICY:
       case PhabricatorTransactions::TYPE_EDIT_POLICY:
       case PhabricatorTransactions::TYPE_JOIN_POLICY:
-        return 'lock';
+        return 'fa-lock';
       case PhabricatorTransactions::TYPE_EDGE:
-        return 'link';
+        return 'fa-link';
       case PhabricatorTransactions::TYPE_BUILDABLE:
-        return 'wrench';
+        return 'fa-wrench';
       case PhabricatorTransactions::TYPE_TOKEN:
         if ($this->getNewValue()) {
-          return 'like';
+          return 'fa-thumbs-o-up';
         } else {
-          return 'dislike';
+          return 'fa-thumbs-o-down';
         }
     }
 
-    return 'edit';
+    return 'fa-pencil';
   }
 
   public function getToken() {

src/applications/uiexample/examples/PHUIIconExample.php

@@ -423,15 +423,14 @@ final class PHUIIconExample extends PhabricatorUIExample {
     foreach ($colors as $color) {
       $cicons[] = id(new PHUIIconView())
         ->addClass('phui-example-icon-transform')
-        ->setFontAwesome('fa-tag '.$color)
+        ->setIconFont('fa-tag '.$color)
         ->setText(pht('fa-tag %s', $color));
     }
     $ficons = array();
     foreach ($fas as $fa) {
-
       $ficons[] = id(new PHUIIconView())
         ->addClass('phui-example-icon-name')
-        ->setFontAwesome($fa)
+        ->setIconFont($fa)
         ->setText($fa);
     }
 

src/view/phui/PHUIIconView.php

@@ -23,7 +23,7 @@ final class PHUIIconView extends AphrontTagView {
 
   private $spriteIcon;
   private $spriteSheet;
-  private $fontAwesome;
+  private $iconFont;
 
   public function setHref($href) {
     $this->href = $href;
@@ -55,8 +55,8 @@ final class PHUIIconView extends AphrontTagView {
     return $this;
   }
 
-  public function setFontAwesome($fa) {
+  public function setIconFont($icon) {
-    $this->fontAwesome = $fa;
+    $this->iconFont = $icon;
     return $this;
   }
 
@@ -80,11 +80,11 @@ final class PHUIIconView extends AphrontTagView {
       $classes[] = 'sprite-'.$this->spriteSheet;
       $classes[] = $this->spriteSheet.'-'.$this->spriteIcon;
 
-    } elseif ($this->fontAwesome) {
+    } elseif ($this->iconFont) {
       require_celerity_resource('phui-font-icon-base-css');
       require_celerity_resource('font-fontawesome');
       $classes[] = 'phui-font-fa';
-      $classes[] = $this->fontAwesome;
+      $classes[] = $this->iconFont;
 
     } else {
       if ($this->headSize) {

src/view/phui/PHUITimelineEventView.php

@@ -175,18 +175,16 @@ final class PHUITimelineEventView extends AphrontView {
           $fill_classes[] = 'phui-timeline-icon-fill-'.$this->color;
         }
 
+        $icon = id(new PHUIIconView())
+          ->setIconFont($this->icon.' white')
+          ->addClass('phui-timeline-icon');
+
         $icon = phutil_tag(
           'span',
           array(
             'class' => implode(' ', $fill_classes),
           ),
-          phutil_tag(
+          $icon);
-            'span',
-            array(
-              'class' => 'phui-timeline-icon sprite-icons '.
-                         'icons-'.$this->icon.'-white',
-            ),
-            ''));
       }
 
       $token = null;

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

@@ -194,10 +194,8 @@
 
 .phui-timeline-icon {
   position: absolute;
-  left: 8px;
+  left: 9px;
-  top: 8px;
+  top: -5px;
-  height: 14px;
-  width: 14px;
 }
 
 .phui-timeline-minor-event .phui-timeline-icon-fill {
@@ -207,8 +205,8 @@
 }
 
 .phui-timeline-minor-event .phui-timeline-icon {
-  top: 6px;
+  top: -5px;
-  left: 6px;
+  left: 7px;
 }
 
 .phui-timeline-extra,