1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-10 00:42:41 +01:00

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
This commit is contained in:
Edward Speyer 2013-02-26 19:28:50 +00:00
parent b3a63a62a2
commit b88743137b
4 changed files with 221 additions and 0 deletions

View file

@ -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',

View file

@ -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));
}
}
}

View file

@ -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));
}
}

View file

@ -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;
}