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
2024-12-18 11:30:55 +01:00 · 2016-08-19 12:49:38 -07:00 · 2016-08-19 12:49:38 -07:00 · f379858874
commit f379858874
parent 3bd0da0ec2
7 changed files with 108 additions and 35 deletions
--- a/resources/celerity/map.php
+++ b/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',
--- a/src/applications/settings/query/PhabricatorUserPreferencesSearchEngine.php
+++ b/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('fa-globe')
+        ->setImageIcon($icon)
        ->addAttribute(pht('Edit global default settings for all users.'));

      $list->addItem($item);
--- a/src/applications/uiexample/examples/PHUIIconExample.php
+++ b/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,
        ));
  }
 }
--- a/src/view/phui/PHUIIconView.php
+++ b/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;
--- a/webroot/rsrc/css/font/phui-font-icon-base.css
+++ b/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,
--- a/webroot/rsrc/css/phui/phui-icon.css
+++ b/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;
+}
--- a/webroot/rsrc/css/phui/phui-object-item-list-view.css
+++ b/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;
-  height: 30px;
-  margin: 4px 0;
+  width: 40px;
+  height: 40px;
+  margin: 8px 6px;
  position: absolute;
 }

 .phui-object-item-image-icon .phui-icon-view {
  position: absolute;
-  width: 24px;
-  height: 24px;
-  left: 6px;
-  top: 10px;
-  font-size: 24px;
+  width: 40px;
+  height: 40px;
+  font-size: 26px;
  text-align: center;
-  vertical-align: bottom;
-}
-
-.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;
+  line-height: 36px;
 }

 .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;
 }