AphrontNoteView

Summary: This is supposed to look a lot like the way Remarkup renders a block of code, so you can render some out of context message inside another container.  For example in Releeph, it renders a message someone has associated with a Releeph request.

Test Plan:
I've added an abstract uiexample, but the use case in Releeph is more explanatory:

{F33900}

Reviewers: epriestley, chad

Reviewed By: epriestley

CC: aran, Korvin

Maniphest Tasks: T2094

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

src/__celerity_resource_map__.php

@@ -685,6 +685,15 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/aphront/list-filter-view.css',
   ),
+  'aphront-notes' =>
+  array(
+    'uri' => '/res/4b741bc0/rsrc/css/core/aphront-notes.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/core/aphront-notes.css',
+  ),
   'aphront-pager-view-css' =>
   array(
     'uri' => '/res/43fb79f0/rsrc/css/aphront/pager-view.css',

src/applications/uiexample/examples/PhabricatorNoteExample.php

@@ -0,0 +1,148 @@
+<?php
+
+final class PhabricatorNoteExample extends PhabricatorUIExample {
+
+  public function getName() {
+    return "Notes";
+  }
+
+  public function getDescription() {
+    return 'Show little scrollable boxes of text.';
+  }
+
+  public function renderExample() {
+    $short_note = id(new AphrontNoteView())
+      ->setTitle('Short note')
+      ->appendChild('This is a short note');
+
+    $longer_note = id(new AphrontNoteView())
+      ->setTitle('Longer note')
+      ->appendChild($this->buildParagraphs(2));
+
+    $wide_url = 'protocol://www.'.str_repeat('x', 100).'.com/';
+
+    $oversize_note = id(new AphrontNoteView())
+      ->setTitle('Oversize note')
+      ->appendChild(
+          $this->buildParagraphs(2).
+          $wide_url."\n\n".
+          $this->buildParagraphs(5));
+
+    $out = array();
+
+    $out[] = id(new AphrontPanelView())
+      ->setHeader('Unbounded Oversize Note')
+      ->setCaption(
+          'The rest of these examples are contrained by a table, but this one '.
+          'is left free (it still constrains its max height though).')
+      ->appendChild($oversize_note);
+
+    $out[] = id(new AphrontPanelView())
+      ->setHeader("Short notes")
+      ->setCaption(
+          'Two notes of equal size, spacing out an 80% wide table.')
+      ->appendChild(
+          $this->renderTable(
+            array(array($short_note, $short_note))));
+
+    $out[] = id(new AphrontPanelView())
+      ->setHeader("Mixed notes")
+      ->setCaption(
+          'Two rows of notes with unequal height, spacing out their '.
+          'rows vertically.')
+      ->appendChild(
+          $this->renderTable(
+            array(
+              array($longer_note, $short_note),
+              array($short_note, $short_note)
+            )));
+
+    $out[] = id(new AphrontPanelView())
+      ->setHeader("Oversize notes")
+      ->setCaption(
+          'Two rows each with a very large note, '.
+          'showing scrolling behavior.')
+      ->appendChild(
+          $this->renderTable(
+            array(
+              array($oversize_note, $short_note),
+              array($short_note, $oversize_note)
+            )));
+
+    return $out;
+  }
+
+  private function renderTable($rows) {
+    static $td_style = '
+      width: 50%;
+      max-width: 1em;
+    ';
+
+    $trs = array();
+    foreach ($rows as $index => $row) {
+      $count = $index + 1;
+      list($left, $right) = $row;
+      $trs[] = phutil_tag(
+        'tr',
+        array(),
+        array(
+          phutil_tag(
+            'th',
+            array(),
+            "Row {$count}"),
+          phutil_tag('td')));
+
+      $trs[] = phutil_tag(
+        'tr',
+        array(),
+        array(
+          phutil_tag(
+            'td',
+            array(
+              'style' => $td_style,
+            ),
+            $left->render()),
+          phutil_tag(
+            'td',
+            array(
+              'style' => $td_style,
+            ),
+            $right->render())));
+    }
+
+    return phutil_tag(
+      'table',
+      array(
+        'style' => 'width: 80%;'
+      ),
+      $trs);
+  }
+
+  private function buildParagraphs($num_paragraphs) {
+    $body = '';
+    for ($pp = 0; $pp < $num_paragraphs; $pp++) {
+      $scale = 50 * ($pp / 2);
+      $num_words = 30 + self::getRandom(0, $scale);
+      for ($ii = 0; $ii < $num_words; $ii++) {
+        $word = str_repeat('x', self::getRandom(3, 8));
+        $body .= $word.' ';
+      }
+      $body .= "\n\n";
+    }
+    return $body;
+  }
+
+  private static function getRandom($lower, $upper) {
+    // The ZX Spectrum's PRNG!
+    static $nn = 65537;
+    static $gg = 75;
+    static $ii = 1;
+    $ii = ($ii * $gg) % $nn;
+    if ($lower == $upper) {
+      return $lower;
+    } else {
+      return $lower + ($ii % ($upper - $lower));
+    }
+  }
+
+}

src/view/widget/AphrontNoteView.php

@@ -0,0 +1,38 @@
+<?php
+
+final class AphrontNoteView extends AphrontView {
+
+  private $title;
+
+  public function setTitle($title) {
+    $this->title = $title;
+    return $this;
+  }
+
+  public function render() {
+    $title = phutil_tag(
+      'div',
+      array(
+        'class' => 'title',
+      ),
+      $this->title);
+
+    $inner = phutil_tag(
+      'div',
+      array(
+        'class' => 'inner',
+      ),
+      $this->renderChildren());
+
+    require_celerity_resource('aphront-notes');
+    return phutil_tag(
+      'div',
+      array(
+        'class' => 'aphront-note',
+      ),
+      array(
+        $title,
+        $inner));
+  }
+
+}

webroot/rsrc/css/core/aphront-notes.css

@@ -0,0 +1,26 @@
+/**
+ * @provides aphront-notes
+ */
+
+div.aphront-note {
+  margin: 1em;
+  background: #ffc;
+  border: 1px solid #ccc;
+}
+
+div.aphront-note div.title {
+  margin: 0;
+  padding: 0.2em 0.5em 0.2em;
+  background: #ffd;
+  border-bottom: 1px solid #ccc;
+  color: #888;
+  font-size: smaller;
+}
+
+div.aphront-note div.inner {
+  overflow: auto;
+  padding: 0.5em;
+  max-height: 25em;
+  color: #333;
+  font-size: smaller;
+}