PHUIBoxView

Summary: Adds a basic div box that takes some styles. Not sure this is the best approach for the spacing, but overall hoping people can spend less time in CSS and just use this class. Test Plan: UIExamples Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin, AnhNhan Differential Revision: https://secure.phabricator.com/D5723
2025-02-05 03:18:25 +01:00 · 2013-04-18 11:34:02 -07:00 · 2013-04-18 11:34:02 -07:00 · 663612fdb4
commit 663612fdb4
parent 5bc684ad36
9 changed files with 277 additions and 73 deletions
--- a/src/__celerity_resource_map__.php
+++ b/src/__celerity_resource_map__.php
@ -906,7 +906,7 @@ celerity_register_resource_map(array(
  ),
  'conpherence-menu-css' =>
  array(
-    'uri' => '/res/ea53bb96/rsrc/css/application/conpherence/menu.css',
+    'uri' => '/res/3a60b96c/rsrc/css/application/conpherence/menu.css',
    'type' => 'css',
    'requires' =>
    array(
@ -915,7 +915,7 @@ celerity_register_resource_map(array(
  ),
  'conpherence-message-pane-css' =>
  array(
-    'uri' => '/res/cee244ea/rsrc/css/application/conpherence/message-pane.css',
+    'uri' => '/res/6b49a2d9/rsrc/css/application/conpherence/message-pane.css',
    'type' => 'css',
    'requires' =>
    array(
@ -933,7 +933,7 @@ celerity_register_resource_map(array(
  ),
  'conpherence-widget-pane-css' =>
  array(
-    'uri' => '/res/da148aa8/rsrc/css/application/conpherence/widget-pane.css',
+    'uri' => '/res/197df36c/rsrc/css/application/conpherence/widget-pane.css',
    'type' => 'css',
    'requires' =>
    array(
@ -1282,7 +1282,7 @@ celerity_register_resource_map(array(
  ),
  'javelin-behavior-conpherence-menu' =>
  array(
-    'uri' => '/res/22d7f114/rsrc/js/application/conpherence/behavior-menu.js',
+    'uri' => '/res/89c92cc0/rsrc/js/application/conpherence/behavior-menu.js',
    'type' => 'js',
    'requires' =>
    array(
@ -1299,7 +1299,7 @@ celerity_register_resource_map(array(
  ),
  'javelin-behavior-conpherence-pontificate' =>
  array(
-    'uri' => '/res/b45269fc/rsrc/js/application/conpherence/behavior-pontificate.js',
+    'uri' => '/res/88ac3361/rsrc/js/application/conpherence/behavior-pontificate.js',
    'type' => 'js',
    'requires' =>
    array(
@ -1313,7 +1313,7 @@ celerity_register_resource_map(array(
  ),
  'javelin-behavior-conpherence-widget-pane' =>
  array(
-    'uri' => '/res/458394ef/rsrc/js/application/conpherence/behavior-widget-pane.js',
+    'uri' => '/res/0876b8d6/rsrc/js/application/conpherence/behavior-widget-pane.js',
    'type' => 'js',
    'requires' =>
    array(
@ -2635,7 +2635,7 @@ celerity_register_resource_map(array(
  ),
  'javelin-vector' =>
  array(
-    'uri' => '/res/9f3e2ffc/rsrc/externals/javelin/lib/Vector.js',
+    'uri' => '/res/c8c64ab7/rsrc/externals/javelin/lib/Vector.js',
    'type' => 'js',
    'requires' =>
    array(
@ -3038,7 +3038,7 @@ celerity_register_resource_map(array(
  ),
  'phabricator-hovercard' =>
  array(
-    'uri' => '/res/d70f1091/rsrc/js/application/core/Hovercard.js',
+    'uri' => '/res/b7c56be6/rsrc/js/application/core/Hovercard.js',
    'type' => 'js',
    'requires' =>
    array(
@ -3297,7 +3297,7 @@ celerity_register_resource_map(array(
  ),
  'phabricator-slowvote-css' =>
  array(
-    'uri' => '/res/dd7e273e/rsrc/css/application/slowvote/slowvote.css',
+    'uri' => '/res/357ccc42/rsrc/css/application/slowvote/slowvote.css',
    'type' => 'css',
    'requires' =>
    array(
@ -3595,6 +3595,15 @@ celerity_register_resource_map(array(
    ),
    'disk' => '/rsrc/css/application/phriction/phriction-document-css.css',
  ),
+  'phui-box-css' =>
+  array(
+    'uri' => '/res/1b741073/rsrc/css/phui/phui-box.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/phui/phui-box.css',
+  ),
  'phui-feed-story-css' =>
  array(
    'uri' => '/res/9b5bb654/rsrc/css/phui/phui-feed-story.css',
@ -4086,7 +4095,7 @@ celerity_register_resource_map(array(
      'uri' => '/res/pkg/f96657b8/diffusion.pkg.js',
      'type' => 'js',
    ),
-    'bea3de16' =>
+    '41f3916d' =>
    array(
      'name' => 'javelin.pkg.js',
      'symbols' =>
@ -4111,7 +4120,7 @@ celerity_register_resource_map(array(
        17 => 'javelin-typeahead-ondemand-source',
        18 => 'javelin-tokenizer',
      ),
-      'uri' => '/res/pkg/bea3de16/javelin.pkg.js',
+      'uri' => '/res/pkg/41f3916d/javelin.pkg.js',
      'type' => 'js',
    ),
    '6b1fccc6' =>
@ -4171,7 +4180,7 @@ celerity_register_resource_map(array(
    'global-drag-and-drop-css' => '1b484e7b',
    'inline-comment-summary-css' => '8aaacd1b',
    'javelin-aphlict' => 'bf16b308',
-    'javelin-behavior' => 'bea3de16',
+    'javelin-behavior' => '41f3916d',
    'javelin-behavior-aphlict-dropdown' => 'bf16b308',
    'javelin-behavior-aphlict-listen' => 'bf16b308',
    'javelin-behavior-aphront-basic-tokenizer' => 'bf16b308',
@ -4222,24 +4231,24 @@ celerity_register_resource_map(array(
    'javelin-behavior-repository-crossreference' => 'e96b08f8',
    'javelin-behavior-toggle-class' => 'bf16b308',
    'javelin-behavior-workflow' => 'bf16b308',
-    'javelin-dom' => 'bea3de16',
-    'javelin-event' => 'bea3de16',
-    'javelin-install' => 'bea3de16',
-    'javelin-json' => 'bea3de16',
-    'javelin-mask' => 'bea3de16',
-    'javelin-request' => 'bea3de16',
-    'javelin-resource' => 'bea3de16',
-    'javelin-stratcom' => 'bea3de16',
-    'javelin-tokenizer' => 'bea3de16',
-    'javelin-typeahead' => 'bea3de16',
-    'javelin-typeahead-normalizer' => 'bea3de16',
-    'javelin-typeahead-ondemand-source' => 'bea3de16',
-    'javelin-typeahead-preloaded-source' => 'bea3de16',
-    'javelin-typeahead-source' => 'bea3de16',
-    'javelin-uri' => 'bea3de16',
-    'javelin-util' => 'bea3de16',
-    'javelin-vector' => 'bea3de16',
-    'javelin-workflow' => 'bea3de16',
+    'javelin-dom' => '41f3916d',
+    'javelin-event' => '41f3916d',
+    'javelin-install' => '41f3916d',
+    'javelin-json' => '41f3916d',
+    'javelin-mask' => '41f3916d',
+    'javelin-request' => '41f3916d',
+    'javelin-resource' => '41f3916d',
+    'javelin-stratcom' => '41f3916d',
+    'javelin-tokenizer' => '41f3916d',
+    'javelin-typeahead' => '41f3916d',
+    'javelin-typeahead-normalizer' => '41f3916d',
+    'javelin-typeahead-ondemand-source' => '41f3916d',
+    'javelin-typeahead-preloaded-source' => '41f3916d',
+    'javelin-typeahead-source' => '41f3916d',
+    'javelin-uri' => '41f3916d',
+    'javelin-util' => '41f3916d',
+    'javelin-vector' => '41f3916d',
+    'javelin-workflow' => '41f3916d',
    'lightbox-attachment-css' => '1b484e7b',
    'maniphest-task-summary-css' => '6b1fccc6',
    'maniphest-transaction-detail-css' => '6b1fccc6',
--- a/src/__phutil_library_map__.php
+++ b/src/__phutil_library_map__.php
@ -663,6 +663,9 @@ phutil_register_library_map(array(
    'MetaMTANotificationType' => 'applications/metamta/constants/MetaMTANotificationType.php',
    'ObjectHandleLoader' => 'applications/phid/handle/ObjectHandleLoader.php',
    'OwnersPackageReplyHandler' => 'applications/owners/OwnersPackageReplyHandler.php',
+    'PHUI' => 'view/phui/PHUI.php',
+    'PHUIBoxExample' => 'applications/uiexample/examples/PHUIBoxExample.php',
+    'PHUIBoxView' => 'view/phui/PHUIBoxView.php',
    'PHUIFeedStoryView' => 'view/phui/PHUIFeedStoryView.php',
    'PackageCreateMail' => 'applications/owners/mail/PackageCreateMail.php',
    'PackageDeleteMail' => 'applications/owners/mail/PackageDeleteMail.php',
@ -2365,6 +2368,8 @@ phutil_register_library_map(array(
    'ManiphestView' => 'AphrontView',
    'MetaMTANotificationType' => 'MetaMTAConstants',
    'OwnersPackageReplyHandler' => 'PhabricatorMailReplyHandler',
+    'PHUIBoxExample' => 'PhabricatorUIExample',
+    'PHUIBoxView' => 'AphrontTagView',
    'PHUIFeedStoryView' => 'AphrontView',
    'PackageCreateMail' => 'PackageMail',
    'PackageDeleteMail' => 'PackageMail',
--- a/src/applications/uiexample/controller/PhabricatorUIExampleRenderController.php
+++ b/src/applications/uiexample/controller/PhabricatorUIExampleRenderController.php
@ -59,6 +59,7 @@ final class PhabricatorUIExampleRenderController extends PhabricatorController {
      array(
        'title'   => 'UI Example',
        'device'  => true,
+        'dust'    => true,
      ));
  }

--- a/src/applications/uiexample/examples/PHUIBoxExample.php
+++ b/src/applications/uiexample/examples/PHUIBoxExample.php
@ -0,0 +1,94 @@
+<?php
+
+final class PHUIBoxExample extends PhabricatorUIExample {
+
+  public function getName() {
+    return 'Box';
+  }
+
+  public function getDescription() {
+    return 'It\'s a fancy or non-fancy box. Put stuff in it.';
+  }
+
+  public function renderExample() {
+
+    $content1 = 'Asmund and Signy';
+    $content2 = 'The Cottager and his Cat';
+    $content3 = 'Geirlug The King\'s Daughter';
+
+    $layout1 =
+      array(
+        id(new PHUIBoxView())
+          ->appendChild($content1),
+        id(new PHUIBoxView())
+          ->appendChild($content2),
+        id(new PHUIBoxView())
+          ->appendChild($content3));
+
+
+    $layout2 =
+      array(
+        id(new PHUIBoxView())
+          ->appendChild($content1)
+          ->addMargin(PHUI::MARGIN_SMALL_LEFT),
+        id(new PHUIBoxView())
+          ->appendChild($content2)
+          ->addMargin(PHUI::MARGIN_MEDIUM_LEFT)
+          ->addMargin(PHUI::MARGIN_MEDIUM_TOP),
+        id(new PHUIBoxView())
+          ->appendChild($content3)
+          ->addMargin(PHUI::MARGIN_LARGE_LEFT)
+          ->addMargin(PHUI::MARGIN_LARGE_TOP));
+
+    $layout3 =
+      array(
+        id(new PHUIBoxView())
+          ->appendChild($content1)
+          ->setShadow(true)
+          ->addPadding(PHUI::PADDING_SMALL)
+          ->addMargin(PHUI::MARGIN_LARGE_BOTTOM),
+        id(new PHUIBoxView())
+          ->appendChild($content2)
+          ->setShadow(true)
+          ->addPadding(PHUI::PADDING_MEDIUM)
+          ->addMargin(PHUI::MARGIN_LARGE_BOTTOM),
+        id(new PHUIBoxView())
+          ->appendChild($content3)
+          ->setShadow(true)
+          ->addPadding(PHUI::PADDING_LARGE)
+          ->addMargin(PHUI::MARGIN_LARGE_BOTTOM));
+
+    $head1 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('Plain Box'));
+
+    $head2 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('Plain Box with space'));
+
+    $head3 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('Shadow Box with space'));
+
+    $wrap1 = id(new PHUIBoxView())
+      ->appendChild($layout1)
+      ->addMargin(PHUI::MARGIN_LARGE);
+
+    $wrap2 = id(new PHUIBoxView())
+      ->appendChild($layout2)
+      ->addMargin(PHUI::MARGIN_LARGE);
+
+    $wrap3 = id(new PHUIBoxView())
+      ->appendChild($layout3)
+      ->addMargin(PHUI::MARGIN_LARGE);
+
+    return phutil_tag(
+      'div',
+        array(),
+        array(
+          $head1,
+          $wrap1,
+          $head2,
+          $wrap2,
+          $head3,
+          $wrap3
+        ));
+        }
+}
--- a/src/applications/uiexample/examples/PhabricatorActionHeaderExample.php
+++ b/src/applications/uiexample/examples/PhabricatorActionHeaderExample.php
@ -49,12 +49,9 @@ final class PhabricatorActionHeaderExample extends PhabricatorUIExample {
      ->setFluidLayout(true)
      ->setGutter(AphrontMultiColumnView::GUTTER_SMALL);

-    $wrap1 = phutil_tag(
-      'div',
-        array(
-          'class' => 'ml'
-        ),
-        $layout1);
+    $wrap1 = id(new PHUIBoxView())
+      ->appendChild($layout1)
+      ->addMargin(PHUI::MARGIN_LARGE);

 /* Policy Icons */
    $title2 = id(new PhabricatorHeaderView())
@ -99,12 +96,9 @@ final class PhabricatorActionHeaderExample extends PhabricatorUIExample {
      ->setFluidLayout(true)
      ->setGutter(AphrontMultiColumnView::GUTTER_SMALL);

-    $wrap2 = phutil_tag(
-      'div',
-        array(
-          'class' => 'ml'
-        ),
-        $layout2);
+    $wrap2 = id(new PHUIBoxView())
+      ->appendChild($layout2)
+      ->addMargin(PHUI::MARGIN_LARGE);


 /* Action Icons */
@ -187,12 +181,9 @@ final class PhabricatorActionHeaderExample extends PhabricatorUIExample {
      ->setFluidLayout(true)
      ->setGutter(AphrontMultiColumnView::GUTTER_SMALL);

-    $wrap3 = phutil_tag(
-      'div',
-        array(
-          'class' => 'ml'
-        ),
-        $layout3);
+    $wrap3 = id(new PHUIBoxView())
+      ->appendChild($layout3)
+      ->addMargin(PHUI::MARGIN_LARGE);

 /* Action Icons */
    $title4 = id(new PhabricatorHeaderView())
@ -243,7 +234,7 @@ final class PhabricatorActionHeaderExample extends PhabricatorUIExample {
      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_YELLOW)
      ->setTag($tag1);

-    $layout3 = id(new AphrontMultiColumnView())
+    $layout4 = id(new AphrontMultiColumnView())
      ->addColumn($header1)
      ->addColumn($header2)
      ->addColumn($header3)
@ -253,12 +244,9 @@ final class PhabricatorActionHeaderExample extends PhabricatorUIExample {
      ->setFluidLayout(true)
      ->setGutter(AphrontMultiColumnView::GUTTER_SMALL);

-    $wrap4 = phutil_tag(
-      'div',
-        array(
-          'class' => 'ml'
-        ),
-        $layout3);
+    $wrap4 = id(new PHUIBoxView())
+      ->appendChild($layout4)
+      ->addMargin(PHUI::MARGIN_LARGE);

    return phutil_tag(
      'div',
--- a/src/applications/uiexample/examples/PhabricatorWorkboardExample.php
+++ b/src/applications/uiexample/examples/PhabricatorWorkboardExample.php
@ -170,26 +170,17 @@ final class PhabricatorWorkboardExample extends PhabricatorUIExample {
    $head3 = id(new PhabricatorHeaderView())
      ->setHeader(pht('Action Panel'));

-    $wrap1 = phutil_tag(
-      'div',
-        array(
-          'class' => 'ml'
-        ),
-        $board);
+    $wrap1 = id(new PHUIBoxView())
+      ->appendChild($board)
+      ->addMargin(PHUI::MARGIN_LARGE);

-    $wrap2 = phutil_tag(
-      'div',
-        array(
-          'class' => 'ml'
-        ),
-        $board2);
+    $wrap2 = id(new PHUIBoxView())
+      ->appendChild($board2)
+      ->addMargin(PHUI::MARGIN_LARGE);

-    $wrap3 = phutil_tag(
-      'div',
-        array(
-          'class' => 'ml'
-        ),
-        $board3);
+    $wrap3 = id(new PHUIBoxView())
+      ->appendChild($board3)
+      ->addMargin(PHUI::MARGIN_LARGE);

    return phutil_tag(
      'div',
--- a/src/view/phui/PHUI.php
+++ b/src/view/phui/PHUI.php
@ -0,0 +1,45 @@
+<?php
+
+final class PHUI {
+
+  const MARGIN_SMALL = 'ms';
+  const MARGIN_MEDIUM = 'mm';
+  const MARGIN_LARGE = 'ml';
+
+  const MARGIN_SMALL_LEFT = 'msl';
+  const MARGIN_MEDIUM_LEFT = 'mml';
+  const MARGIN_LARGE_LEFT = 'mll';
+
+  const MARGIN_SMALL_RIGHT = 'msr';
+  const MARGIN_MEDIUM_RIGHT = 'mmr';
+  const MARGIN_LARGE_RIGHT = 'mlr';
+
+  const MARGIN_SMALL_BOTTOM = 'msb';
+  const MARGIN_MEDIUM_BOTTOM = 'mmb';
+  const MARGIN_LARGE_BOTTOM = 'mlb';
+
+  const MARGIN_SMALL_TOP = 'mst';
+  const MARGIN_MEDIUM_TOP = 'mmt';
+  const MARGIN_LARGE_TOP = 'mlt';
+
+  const PADDING_SMALL = 'ps';
+  const PADDING_MEDIUM = 'pm';
+  const PADDING_LARGE = 'pl';
+
+  const PADDING_SMALL_LEFT = 'psl';
+  const PADDING_MEDIUM_LEFT = 'pml';
+  const PADDING_LARGE_LEFT = 'pll';
+
+  const PADDING_SMALL_RIGHT = 'psr';
+  const PADDING_MEDIUM_RIGHT = 'pmr';
+  const PADDING_LARGE_RIGHT = 'plr';
+
+  const PADDING_SMALL_BOTTOM = 'psb';
+  const PADDING_MEDIUM_BOTTOM = 'pmb';
+  const PADDING_LARGE_BOTTOM = 'plb';
+
+  const PADDING_SMALL_TOP = 'pst';
+  const PADDING_MEDIUM_TOP = 'pmt';
+  const PADDING_LARGE_TOP = 'plt';
+
+}
--- a/src/view/phui/PHUIBoxView.php
+++ b/src/view/phui/PHUIBoxView.php
@ -0,0 +1,57 @@
+<?php
+
+final class PHUIBoxView extends AphrontTagView {
+
+  private $margin = array();
+  private $padding = array();
+  private $shadow = false;
+
+  public function addMargin($margin) {
+    $this->margin[] = $margin;
+    return $this;
+  }
+
+  public function addPadding($padding) {
+    $this->padding[] = $padding;
+    return $this;
+  }
+
+  public function setShadow($shadow) {
+    $this->shadow = $shadow;
+    return $this;
+  }
+
+  public function getTagContent() {
+
+    require_celerity_resource('phui-box-css');
+
+    $outer_classes = array();
+    $outer_classes[] = 'phui-box';
+    if ($this->shadow) {
+      $outer_classes[] = 'phui-box-shadow';
+    }
+    foreach ($this->margin as $margin) {
+      $outer_classes[] = $margin;
+    }
+
+    $inner_classes = array();
+    $inner_classes[] = 'phui-box-inner';
+    foreach ($this->padding as $padding) {
+      $inner_classes[] = $padding;
+    }
+
+    $inner = phutil_tag(
+      'div',
+        array(
+          'class' => implode(' ', $inner_classes)
+        ),
+        $this->renderChildren());
+
+    return phutil_tag(
+      'div',
+        array(
+          'class' => implode(' ', $outer_classes)
+        ),
+        $inner);
+  }
+}
--- a/webroot/rsrc/css/phui/phui-box.css
+++ b/webroot/rsrc/css/phui/phui-box.css
@ -0,0 +1,14 @@
+/**
+ * @provides phui-box-css
+ */
+
+.phui-box-shadow {
+  border-left: 1px solid #e7e7e7;
+  border-right: 1px solid #e7e7e7;
+  border-bottom: 1px solid #c0c5d1;
+}
+
+.phui-box-shadow .phui-box-inner {
+  background-color: #fff;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+}