From cebe6ac38771e7ae443b2f37389ab4729ec7f73a Mon Sep 17 00:00:00 2001
From: Chad Little <chad@chadsdomain.com>
Date: Fri, 22 Feb 2013 15:46:29 -0800
Subject: [PATCH] Stylize bubble counts.

Summary: Adds colors to bubble counts in app launcher.

Test Plan: Tested with 0 attention counts, 12 attention counts, and thousands of open tasks.

Reviewers: epriestley, vrana

Reviewed By: vrana

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5090
---
 src/__celerity_resource_map__.php             |  2 +-
 .../view/PhabricatorApplicationLaunchView.php | 20 ++++++++++--
 .../phabricator-application-launch-view.css   | 32 +++++++++++++++++--
 3 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php
index bad14ec6cc..3af91dab88 100644
--- a/src/__celerity_resource_map__.php
+++ b/src/__celerity_resource_map__.php
@@ -2551,7 +2551,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-application-launch-view-css' =>
   array(
-    'uri' => '/res/8aee0702/rsrc/css/application/base/phabricator-application-launch-view.css',
+    'uri' => '/res/db5f7ed5/rsrc/css/application/base/phabricator-application-launch-view.css',
     'type' => 'css',
     'requires' =>
     array(
diff --git a/src/applications/meta/view/PhabricatorApplicationLaunchView.php b/src/applications/meta/view/PhabricatorApplicationLaunchView.php
index 4dd7755227..261944bfe4 100644
--- a/src/applications/meta/view/PhabricatorApplicationLaunchView.php
+++ b/src/applications/meta/view/PhabricatorApplicationLaunchView.php
@@ -72,8 +72,24 @@ final class PhabricatorApplicationLaunchView extends AphrontView {
       $warning = PhabricatorApplicationStatusView::TYPE_WARNING;
       if (!empty($counts[$attention]) || !empty($counts[$warning])) {
         $count = idx($counts, $attention, 0);
+        $count1 = $count2 = '';
+        if ($count > 0) {
+          $count1 = phutil_tag(
+          'span',
+          array(
+            'class' => 'phabricator-application-attention-count',
+          ),
+          $count);
+        }
+
+
         if (!empty($counts[$warning])) {
-          $count .= '/'.$counts[$warning];
+          $count2 = phutil_tag(
+          'span',
+          array(
+            'class' => 'phabricator-application-warning-count',
+          ),
+          $counts[$warning]);
         }
 
         Javelin::initBehavior('phabricator-tooltips');
@@ -87,7 +103,7 @@ final class PhabricatorApplicationLaunchView extends AphrontView {
             ),
             'class' => 'phabricator-application-launch-attention',
           ),
-          $count);
+          array($count1, $count2));
       }
 
       $classes = array();
diff --git a/webroot/rsrc/css/application/base/phabricator-application-launch-view.css b/webroot/rsrc/css/application/base/phabricator-application-launch-view.css
index 3ca67e1057..c4e30117ed 100644
--- a/webroot/rsrc/css/application/base/phabricator-application-launch-view.css
+++ b/webroot/rsrc/css/application/base/phabricator-application-launch-view.css
@@ -122,8 +122,7 @@ a.phabricator-application-launch-container:hover {
   margin-left: 48px;
 }
 
-.phabricator-application-beta,
-.phabricator-application-launch-attention {
+.phabricator-application-beta {
   position: absolute;
   top: 4px;
   border-radius: 10px;
@@ -136,8 +135,35 @@ a.phabricator-application-launch-container:hover {
 }
 
 .phabricator-application-launch-attention {
-  right: 4px;
+  position: absolute;
+  top: 4px;
+  border-radius: 10px;
+  color: white;
+  font-weight: bold;
+  padding: 1px 6px 2px 0;
+  border: 2px solid #333;
+  font-size: 11px;
+  box-shadow: 0 0px 2px #000;
+}
+
+.phabricator-application-attention-count {
+  margin-right: -2px;
   background-color: rgb(0, 122, 255);
+  border-radius: 10px;
+  color: white;
+  font-weight: bold;
+  padding: 1px 6px 2px;
+  border: 1px solid #333;
+  font-size: 11px;
+}
+
+.phabricator-application-warning-count {
+  padding-left: 5px;
+}
+
+.phabricator-application-launch-attention {
+  right: 4px;
+  background-color: rgb(119, 119, 119);
 }
 
 .phabricator-application-beta {