From eefead77213544e50b6480434acea784c8108a10 Mon Sep 17 00:00:00 2001
From: Chad Little <chad@chadsdomain.com>
Date: Wed, 18 Feb 2015 11:28:11 -0800
Subject: [PATCH] Make icons in tags more floaty, less absoluty

Summary: This change wraps the icon inline with the text, so smaller width icons have equal spacing between the border and text.

Test Plan:
review a number of different tag with icons, also UIExamples.

{F309048}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Differential Revision: https://secure.phabricator.com/D11802
---
 resources/celerity/map.php              |  6 +++---
 src/view/phui/PHUITagView.php           |  6 +++---
 webroot/rsrc/css/phui/phui-tag-view.css | 20 +++++---------------
 3 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index c62705c7c0..3c9da6215e 100644
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '5121a58f',
+    'core.pkg.css' => 'a3a54ca1',
     'core.pkg.js' => '23d653bb',
     'darkconsole.pkg.js' => '8ab24e01',
     'differential.pkg.css' => '380f07e5',
@@ -144,7 +144,7 @@ return array(
     'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b',
     'rsrc/css/phui/phui-spacing.css' => '042804d6',
     'rsrc/css/phui/phui-status.css' => '888cedb8',
-    'rsrc/css/phui/phui-tag-view.css' => '6b74282b',
+    'rsrc/css/phui/phui-tag-view.css' => 'ea469f3a',
     'rsrc/css/phui/phui-text.css' => 'cf019f54',
     'rsrc/css/phui/phui-timeline-view.css' => 'b0fbc4d7',
     'rsrc/css/phui/phui-workboard-view.css' => '8896938c',
@@ -798,7 +798,7 @@ return array(
     'phui-remarkup-preview-css' => '19ad512b',
     'phui-spacing-css' => '042804d6',
     'phui-status-list-view-css' => '888cedb8',
-    'phui-tag-view-css' => '6b74282b',
+    'phui-tag-view-css' => 'ea469f3a',
     'phui-text-css' => 'cf019f54',
     'phui-timeline-view-css' => 'b0fbc4d7',
     'phui-workboard-view-css' => '8896938c',
diff --git a/src/view/phui/PHUITagView.php b/src/view/phui/PHUITagView.php
index afca3a445e..8f49caa82a 100644
--- a/src/view/phui/PHUITagView.php
+++ b/src/view/phui/PHUITagView.php
@@ -176,7 +176,7 @@ final class PHUITagView extends AphrontTagView {
       array(
         'class' => 'phui-tag-core '.$color,
       ),
-      array($dot, $this->name));
+      array($dot, $icon, $this->name));
 
     if ($this->closed) {
       $content = phutil_tag(
@@ -184,10 +184,10 @@ final class PHUITagView extends AphrontTagView {
         array(
           'class' => 'phui-tag-core-closed',
         ),
-        $content);
+        array($icon, $content));
     }
 
-    return array($icon, $content);
+    return $content;
   }
 
   public static function getTagTypes() {
diff --git a/webroot/rsrc/css/phui/phui-tag-view.css b/webroot/rsrc/css/phui/phui-tag-view.css
index 39a0c29223..d345ae71ab 100644
--- a/webroot/rsrc/css/phui/phui-tag-view.css
+++ b/webroot/rsrc/css/phui/phui-tag-view.css
@@ -33,15 +33,13 @@ a.phui-tag-view:hover {
   padding: 1px 6px;
 }
 
-.phui-tag-view .phui-icon-view {
-  position: absolute;
-  display: inline-block;
-  top: 1px;
-  left: 5px;
+.phui-tag-view.phui-tag-type-state .phui-icon-view {
+  margin: 0 6px 0 0;
 }
 
-.phui-tag-icon-view .phui-tag-core {
-  padding-left: 22px;
+.phui-tag-view .phui-icon-view {
+  display: inline-block;
+  margin: 0 4px 0 2px;
 }
 
 .phui-tag-dot {
@@ -154,24 +152,16 @@ a.phui-tag-view:hover
 
 .phui-tag-shade .phui-icon-view {
   font-size: 12px;
-  top: 2px;
-  left: 6px;
 }
 
 .phui-tag-shade-slim .phui-icon-view {
   font-size: 11px;
-  top: 3px;
-  left: 6px;
 }
 
 .phui-tag-shade-slim .phui-tag-core {
   font-size: 12px;
 }
 
-.phui-tag-shade-slim.phui-tag-icon-view .phui-tag-core {
-  padding-left: 20px;
-}
-
 .phui-tag-shade-red .phui-tag-core {
   background-color: {$sh-redbackground};
   border-color: {$sh-lightredborder};