Payment sprite icons.

Summary: Adds some icons for taking money.

Test Plan: UIExamples

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

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

resources/sprite/manifest/payments.json

@@ -0,0 +1,45 @@
+{
+  "version" : 1,
+  "sprites" : {
+    "payments-americanexpress" : {
+      "name" : "payments-americanexpress",
+      "rule" : ".payments-americanexpress",
+      "hash" : "ace986273a0bae308c4018e02cdd60f2"
+    },
+    "payments-discover"        : {
+      "name" : "payments-discover",
+      "rule" : ".payments-discover",
+      "hash" : "0b60e5e4c25e0d3bf2c3cb780d7eaf00"
+    },
+    "payments-googlecheckout"  : {
+      "name" : "payments-googlecheckout",
+      "rule" : ".payments-googlecheckout",
+      "hash" : "1f00e015545898e059ca09fa49b239e7"
+    },
+    "payments-mastercard"      : {
+      "name" : "payments-mastercard",
+      "rule" : ".payments-mastercard",
+      "hash" : "49a742b837610f7b37b565ba4899c95c"
+    },
+    "payments-paypal"          : {
+      "name" : "payments-paypal",
+      "rule" : ".payments-paypal",
+      "hash" : "5664cf7acd9fe65d60e1449a33f56ce2"
+    },
+    "payments-visa"            : {
+      "name" : "payments-visa",
+      "rule" : ".payments-visa",
+      "hash" : "ff2ffac55927dbe7a1bf02fdfac561ea"
+    },
+    "payments-worldpay"        : {
+      "name" : "payments-worldpay",
+      "rule" : ".payments-worldpay",
+      "hash" : "acc037ffa26f6caccf290006e39ba1fc"
+    }
+  },
+  "scales"  : [
+    1
+  ],
+  "header"  : "\/**\n * @provides sprite-payments-css\n * @generated\n *\/\n\n.sprite-payments {\n  background-image: url(\/rsrc\/image\/sprite-payments.png);\n  background-repeat: no-repeat;\n}\n\n@media\nonly screen and (min-device-pixel-ratio: 1.5),\nonly screen and (-webkit-min-device-pixel-ratio: 1.5) {\n  .sprite-payments {\n    background-image: url(\/rsrc\/image\/sprite-payments-X2.png);\n    background-size: {X}px {Y}px;\n  }\n}\n",
+  "type"    : "standard"
+}

scripts/celerity/generate_sprites.php

@@ -34,6 +34,7 @@ $sheets = array(
   'minicons' => $generator->buildMiniconsSheet(),
   'conpherence' => $generator->buildConpherenceSheet(),
   'apps-large' => $generator->buildAppsLargeSheet(),
+  'payments' => $generator->buildPaymentsSheet(),
   'tokens' => $generator->buildTokenSheet(),
   'docs' => $generator->buildDocsSheet(),
   'gradient' => $generator->buildGradientSheet(),

src/__celerity_resource_map__.php

@@ -637,6 +637,20 @@ celerity_register_resource_map(array(
     'disk' => '/rsrc/image/sprite-minicons.png',
     'type' => 'png',
   ),
+  '/rsrc/image/sprite-payments-X2.png' =>
+  array(
+    'hash' => 'a896e11842db04bde8c3dc18d6efacd3',
+    'uri' => '/res/a896e118/rsrc/image/sprite-payments-X2.png',
+    'disk' => '/rsrc/image/sprite-payments-X2.png',
+    'type' => 'png',
+  ),
+  '/rsrc/image/sprite-payments.png' =>
+  array(
+    'hash' => '5ac5b872d19a862eabc508c8bf97a53b',
+    'uri' => '/res/5ac5b872/rsrc/image/sprite-payments.png',
+    'disk' => '/rsrc/image/sprite-payments.png',
+    'type' => 'png',
+  ),
   '/rsrc/image/sprite-tokens.png' =>
   array(
     'hash' => '67c46fd75c885b76ecbfe46e71a476cc',
@@ -3609,7 +3623,7 @@ celerity_register_resource_map(array(
   ),
   'phui-icon-view-css' =>
   array(
-    'uri' => '/res/4d0588b4/rsrc/css/phui/phui-icon.css',
+    'uri' => '/res/9d05b3f3/rsrc/css/phui/phui-icon.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3886,6 +3900,15 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/sprite-minicons.css',
   ),
+  'sprite-payments-css' =>
+  array(
+    'uri' => '/res/dcb6e856/rsrc/css/sprite-payments.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/sprite-payments.css',
+  ),
   'sprite-tokens-css' =>
   array(
     'uri' => '/res/edb4e341/rsrc/css/sprite-tokens.css',

src/applications/uiexample/examples/PHUIIconExample.php

@@ -48,6 +48,30 @@ final class PHUIIconExample extends PhabricatorUIExample {
     $person6->setImage(
       celerity_get_resource_uri('/rsrc/image/people/taft.png'));
 
+    $card1 = id(new PHUIIconView())
+      ->setSpriteSheet(PHUIIconView::SPRITE_PAYMENTS)
+      ->setSpriteIcon('visa')
+      ->addClass(PHUI::MARGIN_SMALL_RIGHT);
+
+    $card2 = id(new PHUIIconView())
+      ->setSpriteSheet(PHUIIconView::SPRITE_PAYMENTS)
+      ->setSpriteIcon('mastercard')
+      ->addClass(PHUI::MARGIN_SMALL_RIGHT);
+
+    $card3 = id(new PHUIIconView())
+      ->setSpriteSheet(PHUIIconView::SPRITE_PAYMENTS)
+      ->setSpriteIcon('paypal')
+      ->addClass(PHUI::MARGIN_SMALL_RIGHT);
+
+    $card4 = id(new PHUIIconView())
+      ->setSpriteSheet(PHUIIconView::SPRITE_PAYMENTS)
+      ->setSpriteIcon('americanexpress')
+      ->addClass(PHUI::MARGIN_SMALL_RIGHT);
+
+    $card5 = id(new PHUIIconView())
+      ->setSpriteSheet(PHUIIconView::SPRITE_PAYMENTS)
+      ->setSpriteIcon('googlecheckout');
+
     $actions = array(
       'settings-grey',
       'heart-grey',
@@ -108,6 +132,14 @@ final class PHUIIconExample extends PhabricatorUIExample {
           ->addPadding(PHUI::PADDING_SMALL)
           ->setShadow(true));
 
+    $layout4 =
+      array(
+        id(new PHUIBoxView())
+          ->appendChild(array($card1, $card2, $card3, $card4, $card5))
+          ->addMargin(PHUI::MARGIN_MEDIUM)
+          ->addPadding(PHUI::PADDING_MEDIUM)
+          ->setShadow(true));
+
     $head1 = id(new PhabricatorHeaderView())
       ->setHeader(pht('Action Icons!'));
 
@@ -117,6 +149,9 @@ final class PHUIIconExample extends PhabricatorUIExample {
     $head3 = id(new PhabricatorHeaderView())
       ->setHeader(pht('Tokens'));
 
+    $head4 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('Payments'));
+
     $wrap1 = id(new PHUIBoxView())
       ->appendChild($layout1)
       ->addMargin(PHUI::MARGIN_LARGE);
@@ -129,6 +164,10 @@ final class PHUIIconExample extends PhabricatorUIExample {
       ->appendChild($layout3)
       ->addMargin(PHUI::MARGIN_LARGE);
 
+    $wrap4 = id(new PHUIBoxView())
+      ->appendChild($layout4)
+      ->addMargin(PHUI::MARGIN_LARGE);
+
     return phutil_tag(
       'div',
         array(),
@@ -138,7 +177,9 @@ final class PHUIIconExample extends PhabricatorUIExample {
           $head2,
           $wrap2,
           $head3,
-          $wrap3
+          $wrap3,
+          $head4,
+          $wrap4
         ));
         }
 }

src/infrastructure/celerity/CeleritySpriteGenerator.php

@@ -332,6 +332,37 @@ final class CeleritySpriteGenerator {
     return $sheet;
   }
 
+  public function buildPaymentsSheet() {
+    $icons = $this->getDirectoryList('payments_2x');
+    $scales = array(
+      '2x' => 1,
+    );
+    $template = id(new PhutilSprite())
+      ->setSourceSize(60, 32);
+
+    $sprites = array();
+    $prefix = 'payments_';
+    foreach ($icons as $icon) {
+      $sprite = id(clone $template)
+        ->setName('payments-'.$icon)
+        ->setTargetCSS('.payments-'.$icon);
+
+      foreach ($scales as $scale_key => $scale) {
+        $path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png');
+        $sprite->setSourceFile($path, $scale);
+      }
+      $sprites[] = $sprite;
+    }
+
+    $sheet = $this->buildSheet('payments', true);
+    $sheet->setScales($scales);
+    foreach ($sprites as $sprite) {
+      $sheet->addSprite($sprite);
+    }
+
+    return $sheet;
+  }
+
 
   public function buildConpherenceSheet() {
     $name = 'conpherence';

src/view/phui/PHUIIconView.php

@@ -6,6 +6,7 @@ final class PHUIIconView extends AphrontTagView {
   const SPRITE_ACTIONS = 'actions';
   const SPRITE_APPS = 'apps';
   const SPRITE_TOKENS = 'tokens';
+  const SPRITE_PAYMENTS = 'payments';
 
   const HEAD_SMALL = 'phuihead-small';
   const HEAD_MEDIUM = 'phuihead-medium';

webroot/rsrc/css/phui/phui-icon.css

@@ -27,6 +27,11 @@
   width: 16px;
 }
 
+.phui-icon-item-link.sprite-payments {
+  height: 32px;
+  width: 60px;
+}
+
 .phui-icon-item-link.phuihead-medium {
   height: 50px;
   width: 50px;

webroot/rsrc/css/sprite-payments.css

@@ -0,0 +1,47 @@
+/**
+ * @provides sprite-payments-css
+ * @generated
+ */
+
+.sprite-payments {
+  background-image: url(/rsrc/image/sprite-payments.png);
+  background-repeat: no-repeat;
+}
+
+@media
+only screen and (min-device-pixel-ratio: 1.5),
+only screen and (-webkit-min-device-pixel-ratio: 1.5) {
+  .sprite-payments {
+    background-image: url(/rsrc/image/sprite-payments-X2.png);
+    background-size: 122px 132px;
+  }
+}
+
+
+.payments-americanexpress {
+  background-position: 0px 0px;
+}
+
+.payments-discover {
+  background-position: -61px 0px;
+}
+
+.payments-googlecheckout {
+  background-position: 0px -33px;
+}
+
+.payments-mastercard {
+  background-position: -61px -33px;
+}
+
+.payments-paypal {
+  background-position: 0px -66px;
+}
+
+.payments-visa {
+  background-position: -61px -66px;
+}
+
+.payments-worldpay {
+  background-position: 0px -99px;
+}