PHUIIconView

Summary: Adds a base class for displaying images and icons. Test Plan: Tested giving and taking tokens, viewed action headers, uiexamples for icons, workboards. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5736
2024-12-22 21:40:55 +01:00 · 2013-04-19 17:44:20 -07:00 · 2013-04-19 17:44:20 -07:00 · 7aea37c443
commit 7aea37c443
parent dc6cfe6e01
20 changed files with 341 additions and 170 deletions
--- a/resources/sprite/manifest/actions.json
+++ b/resources/sprite/manifest/actions.json
@ -3,7 +3,7 @@
  "sprites" : {
    "actions-close-dark"     : {
      "name" : "actions-close-dark",
-      "rule" : ".actions-close-dark, .device-desktop .actions-close-grey.phabricator-action-icon-item-link:hover",
+      "rule" : ".actions-close-dark, .device-desktop .actions-close-grey.phui-icon-item-link:hover",
      "hash" : "f04c5692010a6d96b6fa83a26d73737e"
    },
    "actions-close-grey"     : {
@ -18,7 +18,7 @@
    },
    "actions-flag-dark"      : {
      "name" : "actions-flag-dark",
-      "rule" : ".actions-flag-dark, .device-desktop .actions-flag-grey.phabricator-action-icon-item-link:hover",
+      "rule" : ".actions-flag-dark, .device-desktop .actions-flag-grey.phui-icon-item-link:hover",
      "hash" : "4ae54fc28dd2d6cfa6e57dde7bd640cf"
    },
    "actions-flag-grey"      : {
@ -33,7 +33,7 @@
    },
    "actions-heart-dark"     : {
      "name" : "actions-heart-dark",
-      "rule" : ".actions-heart-dark, .device-desktop .actions-heart-grey.phabricator-action-icon-item-link:hover",
+      "rule" : ".actions-heart-dark, .device-desktop .actions-heart-grey.phui-icon-item-link:hover",
      "hash" : "90b437a281724a4961e33272eafd616b"
    },
    "actions-heart-grey"     : {
@ -48,7 +48,7 @@
    },
    "actions-move-dark"      : {
      "name" : "actions-move-dark",
-      "rule" : ".actions-move-dark, .device-desktop .actions-move-grey.phabricator-action-icon-item-link:hover",
+      "rule" : ".actions-move-dark, .device-desktop .actions-move-grey.phui-icon-item-link:hover",
      "hash" : "38f5b9168bf04d1a904b09805e589cd7"
    },
    "actions-move-grey"      : {
@ -63,7 +63,7 @@
    },
    "actions-new-dark"       : {
      "name" : "actions-new-dark",
-      "rule" : ".actions-new-dark, .device-desktop .actions-new-grey.phabricator-action-icon-item-link:hover",
+      "rule" : ".actions-new-dark, .device-desktop .actions-new-grey.phui-icon-item-link:hover",
      "hash" : "52c45b76d0dbd51e6eb65f0597d5098a"
    },
    "actions-new-grey"       : {
@ -78,7 +78,7 @@
    },
    "actions-search-dark"    : {
      "name" : "actions-search-dark",
-      "rule" : ".actions-search-dark, .device-desktop .actions-search-grey.phabricator-action-icon-item-link:hover",
+      "rule" : ".actions-search-dark, .device-desktop .actions-search-grey.phui-icon-item-link:hover",
      "hash" : "6ff124bc9423bf98be5a53e22508cd26"
    },
    "actions-search-grey"    : {
@ -93,7 +93,7 @@
    },
    "actions-settings-dark"  : {
      "name" : "actions-settings-dark",
-      "rule" : ".actions-settings-dark, .device-desktop .actions-settings-grey.phabricator-action-icon-item-link:hover",
+      "rule" : ".actions-settings-dark, .device-desktop .actions-settings-grey.phui-icon-item-link:hover",
      "hash" : "5ecb08643250a052e5d090ef4660faf5"
    },
    "actions-settings-grey"  : {
@ -108,7 +108,7 @@
    },
    "actions-star-dark"      : {
      "name" : "actions-star-dark",
-      "rule" : ".actions-star-dark, .device-desktop .actions-star-grey.phabricator-action-icon-item-link:hover",
+      "rule" : ".actions-star-dark, .device-desktop .actions-star-grey.phui-icon-item-link:hover",
      "hash" : "45567d03f8e34811eca0621e93b5e050"
    },
    "actions-star-grey"      : {
@ -123,7 +123,7 @@
    },
    "actions-tag-dark"       : {
      "name" : "actions-tag-dark",
-      "rule" : ".actions-tag-dark, .device-desktop .actions-tag-grey.phabricator-action-icon-item-link:hover",
+      "rule" : ".actions-tag-dark, .device-desktop .actions-tag-grey.phui-icon-item-link:hover",
      "hash" : "24d97fa7524d0bf1bac17d9e07a63f48"
    },
    "actions-tag-grey"       : {
@ -138,7 +138,7 @@
    },
    "actions-wrench-dark"    : {
      "name" : "actions-wrench-dark",
-      "rule" : ".actions-wrench-dark, .device-desktop .actions-wrench-grey.phabricator-action-icon-item-link:hover",
+      "rule" : ".actions-wrench-dark, .device-desktop .actions-wrench-grey.phui-icon-item-link:hover",
      "hash" : "3a5cfa463c3c89194d3bbce3952a6e80"
    },
    "actions-wrench-grey"    : {
--- a/resources/sprite/manifest/tokens.json
+++ b/resources/sprite/manifest/tokens.json
@ -1,84 +1,84 @@
 {
  "version" : 1,
  "sprites" : {
-    "token-coin-1"  : {
-      "name" : "token-coin-1",
-      "rule" : ".token-coin-1",
+    "tokens-coin-1"  : {
+      "name" : "tokens-coin-1",
+      "rule" : ".tokens-coin-1",
      "hash" : "5e1fa22d5ef7f2d8ea14839c303315bb"
    },
-    "token-coin-2"  : {
-      "name" : "token-coin-2",
-      "rule" : ".token-coin-2",
+    "tokens-coin-2"  : {
+      "name" : "tokens-coin-2",
+      "rule" : ".tokens-coin-2",
      "hash" : "6a6ef9f8730e5919fa16669258ecb74d"
    },
-    "token-coin-3"  : {
-      "name" : "token-coin-3",
-      "rule" : ".token-coin-3",
+    "tokens-coin-3"  : {
+      "name" : "tokens-coin-3",
+      "rule" : ".tokens-coin-3",
      "hash" : "97256d9133c6aaf965925218d846cc32"
    },
-    "token-coin-4"  : {
-      "name" : "token-coin-4",
-      "rule" : ".token-coin-4",
+    "tokens-coin-4"  : {
+      "name" : "tokens-coin-4",
+      "rule" : ".tokens-coin-4",
      "hash" : "51cb98e751ad6f7f6d30d0acbe3bfc7c"
    },
-    "token-heart-1" : {
-      "name" : "token-heart-1",
-      "rule" : ".token-heart-1",
+    "tokens-heart-1" : {
+      "name" : "tokens-heart-1",
+      "rule" : ".tokens-heart-1",
      "hash" : "eacfe71d6ede3f994223a02e875135b2"
    },
-    "token-heart-2" : {
-      "name" : "token-heart-2",
-      "rule" : ".token-heart-2",
+    "tokens-heart-2" : {
+      "name" : "tokens-heart-2",
+      "rule" : ".tokens-heart-2",
      "hash" : "4745a935630e1b049e63c93e88667867"
    },
-    "token-like-1"  : {
-      "name" : "token-like-1",
-      "rule" : ".token-like-1",
+    "tokens-like-1"  : {
+      "name" : "tokens-like-1",
+      "rule" : ".tokens-like-1",
      "hash" : "6e38278e6653c03135157d2865907722"
    },
-    "token-like-2"  : {
-      "name" : "token-like-2",
-      "rule" : ".token-like-2",
+    "tokens-like-2"  : {
+      "name" : "tokens-like-2",
+      "rule" : ".tokens-like-2",
      "hash" : "fb47711ebbc21515cfd6fab3a19d8c7a"
    },
-    "token-medal-1" : {
-      "name" : "token-medal-1",
-      "rule" : ".token-medal-1",
+    "tokens-medal-1" : {
+      "name" : "tokens-medal-1",
+      "rule" : ".tokens-medal-1",
      "hash" : "979c6f8b7dad182e912a0d67b44595c2"
    },
-    "token-medal-2" : {
-      "name" : "token-medal-2",
-      "rule" : ".token-medal-2",
+    "tokens-medal-2" : {
+      "name" : "tokens-medal-2",
+      "rule" : ".tokens-medal-2",
      "hash" : "2263fc36370d88bceb620128902a51ae"
    },
-    "token-medal-3" : {
-      "name" : "token-medal-3",
-      "rule" : ".token-medal-3",
+    "tokens-medal-3" : {
+      "name" : "tokens-medal-3",
+      "rule" : ".tokens-medal-3",
      "hash" : "95a83057cbd9ebb7ca2f1f082c72ddac"
    },
-    "token-medal-4" : {
-      "name" : "token-medal-4",
-      "rule" : ".token-medal-4",
+    "tokens-medal-4" : {
+      "name" : "tokens-medal-4",
+      "rule" : ".tokens-medal-4",
      "hash" : "c8c94dd2f0e8a2a8711f1f21be61ea3b"
    },
-    "token-misc-1"  : {
-      "name" : "token-misc-1",
-      "rule" : ".token-misc-1",
+    "tokens-misc-1"  : {
+      "name" : "tokens-misc-1",
+      "rule" : ".tokens-misc-1",
      "hash" : "d16df367d29e0aedabcfb11c672ebd8c"
    },
-    "token-misc-2"  : {
-      "name" : "token-misc-2",
-      "rule" : ".token-misc-2",
+    "tokens-misc-2"  : {
+      "name" : "tokens-misc-2",
+      "rule" : ".tokens-misc-2",
      "hash" : "74d971c084b2f7665a84c61c0846446c"
    },
-    "token-misc-3"  : {
-      "name" : "token-misc-3",
-      "rule" : ".token-misc-3",
+    "tokens-misc-3"  : {
+      "name" : "tokens-misc-3",
+      "rule" : ".tokens-misc-3",
      "hash" : "c91387778404c8e88f243477d056d985"
    },
-    "token-misc-4"  : {
-      "name" : "token-misc-4",
-      "rule" : ".token-misc-4",
+    "tokens-misc-4"  : {
+      "name" : "tokens-misc-4",
+      "rule" : ".tokens-misc-4",
      "hash" : "4705e7c79906180c04286a62d375f33b"
    }
  },
--- a/src/__celerity_resource_map__.php
+++ b/src/__celerity_resource_map__.php
@ -2839,15 +2839,6 @@ celerity_register_resource_map(array(
    ),
    'disk' => '/rsrc/css/layout/phabricator-action-header-view.css',
  ),
-  'phabricator-action-icon-view-css' =>
-  array(
-    'uri' => '/res/dbceab3e/rsrc/css/layout/phabricator-action-icon-view.css',
-    'type' => 'css',
-    'requires' =>
-    array(
-    ),
-    'disk' => '/rsrc/css/layout/phabricator-action-icon-view.css',
-  ),
  'phabricator-action-list-view-css' =>
  array(
    'uri' => '/res/3d02ca59/rsrc/css/layout/phabricator-action-list-view.css',
@ -3525,7 +3516,7 @@ celerity_register_resource_map(array(
  ),
  'phabricator-workboard-view-css' =>
  array(
-    'uri' => '/res/14217087/rsrc/css/layout/phabricator-workboard-view.css',
+    'uri' => '/res/e48df9e8/rsrc/css/layout/phabricator-workboard-view.css',
    'type' => 'css',
    'requires' =>
    array(
@ -3606,13 +3597,22 @@ celerity_register_resource_map(array(
  ),
  'phui-feed-story-css' =>
  array(
-    'uri' => '/res/9b5bb654/rsrc/css/phui/phui-feed-story.css',
+    'uri' => '/res/a2db2369/rsrc/css/phui/phui-feed-story.css',
    'type' => 'css',
    'requires' =>
    array(
    ),
    'disk' => '/rsrc/css/phui/phui-feed-story.css',
  ),
+  'phui-icon-view-css' =>
+  array(
+    'uri' => '/res/4d0588b4/rsrc/css/phui/phui-icon.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/phui/phui-icon.css',
+  ),
  'ponder-comment-table-css' =>
  array(
    'uri' => '/res/a1bb9056/rsrc/css/application/ponder/comments.css',
@ -3786,7 +3786,7 @@ celerity_register_resource_map(array(
  ),
  'sprite-actions-css' =>
  array(
-    'uri' => '/res/00b8f8bc/rsrc/css/sprite-actions.css',
+    'uri' => '/res/89d67d5a/rsrc/css/sprite-actions.css',
    'type' => 'css',
    'requires' =>
    array(
@ -3876,7 +3876,7 @@ celerity_register_resource_map(array(
  ),
  'sprite-tokens-css' =>
  array(
-    'uri' => '/res/9ae0de5b/rsrc/css/sprite-tokens.css',
+    'uri' => '/res/edb4e341/rsrc/css/sprite-tokens.css',
    'type' => 'css',
    'requires' =>
    array(
@ -3912,7 +3912,7 @@ celerity_register_resource_map(array(
  ),
  'tokens-css' =>
  array(
-    'uri' => '/res/6b3c65c7/rsrc/css/application/tokens/tokens.css',
+    'uri' => '/res/1699df7d/rsrc/css/application/tokens/tokens.css',
    'type' => 'css',
    'requires' =>
    array(
--- a/src/__phutil_library_map__.php
+++ b/src/__phutil_library_map__.php
@ -667,6 +667,8 @@ phutil_register_library_map(array(
    'PHUIBoxExample' => 'applications/uiexample/examples/PHUIBoxExample.php',
    'PHUIBoxView' => 'view/phui/PHUIBoxView.php',
    'PHUIFeedStoryView' => 'view/phui/PHUIFeedStoryView.php',
+    'PHUIIconExample' => 'applications/uiexample/examples/PHUIIconExample.php',
+    'PHUIIconView' => 'view/phui/PHUIIconView.php',
    'PackageCreateMail' => 'applications/owners/mail/PackageCreateMail.php',
    'PackageDeleteMail' => 'applications/owners/mail/PackageDeleteMail.php',
    'PackageMail' => 'applications/owners/mail/PackageMail.php',
@ -678,7 +680,6 @@ phutil_register_library_map(array(
    'PhabricatorAccessLogConfigOptions' => 'applications/config/option/PhabricatorAccessLogConfigOptions.php',
    'PhabricatorActionHeaderExample' => 'applications/uiexample/examples/PhabricatorActionHeaderExample.php',
    'PhabricatorActionHeaderView' => 'view/layout/PhabricatorActionHeaderView.php',
-    'PhabricatorActionIconView' => 'view/layout/PhabricatorActionIconView.php',
    'PhabricatorActionListExample' => 'applications/uiexample/examples/PhabricatorActionListExample.php',
    'PhabricatorActionListView' => 'view/layout/PhabricatorActionListView.php',
    'PhabricatorActionView' => 'view/layout/PhabricatorActionView.php',
@ -2372,6 +2373,8 @@ phutil_register_library_map(array(
    'PHUIBoxExample' => 'PhabricatorUIExample',
    'PHUIBoxView' => 'AphrontTagView',
    'PHUIFeedStoryView' => 'AphrontView',
+    'PHUIIconExample' => 'PhabricatorUIExample',
+    'PHUIIconView' => 'AphrontView',
    'PackageCreateMail' => 'PackageMail',
    'PackageDeleteMail' => 'PackageMail',
    'PackageMail' => 'PhabricatorMail',
@ -2382,7 +2385,6 @@ phutil_register_library_map(array(
    'PhabricatorAccessLogConfigOptions' => 'PhabricatorApplicationConfigOptions',
    'PhabricatorActionHeaderExample' => 'PhabricatorUIExample',
    'PhabricatorActionHeaderView' => 'AphrontView',
-    'PhabricatorActionIconView' => 'AphrontView',
    'PhabricatorActionListExample' => 'PhabricatorUIExample',
    'PhabricatorActionListView' => 'AphrontView',
    'PhabricatorActionView' => 'AphrontView',
--- a/src/applications/tokens/storage/PhabricatorToken.php
+++ b/src/applications/tokens/storage/PhabricatorToken.php
@ -35,12 +35,10 @@ final class PhabricatorToken extends PhabricatorTokenDAO

    $sprite = substr($this->getPHID(), 10);

-    return phutil_tag(
-      'div',
-      array(
-        'class' => 'sprite-tokens token-icon token-'.$sprite,
-      ),
-      '');
+    return id(new PHUIIconView())
+      ->setSpriteSheet(PHUIIconView::SPRITE_TOKENS)
+      ->setSpriteIcon($sprite);
+
  }

 }
--- a/src/applications/uiexample/examples/PHUIIconExample.php
+++ b/src/applications/uiexample/examples/PHUIIconExample.php
@ -0,0 +1,144 @@
+<?php
+
+final class PHUIIconExample extends PhabricatorUIExample {
+
+  public function getName() {
+    return 'Icons and Images';
+  }
+
+  public function getDescription() {
+    return 'Easily render icons or images with links and sprites.';
+  }
+
+  public function renderExample() {
+
+    $person1 = new PHUIIconView();
+    $person1->setHeadSize(PHUIIconView::HEAD_MEDIUM);
+    $person1->setHref('http://en.wikipedia.org/wiki/George_Washington');
+    $person1->setImage(
+      celerity_get_resource_uri('/rsrc/image/people/washington.png'));
+
+    $person2 = new PHUIIconView();
+    $person2->setHeadSize(PHUIIconView::HEAD_MEDIUM);
+    $person2->setHref('http://en.wikipedia.org/wiki/Warren_G._Harding');
+    $person2->setImage(
+      celerity_get_resource_uri('/rsrc/image/people/harding.png'));
+
+    $person3 = new PHUIIconView();
+    $person3->setHeadSize(PHUIIconView::HEAD_MEDIUM);
+    $person3->setHref('http://en.wikipedia.org/wiki/William_Howard_Taft');
+    $person3->setImage(
+      celerity_get_resource_uri('/rsrc/image/people/taft.png'));
+
+    $person4 = new PHUIIconView();
+    $person4->setHeadSize(PHUIIconView::HEAD_SMALL);
+    $person4->setHref('http://en.wikipedia.org/wiki/George_Washington');
+    $person4->setImage(
+      celerity_get_resource_uri('/rsrc/image/people/washington.png'));
+
+    $person5 = new PHUIIconView();
+    $person5->setHeadSize(PHUIIconView::HEAD_SMALL);
+    $person5->setHref('http://en.wikipedia.org/wiki/Warren_G._Harding');
+    $person5->setImage(
+      celerity_get_resource_uri('/rsrc/image/people/harding.png'));
+
+    $person6 = new PHUIIconView();
+    $person6->setHeadSize(PHUIIconView::HEAD_SMALL);
+    $person6->setHref('http://en.wikipedia.org/wiki/William_Howard_Taft');
+    $person6->setImage(
+      celerity_get_resource_uri('/rsrc/image/people/taft.png'));
+
+    $actions = array(
+      'settings-grey',
+      'heart-grey',
+      'tag-grey',
+      'new-grey',
+      'search-grey',
+      'move-grey');
+    $actionview = array();
+    foreach ($actions as $action) {
+      $actionview[] = id(new PHUIIconView())
+        ->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS)
+        ->setSpriteIcon($action)
+        ->setHref('#');
+    }
+
+    $tokens = array(
+      'like-1',
+      'like-2',
+      'heart-1',
+      'heart-2');
+    $tokenview = array();
+    foreach ($tokens as $token) {
+      $tokenview[] =
+        id(new PHUIIconView())
+          ->setSpriteSheet(PHUIIconView::SPRITE_TOKENS)
+          ->setSpriteIcon($token);
+    }
+
+    $layout1 =
+      array(
+        id(new PHUIBoxView())
+          ->appendChild($actionview)
+          ->addMargin(PHUI::MARGIN_MEDIUM)
+          ->addPadding(PHUI::PADDING_SMALL)
+          ->setShadow(true));
+
+    $layout2 =
+      array(
+        id(new PHUIBoxView())
+          ->appendChild(array($person1, $person2, $person3))
+          ->addMargin(PHUI::MARGIN_MEDIUM)
+          ->addPadding(PHUI::PADDING_SMALL)
+          ->setShadow(true));
+
+    $layout2a =
+      array(
+        id(new PHUIBoxView())
+          ->appendChild(array($person4, $person5, $person6))
+          ->addMargin(PHUI::MARGIN_MEDIUM)
+          ->addPadding(PHUI::PADDING_SMALL)
+          ->setShadow(true));
+
+    $layout3 =
+      array(
+        id(new PHUIBoxView())
+          ->appendChild($tokenview)
+          ->addMargin(PHUI::MARGIN_MEDIUM)
+          ->addPadding(PHUI::PADDING_SMALL)
+          ->setShadow(true));
+
+    $head1 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('Action Icons!'));
+
+    $head2 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('People!'));
+
+    $head3 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('Tokens'));
+
+    $wrap1 = id(new PHUIBoxView())
+      ->appendChild($layout1)
+      ->addMargin(PHUI::MARGIN_LARGE);
+
+    $wrap2 = id(new PHUIBoxView())
+      ->appendChild(array($layout2, $layout2a))
+      ->addMargin(PHUI::MARGIN_LARGE);
+
+    $wrap3 = id(new PHUIBoxView())
+      ->appendChild($layout3)
+      ->addMargin(PHUI::MARGIN_LARGE);
+
+    return phutil_tag(
+      'div',
+        array(),
+        array(
+          $head1,
+          $wrap1,
+          $head2,
+          $wrap2,
+          $head3,
+          $wrap3
+        ));
+        }
+}
--- a/src/applications/uiexample/examples/PhabricatorActionHeaderExample.php
+++ b/src/applications/uiexample/examples/PhabricatorActionHeaderExample.php
@ -105,33 +105,33 @@ final class PhabricatorActionHeaderExample extends PhabricatorUIExample {
    $title3 = id(new PhabricatorHeaderView())
      ->setHeader(pht('With Action Icons'));

-    $action1 = new PhabricatorActionIconView();
-    $action1->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS);
+    $action1 = new PHUIIconView();
+    $action1->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
    $action1->setSpriteIcon('settings-grey');
    $action1->setHref('#');

-    $action2 = new PhabricatorActionIconView();
-    $action2->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS);
+    $action2 = new PHUIIconView();
+    $action2->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
    $action2->setSpriteIcon('heart-white');
    $action2->setHref('#');

-    $action3 = new PhabricatorActionIconView();
-    $action3->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS);
+    $action3 = new PHUIIconView();
+    $action3->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
    $action3->setSpriteIcon('tag-white');
    $action3->setHref('#');

-    $action4 = new PhabricatorActionIconView();
-    $action4->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS);
+    $action4 = new PHUIIconView();
+    $action4->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
    $action4->setSpriteIcon('new-white');
    $action4->setHref('#');

-    $action5 = new PhabricatorActionIconView();
-    $action5->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS);
+    $action5 = new PHUIIconView();
+    $action5->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
    $action5->setSpriteIcon('search-white');
    $action5->setHref('#');

-    $action6 = new PhabricatorActionIconView();
-    $action6->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS);
+    $action6 = new PHUIIconView();
+    $action6->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
    $action6->setSpriteIcon('move-white');
    $action6->setHref('#');

@ -199,8 +199,8 @@ final class PhabricatorActionHeaderExample extends PhabricatorUIExample {
      ->setBackgroundColor(PhabricatorTagView::COLOR_BLUE)
      ->setName('Closed');

-    $action1 = new PhabricatorActionIconView();
-    $action1->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS);
+    $action1 = new PHUIIconView();
+    $action1->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
    $action1->setSpriteIcon('flag-grey');
    $action1->setHref('#');

--- a/src/applications/uiexample/examples/PhabricatorWorkboardExample.php
+++ b/src/applications/uiexample/examples/PhabricatorWorkboardExample.php
@ -131,21 +131,21 @@ final class PhabricatorWorkboardExample extends PhabricatorUIExample {
          ->addPanel($panel2)
          ->addPanel($panel3);

-    $action = new PhabricatorActionIconView();
+    $action = new PHUIIconView();
    $action->setHref('/maniphest/task/create');
    $action->setImage('/rsrc/image/actions/edit.png');

-    $person1 = new PhabricatorActionIconView();
+    $person1 = new PHUIIconView();
    $person1->setHref('http://en.wikipedia.org/wiki/George_Washington');
    $person1->setImage(
      celerity_get_resource_uri('/rsrc/image/people/washington.png'));

-    $person2 = new PhabricatorActionIconView();
+    $person2 = new PHUIIconView();
    $person2->setHref('http://en.wikipedia.org/wiki/Warren_G._Harding');
    $person2->setImage(
      celerity_get_resource_uri('/rsrc/image/people/harding.png'));

-    $person3 = new PhabricatorActionIconView();
+    $person3 = new PHUIIconView();
    $person3->setHref('http://en.wikipedia.org/wiki/William_Howard_Taft');
    $person3->setImage(
      celerity_get_resource_uri('/rsrc/image/people/taft.png'));
--- a/src/infrastructure/celerity/CeleritySpriteGenerator.php
+++ b/src/infrastructure/celerity/CeleritySpriteGenerator.php
@ -120,7 +120,7 @@ final class CeleritySpriteGenerator {
        $tcss[] = '.actions-'.$icon.$suffix;
        if ($color == 'dark') {
          $tcss[] = '.device-desktop '.
-            '.actions-'.$icon.'-grey.phabricator-action-icon-item-link:hover';
+            '.actions-'.$icon.'-grey.phui-icon-item-link:hover';
        }

        $sprite->setTargetCSS(implode(', ', $tcss));
@ -308,8 +308,8 @@ final class CeleritySpriteGenerator {
      $path = $this->getPath('tokens_1x/'.$token.'.png');

      $sprite = id(clone $template)
-        ->setName('token-'.$token)
-        ->setTargetCSS('.token-'.$token)
+        ->setName('tokens-'.$token)
+        ->setTargetCSS('.tokens-'.$token)
        ->setSourceFile($path, 1);

      $sprites[] = $sprite;
--- a/src/view/layout/PhabricatorActionHeaderView.php
+++ b/src/view/layout/PhabricatorActionHeaderView.php
@ -19,7 +19,7 @@ final class PhabricatorActionHeaderView extends AphrontView {
  private $iconColor = PhabricatorActionHeaderView::ICON_GREY;
  private $headerColor;

-  public function addAction(PhabricatorActionIconView $action) {
+  public function addAction(PHUIIconView $action) {
    $this->actions[] = $action;
    return $this;
  }
--- a/src/view/layout/PhabricatorWorkboardView.php
+++ b/src/view/layout/PhabricatorWorkboardView.php
@ -16,7 +16,7 @@ final class PhabricatorWorkboardView extends AphrontView {
    return $this;
  }

-  public function addAction(PhabricatorActionIconView $action) {
+  public function addAction(PHUIIconView $action) {
    $this->actions[] = $action;
    return $this;
  }
--- a/src/view/phui/PHUIFeedStoryView.php
+++ b/src/view/phui/PHUIFeedStoryView.php
@ -80,7 +80,7 @@ final class PHUIFeedStoryView extends AphrontView {

    $actor = '';
    if ($this->image) {
-      $actor = new PhabricatorActionIconView();
+      $actor = new PHUIIconView();
      $actor->setImage($this->image);
      if ($this->imageHref) {
        $actor->setHref($this->imageHref);
@ -118,9 +118,9 @@ final class PHUIFeedStoryView extends AphrontView {

    $icon = null;
    if ($this->appIcon) {
-      $icon = new PhabricatorActionIconView();
+      $icon = new PHUIIconView();
      $icon->setSpriteIcon($this->appIcon);
-      $icon->setSpriteSheet(PhabricatorActionIconView::SPRITE_APPS);
+      $icon->setSpriteSheet(PHUIIconView::SPRITE_APPS);
    }

    $foot = phutil_tag(
--- a/src/view/layout/PhabricatorActionIconView.php
+++ b/src/view/layout/PhabricatorActionIconView.php
@ -1,14 +1,19 @@
 <?php

-final class PhabricatorActionIconView extends AphrontView {
+final class PHUIIconView extends AphrontView {

  const SPRITE_MINICONS = 'minicons';
  const SPRITE_ACTIONS = 'actions';
  const SPRITE_APPS = 'apps';
+  const SPRITE_TOKENS = 'tokens';
+
+  const HEAD_SMALL = 'phuihead-small';
+  const HEAD_MEDIUM = 'phuihead-medium';

  private $href;
  private $workflow;
  private $image;
+  private $headSize = null;
  private $spriteIcon;
  private $spriteSheet;

@ -27,6 +32,11 @@ final class PhabricatorActionIconView extends AphrontView {
    return $this;
  }

+  public function setHeadSize($size) {
+    $this->headSize = $size;
+    return $this;
+  }
+
  public function setSpriteIcon($sprite) {
    $this->spriteIcon = $sprite;
    return $this;
@ -38,18 +48,18 @@ final class PhabricatorActionIconView extends AphrontView {
  }

  public function render() {
-    require_celerity_resource('phabricator-action-icon-view-css');
+    require_celerity_resource('phui-icon-view-css');

    $tag = 'span';
    if ($this->href) {
      $tag = 'a';
    }

+    $classes = array();
+    $classes[] = 'phui-icon-item-link';
+
    if ($this->spriteIcon) {
      require_celerity_resource('sprite-'.$this->spriteSheet.'-css');
-
-      $classes = array();
-      $classes[] = 'phabricator-action-icon-item-link';
      $classes[] = 'sprite-'.$this->spriteSheet;
      $classes[] = $this->spriteSheet.'-'.$this->spriteIcon;

@ -62,11 +72,15 @@ final class PhabricatorActionIconView extends AphrontView {
          ),
          '');
    } else {
+      if ($this->headSize) {
+        $classes[] = $this->headSize;
+      }
+
      $action_icon = phutil_tag(
        $tag,
          array(
            'href'  => $this->href ? $this->href : null,
-            'class' => 'phabricator-action-icon-item-link',
+            'class' => implode(' ', $classes),
            'sigil' => $this->workflow ? 'workflow' : null,
            'style' => 'background-image: url('.$this->image.');'
          ),
--- a/webroot/rsrc/css/application/tokens/tokens.css
+++ b/webroot/rsrc/css/application/tokens/tokens.css
@ -2,13 +2,6 @@
 * @provides tokens-css
 */

-.token-icon {
-  position: relative;
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-}
-
 button.token-button {
  background: #f6f6f6;
  border: 1px solid #333333;
--- a/webroot/rsrc/css/layout/phabricator-action-icon-view.css
+++ b/webroot/rsrc/css/layout/phabricator-action-icon-view.css
@ -1,21 +0,0 @@
-/**
- * @provides phabricator-action-icon-view-css
- */
-
-.phabricator-action-icon-item-link.sprite-minicons {
-  display: block;
-  height: 16px;
-  width: 16px;
-}
-
-.phabricator-action-icon-item-link.sprite-actions {
-  display: block;
-  height: 24px;
-  width: 24px;
-}
-
-.phabricator-action-icon-item-link.sprite-apps {
-  display: block;
-  height: 14px;
-  width: 14px;
-}
--- a/webroot/rsrc/css/layout/phabricator-workboard-view.css
+++ b/webroot/rsrc/css/layout/phabricator-workboard-view.css
@ -48,14 +48,14 @@
  margin: 0px;
 }

-.phabricator-workboard-view .phabricator-action-icon-item-link {
+.phabricator-workboard-view .phui-icon-item-link {
  display: block;
  width: 50px;
  height: 50px;
  margin: 5px 4px 5px 5px;
 }

-.device-phone .phabricator-workboard-view .phabricator-action-icon-item-link {
+.device-phone .phabricator-workboard-view .phui-icon-item-link {
  margin-right: 0;
 }

--- a/webroot/rsrc/css/phui/phui-feed-story.css
+++ b/webroot/rsrc/css/phui/phui-feed-story.css
@ -16,7 +16,7 @@
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
 }

-.phui-feed-story-head .phabricator-action-icon-item-link {
+.phui-feed-story-head .phui-icon-item-link {
  width: 35px;
  height: 35px;
  background-size: 35px;
@ -42,7 +42,7 @@
  padding: 10px;
 }

-.phui-feed-story-foot .phabricator-action-icon-item-link {
+.phui-feed-story-foot .phui-icon-item-link {
  float: left;
  display: inline-block;
  margin-right: 5px;
--- a/webroot/rsrc/css/phui/phui-icon.css
+++ b/webroot/rsrc/css/phui/phui-icon.css
@ -0,0 +1,41 @@
+/**
+ * @provides phui-icon-view-css
+ */
+
+.phui-icon-item-link {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.phui-icon-item-link.sprite-minicons {
+  height: 16px;
+  width: 16px;
+}
+
+.phui-icon-item-link.sprite-actions {
+  height: 24px;
+  width: 24px;
+}
+
+.phui-icon-item-link.sprite-apps {
+  height: 14px;
+  width: 14px;
+}
+
+.phui-icon-item-link.sprite-tokens {
+  height: 16px;
+  width: 16px;
+}
+
+.phui-icon-item-link.phuihead-medium {
+  height: 50px;
+  width: 50px;
+}
+
+.phui-icon-item-link.phuihead-small {
+  height: 35px;
+  width: 35px;
+  background-size: 35px;
+}
+
+
--- a/webroot/rsrc/css/sprite-actions.css
+++ b/webroot/rsrc/css/sprite-actions.css
@ -18,43 +18,43 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
 }


-.actions-close-dark, .device-desktop .actions-close-grey.phabricator-action-icon-item-link:hover {
+.actions-close-dark, .device-desktop .actions-close-grey.phui-icon-item-link:hover {
  background-position: 0px 0px;
 }

-.actions-flag-dark, .device-desktop .actions-flag-grey.phabricator-action-icon-item-link:hover {
+.actions-flag-dark, .device-desktop .actions-flag-grey.phui-icon-item-link:hover {
  background-position: -25px 0px;
 }

-.actions-heart-dark, .device-desktop .actions-heart-grey.phabricator-action-icon-item-link:hover {
+.actions-heart-dark, .device-desktop .actions-heart-grey.phui-icon-item-link:hover {
  background-position: -50px 0px;
 }

-.actions-move-dark, .device-desktop .actions-move-grey.phabricator-action-icon-item-link:hover {
+.actions-move-dark, .device-desktop .actions-move-grey.phui-icon-item-link:hover {
  background-position: -75px 0px;
 }

-.actions-new-dark, .device-desktop .actions-new-grey.phabricator-action-icon-item-link:hover {
+.actions-new-dark, .device-desktop .actions-new-grey.phui-icon-item-link:hover {
  background-position: -100px 0px;
 }

-.actions-search-dark, .device-desktop .actions-search-grey.phabricator-action-icon-item-link:hover {
+.actions-search-dark, .device-desktop .actions-search-grey.phui-icon-item-link:hover {
  background-position: 0px -25px;
 }

-.actions-settings-dark, .device-desktop .actions-settings-grey.phabricator-action-icon-item-link:hover {
+.actions-settings-dark, .device-desktop .actions-settings-grey.phui-icon-item-link:hover {
  background-position: -25px -25px;
 }

-.actions-star-dark, .device-desktop .actions-star-grey.phabricator-action-icon-item-link:hover {
+.actions-star-dark, .device-desktop .actions-star-grey.phui-icon-item-link:hover {
  background-position: -50px -25px;
 }

-.actions-tag-dark, .device-desktop .actions-tag-grey.phabricator-action-icon-item-link:hover {
+.actions-tag-dark, .device-desktop .actions-tag-grey.phui-icon-item-link:hover {
  background-position: -75px -25px;
 }

-.actions-wrench-dark, .device-desktop .actions-wrench-grey.phabricator-action-icon-item-link:hover {
+.actions-wrench-dark, .device-desktop .actions-wrench-grey.phui-icon-item-link:hover {
  background-position: -100px -25px;
 }

--- a/webroot/rsrc/css/sprite-tokens.css
+++ b/webroot/rsrc/css/sprite-tokens.css
@ -11,66 +11,66 @@



-.token-coin-1 {
+.tokens-coin-1 {
  background-position: 0px 0px;
 }

-.token-coin-2 {
+.tokens-coin-2 {
  background-position: -17px 0px;
 }

-.token-coin-3 {
+.tokens-coin-3 {
  background-position: -34px 0px;
 }

-.token-coin-4 {
+.tokens-coin-4 {
  background-position: -51px 0px;
 }

-.token-heart-1 {
+.tokens-heart-1 {
  background-position: 0px -17px;
 }

-.token-heart-2 {
+.tokens-heart-2 {
  background-position: -17px -17px;
 }

-.token-like-1 {
+.tokens-like-1 {
  background-position: -34px -17px;
 }

-.token-like-2 {
+.tokens-like-2 {
  background-position: -51px -17px;
 }

-.token-medal-1 {
+.tokens-medal-1 {
  background-position: 0px -34px;
 }

-.token-medal-2 {
+.tokens-medal-2 {
  background-position: -17px -34px;
 }

-.token-medal-3 {
+.tokens-medal-3 {
  background-position: -34px -34px;
 }

-.token-medal-4 {
+.tokens-medal-4 {
  background-position: -51px -34px;
 }

-.token-misc-1 {
+.tokens-misc-1 {
  background-position: 0px -51px;
 }

-.token-misc-2 {
+.tokens-misc-2 {
  background-position: -17px -51px;
 }

-.token-misc-3 {
+.tokens-misc-3 {
  background-position: -34px -51px;
 }

-.token-misc-4 {
+.tokens-misc-4 {
  background-position: -51px -51px;
 }