Update PHUIInfoView

Summary: Just some minor UI tweaks. Make AphrontTagView, add Icons, whiten background.

Test Plan: Legalpad, Settings, Auth, UIExamples, Differential... desktop, mobile.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -9,7 +9,7 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => '0b64e988',
     'conpherence.pkg.js' => '6249a1cf',
-    'core.pkg.css' => 'c30f462d',
+    'core.pkg.css' => '1bc01ec9',
     'core.pkg.js' => '9dc857ed',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => 'a4ba74b5',
@@ -135,7 +135,7 @@ return array(
     'rsrc/css/phui/phui-comment-form.css' => '4ecc56ef',
     'rsrc/css/phui/phui-crumbs-view.css' => '195ac419',
     'rsrc/css/phui/phui-curtain-view.css' => '947bf1a4',
-    'rsrc/css/phui/phui-document-pro.css' => 'ca1fed81',
+    'rsrc/css/phui/phui-document-pro.css' => 'd4559738',
     'rsrc/css/phui/phui-document-summary.css' => '9ca48bdf',
     'rsrc/css/phui/phui-document.css' => 'c32e8dec',
     'rsrc/css/phui/phui-feed-story.css' => '44a9c8e9',
@@ -149,7 +149,7 @@ return array(
     'rsrc/css/phui/phui-icon.css' => '417f80fb',
     'rsrc/css/phui/phui-image-mask.css' => 'a8498f9c',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
-    'rsrc/css/phui/phui-info-view.css' => '28efab79',
+    'rsrc/css/phui/phui-info-view.css' => 'ec92802a',
     'rsrc/css/phui/phui-invisible-character-view.css' => '6993d9f0',
     'rsrc/css/phui/phui-list.css' => '9da2aa00',
     'rsrc/css/phui/phui-object-box.css' => '6b487c57',
@@ -851,7 +851,7 @@ return array(
     'phui-curtain-view-css' => '947bf1a4',
     'phui-document-summary-view-css' => '9ca48bdf',
     'phui-document-view-css' => 'c32e8dec',
-    'phui-document-view-pro-css' => 'ca1fed81',
+    'phui-document-view-pro-css' => 'd4559738',
     'phui-feed-story-css' => '44a9c8e9',
     'phui-font-icon-base-css' => '870a7360',
     'phui-fontkit-css' => '9cda225e',
@@ -865,7 +865,7 @@ return array(
     'phui-icon-view-css' => '417f80fb',
     'phui-image-mask-css' => 'a8498f9c',
     'phui-info-panel-css' => '27ea50a1',
-    'phui-info-view-css' => '28efab79',
+    'phui-info-view-css' => 'ec92802a',
     'phui-inline-comment-view-css' => '5953c28e',
     'phui-invisible-character-view-css' => '6993d9f0',
     'phui-list-view-css' => '9da2aa00',

src/__phutil_library_map__.php

@@ -6436,7 +6436,7 @@ phutil_register_library_map(array(
     'PHUIInfoExample' => 'PhabricatorUIExample',
     'PHUIInfoPanelExample' => 'PhabricatorUIExample',
     'PHUIInfoPanelView' => 'AphrontView',
-    'PHUIInfoView' => 'AphrontView',
+    'PHUIInfoView' => 'AphrontTagView',
     'PHUIInvisibleCharacterTestCase' => 'PhabricatorTestCase',
     'PHUIInvisibleCharacterView' => 'AphrontView',
     'PHUIListExample' => 'PhabricatorUIExample',

src/view/form/PHUIInfoView.php

@@ -1,6 +1,6 @@
 <?php
 
-final class PHUIInfoView extends AphrontView {
+final class PHUIInfoView extends AphrontTagView {
 
   const SEVERITY_ERROR = 'error';
   const SEVERITY_WARNING = 'warning';
@@ -10,11 +10,12 @@ final class PHUIInfoView extends AphrontView {
 
   private $title;
   private $errors;
-  private $severity;
+  private $severity = null;
   private $id;
   private $buttons = array();
   private $isHidden;
   private $flush;
+  private $icon;
 
   public function setTitle($title) {
     $this->title = $title;
@@ -26,6 +27,11 @@ final class PHUIInfoView extends AphrontView {
     return $this;
   }
 
+  private function getSeverity() {
+    $severity = $this->severity ? $this->severity : self::SEVERITY_ERROR;
+    return $severity;
+  }
+
   public function setErrors(array $errors) {
     $this->errors = $errors;
     return $this;
@@ -46,12 +52,66 @@ final class PHUIInfoView extends AphrontView {
     return $this;
   }
 
+  public function setIcon(PHUIIconView $icon) {
+    $this->icon = $icon;
+    return $this;
+  }
+
+  private function getIcon() {
+    if ($this->icon) {
+      return $this->icon;
+    }
+
+    switch ($this->getSeverity()) {
+      case self::SEVERITY_ERROR:
+        $icon = 'fa-exclamation-circle';
+      break;
+      case self::SEVERITY_WARNING:
+        $icon = 'fa-exclamation-triangle';
+      break;
+      case self::SEVERITY_NOTICE:
+        $icon = 'fa-info-circle';
+      break;
+      case self::SEVERITY_NODATA:
+        return null;
+      break;
+      case self::SEVERITY_SUCCESS:
+        $icon = 'fa-check-circle';
+      break;
+    }
+
+    $icon = id(new PHUIIconView())
+      ->setIcon($icon)
+      ->addClass('phui-info-icon');
+    return $icon;
+  }
+
   public function addButton(PHUIButtonView $button) {
+    $button->setColor(PHUIButtonView::GREY);
     $this->buttons[] = $button;
     return $this;
   }
 
-  public function render() {
+  protected function getTagAttributes() {
+    $classes = array();
+    $classes[] = 'phui-info-view';
+    $classes[] = 'phui-info-severity-'.$this->getSeverity();
+    $classes[] = 'grouped';
+    if ($this->flush) {
+      $classes[] = 'phui-info-view-flush';
+    }
+    if ($this->getIcon()) {
+      $classes[] = 'phui-info-has-icon';
+    }
+
+    return array(
+      'id' => $this->id,
+      'class' => implode(' ', $classes),
+      'style' => $this->isHidden ? 'display: none;' : null,
+    );
+  }
+
+  protected function getTagContent() {
     require_celerity_resource('phui-info-view-css');
 
     $errors = $this->errors;
@@ -87,17 +147,6 @@ final class PHUIInfoView extends AphrontView {
       $title = null;
     }
 
-    $this->severity = nonempty($this->severity, self::SEVERITY_ERROR);
-
-    $classes = array();
-    $classes[] = 'phui-info-view';
-    $classes[] = 'phui-info-severity-'.$this->severity;
-    $classes[] = 'grouped';
-    if ($this->flush) {
-      $classes[] = 'phui-info-view-flush';
-    }
-    $classes = implode(' ', $classes);
-
     $children = $this->renderChildren();
     if ($list) {
       $children[] = $list;
@@ -123,17 +172,21 @@ final class PHUIInfoView extends AphrontView {
         $this->buttons);
     }
 
-    return phutil_tag(
+    $icon = null;
+    if ($this->getIcon()) {
+      $icon = phutil_tag(
         'div',
         array(
-        'id' => $this->id,
+          'class' => 'phui-info-view-icon',
-        'class' => $classes,
-        'style' => $this->isHidden ? 'display: none;' : null,
         ),
-      array(
+        $this->getIcon());
+    }
+
+    return array(
+      $icon,
       $buttons,
       $title,
       $body,
-      ));
+    );
   }
 }

webroot/rsrc/css/phui/phui-document-pro.css

@@ -167,7 +167,7 @@ a.button.phui-document-toc {
 }
 
 .phui-document-view-pro .phui-info-view {
-  margin: 16px 0 0 0;
+  margin: 16px 0;
 }
 
 .phui-document-view-pro .phabricator-remarkup-embed-image-wide {

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

@@ -5,6 +5,7 @@
 .phui-info-view {
   border-style: solid;
   border-width: 1px;
+  background: #fff;
   margin: 16px;
   padding: 12px;
   border-radius: 3px;
@@ -22,10 +23,19 @@
   padding: 0;
 }
 
+.phui-info-view-icon {
+  width: 24px;
+  float: left;
+}
+
 .phui-info-view-body {
   line-height: 1.6em;
 }
 
+.phui-info-view.phui-info-has-icon .phui-info-view-body {
+  margin-left: 24px;
+}
+
 .phui-info-view-body tt {
   padding: 0 2px;
   background-color: rgba({$alphagrey},.1);
@@ -48,68 +58,58 @@
 h1.phui-info-view-head {
   font-weight: bold;
   font-size: {$biggerfontsize};
-  line-height: 1.2em;
+  line-height: 1.3em;
 }
 
 .phui-info-view-list {
-  margin: 0 0 0 16px;
+  margin: 0;
-  list-style: disc;
+  list-style: none;
-  line-height: 1.5em;
+  line-height: 1.6em;
 }
 
-.phui-info-view .phui-info-view-actions .button:hover {
+.phui-info-view .phui-info-icon {
-  background: #fff;
+  padding-top: 1px;
-  box-shadow: none;
+  font-size: 16px;
 }
 
-.phui-info-severity-error,
+.phui-info-severity-error {
-.phui-info-severity-error a.button {
+  border-color: {$red};
-  border-color: {$sh-redborder};
+  border-left-width: 6px;
-  background: {$sh-redbackground};
 }
 
-.phui-info-severity-error a.button {
+.phui-info-severity-error .phui-info-icon {
-  color: {$sh-redtext};
+  color: {$red};
 }
 
-.phui-info-severity-warning,
+.phui-info-severity-warning {
-.phui-info-severity-warning a.button {
+  border-color: {$yellow};
-  border-color: {$sh-yellowborder};
+  border-left-width: 6px;
-  background: {$sh-yellowbackground};
 }
 
-.phui-info-severity-warning a.button {
+.phui-info-severity-warning .phui-info-icon {
-  color: {$sh-yellowtext};
+  color: {$yellow};
 }
 
-.phui-info-severity-notice,
+.phui-info-severity-notice {
-.phui-info-severity-notice a.button {
+  border-color: {$blue};
-  border-color: {$sh-blueborder};
+  border-left-width: 6px;
-  background: {$sh-bluebackground};
 }
 
-.phui-info-severity-notice a.button {
+.phui-info-severity-notice .phui-info-icon {
-  color: {$sh-bluetext};
+  color: {$blue};
 }
 
-.phui-info-severity-nodata,
+.phui-info-severity-nodata {
-.phui-info-severity-nodata a.button {
   border-color: {$lightgreyborder};
-  background: #fff;
 }
 
-.phui-info-severity-nodata a.button {
+.phui-info-severity-success {
-  color: {$greytext};
+  border-color: {$green};
+  border-left-width: 6px;
 }
 
-.phui-info-severity-success,
+.phui-info-severity-success .phui-info-icon {
-.phui-info-severity-success a.button {
+  color: {$green};
-  border-color: {$sh-greenborder};
-  background: {$sh-greenbackground};
-}
-
-.phui-info-severity-success a.button {
-  color: {$sh-greentext};
 }
 
 .aphront-dialog-body .phui-info-view {
@@ -123,3 +123,7 @@ h1.phui-info-view-head {
 .phui-crumbs-view.phui-crumbs-border + .phui-info-view {
   margin-top: 16px;
 }
+
+div.phui-object-box .phui-header-shell + .phui-info-view {
+  margin: 16px 0 8px;
+}