PHUIIconCircleView

Summary: Icon in a circle. Base class, not much in the way of color choices.

Test Plan:
UIExamples, Chrome.

{F1062027}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'eacc9293',
+    'core.pkg.css' => '9d3a79f4',
     'core.pkg.js' => '573e6664',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '2de124c9',
@@ -134,7 +134,7 @@ return array(
     'rsrc/css/phui/phui-form.css' => '0b98e572',
     'rsrc/css/phui/phui-header-view.css' => '55bb32dd',
     'rsrc/css/phui/phui-icon-set-selector.css' => '1ab67aad',
-    'rsrc/css/phui/phui-icon.css' => 'b0a6b1b6',
+    'rsrc/css/phui/phui-icon.css' => '3f33ab57',
     'rsrc/css/phui/phui-image-mask.css' => '5a8b09c8',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-info-view.css' => '6d7c3509',
@@ -812,7 +812,7 @@ return array(
     'phui-form-view-css' => '4a1a0f5e',
     'phui-header-view-css' => '55bb32dd',
     'phui-icon-set-selector-css' => '1ab67aad',
-    'phui-icon-view-css' => 'b0a6b1b6',
+    'phui-icon-view-css' => '3f33ab57',
     'phui-image-mask-css' => '5a8b09c8',
     'phui-info-panel-css' => '27ea50a1',
     'phui-info-view-css' => '6d7c3509',

src/__phutil_library_map__.php

@@ -1491,6 +1491,7 @@ phutil_register_library_map(array(
     'PHUIHandleTagListView' => 'applications/phid/view/PHUIHandleTagListView.php',
     'PHUIHandleView' => 'applications/phid/view/PHUIHandleView.php',
     'PHUIHeaderView' => 'view/phui/PHUIHeaderView.php',
+    'PHUIIconCircleView' => 'view/phui/PHUIIconCircleView.php',
     'PHUIIconExample' => 'applications/uiexample/examples/PHUIIconExample.php',
     'PHUIIconView' => 'view/phui/PHUIIconView.php',
     'PHUIImageMaskExample' => 'applications/uiexample/examples/PHUIImageMaskExample.php',
@@ -5640,6 +5641,7 @@ phutil_register_library_map(array(
     'PHUIHandleTagListView' => 'AphrontTagView',
     'PHUIHandleView' => 'AphrontView',
     'PHUIHeaderView' => 'AphrontTagView',
+    'PHUIIconCircleView' => 'AphrontTagView',
     'PHUIIconExample' => 'PhabricatorUIExample',
     'PHUIIconView' => 'AphrontTagView',
     'PHUIImageMaskExample' => 'PhabricatorUIExample',

src/applications/uiexample/examples/PHUIIconExample.php

@@ -110,6 +110,26 @@ final class PHUIIconExample extends PhabricatorUIExample {
           ->addClass(PHUI::MARGIN_SMALL_RIGHT);
     }
 
+    $circles = array('fa-pencil', 'fa-chevron-left', 'fa-chevron-right');
+    $circleview = array();
+    foreach ($circles as $circle) {
+      $circleview[] =
+        id(new PHUIIconCircleView())
+          ->setIcon($circle)
+          ->setHref('#')
+          ->addClass('mmr');
+    }
+
+    $circles = array('fa-plus', 'fa-bars', 'fa-paw');
+    foreach ($circles as $circle) {
+      $circleview[] =
+        id(new PHUIIconCircleView())
+          ->setIcon($circle)
+          ->setSize(PHUIIconCircleView::MEDIUM)
+          ->setHref('#')
+          ->addClass('mmr');
+    }
+
     $layout_cicons = id(new PHUIBoxView())
       ->appendChild($cicons)
       ->addMargin(PHUI::MARGIN_LARGE);
@@ -130,6 +150,10 @@ final class PHUIIconExample extends PhabricatorUIExample {
       ->appendChild($tokenview)
       ->addMargin(PHUI::MARGIN_MEDIUM);
 
+    $layout4 = id(new PHUIBoxView())
+      ->appendChild($circleview)
+      ->addMargin(PHUI::MARGIN_MEDIUM);
+
     $layout5 = id(new PHUIBoxView())
       ->appendChild($loginview)
       ->addMargin(PHUI::MARGIN_MEDIUM);
@@ -158,6 +182,10 @@ final class PHUIIconExample extends PhabricatorUIExample {
       ->setHeaderText(pht('Tokens'))
       ->appendChild($layout3);
 
+    $wrap4 = id(new PHUIObjectBoxView())
+      ->setHeaderText(pht('Circles'))
+      ->appendChild($layout4);
+
     $wrap5 = id(new PHUIObjectBoxView())
       ->setHeaderText(pht('Authentication'))
       ->appendChild($layout5);
@@ -172,6 +200,7 @@ final class PHUIIconExample extends PhabricatorUIExample {
           $transforms,
           $wrap2,
           $wrap3,
+          $wrap4,
           $wrap5,
         ));
   }

src/view/phui/PHUIIconCircleView.php

@@ -0,0 +1,67 @@
+<?php
+
+final class PHUIIconCircleView extends AphrontTagView {
+
+  private $href = null;
+  private $icon;
+  private $color;
+  private $size;
+
+  const SMALL = 'circle-small';
+  const MEDIUM = 'circle-medium';
+
+  public function setHref($href) {
+    $this->href = $href;
+    return $this;
+  }
+
+  public function setIcon($icon) {
+    $this->icon = $icon;
+    return $this;
+  }
+
+  public function setColor($color) {
+    $this->color = $color;
+    return $this;
+  }
+
+  public function setSize($size) {
+    $this->size = $size;
+    return $this;
+  }
+
+  protected function getTagName() {
+    $tag = 'span';
+    if ($this->href) {
+      $tag = 'a';
+    }
+    return $tag;
+  }
+
+  protected function getTagAttributes() {
+    require_celerity_resource('phui-icon-view-css');
+
+    $classes = array();
+    $classes[] = 'phui-icon-circle';
+
+    if ($this->color) {
+      $classes[] = 'phui-icon-circle-'.$this->color;
+    }
+
+    if ($this->size) {
+      $classes[] = $this->size;
+    }
+
+    return array(
+      'href' => $this->href,
+      'class' => $classes,
+    );
+  }
+
+  protected function getTagContent() {
+    return id(new PHUIIconView())
+      ->setIconFont($this->icon)
+      ->addClass($this->color);
+  }
+
+}

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

@@ -38,3 +38,45 @@ a.phui-icon-view:hover {
   text-decoration: none;
   color: {$sky};
 }
+
+/* - Icon in a Circle ------------------------------------------------------- */
+
+.phui-icon-circle {
+  border: 1px solid {$lightblueborder};
+  border-radius: 24px;
+  height: 24px;
+  width: 24px;
+  text-align: center;
+  display: inline-block;
+  cursor: pointer;
+}
+
+.phui-icon-circle.circle-medium {
+  height: 36px;
+  width: 36px;
+  border-radius: 36px;
+}
+
+.phui-icon-circle .phui-icon-view {
+  height: 24px;
+  width: 24px;
+  font-size: 11px;
+  line-height: 24px;
+  color: {$lightblueborder};
+  cursor: pointer;
+}
+
+.phui-icon-circle.circle-medium .phui-icon-view {
+  font-size: 18px;
+  line-height: 36px;
+}
+
+a.phui-icon-circle:hover {
+  text-decoration: none;
+  border-color: {$sky};
+  cursor: pointer;
+}
+
+a.phui-icon-circle:hover .phui-icon-view {
+  color: {$sky};
+}