Add basic grey and blue styles for PHUIBoxView

Summary: We plan to use these more in future mocks. Adds base colors and re-uses in Phame.

Test Plan: Phame, mobile and desktop.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'bd4f3259',
+    'core.pkg.css' => '39dc2caa',
     'core.pkg.js' => '573e6664',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '2de124c9',
@@ -81,7 +81,7 @@ return array(
     'rsrc/css/application/owners/owners-path-editor.css' => '2f00933b',
     'rsrc/css/application/paste/paste.css' => 'a5157c48',
     'rsrc/css/application/people/people-profile.css' => 'fa2069ec',
-    'rsrc/css/application/phame/phame.css' => 'dac8fdf2',
+    'rsrc/css/application/phame/phame.css' => '6d5b3682',
     'rsrc/css/application/pholio/pholio-edit.css' => '3ad9d1ee',
     'rsrc/css/application/pholio/pholio-inline-comments.css' => '8e545e49',
     'rsrc/css/application/pholio/pholio.css' => '95174bdd',
@@ -122,7 +122,7 @@ return array(
     'rsrc/css/phui/phui-action-panel.css' => '91c7b835',
     'rsrc/css/phui/phui-badge.css' => 'f25c3476',
     'rsrc/css/phui/phui-big-info-view.css' => 'bd903741',
-    'rsrc/css/phui/phui-box.css' => 'a5bb366d',
+    'rsrc/css/phui/phui-box.css' => '10939564',
     'rsrc/css/phui/phui-button.css' => '16020a60',
     'rsrc/css/phui/phui-crumbs-view.css' => '414406b5',
     'rsrc/css/phui/phui-document-pro.css' => '8799acf7',
@@ -780,7 +780,7 @@ return array(
     'phabricator-uiexample-reactor-sendclass' => '1def2711',
     'phabricator-uiexample-reactor-sendproperties' => 'b1f0ccee',
     'phabricator-zindex-css' => 'a36a45da',
-    'phame-css' => 'dac8fdf2',
+    'phame-css' => '6d5b3682',
     'pholio-css' => '95174bdd',
     'pholio-edit-css' => '3ad9d1ee',
     'pholio-inline-comments-css' => '8e545e49',
@@ -792,7 +792,7 @@ return array(
     'phui-action-panel-css' => '91c7b835',
     'phui-badge-view-css' => 'f25c3476',
     'phui-big-info-view-css' => 'bd903741',
-    'phui-box-css' => 'a5bb366d',
+    'phui-box-css' => '10939564',
     'phui-button-css' => '16020a60',
     'phui-calendar-css' => 'ccabe893',
     'phui-calendar-day-css' => 'd1cf6f93',

src/applications/phame/view/PhameBlogListView.php

@@ -89,7 +89,12 @@ final class PhameBlogListView extends AphrontTagView {
         ),
         pht('Blogs')));
 
-    return array($header, $list);
+    return id(new PHUIBoxView())
+      ->appendChild($header)
+      ->appendChild($list)
+      ->addClass('pl')
+      ->setColor(PHUIBoxView::BLUE);
+
   }
 
 }

src/applications/phame/view/PhameDraftListView.php

@@ -92,7 +92,11 @@ final class PhameDraftListView extends AphrontTagView {
         ),
         pht('Drafts')));
 
-    return array($header, $list);
+    return id(new PHUIBoxView())
+      ->appendChild($header)
+      ->appendChild($list)
+      ->addClass('pl')
+      ->setColor(PHUIBoxView::BLUE);
   }
 
 }

src/view/phui/PHUIBoxView.php

@@ -5,6 +5,10 @@ final class PHUIBoxView extends AphrontTagView {
   private $margin = array();
   private $padding = array();
   private $border = false;
+  private $color;
+
+  const BLUE = 'phui-box-blue';
+  const GREY = 'phui-box-grey';
 
   public function addMargin($margin) {
     $this->margin[] = $margin;
@@ -21,19 +25,32 @@ final class PHUIBoxView extends AphrontTagView {
     return $this;
   }
 
+  public function setColor($color) {
+    $this->color = $color;
+    return $this;
+  }
+
   protected function getTagAttributes() {
     require_celerity_resource('phui-box-css');
     $outer_classes = array();
     $outer_classes[] = 'phui-box';
+
     if ($this->border) {
       $outer_classes[] = 'phui-box-border';
     }
+
     foreach ($this->margin as $margin) {
       $outer_classes[] = $margin;
     }
+
     foreach ($this->padding as $padding) {
       $outer_classes[] = $padding;
     }
+
+    if ($this->color) {
+      $outer_classes[] = $this->color;
+    }
+
     return array('class' => $outer_classes);
   }
 

webroot/rsrc/css/application/phame/phame.css

@@ -49,17 +49,14 @@
 
 .phame-blog-list {
   margin: 24px 16px 16px 16px;
-  padding: 16px;
-  background-color: {$bluebackground};
-  border-radius: 3px;
 }
 
 .device .phame-blog-list {
-  padding: 16px 8px;
+  padding: 0;
-  background-color: #F1F1F4;
+  background-color: {$bluebackground};
   margin: 0;
   border-radius: 0;
-  border-bottom: 1px solid {$lightblueborder};
+  border-bottom: 1px solid {$thinblueborder};
 }
 
 .phame-blog-list-item:last-child {

webroot/rsrc/css/phui/phui-box.css

@@ -11,3 +11,13 @@
 .phui-box.focus {
   box-shadow: 0 0 5px 5px rgba(255, 255, 0, 0.90);
 }
+
+.phui-box-grey {
+  background-color: rgba(71,87,120,0.1);
+  border-radius: 3px;
+}
+
+.phui-box-blue {
+  background-color: {$bluebackground};
+  border-radius: 3px;
+}