revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-23 05:50:55 +01:00
Code Issues Releases Wiki Activity

PHUIIconView

Browse source 
Summary: Adds a base class for displaying images and icons.

Test Plan: Tested giving and taking tokens, viewed action headers, uiexamples for icons, workboards.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5736
This commit is contained in:
Chad Little 2013-04-19 17:44:20 -07:00
parent dc6cfe6e01
commit 7aea37c443
20 changed files with 341 additions and 170 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
resources/sprite/manifest/actions.json
View file

@ -3,7 +3,7 @@
"sprites" : { "sprites" : {
"actions-close-dark" : { "actions-close-dark" : {
"name" : "actions-close-dark", "name" : "actions-close-dark",
"rule" : ".actions-close-dark, .device-desktop .actions-close-grey.phabricator-action-icon-item-link:hover", "rule" : ".actions-close-dark, .device-desktop .actions-close-grey.phui-icon-item-link:hover",
"hash" : "f04c5692010a6d96b6fa83a26d73737e" "hash" : "f04c5692010a6d96b6fa83a26d73737e"
}, },
"actions-close-grey" : { "actions-close-grey" : {
@ -18,7 +18,7 @@
}, },
"actions-flag-dark" : { "actions-flag-dark" : {
"name" : "actions-flag-dark", "name" : "actions-flag-dark",
"rule" : ".actions-flag-dark, .device-desktop .actions-flag-grey.phabricator-action-icon-item-link:hover", "rule" : ".actions-flag-dark, .device-desktop .actions-flag-grey.phui-icon-item-link:hover",
"hash" : "4ae54fc28dd2d6cfa6e57dde7bd640cf" "hash" : "4ae54fc28dd2d6cfa6e57dde7bd640cf"
}, },
"actions-flag-grey" : { "actions-flag-grey" : {
@ -33,7 +33,7 @@
}, },
"actions-heart-dark" : { "actions-heart-dark" : {
"name" : "actions-heart-dark", "name" : "actions-heart-dark",
"rule" : ".actions-heart-dark, .device-desktop .actions-heart-grey.phabricator-action-icon-item-link:hover", "rule" : ".actions-heart-dark, .device-desktop .actions-heart-grey.phui-icon-item-link:hover",
"hash" : "90b437a281724a4961e33272eafd616b" "hash" : "90b437a281724a4961e33272eafd616b"
}, },
"actions-heart-grey" : { "actions-heart-grey" : {
@ -48,7 +48,7 @@
}, },
"actions-move-dark" : { "actions-move-dark" : {
"name" : "actions-move-dark", "name" : "actions-move-dark",
"rule" : ".actions-move-dark, .device-desktop .actions-move-grey.phabricator-action-icon-item-link:hover", "rule" : ".actions-move-dark, .device-desktop .actions-move-grey.phui-icon-item-link:hover",
"hash" : "38f5b9168bf04d1a904b09805e589cd7" "hash" : "38f5b9168bf04d1a904b09805e589cd7"
}, },
"actions-move-grey" : { "actions-move-grey" : {
@ -63,7 +63,7 @@
}, },
"actions-new-dark" : { "actions-new-dark" : {
"name" : "actions-new-dark", "name" : "actions-new-dark",
"rule" : ".actions-new-dark, .device-desktop .actions-new-grey.phabricator-action-icon-item-link:hover", "rule" : ".actions-new-dark, .device-desktop .actions-new-grey.phui-icon-item-link:hover",
"hash" : "52c45b76d0dbd51e6eb65f0597d5098a" "hash" : "52c45b76d0dbd51e6eb65f0597d5098a"
}, },
"actions-new-grey" : { "actions-new-grey" : {
@ -78,7 +78,7 @@
}, },
"actions-search-dark" : { "actions-search-dark" : {
"name" : "actions-search-dark", "name" : "actions-search-dark",
"rule" : ".actions-search-dark, .device-desktop .actions-search-grey.phabricator-action-icon-item-link:hover", "rule" : ".actions-search-dark, .device-desktop .actions-search-grey.phui-icon-item-link:hover",
"hash" : "6ff124bc9423bf98be5a53e22508cd26" "hash" : "6ff124bc9423bf98be5a53e22508cd26"
}, },
"actions-search-grey" : { "actions-search-grey" : {
@ -93,7 +93,7 @@
}, },
"actions-settings-dark" : { "actions-settings-dark" : {
"name" : "actions-settings-dark", "name" : "actions-settings-dark",
"rule" : ".actions-settings-dark, .device-desktop .actions-settings-grey.phabricator-action-icon-item-link:hover", "rule" : ".actions-settings-dark, .device-desktop .actions-settings-grey.phui-icon-item-link:hover",
"hash" : "5ecb08643250a052e5d090ef4660faf5" "hash" : "5ecb08643250a052e5d090ef4660faf5"
}, },
"actions-settings-grey" : { "actions-settings-grey" : {
@ -108,7 +108,7 @@
}, },
"actions-star-dark" : { "actions-star-dark" : {
"name" : "actions-star-dark", "name" : "actions-star-dark",
"rule" : ".actions-star-dark, .device-desktop .actions-star-grey.phabricator-action-icon-item-link:hover", "rule" : ".actions-star-dark, .device-desktop .actions-star-grey.phui-icon-item-link:hover",
"hash" : "45567d03f8e34811eca0621e93b5e050" "hash" : "45567d03f8e34811eca0621e93b5e050"
}, },
"actions-star-grey" : { "actions-star-grey" : {
@ -123,7 +123,7 @@
}, },
"actions-tag-dark" : { "actions-tag-dark" : {
"name" : "actions-tag-dark", "name" : "actions-tag-dark",
"rule" : ".actions-tag-dark, .device-desktop .actions-tag-grey.phabricator-action-icon-item-link:hover", "rule" : ".actions-tag-dark, .device-desktop .actions-tag-grey.phui-icon-item-link:hover",
"hash" : "24d97fa7524d0bf1bac17d9e07a63f48" "hash" : "24d97fa7524d0bf1bac17d9e07a63f48"
}, },
"actions-tag-grey" : { "actions-tag-grey" : {
@ -138,7 +138,7 @@
}, },
"actions-wrench-dark" : { "actions-wrench-dark" : {
"name" : "actions-wrench-dark", "name" : "actions-wrench-dark",
"rule" : ".actions-wrench-dark, .device-desktop .actions-wrench-grey.phabricator-action-icon-item-link:hover", "rule" : ".actions-wrench-dark, .device-desktop .actions-wrench-grey.phui-icon-item-link:hover",
"hash" : "3a5cfa463c3c89194d3bbce3952a6e80" "hash" : "3a5cfa463c3c89194d3bbce3952a6e80"
}, },
"actions-wrench-grey" : { "actions-wrench-grey" : {

96
resources/sprite/manifest/tokens.json
View file

@ -1,84 +1,84 @@
{ {
"version" : 1, "version" : 1,
"sprites" : { "sprites" : {
"token-coin-1" : { "tokens-coin-1" : {
"name" : "token-coin-1", "name" : "tokens-coin-1",
"rule" : ".token-coin-1", "rule" : ".tokens-coin-1",
"hash" : "5e1fa22d5ef7f2d8ea14839c303315bb" "hash" : "5e1fa22d5ef7f2d8ea14839c303315bb"
}, },
"token-coin-2" : { "tokens-coin-2" : {
"name" : "token-coin-2", "name" : "tokens-coin-2",
"rule" : ".token-coin-2", "rule" : ".tokens-coin-2",
"hash" : "6a6ef9f8730e5919fa16669258ecb74d" "hash" : "6a6ef9f8730e5919fa16669258ecb74d"
}, },
"token-coin-3" : { "tokens-coin-3" : {
"name" : "token-coin-3", "name" : "tokens-coin-3",
"rule" : ".token-coin-3", "rule" : ".tokens-coin-3",
"hash" : "97256d9133c6aaf965925218d846cc32" "hash" : "97256d9133c6aaf965925218d846cc32"
}, },
"token-coin-4" : { "tokens-coin-4" : {
"name" : "token-coin-4", "name" : "tokens-coin-4",
"rule" : ".token-coin-4", "rule" : ".tokens-coin-4",
"hash" : "51cb98e751ad6f7f6d30d0acbe3bfc7c" "hash" : "51cb98e751ad6f7f6d30d0acbe3bfc7c"
}, },
"token-heart-1" : { "tokens-heart-1" : {
"name" : "token-heart-1", "name" : "tokens-heart-1",
"rule" : ".token-heart-1", "rule" : ".tokens-heart-1",
"hash" : "eacfe71d6ede3f994223a02e875135b2" "hash" : "eacfe71d6ede3f994223a02e875135b2"
}, },
"token-heart-2" : { "tokens-heart-2" : {
"name" : "token-heart-2", "name" : "tokens-heart-2",
"rule" : ".token-heart-2", "rule" : ".tokens-heart-2",
"hash" : "4745a935630e1b049e63c93e88667867" "hash" : "4745a935630e1b049e63c93e88667867"
}, },
"token-like-1" : { "tokens-like-1" : {
"name" : "token-like-1", "name" : "tokens-like-1",
"rule" : ".token-like-1", "rule" : ".tokens-like-1",
"hash" : "6e38278e6653c03135157d2865907722" "hash" : "6e38278e6653c03135157d2865907722"
}, },
"token-like-2" : { "tokens-like-2" : {
"name" : "token-like-2", "name" : "tokens-like-2",
"rule" : ".token-like-2", "rule" : ".tokens-like-2",
"hash" : "fb47711ebbc21515cfd6fab3a19d8c7a" "hash" : "fb47711ebbc21515cfd6fab3a19d8c7a"
}, },
"token-medal-1" : { "tokens-medal-1" : {
"name" : "token-medal-1", "name" : "tokens-medal-1",
"rule" : ".token-medal-1", "rule" : ".tokens-medal-1",
"hash" : "979c6f8b7dad182e912a0d67b44595c2" "hash" : "979c6f8b7dad182e912a0d67b44595c2"
}, },
"token-medal-2" : { "tokens-medal-2" : {
"name" : "token-medal-2", "name" : "tokens-medal-2",
"rule" : ".token-medal-2", "rule" : ".tokens-medal-2",
"hash" : "2263fc36370d88bceb620128902a51ae" "hash" : "2263fc36370d88bceb620128902a51ae"
}, },
"token-medal-3" : { "tokens-medal-3" : {
"name" : "token-medal-3", "name" : "tokens-medal-3",
"rule" : ".token-medal-3", "rule" : ".tokens-medal-3",
"hash" : "95a83057cbd9ebb7ca2f1f082c72ddac" "hash" : "95a83057cbd9ebb7ca2f1f082c72ddac"
}, },
"token-medal-4" : { "tokens-medal-4" : {
"name" : "token-medal-4", "name" : "tokens-medal-4",
"rule" : ".token-medal-4", "rule" : ".tokens-medal-4",
"hash" : "c8c94dd2f0e8a2a8711f1f21be61ea3b" "hash" : "c8c94dd2f0e8a2a8711f1f21be61ea3b"
}, },
"token-misc-1" : { "tokens-misc-1" : {
"name" : "token-misc-1", "name" : "tokens-misc-1",
"rule" : ".token-misc-1", "rule" : ".tokens-misc-1",
"hash" : "d16df367d29e0aedabcfb11c672ebd8c" "hash" : "d16df367d29e0aedabcfb11c672ebd8c"
}, },
"token-misc-2" : { "tokens-misc-2" : {
"name" : "token-misc-2", "name" : "tokens-misc-2",
"rule" : ".token-misc-2", "rule" : ".tokens-misc-2",
"hash" : "74d971c084b2f7665a84c61c0846446c" "hash" : "74d971c084b2f7665a84c61c0846446c"
}, },
"token-misc-3" : { "tokens-misc-3" : {
"name" : "token-misc-3", "name" : "tokens-misc-3",
"rule" : ".token-misc-3", "rule" : ".tokens-misc-3",
"hash" : "c91387778404c8e88f243477d056d985" "hash" : "c91387778404c8e88f243477d056d985"
}, },
"token-misc-4" : { "tokens-misc-4" : {
"name" : "token-misc-4", "name" : "tokens-misc-4",
"rule" : ".token-misc-4", "rule" : ".tokens-misc-4",
"hash" : "4705e7c79906180c04286a62d375f33b" "hash" : "4705e7c79906180c04286a62d375f33b"
} }
}, },

28
src/__celerity_resource_map__.php
View file

@ -2839,15 +2839,6 @@ celerity_register_resource_map(array(
), ),
'disk' => '/rsrc/css/layout/phabricator-action-header-view.css', 'disk' => '/rsrc/css/layout/phabricator-action-header-view.css',
), ),
'phabricator-action-icon-view-css' =>
array(
'uri' => '/res/dbceab3e/rsrc/css/layout/phabricator-action-icon-view.css',
'type' => 'css',
'requires' =>
array(
),
'disk' => '/rsrc/css/layout/phabricator-action-icon-view.css',
),
'phabricator-action-list-view-css' => 'phabricator-action-list-view-css' =>
array( array(
'uri' => '/res/3d02ca59/rsrc/css/layout/phabricator-action-list-view.css', 'uri' => '/res/3d02ca59/rsrc/css/layout/phabricator-action-list-view.css',
@ -3525,7 +3516,7 @@ celerity_register_resource_map(array(
), ),
'phabricator-workboard-view-css' => 'phabricator-workboard-view-css' =>
array( array(
'uri' => '/res/14217087/rsrc/css/layout/phabricator-workboard-view.css', 'uri' => '/res/e48df9e8/rsrc/css/layout/phabricator-workboard-view.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -3606,13 +3597,22 @@ celerity_register_resource_map(array(
), ),
'phui-feed-story-css' => 'phui-feed-story-css' =>
array( array(
'uri' => '/res/9b5bb654/rsrc/css/phui/phui-feed-story.css', 'uri' => '/res/a2db2369/rsrc/css/phui/phui-feed-story.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
), ),
'disk' => '/rsrc/css/phui/phui-feed-story.css', 'disk' => '/rsrc/css/phui/phui-feed-story.css',
), ),
'phui-icon-view-css' =>
array(
'uri' => '/res/4d0588b4/rsrc/css/phui/phui-icon.css',
'type' => 'css',
'requires' =>
array(
),
'disk' => '/rsrc/css/phui/phui-icon.css',
),
'ponder-comment-table-css' => 'ponder-comment-table-css' =>
array( array(
'uri' => '/res/a1bb9056/rsrc/css/application/ponder/comments.css', 'uri' => '/res/a1bb9056/rsrc/css/application/ponder/comments.css',
@ -3786,7 +3786,7 @@ celerity_register_resource_map(array(
), ),
'sprite-actions-css' => 'sprite-actions-css' =>
array( array(
'uri' => '/res/00b8f8bc/rsrc/css/sprite-actions.css', 'uri' => '/res/89d67d5a/rsrc/css/sprite-actions.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -3876,7 +3876,7 @@ celerity_register_resource_map(array(
), ),
'sprite-tokens-css' => 'sprite-tokens-css' =>
array( array(
'uri' => '/res/9ae0de5b/rsrc/css/sprite-tokens.css', 'uri' => '/res/edb4e341/rsrc/css/sprite-tokens.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -3912,7 +3912,7 @@ celerity_register_resource_map(array(
), ),
'tokens-css' => 'tokens-css' =>
array( array(
'uri' => '/res/6b3c65c7/rsrc/css/application/tokens/tokens.css', 'uri' => '/res/1699df7d/rsrc/css/application/tokens/tokens.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(

6
src/__phutil_library_map__.php
View file

@ -667,6 +667,8 @@ phutil_register_library_map(array(
'PHUIBoxExample' => 'applications/uiexample/examples/PHUIBoxExample.php', 'PHUIBoxExample' => 'applications/uiexample/examples/PHUIBoxExample.php',
'PHUIBoxView' => 'view/phui/PHUIBoxView.php', 'PHUIBoxView' => 'view/phui/PHUIBoxView.php',
'PHUIFeedStoryView' => 'view/phui/PHUIFeedStoryView.php', 'PHUIFeedStoryView' => 'view/phui/PHUIFeedStoryView.php',
'PHUIIconExample' => 'applications/uiexample/examples/PHUIIconExample.php',
'PHUIIconView' => 'view/phui/PHUIIconView.php',
'PackageCreateMail' => 'applications/owners/mail/PackageCreateMail.php', 'PackageCreateMail' => 'applications/owners/mail/PackageCreateMail.php',
'PackageDeleteMail' => 'applications/owners/mail/PackageDeleteMail.php', 'PackageDeleteMail' => 'applications/owners/mail/PackageDeleteMail.php',
'PackageMail' => 'applications/owners/mail/PackageMail.php', 'PackageMail' => 'applications/owners/mail/PackageMail.php',
@ -678,7 +680,6 @@ phutil_register_library_map(array(
'PhabricatorAccessLogConfigOptions' => 'applications/config/option/PhabricatorAccessLogConfigOptions.php', 'PhabricatorAccessLogConfigOptions' => 'applications/config/option/PhabricatorAccessLogConfigOptions.php',
'PhabricatorActionHeaderExample' => 'applications/uiexample/examples/PhabricatorActionHeaderExample.php', 'PhabricatorActionHeaderExample' => 'applications/uiexample/examples/PhabricatorActionHeaderExample.php',
'PhabricatorActionHeaderView' => 'view/layout/PhabricatorActionHeaderView.php', 'PhabricatorActionHeaderView' => 'view/layout/PhabricatorActionHeaderView.php',
'PhabricatorActionIconView' => 'view/layout/PhabricatorActionIconView.php',
'PhabricatorActionListExample' => 'applications/uiexample/examples/PhabricatorActionListExample.php', 'PhabricatorActionListExample' => 'applications/uiexample/examples/PhabricatorActionListExample.php',
'PhabricatorActionListView' => 'view/layout/PhabricatorActionListView.php', 'PhabricatorActionListView' => 'view/layout/PhabricatorActionListView.php',
'PhabricatorActionView' => 'view/layout/PhabricatorActionView.php', 'PhabricatorActionView' => 'view/layout/PhabricatorActionView.php',
@ -2372,6 +2373,8 @@ phutil_register_library_map(array(
'PHUIBoxExample' => 'PhabricatorUIExample', 'PHUIBoxExample' => 'PhabricatorUIExample',
'PHUIBoxView' => 'AphrontTagView', 'PHUIBoxView' => 'AphrontTagView',
'PHUIFeedStoryView' => 'AphrontView', 'PHUIFeedStoryView' => 'AphrontView',
'PHUIIconExample' => 'PhabricatorUIExample',
'PHUIIconView' => 'AphrontView',
'PackageCreateMail' => 'PackageMail', 'PackageCreateMail' => 'PackageMail',
'PackageDeleteMail' => 'PackageMail', 'PackageDeleteMail' => 'PackageMail',
'PackageMail' => 'PhabricatorMail', 'PackageMail' => 'PhabricatorMail',
@ -2382,7 +2385,6 @@ phutil_register_library_map(array(
'PhabricatorAccessLogConfigOptions' => 'PhabricatorApplicationConfigOptions', 'PhabricatorAccessLogConfigOptions' => 'PhabricatorApplicationConfigOptions',
'PhabricatorActionHeaderExample' => 'PhabricatorUIExample', 'PhabricatorActionHeaderExample' => 'PhabricatorUIExample',
'PhabricatorActionHeaderView' => 'AphrontView', 'PhabricatorActionHeaderView' => 'AphrontView',
'PhabricatorActionIconView' => 'AphrontView',
'PhabricatorActionListExample' => 'PhabricatorUIExample', 'PhabricatorActionListExample' => 'PhabricatorUIExample',
'PhabricatorActionListView' => 'AphrontView', 'PhabricatorActionListView' => 'AphrontView',
'PhabricatorActionView' => 'AphrontView', 'PhabricatorActionView' => 'AphrontView',

10
src/applications/tokens/storage/PhabricatorToken.php
View file

@ -35,12 +35,10 @@ final class PhabricatorToken extends PhabricatorTokenDAO
$sprite = substr($this->getPHID(), 10); $sprite = substr($this->getPHID(), 10);
return phutil_tag( return id(new PHUIIconView())
'div', ->setSpriteSheet(PHUIIconView::SPRITE_TOKENS)
array( ->setSpriteIcon($sprite);
'class' => 'sprite-tokens token-icon token-'.$sprite,
),
'');
} }
} }

144
src/applications/uiexample/examples/PHUIIconExample.php Normal file
View file

@ -0,0 +1,144 @@
<?php
final class PHUIIconExample extends PhabricatorUIExample {
public function getName() {
return 'Icons and Images';
}
public function getDescription() {
return 'Easily render icons or images with links and sprites.';
}
public function renderExample() {
$person1 = new PHUIIconView();
$person1->setHeadSize(PHUIIconView::HEAD_MEDIUM);
$person1->setHref('http://en.wikipedia.org/wiki/George_Washington');
$person1->setImage(
celerity_get_resource_uri('/rsrc/image/people/washington.png'));
$person2 = new PHUIIconView();
$person2->setHeadSize(PHUIIconView::HEAD_MEDIUM);
$person2->setHref('http://en.wikipedia.org/wiki/Warren_G._Harding');
$person2->setImage(
celerity_get_resource_uri('/rsrc/image/people/harding.png'));
$person3 = new PHUIIconView();
$person3->setHeadSize(PHUIIconView::HEAD_MEDIUM);
$person3->setHref('http://en.wikipedia.org/wiki/William_Howard_Taft');
$person3->setImage(
celerity_get_resource_uri('/rsrc/image/people/taft.png'));
$person4 = new PHUIIconView();
$person4->setHeadSize(PHUIIconView::HEAD_SMALL);
$person4->setHref('http://en.wikipedia.org/wiki/George_Washington');
$person4->setImage(
celerity_get_resource_uri('/rsrc/image/people/washington.png'));
$person5 = new PHUIIconView();
$person5->setHeadSize(PHUIIconView::HEAD_SMALL);
$person5->setHref('http://en.wikipedia.org/wiki/Warren_G._Harding');
$person5->setImage(
celerity_get_resource_uri('/rsrc/image/people/harding.png'));
$person6 = new PHUIIconView();
$person6->setHeadSize(PHUIIconView::HEAD_SMALL);
$person6->setHref('http://en.wikipedia.org/wiki/William_Howard_Taft');
$person6->setImage(
celerity_get_resource_uri('/rsrc/image/people/taft.png'));
$actions = array(
'settings-grey',
'heart-grey',
'tag-grey',
'new-grey',
'search-grey',
'move-grey');
$actionview = array();
foreach ($actions as $action) {
$actionview[] = id(new PHUIIconView())
->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS)
->setSpriteIcon($action)
->setHref('#');
}
$tokens = array(
'like-1',
'like-2',
'heart-1',
'heart-2');
$tokenview = array();
foreach ($tokens as $token) {
$tokenview[] =
id(new PHUIIconView())
->setSpriteSheet(PHUIIconView::SPRITE_TOKENS)
->setSpriteIcon($token);
}
$layout1 =
array(
id(new PHUIBoxView())
->appendChild($actionview)
->addMargin(PHUI::MARGIN_MEDIUM)
->addPadding(PHUI::PADDING_SMALL)
->setShadow(true));
$layout2 =
array(
id(new PHUIBoxView())
->appendChild(array($person1, $person2, $person3))
->addMargin(PHUI::MARGIN_MEDIUM)
->addPadding(PHUI::PADDING_SMALL)
->setShadow(true));
$layout2a =
array(
id(new PHUIBoxView())
->appendChild(array($person4, $person5, $person6))
->addMargin(PHUI::MARGIN_MEDIUM)
->addPadding(PHUI::PADDING_SMALL)
->setShadow(true));
$layout3 =
array(
id(new PHUIBoxView())
->appendChild($tokenview)
->addMargin(PHUI::MARGIN_MEDIUM)
->addPadding(PHUI::PADDING_SMALL)
->setShadow(true));
$head1 = id(new PhabricatorHeaderView())
->setHeader(pht('Action Icons!'));
$head2 = id(new PhabricatorHeaderView())
->setHeader(pht('People!'));
$head3 = id(new PhabricatorHeaderView())
->setHeader(pht('Tokens'));
$wrap1 = id(new PHUIBoxView())
->appendChild($layout1)
->addMargin(PHUI::MARGIN_LARGE);
$wrap2 = id(new PHUIBoxView())
->appendChild(array($layout2, $layout2a))
->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
));
}
}

28
src/applications/uiexample/examples/PhabricatorActionHeaderExample.php
View file

@ -105,33 +105,33 @@ final class PhabricatorActionHeaderExample extends PhabricatorUIExample {
$title3 = id(new PhabricatorHeaderView()) $title3 = id(new PhabricatorHeaderView())
->setHeader(pht('With Action Icons')); ->setHeader(pht('With Action Icons'));
$action1 = new PhabricatorActionIconView(); $action1 = new PHUIIconView();
$action1->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS); $action1->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
$action1->setSpriteIcon('settings-grey'); $action1->setSpriteIcon('settings-grey');
$action1->setHref('#'); $action1->setHref('#');
$action2 = new PhabricatorActionIconView(); $action2 = new PHUIIconView();
$action2->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS); $action2->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
$action2->setSpriteIcon('heart-white'); $action2->setSpriteIcon('heart-white');
$action2->setHref('#'); $action2->setHref('#');
$action3 = new PhabricatorActionIconView(); $action3 = new PHUIIconView();
$action3->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS); $action3->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
$action3->setSpriteIcon('tag-white'); $action3->setSpriteIcon('tag-white');
$action3->setHref('#'); $action3->setHref('#');
$action4 = new PhabricatorActionIconView(); $action4 = new PHUIIconView();
$action4->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS); $action4->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
$action4->setSpriteIcon('new-white'); $action4->setSpriteIcon('new-white');
$action4->setHref('#'); $action4->setHref('#');
$action5 = new PhabricatorActionIconView(); $action5 = new PHUIIconView();
$action5->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS); $action5->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
$action5->setSpriteIcon('search-white'); $action5->setSpriteIcon('search-white');
$action5->setHref('#'); $action5->setHref('#');
$action6 = new PhabricatorActionIconView(); $action6 = new PHUIIconView();
$action6->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS); $action6->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
$action6->setSpriteIcon('move-white'); $action6->setSpriteIcon('move-white');
$action6->setHref('#'); $action6->setHref('#');
@ -199,8 +199,8 @@ final class PhabricatorActionHeaderExample extends PhabricatorUIExample {
->setBackgroundColor(PhabricatorTagView::COLOR_BLUE) ->setBackgroundColor(PhabricatorTagView::COLOR_BLUE)
->setName('Closed'); ->setName('Closed');
$action1 = new PhabricatorActionIconView(); $action1 = new PHUIIconView();
$action1->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS); $action1->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
$action1->setSpriteIcon('flag-grey'); $action1->setSpriteIcon('flag-grey');
$action1->setHref('#'); $action1->setHref('#');

8
src/applications/uiexample/examples/PhabricatorWorkboardExample.php
View file

@ -131,21 +131,21 @@ final class PhabricatorWorkboardExample extends PhabricatorUIExample {
->addPanel($panel2) ->addPanel($panel2)
->addPanel($panel3); ->addPanel($panel3);
$action = new PhabricatorActionIconView(); $action = new PHUIIconView();
$action->setHref('/maniphest/task/create'); $action->setHref('/maniphest/task/create');
$action->setImage('/rsrc/image/actions/edit.png'); $action->setImage('/rsrc/image/actions/edit.png');
$person1 = new PhabricatorActionIconView(); $person1 = new PHUIIconView();
$person1->setHref('http://en.wikipedia.org/wiki/George_Washington'); $person1->setHref('http://en.wikipedia.org/wiki/George_Washington');
$person1->setImage( $person1->setImage(
celerity_get_resource_uri('/rsrc/image/people/washington.png')); celerity_get_resource_uri('/rsrc/image/people/washington.png'));
$person2 = new PhabricatorActionIconView(); $person2 = new PHUIIconView();
$person2->setHref('http://en.wikipedia.org/wiki/Warren_G._Harding'); $person2->setHref('http://en.wikipedia.org/wiki/Warren_G._Harding');
$person2->setImage( $person2->setImage(
celerity_get_resource_uri('/rsrc/image/people/harding.png')); celerity_get_resource_uri('/rsrc/image/people/harding.png'));
$person3 = new PhabricatorActionIconView(); $person3 = new PHUIIconView();
$person3->setHref('http://en.wikipedia.org/wiki/William_Howard_Taft'); $person3->setHref('http://en.wikipedia.org/wiki/William_Howard_Taft');
$person3->setImage( $person3->setImage(
celerity_get_resource_uri('/rsrc/image/people/taft.png')); celerity_get_resource_uri('/rsrc/image/people/taft.png'));

6
src/infrastructure/celerity/CeleritySpriteGenerator.php
View file

@ -120,7 +120,7 @@ final class CeleritySpriteGenerator {
$tcss[] = '.actions-'.$icon.$suffix; $tcss[] = '.actions-'.$icon.$suffix;
if ($color == 'dark') { if ($color == 'dark') {
$tcss[] = '.device-desktop '. $tcss[] = '.device-desktop '.
'.actions-'.$icon.'-grey.phabricator-action-icon-item-link:hover'; '.actions-'.$icon.'-grey.phui-icon-item-link:hover';
} }
$sprite->setTargetCSS(implode(', ', $tcss)); $sprite->setTargetCSS(implode(', ', $tcss));
@ -308,8 +308,8 @@ final class CeleritySpriteGenerator {
$path = $this->getPath('tokens_1x/'.$token.'.png'); $path = $this->getPath('tokens_1x/'.$token.'.png');
$sprite = id(clone $template) $sprite = id(clone $template)
->setName('token-'.$token) ->setName('tokens-'.$token)
->setTargetCSS('.token-'.$token) ->setTargetCSS('.tokens-'.$token)
->setSourceFile($path, 1); ->setSourceFile($path, 1);
$sprites[] = $sprite; $sprites[] = $sprite;

2
src/view/layout/PhabricatorActionHeaderView.php
View file

@ -19,7 +19,7 @@ final class PhabricatorActionHeaderView extends AphrontView {
private $iconColor = PhabricatorActionHeaderView::ICON_GREY; private $iconColor = PhabricatorActionHeaderView::ICON_GREY;
private $headerColor; private $headerColor;
public function addAction(PhabricatorActionIconView $action) { public function addAction(PHUIIconView $action) {
$this->actions[] = $action; $this->actions[] = $action;
return $this; return $this;
} }

2
src/view/layout/PhabricatorWorkboardView.php
View file

@ -16,7 +16,7 @@ final class PhabricatorWorkboardView extends AphrontView {
return $this; return $this;
} }
public function addAction(PhabricatorActionIconView $action) { public function addAction(PHUIIconView $action) {
$this->actions[] = $action; $this->actions[] = $action;
return $this; return $this;
} }

6
src/view/phui/PHUIFeedStoryView.php
View file

@ -80,7 +80,7 @@ final class PHUIFeedStoryView extends AphrontView {
$actor = ''; $actor = '';
if ($this->image) { if ($this->image) {
$actor = new PhabricatorActionIconView(); $actor = new PHUIIconView();
$actor->setImage($this->image); $actor->setImage($this->image);
if ($this->imageHref) { if ($this->imageHref) {
$actor->setHref($this->imageHref); $actor->setHref($this->imageHref);
@ -118,9 +118,9 @@ final class PHUIFeedStoryView extends AphrontView {
$icon = null; $icon = null;
if ($this->appIcon) { if ($this->appIcon) {
$icon = new PhabricatorActionIconView(); $icon = new PHUIIconView();
$icon->setSpriteIcon($this->appIcon); $icon->setSpriteIcon($this->appIcon);
$icon->setSpriteSheet(PhabricatorActionIconView::SPRITE_APPS); $icon->setSpriteSheet(PHUIIconView::SPRITE_APPS);
} }
$foot = phutil_tag( $foot = phutil_tag(

26
src/view/layout/PhabricatorActionIconView.php → src/view/phui/PHUIIconView.php
View file

@ -1,14 +1,19 @@
<?php <?php
final class PhabricatorActionIconView extends AphrontView { final class PHUIIconView extends AphrontView {
const SPRITE_MINICONS = 'minicons'; const SPRITE_MINICONS = 'minicons';
const SPRITE_ACTIONS = 'actions'; const SPRITE_ACTIONS = 'actions';
const SPRITE_APPS = 'apps'; const SPRITE_APPS = 'apps';
const SPRITE_TOKENS = 'tokens';
const HEAD_SMALL = 'phuihead-small';
const HEAD_MEDIUM = 'phuihead-medium';
private $href; private $href;
private $workflow; private $workflow;
private $image; private $image;
private $headSize = null;
private $spriteIcon; private $spriteIcon;
private $spriteSheet; private $spriteSheet;
@ -27,6 +32,11 @@ final class PhabricatorActionIconView extends AphrontView {
return $this; return $this;
} }
public function setHeadSize($size) {
$this->headSize = $size;
return $this;
}
public function setSpriteIcon($sprite) { public function setSpriteIcon($sprite) {
$this->spriteIcon = $sprite; $this->spriteIcon = $sprite;
return $this; return $this;
@ -38,18 +48,18 @@ final class PhabricatorActionIconView extends AphrontView {
} }
public function render() { public function render() {
require_celerity_resource('phabricator-action-icon-view-css'); require_celerity_resource('phui-icon-view-css');
$tag = 'span'; $tag = 'span';
if ($this->href) { if ($this->href) {
$tag = 'a'; $tag = 'a';
} }
$classes = array();
$classes[] = 'phui-icon-item-link';
if ($this->spriteIcon) { if ($this->spriteIcon) {
require_celerity_resource('sprite-'.$this->spriteSheet.'-css'); require_celerity_resource('sprite-'.$this->spriteSheet.'-css');
$classes = array();
$classes[] = 'phabricator-action-icon-item-link';
$classes[] = 'sprite-'.$this->spriteSheet; $classes[] = 'sprite-'.$this->spriteSheet;
$classes[] = $this->spriteSheet.'-'.$this->spriteIcon; $classes[] = $this->spriteSheet.'-'.$this->spriteIcon;
@ -62,11 +72,15 @@ final class PhabricatorActionIconView extends AphrontView {
), ),
''); '');
} else { } else {
if ($this->headSize) {
$classes[] = $this->headSize;
}
$action_icon = phutil_tag( $action_icon = phutil_tag(
$tag, $tag,
array( array(
'href' => $this->href ? $this->href : null, 'href' => $this->href ? $this->href : null,
'class' => 'phabricator-action-icon-item-link', 'class' => implode(' ', $classes),
'sigil' => $this->workflow ? 'workflow' : null, 'sigil' => $this->workflow ? 'workflow' : null,
'style' => 'background-image: url('.$this->image.');' 'style' => 'background-image: url('.$this->image.');'
), ),

7
webroot/rsrc/css/application/tokens/tokens.css
View file

@ -2,13 +2,6 @@
* @provides tokens-css * @provides tokens-css
*/ */
.token-icon {
position: relative;
display: inline-block;
width: 16px;
height: 16px;
}
button.token-button { button.token-button {
background: #f6f6f6; background: #f6f6f6;
border: 1px solid #333333; border: 1px solid #333333;

21
webroot/rsrc/css/layout/phabricator-action-icon-view.css
View file

@ -1,21 +0,0 @@
/**
* @provides phabricator-action-icon-view-css
*/
.phabricator-action-icon-item-link.sprite-minicons {
display: block;
height: 16px;
width: 16px;
}
.phabricator-action-icon-item-link.sprite-actions {
display: block;
height: 24px;
width: 24px;
}
.phabricator-action-icon-item-link.sprite-apps {
display: block;
height: 14px;
width: 14px;
}

4
webroot/rsrc/css/layout/phabricator-workboard-view.css
View file

@ -48,14 +48,14 @@
margin: 0px; margin: 0px;
} }
.phabricator-workboard-view .phabricator-action-icon-item-link { .phabricator-workboard-view .phui-icon-item-link {
display: block; display: block;
width: 50px; width: 50px;
height: 50px; height: 50px;
margin: 5px 4px 5px 5px; margin: 5px 4px 5px 5px;
} }
.device-phone .phabricator-workboard-view .phabricator-action-icon-item-link { .device-phone .phabricator-workboard-view .phui-icon-item-link {
margin-right: 0; margin-right: 0;
} }

4
webroot/rsrc/css/phui/phui-feed-story.css
View file

@ -16,7 +16,7 @@
box-shadow: 0 1px 2px rgba(0,0,0,0.2); box-shadow: 0 1px 2px rgba(0,0,0,0.2);
} }
.phui-feed-story-head .phabricator-action-icon-item-link { .phui-feed-story-head .phui-icon-item-link {
width: 35px; width: 35px;
height: 35px; height: 35px;
background-size: 35px; background-size: 35px;
@ -42,7 +42,7 @@
padding: 10px; padding: 10px;
} }
.phui-feed-story-foot .phabricator-action-icon-item-link { .phui-feed-story-foot .phui-icon-item-link {
float: left; float: left;
display: inline-block; display: inline-block;
margin-right: 5px; margin-right: 5px;

41
webroot/rsrc/css/phui/phui-icon.css Normal file
View file

@ -0,0 +1,41 @@
/**
* @provides phui-icon-view-css
*/
.phui-icon-item-link {
display: inline-block;
vertical-align: top;
}
.phui-icon-item-link.sprite-minicons {
height: 16px;
width: 16px;
}
.phui-icon-item-link.sprite-actions {
height: 24px;
width: 24px;
}
.phui-icon-item-link.sprite-apps {
height: 14px;
width: 14px;
}
.phui-icon-item-link.sprite-tokens {
height: 16px;
width: 16px;
}
.phui-icon-item-link.phuihead-medium {
height: 50px;
width: 50px;
}
.phui-icon-item-link.phuihead-small {
height: 35px;
width: 35px;
background-size: 35px;
}

20
webroot/rsrc/css/sprite-actions.css
View file

@ -18,43 +18,43 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
} }
.actions-close-dark, .device-desktop .actions-close-grey.phabricator-action-icon-item-link:hover { .actions-close-dark, .device-desktop .actions-close-grey.phui-icon-item-link:hover {
background-position: 0px 0px; background-position: 0px 0px;
} }
.actions-flag-dark, .device-desktop .actions-flag-grey.phabricator-action-icon-item-link:hover { .actions-flag-dark, .device-desktop .actions-flag-grey.phui-icon-item-link:hover {
background-position: -25px 0px; background-position: -25px 0px;
} }
.actions-heart-dark, .device-desktop .actions-heart-grey.phabricator-action-icon-item-link:hover { .actions-heart-dark, .device-desktop .actions-heart-grey.phui-icon-item-link:hover {
background-position: -50px 0px; background-position: -50px 0px;
} }
.actions-move-dark, .device-desktop .actions-move-grey.phabricator-action-icon-item-link:hover { .actions-move-dark, .device-desktop .actions-move-grey.phui-icon-item-link:hover {
background-position: -75px 0px; background-position: -75px 0px;
} }
.actions-new-dark, .device-desktop .actions-new-grey.phabricator-action-icon-item-link:hover { .actions-new-dark, .device-desktop .actions-new-grey.phui-icon-item-link:hover {
background-position: -100px 0px; background-position: -100px 0px;
} }
.actions-search-dark, .device-desktop .actions-search-grey.phabricator-action-icon-item-link:hover { .actions-search-dark, .device-desktop .actions-search-grey.phui-icon-item-link:hover {
background-position: 0px -25px; background-position: 0px -25px;
} }
.actions-settings-dark, .device-desktop .actions-settings-grey.phabricator-action-icon-item-link:hover { .actions-settings-dark, .device-desktop .actions-settings-grey.phui-icon-item-link:hover {
background-position: -25px -25px; background-position: -25px -25px;
} }
.actions-star-dark, .device-desktop .actions-star-grey.phabricator-action-icon-item-link:hover { .actions-star-dark, .device-desktop .actions-star-grey.phui-icon-item-link:hover {
background-position: -50px -25px; background-position: -50px -25px;
} }
.actions-tag-dark, .device-desktop .actions-tag-grey.phabricator-action-icon-item-link:hover { .actions-tag-dark, .device-desktop .actions-tag-grey.phui-icon-item-link:hover {
background-position: -75px -25px; background-position: -75px -25px;
} }
.actions-wrench-dark, .device-desktop .actions-wrench-grey.phabricator-action-icon-item-link:hover { .actions-wrench-dark, .device-desktop .actions-wrench-grey.phui-icon-item-link:hover {
background-position: -100px -25px; background-position: -100px -25px;
} }

32
webroot/rsrc/css/sprite-tokens.css
View file

@ -11,66 +11,66 @@
.token-coin-1 { .tokens-coin-1 {
background-position: 0px 0px; background-position: 0px 0px;
} }
.token-coin-2 { .tokens-coin-2 {
background-position: -17px 0px; background-position: -17px 0px;
} }
.token-coin-3 { .tokens-coin-3 {
background-position: -34px 0px; background-position: -34px 0px;
} }
.token-coin-4 { .tokens-coin-4 {
background-position: -51px 0px; background-position: -51px 0px;
} }
.token-heart-1 { .tokens-heart-1 {
background-position: 0px -17px; background-position: 0px -17px;
} }
.token-heart-2 { .tokens-heart-2 {
background-position: -17px -17px; background-position: -17px -17px;
} }
.token-like-1 { .tokens-like-1 {
background-position: -34px -17px; background-position: -34px -17px;
} }
.token-like-2 { .tokens-like-2 {
background-position: -51px -17px; background-position: -51px -17px;
} }
.token-medal-1 { .tokens-medal-1 {
background-position: 0px -34px; background-position: 0px -34px;
} }
.token-medal-2 { .tokens-medal-2 {
background-position: -17px -34px; background-position: -17px -34px;
} }
.token-medal-3 { .tokens-medal-3 {
background-position: -34px -34px; background-position: -34px -34px;
} }
.token-medal-4 { .tokens-medal-4 {
background-position: -51px -34px; background-position: -51px -34px;
} }
.token-misc-1 { .tokens-misc-1 {
background-position: 0px -51px; background-position: 0px -51px;
} }
.token-misc-2 { .tokens-misc-2 {
background-position: -17px -51px; background-position: -17px -51px;
} }
.token-misc-3 { .tokens-misc-3 {
background-position: -34px -51px; background-position: -34px -51px;
} }
.token-misc-4 { .tokens-misc-4 {
background-position: -51px -51px; background-position: -51px -51px;
} }