archive/phabricator
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Fix some ObjectItemList issues

Browse Source 
Summary:
Safari has a weird bug with `border-radius` plus border color:

{F35865}

Move the uncolored borders to an internal div to fix this. Also tweak some positioning on icons for cards, and add a "magenta" color.

Test Plan: {F35866}

Reviewers: chad, btrahan

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D5338
This commit is contained in:
epriestley
2013-03-23 14:37:18 -07:00
parent efe0c135fe
commit 5e53fc750a
7 changed files with 335 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/__celerity_resource_map__.php
View File

@@ -581,6 +581,13 @@ celerity_register_resource_map(array(
'disk' => '/rsrc/image/texture/dust_background.jpg',
'type' => 'jpg',
),
'/rsrc/image/texture/grip.png' =>
array(
'hash' => 'f11bc231d241f1335cfca2933ad234e0',
'uri' => '/res/f11bc231/rsrc/image/texture/grip.png',
'disk' => '/rsrc/image/texture/grip.png',
'type' => 'png',
),
'/rsrc/image/texture/pholio-background.gif' =>
array(
'hash' => 'cf4561af116edf393dc583e5119fb412',
@@ -2988,7 +2995,7 @@ celerity_register_resource_map(array(
),
'phabricator-object-item-list-view-css' =>
array(
'uri' => '/res/f3c39d6f/rsrc/css/layout/phabricator-object-item-list-view.css',
'uri' => '/res/aa09c531/rsrc/css/layout/phabricator-object-item-list-view.css',
'type' => 'css',
'requires' =>
array(
@@ -3686,7 +3693,7 @@ celerity_register_resource_map(array(
), array(
'packages' =>
array(
'3f552ecc' =>
'6c294512' =>
array(
'name' => 'core.pkg.css',
'symbols' =>
@@ -3728,7 +3735,7 @@ celerity_register_resource_map(array(
34 => 'phabricator-object-item-list-view-css',
35 => 'global-drag-and-drop-css',
),
'uri' => '/res/pkg/3f552ecc/core.pkg.css',
'uri' => '/res/pkg/6c294512/core.pkg.css',
'type' => 'css',
),
'95ceba95' =>
@@ -3919,16 +3926,16 @@ celerity_register_resource_map(array(
'reverse' =>
array(
'aphront-attached-file-view-css' => 'c41b4907',
'aphront-dialog-view-css' => '3f552ecc',
'aphront-error-view-css' => '3f552ecc',
'aphront-form-view-css' => '3f552ecc',
'aphront-list-filter-view-css' => '3f552ecc',
'aphront-pager-view-css' => '3f552ecc',
'aphront-panel-view-css' => '3f552ecc',
'aphront-table-view-css' => '3f552ecc',
'aphront-tokenizer-control-css' => '3f552ecc',
'aphront-tooltip-css' => '3f552ecc',
'aphront-typeahead-control-css' => '3f552ecc',
'aphront-dialog-view-css' => '6c294512',
'aphront-error-view-css' => '6c294512',
'aphront-form-view-css' => '6c294512',
'aphront-list-filter-view-css' => '6c294512',
'aphront-pager-view-css' => '6c294512',
'aphront-panel-view-css' => '6c294512',
'aphront-table-view-css' => '6c294512',
'aphront-tokenizer-control-css' => '6c294512',
'aphront-tooltip-css' => '6c294512',
'aphront-typeahead-control-css' => '6c294512',
'differential-changeset-view-css' => '8aaacd1b',
'differential-core-view-css' => '8aaacd1b',
'differential-inline-comment-editor' => '322728f3',
@@ -3942,7 +3949,7 @@ celerity_register_resource_map(array(
'differential-table-of-contents-css' => '8aaacd1b',
'diffusion-commit-view-css' => 'c8ce2d88',
'diffusion-icons-css' => 'c8ce2d88',
'global-drag-and-drop-css' => '3f552ecc',
'global-drag-and-drop-css' => '6c294512',
'inline-comment-summary-css' => '8aaacd1b',
'javelin-aphlict' => '95ceba95',
'javelin-behavior' => 'fe22443b',
@@ -4014,48 +4021,48 @@ celerity_register_resource_map(array(
'javelin-util' => 'fe22443b',
'javelin-vector' => 'fe22443b',
'javelin-workflow' => 'fe22443b',
'lightbox-attachment-css' => '3f552ecc',
'lightbox-attachment-css' => '6c294512',
'maniphest-task-summary-css' => 'c41b4907',
'maniphest-transaction-detail-css' => 'c41b4907',
'phabricator-busy' => '95ceba95',
'phabricator-content-source-view-css' => '8aaacd1b',
'phabricator-core-buttons-css' => '3f552ecc',
'phabricator-core-css' => '3f552ecc',
'phabricator-crumbs-view-css' => '3f552ecc',
'phabricator-directory-css' => '3f552ecc',
'phabricator-core-buttons-css' => '6c294512',
'phabricator-core-css' => '6c294512',
'phabricator-crumbs-view-css' => '6c294512',
'phabricator-directory-css' => '6c294512',
'phabricator-drag-and-drop-file-upload' => '322728f3',
'phabricator-dropdown-menu' => '95ceba95',
'phabricator-file-upload' => '95ceba95',
'phabricator-filetree-view-css' => '3f552ecc',
'phabricator-flag-css' => '3f552ecc',
'phabricator-form-view-css' => '3f552ecc',
'phabricator-header-view-css' => '3f552ecc',
'phabricator-jump-nav' => '3f552ecc',
'phabricator-filetree-view-css' => '6c294512',
'phabricator-flag-css' => '6c294512',
'phabricator-form-view-css' => '6c294512',
'phabricator-header-view-css' => '6c294512',
'phabricator-jump-nav' => '6c294512',
'phabricator-keyboard-shortcut' => '95ceba95',
'phabricator-keyboard-shortcut-manager' => '95ceba95',
'phabricator-main-menu-view' => '3f552ecc',
'phabricator-main-menu-view' => '6c294512',
'phabricator-menu-item' => '95ceba95',
'phabricator-nav-view-css' => '3f552ecc',
'phabricator-nav-view-css' => '6c294512',
'phabricator-notification' => '95ceba95',
'phabricator-notification-css' => '3f552ecc',
'phabricator-notification-menu-css' => '3f552ecc',
'phabricator-object-item-list-view-css' => '3f552ecc',
'phabricator-notification-css' => '6c294512',
'phabricator-notification-menu-css' => '6c294512',
'phabricator-object-item-list-view-css' => '6c294512',
'phabricator-object-selector-css' => '8aaacd1b',
'phabricator-paste-file-upload' => '95ceba95',
'phabricator-prefab' => '95ceba95',
'phabricator-project-tag-css' => 'c41b4907',
'phabricator-remarkup-css' => '3f552ecc',
'phabricator-remarkup-css' => '6c294512',
'phabricator-shaped-request' => '322728f3',
'phabricator-side-menu-view-css' => '3f552ecc',
'phabricator-standard-page-view' => '3f552ecc',
'phabricator-side-menu-view-css' => '6c294512',
'phabricator-standard-page-view' => '6c294512',
'phabricator-textareautils' => '95ceba95',
'phabricator-tooltip' => '95ceba95',
'phabricator-transaction-view-css' => '3f552ecc',
'phabricator-zindex-css' => '3f552ecc',
'sprite-apps-large-css' => '3f552ecc',
'sprite-gradient-css' => '3f552ecc',
'sprite-icon-css' => '3f552ecc',
'sprite-menu-css' => '3f552ecc',
'syntax-highlighting-css' => '3f552ecc',
'phabricator-transaction-view-css' => '6c294512',
'phabricator-zindex-css' => '6c294512',
'sprite-apps-large-css' => '6c294512',
'sprite-gradient-css' => '6c294512',
'sprite-icon-css' => '6c294512',
'sprite-menu-css' => '6c294512',
'syntax-highlighting-css' => '6c294512',
),
));

9
src/aphront/response/AphrontAjaxResponse.php
View File

@@ -45,9 +45,16 @@ final class AphrontAjaxResponse extends AphrontResponse {
));
}
// Flatten the response first, so we initialize any behaviors and metadata
// we need to.
$content = array(
'payload' => $this->content,
);
$this->encodeJSONForHTTPResponse($content);
$response = CelerityAPI::getStaticResourceResponse();
$object = $response->buildAjaxResponse(
$this->content,
$content['payload'],
$this->error);
$response_json = $this->encodeJSONForHTTPResponse($object);

6
src/aphront/response/AphrontResponse.php
View File

@@ -55,6 +55,12 @@ abstract class AphrontResponse {
}
public static function processValueForJSONEncoding(&$value, $key) {
if ($value instanceof PhutilSafeHTMLProducerInterface) {
// This renders the producer down to PhutilSafeHTML, which will then
// be simplified into a string below.
$value = hsprintf('%s', $value);
}
if ($value instanceof PhutilSafeHTML) {
// TODO: Javelin supports implicity conversion of '__html' objects to
// JX.HTML, but only for Ajax responses, not behaviors. Just leave things

73
src/applications/uiexample/examples/PhabricatorObjectItemListExample.php
View File

@@ -28,16 +28,19 @@ final class PhabricatorObjectItemListExample extends PhabricatorUIExample {
$list->addItem(
id(new PhabricatorObjectItemView())
->setObjectName('FRUIT1')
->setHeader(pht('Apple'))
->setHref('#'));
$list->addItem(
id(new PhabricatorObjectItemView())
->setObjectName('FRUIT2')
->setHeader(pht('Banana'))
->setHref('#'));
$list->addItem(
id(new PhabricatorObjectItemView())
->setObjectName('FRUIT3')
->setHeader(pht('Cherry'))
->setHref('#'));
@@ -85,32 +88,68 @@ final class PhabricatorObjectItemListExample extends PhabricatorUIExample {
$list->addItem(
id(new PhabricatorObjectItemView())
->setHeader(pht('Business Card')));
->setHeader(pht('Business Card'))
->setBarColor('red'));
$list->addItem(
id(new PhabricatorObjectItemView())
->setHeader(pht('Playing Card')));
->setHeader(pht('Playing Card'))
->setBarColor('orange')
->addIcon('comment', pht('Royal Flush!')));
$list->addItem(
id(new PhabricatorObjectItemView())
->setHeader(pht('House of Cards')));
->setHeader(pht('House of Cards'))
->setBarColor('yellow'));
$list->addItem(
id(new PhabricatorObjectItemView())
->setHeader(pht('Cardigan')));
->setHeader(pht('Cardigan'))
->setBarColor('green'));
$list->addItem(
id(new PhabricatorObjectItemView())
->setHeader(pht('Cardamom'))
->addFootIcon('highlight-white', 'Spice'));
->addFootIcon('highlight-white', 'Spice')
->setBarColor('blue'));
$list->addItem(
id(new PhabricatorObjectItemView())
->setHeader(pht(
'The human cardiovascular system includes the heart, lungs, and '.
'some other parts; most of these parts are pretty squishy'))
->addFootIcon('search-white', pht('Respiration!'))
->addHandleIcon($handle, pht('You have a cardiovascular system!')));
->addHandleIcon($handle, pht('You have a cardiovascular system!'))
->setBarColor('magenta'));
$out[] = array($head, $list);
$head = id(new PhabricatorHeaderView())
->setHeader(pht('Grippable List'));
$list = new PhabricatorObjectItemListView();
$list->setCards(true);
$list->addItem(
id(new PhabricatorObjectItemView())
->setHeader(pht('Grab ahold!'))
->setHref('#')
->setGrippable(true)
->setBarColor('red'));
$list->addItem(
id(new PhabricatorObjectItemView())
->setHeader(pht('Hold on tight!'))
->setHref('#')
->setGrippable(true)
->setBarColor('yellow'));
$list->addItem(
id(new PhabricatorObjectItemView())
->setHeader(pht("Don't let go!"))
->setHref('#')
->setGrippable(true)
->setBarColor('green'));
$out[] = array($head, $list);
$head = id(new PhabricatorHeaderView())
->setHeader(pht('Extras'));
@@ -129,6 +168,28 @@ final class PhabricatorObjectItemListExample extends PhabricatorUIExample {
->addHandleIcon($handle, pht('You hold all the cards.'))
->addHandleIcon($handle, pht('You make all the rules.')));
$list->addItem(
id(new PhabricatorObjectItemView())
->setHeader(pht('Just A Handle'))
->setHref('#')
->addHandleIcon($handle, pht('Handle Here')));
$list->addItem(
id(new PhabricatorObjectItemView())
->setHeader(pht('Poor Use of Space'))
->setHref('#')
->addAttribute('North West')
->addHandleIcon($handle, pht('South East')));
$list->addItem(
id(new PhabricatorObjectItemView())
->setHeader(pht('Crowded Eastern Edge'))
->setHref('#')
->addIcon('computer', pht('Stuff'))
->addIcon('computer', pht('Stuff'))
->addIcon('computer', pht('Stuff'))
->addHandleIcon($handle, pht('More Stuff')));
$out[] = array($head, $list);

126
src/view/layout/PhabricatorObjectItemView.php
View File

@@ -2,6 +2,7 @@
final class PhabricatorObjectItemView extends AphrontView {
private $objectName;
private $header;
private $href;
private $attributes = array();
@@ -11,6 +12,21 @@ final class PhabricatorObjectItemView extends AphrontView {
private $effect;
private $footIcons = array();
private $handleIcons = array();
private $grippable;
public function setObjectName($name) {
$this->objectName = $name;
return $this;
}
public function setGrippable($grippable) {
$this->grippable = $grippable;
return $this;
}
public function getGrippable() {
return $this->grippable;
}
public function setEffect($effect) {
$this->effect = $effect;
@@ -94,15 +110,38 @@ final class PhabricatorObjectItemView extends AphrontView {
$item_classes = array();
$content_classes[] = 'phabricator-object-item-content';
$header = phutil_tag(
$header_name = null;
if ($this->objectName) {
$header_name = array(
phutil_tag(
'span',
array(
'class' => 'phabricator-object-item-objname',
),
$this->objectName),
' ',
);
}
$header_link = phutil_tag(
$this->href ? 'a' : 'div',
array(
'href' => $this->href,
'class' => 'phabricator-object-item-name',
'class' => 'phabricator-object-item-link',
),
$this->header);
$icons = null;
$header = phutil_tag(
'div',
array(
'class' => 'phabricator-object-item-name',
),
array(
$header_name,
$header_link,
));
$icons = array();
if ($this->icons) {
$icon_list = array();
foreach ($this->icons as $spec) {
@@ -141,7 +180,7 @@ final class PhabricatorObjectItemView extends AphrontView {
$icon_href);
}
$icons = phutil_tag(
$icons[] = phutil_tag(
'ul',
array(
'class' => 'phabricator-object-item-icons',
@@ -150,6 +189,29 @@ final class PhabricatorObjectItemView extends AphrontView {
$item_classes[] = 'phabricator-object-item-with-icons';
}
if ($this->handleIcons) {
$handle_bar = array();
foreach ($this->handleIcons as $icon) {
$handle_bar[] = $this->renderHandleIcon($icon['icon'], $icon['label']);
}
$icons[] = phutil_tag(
'div',
array(
'class' => 'phabricator-object-item-handle-icons',
),
$handle_bar);
$item_classes[] = 'phabricator-object-item-with-handle-icons';
}
if ($icons) {
$icons = phutil_tag(
'div',
array(
'class' => 'phabricator-object-icon-pane',
),
$icons);
}
$attrs = null;
if ($this->attributes) {
$attrs = array();
@@ -181,42 +243,19 @@ final class PhabricatorObjectItemView extends AphrontView {
$item_classes[] = 'phabricator-object-item-with-attrs';
}
$foot = array();
if ($this->handleIcons) {
$handle_bar = array();
foreach ($this->handleIcons as $icon) {
$handle_bar[] = $this->renderHandleIcon($icon['icon'], $icon['label']);
}
$foot[] = phutil_tag(
'div',
array(
'class' => 'phabricator-object-item-handle-icons',
),
$handle_bar);
$item_classes[] = 'phabricator-object-item-with-handle-icons';
}
$foot = null;
if ($this->footIcons) {
$foot_bar = array();
foreach ($this->footIcons as $icon) {
$foot_bar[] = $this->renderFootIcon($icon['icon'], $icon['label']);
}
$foot[] = phutil_tag(
$foot = phutil_tag(
'div',
array(
'class' => 'phabricator-object-item-foot-icons',
),
$foot_bar);
}
if ($foot) {
$foot = phutil_tag(
'div',
array(
'class' => 'phabricator-object-item-foot',
),
$foot);
$item_classes[] = 'phabricator-object-item-with-foot-icons';
}
$item_classes[] = 'phabricator-object-item';
@@ -237,6 +276,17 @@ final class PhabricatorObjectItemView extends AphrontView {
throw new Exception(pht("Invalid effect!"));
}
$grippable = null;
if ($this->getGrippable()) {
$item_classes[] = 'phabricator-object-item-grippable';
$grippable = phutil_tag(
'div',
array(
'class' => 'phabricator-object-item-grip',
),
'');
}
$content = phutil_tag(
'div',
array(
@@ -246,6 +296,7 @@ final class PhabricatorObjectItemView extends AphrontView {
$header,
$attrs,
$this->renderChildren(),
$foot,
));
return phutil_tag(
@@ -253,11 +304,16 @@ final class PhabricatorObjectItemView extends AphrontView {
array(
'class' => implode(' ', $item_classes),
),
array(
$icons,
$content,
$foot,
));
phutil_tag(
'div',
array(
'class' => 'phabricator-object-item-frame',
),
array(
$grippable,
$icons,
$content,
)));
}
private function renderFootIcon($icon, $label) {