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:
parent
b3a63a62a2
commit
b88743137b
4 changed files with 221 additions and 0 deletions
|
@ -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',
|
||||
|
|
148
src/applications/uiexample/examples/PhabricatorNoteExample.php
Normal file
148
src/applications/uiexample/examples/PhabricatorNoteExample.php
Normal 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));
|
||||
}
|
||||
}
|
||||
|
||||
}
|
38
src/view/widget/AphrontNoteView.php
Normal file
38
src/view/widget/AphrontNoteView.php
Normal 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));
|
||||
}
|
||||
|
||||
}
|
26
webroot/rsrc/css/core/aphront-notes.css
Normal file
26
webroot/rsrc/css/core/aphront-notes.css
Normal 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;
|
||||
}
|
Loading…
Reference in a new issue