Add some icons/color to Config Settings UI

Summary: This adds status icons, locked, hidden, editable, customized, to the list of options in config. Makes it easier to read and assertain state.

Test Plan:
View a hidden, customized, editable, and locked.

{F1796320}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'ffbade6c',
+    'core.pkg.css' => 'ad6a3591',
     'core.pkg.js' => '2b8af4e4',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '3fb7f532',
@@ -148,7 +148,7 @@ return array(
     'rsrc/css/phui/phui-info-view.css' => '28efab79',
     'rsrc/css/phui/phui-list.css' => '9da2aa00',
     'rsrc/css/phui/phui-object-box.css' => '6b487c57',
-    'rsrc/css/phui/phui-object-item-list-view.css' => '987db9bf',
+    'rsrc/css/phui/phui-object-item-list-view.css' => '87278fa0',
     'rsrc/css/phui/phui-pager.css' => 'bea33d23',
     'rsrc/css/phui/phui-pinboard-view.css' => '2495140e',
     'rsrc/css/phui/phui-profile-menu.css' => '8a3fc181',
@@ -858,7 +858,7 @@ return array(
     'phui-inline-comment-view-css' => '5953c28e',
     'phui-list-view-css' => '9da2aa00',
     'phui-object-box-css' => '6b487c57',
-    'phui-object-item-list-view-css' => '987db9bf',
+    'phui-object-item-list-view-css' => '87278fa0',
     'phui-pager-css' => 'bea33d23',
     'phui-pinboard-view-css' => '2495140e',
     'phui-profile-menu-css' => '8a3fc181',

src/applications/config/controller/PhabricatorConfigGroupController.php

@@ -77,6 +77,24 @@ final class PhabricatorConfigGroupController
         ->setHref('/config/edit/'.$option->getKey().'/')
         ->addAttribute($summary);
 
+      $label = pht('Current Value:');
+      $color = null;
+      $db_value = idx($db_values, $option->getKey());
+      if ($db_value && !$db_value->getIsDeleted()) {
+        $item->setEffect('visited');
+        $color = 'violet';
+        $label = pht('Customized Value:');
+      }
+
+      if ($option->getHidden()) {
+        $item->setStatusIcon('fa-eye-slash grey', pht('Hidden'));
+        $item->setDisabled(true);
+      } else if ($option->getLocked()) {
+        $item->setStatusIcon('fa-lock '.$color, pht('Locked'));
+      } else {
+        $item->setStatusIcon('fa-pencil-square-o '.$color, pht('Editable'));
+      }
+
       if (!$option->getHidden()) {
         $current_value = PhabricatorEnv::getEnvConfig($option->getKey());
         $current_value = PhabricatorConfigJSON::prettyPrintJSON(
@@ -87,24 +105,13 @@ final class PhabricatorConfigGroupController
             'class' => 'config-options-current-value',
           ),
           array(
-            phutil_tag('span', array(), pht('Current Value:')),
+            phutil_tag('span', array(), $label),
             ' '.$current_value,
           ));
 
         $item->appendChild($current_value);
       }
 
-      $db_value = idx($db_values, $option->getKey());
-      if ($db_value && !$db_value->getIsDeleted()) {
-        $item->addIcon('fa-edit', pht('Customized'));
-      }
-
-      if ($option->getHidden()) {
-        $item->addIcon('fa-eye-slash', pht('Hidden'));
-      } else if ($option->getLocked()) {
-        $item->addIcon('fa-lock', pht('Locked'));
-      }
-
       $list->addItem($item);
     }
 

src/view/phui/PHUIObjectItemView.php

@@ -254,6 +254,9 @@ final class PHUIObjectItemView extends AphrontTagView {
       case 'selected':
         $item_classes[] = 'phui-object-item-selected';
         break;
+      case 'visited':
+        $item_classes[] = 'phui-object-item-visited';
+        break;
       case null:
         break;
       default:

webroot/rsrc/css/phui/phui-object-item-list-view.css

@@ -772,6 +772,19 @@ ul.phui-object-item-list-view .phui-object-item-selected
   margin-bottom: 8px;
 }
 
+.phui-object-list-big .phui-object-item-col0 {
+  vertical-align: top;
+  padding: 0;
+}
+
+.phui-object-list-big .phui-object-item-status-icon {
+  padding: 5px;
+}
+
+.phui-object-list-big .phui-object-item-visited a.phui-object-item-link {
+  color: {$violet};
+}
+
 .device-desktop .phui-object-list-big .phui-object-item-frame:hover {
 
 }