Add setBackground to PHUIIconView

Summary: Ref T11132. Adds a background color option to PHUIIconView, for use whereever, and NUX. Also normalize icon placement for mixed image/icon result list.

Test Plan: Test in UIExamples, and Global Settings.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Maniphest Tasks: T11132

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'ba6d7e7a',
+    'core.pkg.css' => 'ed7ae7bb',
     'core.pkg.js' => 'b562c3db',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '3fb7f532',
@@ -112,7 +112,7 @@ return array(
     'rsrc/css/font/font-aleo.css' => '8bdb2835',
     'rsrc/css/font/font-awesome.css' => '2b7ebbcc',
     'rsrc/css/font/font-lato.css' => 'c7ccd872',
-    'rsrc/css/font/phui-font-icon-base.css' => '6449bce8',
+    'rsrc/css/font/phui-font-icon-base.css' => '4e8274c4',
     'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82',
     'rsrc/css/layout/phabricator-source-code-view.css' => 'cbeef983',
     'rsrc/css/phui/calendar/phui-calendar-day.css' => '572b1893',
@@ -141,13 +141,13 @@ return array(
     'rsrc/css/phui/phui-header-view.css' => '06385974',
     'rsrc/css/phui/phui-hovercard.css' => 'de1a2119',
     'rsrc/css/phui/phui-icon-set-selector.css' => '1ab67aad',
-    'rsrc/css/phui/phui-icon.css' => 'd0534b71',
+    'rsrc/css/phui/phui-icon.css' => 'b1dbd620',
     'rsrc/css/phui/phui-image-mask.css' => 'a8498f9c',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-info-view.css' => '28efab79',
     'rsrc/css/phui/phui-list.css' => '9da2aa00',
     'rsrc/css/phui/phui-object-box.css' => '6b487c57',
-    'rsrc/css/phui/phui-object-item-list-view.css' => 'aefe157c',
+    'rsrc/css/phui/phui-object-item-list-view.css' => '40010767',
     'rsrc/css/phui/phui-pager.css' => 'bea33d23',
     'rsrc/css/phui/phui-pinboard-view.css' => '2495140e',
     'rsrc/css/phui/phui-profile-menu.css' => '8a3fc181',
@@ -840,7 +840,7 @@ return array(
     'phui-document-view-css' => 'c32e8dec',
     'phui-document-view-pro-css' => 'dc3d46ed',
     'phui-feed-story-css' => 'aa49845d',
-    'phui-font-icon-base-css' => '6449bce8',
+    'phui-font-icon-base-css' => '4e8274c4',
     'phui-fontkit-css' => '9cda225e',
     'phui-form-css' => 'aac1d51d',
     'phui-form-view-css' => '76b4a46c',
@@ -849,14 +849,14 @@ return array(
     'phui-hovercard' => '1bd28176',
     'phui-hovercard-view-css' => 'de1a2119',
     'phui-icon-set-selector-css' => '1ab67aad',
-    'phui-icon-view-css' => 'd0534b71',
+    'phui-icon-view-css' => 'b1dbd620',
     'phui-image-mask-css' => 'a8498f9c',
     'phui-info-panel-css' => '27ea50a1',
     'phui-info-view-css' => '28efab79',
     'phui-inline-comment-view-css' => '5953c28e',
     'phui-list-view-css' => '9da2aa00',
     'phui-object-box-css' => '6b487c57',
-    'phui-object-item-list-view-css' => 'aefe157c',
+    'phui-object-item-list-view-css' => '40010767',
     'phui-pager-css' => 'bea33d23',
     'phui-pinboard-view-css' => '2495140e',
     'phui-profile-menu-css' => '8a3fc181',

src/applications/settings/query/PhabricatorUserPreferencesSearchEngine.php

@@ -62,11 +62,14 @@ final class PhabricatorUserPreferencesSearchEngine
       ->setViewer($viewer);
     foreach ($settings as $setting) {
 
+      $icon = id(new PHUIIconView())
+        ->setIcon('fa-globe')
+        ->setBackground('bg-sky');
+
       $item = id(new PHUIObjectItemView())
         ->setHeader($setting->getDisplayName())
         ->setHref($setting->getEditURI())
-        // TODO: Replace this with NUX Style bg / white icon when built
+        ->setImageIcon($icon)
-        ->setImageIcon('fa-globe')
         ->addAttribute(pht('Edit global default settings for all users.'));
 
       $list->addItem($item);

src/applications/uiexample/examples/PHUIIconExample.php

@@ -130,6 +130,17 @@ final class PHUIIconExample extends PhabricatorUIExample {
           ->addClass('mmr');
     }
 
+    $squares = array('fa-briefcase', 'fa-code', 'fa-globe', 'fa-home');
+    $squareview = array();
+    foreach ($squares as $icon) {
+      $squareview[] =
+        id(new PHUIIconView())
+          ->setIcon($icon)
+          ->setBackground('bg-blue')
+          ->setHref('#')
+          ->addClass('mmr');
+    }
+
     $layout_cicons = id(new PHUIBoxView())
       ->appendChild($cicons)
       ->addMargin(PHUI::MARGIN_LARGE);
@@ -155,6 +166,10 @@ final class PHUIIconExample extends PhabricatorUIExample {
       ->addMargin(PHUI::MARGIN_MEDIUM);
 
     $layout5 = id(new PHUIBoxView())
+      ->appendChild($squareview)
+      ->addMargin(PHUI::MARGIN_MEDIUM);
+
+    $layout6 = id(new PHUIBoxView())
       ->appendChild($loginview)
       ->addMargin(PHUI::MARGIN_MEDIUM);
 
@@ -187,9 +202,13 @@ final class PHUIIconExample extends PhabricatorUIExample {
       ->appendChild($layout4);
 
     $wrap5 = id(new PHUIObjectBoxView())
-      ->setHeaderText(pht('Authentication'))
+      ->setHeaderText(pht('Squares'))
       ->appendChild($layout5);
 
+    $wrap6 = id(new PHUIObjectBoxView())
+      ->setHeaderText(pht('Authentication'))
+      ->appendChild($layout6);
+
     return phutil_tag(
       'div',
         array(
@@ -202,6 +221,7 @@ final class PHUIIconExample extends PhabricatorUIExample {
           $wrap3,
           $wrap4,
           $wrap5,
+          $wrap6,
         ));
   }
 }

src/view/phui/PHUIIconView.php

@@ -17,6 +17,7 @@ final class PHUIIconView extends AphrontTagView {
   private $spriteSheet;
   private $iconFont;
   private $iconColor;
+  private $iconBackground;
 
   public function setHref($href) {
     $this->href = $href;
@@ -54,6 +55,11 @@ final class PHUIIconView extends AphrontTagView {
     return $this;
   }
 
+  public function setBackground($color) {
+    $this->iconBackground = $color;
+    return $this;
+  }
+
   protected function getTagName() {
     $tag = 'span';
     if ($this->href) {
@@ -79,6 +85,10 @@ final class PHUIIconView extends AphrontTagView {
       if ($this->iconColor) {
         $classes[] = $this->iconColor;
       }
+      if ($this->iconBackground) {
+        $classes[] = 'phui-icon-square';
+        $classes[] = $this->iconBackground;
+      }
     } else {
       if ($this->headSize) {
         $classes[] = $this->headSize;

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

@@ -151,6 +151,45 @@
   color: rgba({$alphagrey},0.3);
 }
 
+/* Backgrounds */
+
+.phui-icon-view.bg-dark {
+  background-color: {$darkgreytext};
+}
+.phui-icon-view.bg-bluegrey {
+  background-color: {$bluetext};
+}
+.phui-icon-view.bg-red  {
+  background-color: {$red};
+}
+.phui-icon-view.bg-orange {
+  background-color: {$orange};
+}
+.phui-icon-view.bg-yellow {
+  background-color: {$yellow};
+}
+.phui-icon-view.bg-green {
+  background-color: {$green}
+}
+.phui-icon-view.bg-blue {
+  background-color: {$blue};
+}
+.phui-icon-view.bg-sky {
+  background-color: {$sky};
+}
+.phui-icon-view.bg-indigo {
+  background-color: {$indigo};
+}
+.phui-icon-view.bg-pink {
+  background-color: {$pink};
+}
+.phui-icon-view.bg-fire {
+  background-color: {$fire};
+}
+.phui-icon-view.bg-violet {
+  background-color: {$violet};
+}
+
 /* Hovers */
 
 .device-desktop a.phui-icon-view.lightgreytext:hover,

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

@@ -80,3 +80,20 @@ a.phui-icon-circle:hover {
 a.phui-icon-circle:hover .phui-icon-view {
   color: {$sky};
 }
+
+/* - Icon in a Square ------------------------------------------------------- */
+
+.phui-icon-view.phui-icon-square {
+  height: 40px;
+  width: 40px;
+  color: #fff;
+  font-size: 26px;
+  text-align: center;
+  line-height: 38px;
+  border-radius: 3px;
+}
+
+a.phui-icon-view.phui-icon-square:hover {
+  text-decoration: none;
+  color: #fff;
+}

webroot/rsrc/css/phui/phui-object-item-list-view.css

@@ -651,37 +651,19 @@ ul.phui-object-item-list-view .phui-object-item-selected
 
 .phui-object-item-image-icon {
   background: none;
-  width: 30px;
+  width: 40px;
-  height: 30px;
+  height: 40px;
-  margin: 4px 0;
+  margin: 8px 6px;
   position: absolute;
 }
 
 .phui-object-item-image-icon .phui-icon-view {
   position: absolute;
-  width: 24px;
+  width: 40px;
-  height: 24px;
+  height: 40px;
-  left: 6px;
+  font-size: 26px;
-  top: 10px;
-  font-size: 24px;
   text-align: center;
-  vertical-align: bottom;
+  line-height: 36px;
-}
-
-.phui-object-item-with-image-icon .phui-object-item-frame {
-  min-height: 48px;
-}
-
-.phui-object-item-with-image-icon .phui-object-item-content-box {
-  margin-left: 36px;
-}
-
-.device-desktop .phui-object-item-launcher-list .phui-object-item-content {
-  margin-right: 0;
-}
-
-.device-desktop .phui-object-item-launcher-list .phui-object-icon-pane {
-  width: auto;
 }
 
 .phui-object-item-image {
@@ -693,10 +675,12 @@ ul.phui-object-item-list-view .phui-object-item-selected
   position: absolute;
 }
 
+.phui-object-item-with-image-icon .phui-object-item-frame,
 .phui-object-item-with-image .phui-object-item-frame {
   min-height: 52px;
 }
 
+.phui-object-item-with-image-icon .phui-object-item-content-box,
 .phui-object-item-with-image .phui-object-item-content-box {
   margin-left: 46px;
 }