From 0e05f078b09a4c9e13695f322d5a1b8b90da272b Mon Sep 17 00:00:00 2001
From: Chad Little <chad@chadsdomain.com>
Date: Thu, 29 May 2014 16:04:50 -0700
Subject: [PATCH] [Redesign] Update Filetree CSS

Summary: Tweaks colors, updates icons

Test Plan: Tested a filetree view, clicked and hovered.

Reviewers: epriestley

Subscribers: epriestley, Korvin

Differential Revision: https://secure.phabricator.com/D9335
---
 resources/celerity/map.php                      |  6 +++---
 ...ferentialChangesetFileTreeSideNavBuilder.php | 13 ++++---------
 .../css/layout/phabricator-filetree-view.css    | 17 ++++++++---------
 3 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index 5d5cfc694a..0c5e9519af 100644
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -7,7 +7,7 @@
 return array(
   'names' =>
   array(
-    'core.pkg.css' => 'c94a698c',
+    'core.pkg.css' => 'c6ff1a89',
     'core.pkg.js' => '7db41c19',
     'darkconsole.pkg.js' => 'ca8671ce',
     'differential.pkg.css' => 'fbf57382',
@@ -115,7 +115,7 @@ return array(
     'rsrc/css/layout/phabricator-action-header-view.css' => '33a4590a',
     'rsrc/css/layout/phabricator-action-list-view.css' => 'dcbfc854',
     'rsrc/css/layout/phabricator-crumbs-view.css' => '989a48b6',
-    'rsrc/css/layout/phabricator-filetree-view.css' => 'a8c86ace',
+    'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82',
     'rsrc/css/layout/phabricator-hovercard-view.css' => '46a13cf0',
     'rsrc/css/layout/phabricator-side-menu-view.css' => 'c1986b85',
     'rsrc/css/layout/phabricator-source-code-view.css' => '62a99814',
@@ -703,7 +703,7 @@ return array(
     'phabricator-fatal-config-template-css' => '25d446d6',
     'phabricator-feed-css' => 'dd43ce00',
     'phabricator-file-upload' => 'a4ae61bf',
-    'phabricator-filetree-view-css' => 'a8c86ace',
+    'phabricator-filetree-view-css' => 'fccf9f82',
     'phabricator-flag-css' => '5337623f',
     'phabricator-hovercard' => '4f344388',
     'phabricator-hovercard-view-css' => '46a13cf0',
diff --git a/src/applications/differential/view/DifferentialChangesetFileTreeSideNavBuilder.php b/src/applications/differential/view/DifferentialChangesetFileTreeSideNavBuilder.php
index f56c5c13d1..031db2be4a 100644
--- a/src/applications/differential/view/DifferentialChangesetFileTreeSideNavBuilder.php
+++ b/src/applications/differential/view/DifferentialChangesetFileTreeSideNavBuilder.php
@@ -90,20 +90,15 @@ final class DifferentialChangesetFileTreeSideNavBuilder {
       if ($data) {
         $href = '#'.$data->getAnchorName();
         $title = $name;
-        $icon = 'phabricator-filetree-icon-file';
+        $icon = id(new PHUIIconView())
+          ->setIconFont('fa-file-text-o bluetext');
       } else {
         $name .= '/';
         $title = $path->getFullPath().'/';
-        $icon = 'phabricator-filetree-icon-dir';
+        $icon = id(new PHUIIconView())
+          ->setIconFont('fa-folder-open blue');
       }
 
-      $icon = phutil_tag(
-        'span',
-        array(
-          'class' => 'phabricator-filetree-icon '.$icon,
-        ),
-        '');
-
       $name_element = phutil_tag(
         'span',
         array(
diff --git a/webroot/rsrc/css/layout/phabricator-filetree-view.css b/webroot/rsrc/css/layout/phabricator-filetree-view.css
index 5cb5026f63..b247f5e4f9 100644
--- a/webroot/rsrc/css/layout/phabricator-filetree-view.css
+++ b/webroot/rsrc/css/layout/phabricator-filetree-view.css
@@ -14,6 +14,7 @@
   margin: 0;
   padding: 0;
   display: block;
+  border-left: 4px solid transparent;
 }
 
 .phabricator-filetree span.phabricator-filetree-icon {
@@ -28,7 +29,7 @@
 .phabricator-filetree span.phabricator-filetree-name {
   padding: 0;
   margin-left: 4px;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: normal;
   line-height: 20px;
   white-space: nowrap;
@@ -36,22 +37,20 @@
 
 .phabricator-filetree span.phabricator-filetree-item
   .phabricator-filetree-name {
-  color: #a0a0a0;
+  color: {$darkbluetext};
 }
 
 .phabricator-filetree a.phabricator-filetree-item
   .phabricator-filetree-name {
-  color: #fff;
+  color: {$darkbluetext};
 }
 
 .phabricator-filetree a.phabricator-filetree-item:hover {
   text-decoration: none;
+  background-color: {$hovergrey};
 }
 
-.phabricator-filetree-icon-file {
-  background-image: url(/rsrc/image/icon/fatcow/page_white_text.png);
-}
-
-.phabricator-filetree-icon-dir {
-  background-image: url(/rsrc/image/icon/fatcow/folder.png);
+.phabricator-filetree .phabricator-active-nav-focus {
+  background-color: {$hovergrey};
+  border-left: 4px solid {$sky};
 }