Slimmer Shade Tags

Summary: Shaves a pixel for use in ObjectLists.

Test Plan:
UIExamples.

{F170655}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
 return array(
   'names' =>
   array(
-    'core.pkg.css' => 'b2a7a97c',
+    'core.pkg.css' => 'c494bff8',
     'core.pkg.js' => '834b4eda',
     'darkconsole.pkg.js' => 'df001cab',
     'differential.pkg.css' => '4a93db37',
@@ -141,7 +141,7 @@ return array(
     'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b',
     'rsrc/css/phui/phui-spacing.css' => '042804d6',
     'rsrc/css/phui/phui-status.css' => '2f562399',
-    'rsrc/css/phui/phui-tag-view.css' => '4f920464',
+    'rsrc/css/phui/phui-tag-view.css' => '30dd4e6f',
     'rsrc/css/phui/phui-text.css' => '23e9b4b7',
     'rsrc/css/phui/phui-timeline-view.css' => 'bbd990d0',
     'rsrc/css/phui/phui-workboard-view.css' => '2bf82d00',
@@ -787,7 +787,7 @@ return array(
     'phui-remarkup-preview-css' => '19ad512b',
     'phui-spacing-css' => '042804d6',
     'phui-status-list-view-css' => '2f562399',
-    'phui-tag-view-css' => '4f920464',
+    'phui-tag-view-css' => '30dd4e6f',
     'phui-text-css' => '23e9b4b7',
     'phui-timeline-view-css' => 'bbd990d0',
     'phui-workboard-view-css' => '2bf82d00',

src/applications/uiexample/examples/PHUITagExample.php

@@ -165,6 +165,14 @@ final class PHUITagExample extends PhabricatorUIExample {
         ->setIcon('fa-tags')
         ->setName(ucwords($shade))
         ->setHref('#');
+      $tags[] = hsprintf(' ');
+      $tags[] = id(new PHUITagView())
+        ->setType(PHUITagView::TYPE_OBJECT)
+        ->setShade($shade)
+        ->setSlimShady(true)
+        ->setIcon('fa-tags')
+        ->setName(ucwords($shade))
+        ->setHref('#');
       $tags[] = hsprintf('<br /><br />');
     }
 

src/view/phui/PHUITagView.php

@@ -34,6 +34,7 @@ final class PHUITagView extends AphrontTagView {
   private $external;
   private $icon;
   private $shade;
+  private $slimShady;
 
   public function setType($type) {
     $this->type = $type;
@@ -90,6 +91,11 @@ final class PHUITagView extends AphrontTagView {
     return $this;
   }
 
+  public function setSlimShady($mm) {
+    $this->slimShady = $mm;
+    return $this;
+  }
+
   protected function getTagName() {
     return strlen($this->href) ? 'a' : 'span';
   }
@@ -105,9 +111,11 @@ final class PHUITagView extends AphrontTagView {
     if ($this->shade) {
       $classes[] = 'phui-tag-shade';
       $classes[] = 'phui-tag-shade-'.$this->shade;
+      if ($this->slimShady) {
+        $classes[] = 'phui-tag-shade-slim';
+      }
     }
 
-
     if ($this->icon) {
       $classes[] = 'phui-tag-icon-view';
     }

webroot/rsrc/css/phui/phui-tag-view.css

@@ -158,6 +158,17 @@ a.phui-tag-view:hover
   left: 6px;
 }
 
+.phui-tag-shade-slim .phui-icon-view {
+  font-size: 11px;
+  top: 3px;
+  left: 6px;
+}
+
+.phui-tag-shade-slim.phui-tag-icon-view .phui-tag-core {
+  padding-left: 20px;
+  font-size: 12px;
+}
+
 .phui-tag-shade-red .phui-tag-core {
   background-color: {$sh-redbackground};
   border-color: {$sh-lightredborder};