From 7aea37c4434732efaa35c2117e30cc6ca1c9459a Mon Sep 17 00:00:00 2001 From: Chad Little Date: Fri, 19 Apr 2013 17:44:20 -0700 Subject: [PATCH] PHUIIconView 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 --- resources/sprite/manifest/actions.json | 20 +-- resources/sprite/manifest/tokens.json | 96 ++++++------ src/__celerity_resource_map__.php | 28 ++-- src/__phutil_library_map__.php | 6 +- .../tokens/storage/PhabricatorToken.php | 10 +- .../uiexample/examples/PHUIIconExample.php | 144 ++++++++++++++++++ .../PhabricatorActionHeaderExample.php | 28 ++-- .../examples/PhabricatorWorkboardExample.php | 8 +- .../celerity/CeleritySpriteGenerator.php | 6 +- .../layout/PhabricatorActionHeaderView.php | 2 +- src/view/layout/PhabricatorWorkboardView.php | 2 +- src/view/phui/PHUIFeedStoryView.php | 6 +- .../PHUIIconView.php} | 26 +++- .../rsrc/css/application/tokens/tokens.css | 7 - .../layout/phabricator-action-icon-view.css | 21 --- .../css/layout/phabricator-workboard-view.css | 4 +- webroot/rsrc/css/phui/phui-feed-story.css | 4 +- webroot/rsrc/css/phui/phui-icon.css | 41 +++++ webroot/rsrc/css/sprite-actions.css | 20 +-- webroot/rsrc/css/sprite-tokens.css | 32 ++-- 20 files changed, 341 insertions(+), 170 deletions(-) create mode 100644 src/applications/uiexample/examples/PHUIIconExample.php rename src/view/{layout/PhabricatorActionIconView.php => phui/PHUIIconView.php} (75%) delete mode 100644 webroot/rsrc/css/layout/phabricator-action-icon-view.css create mode 100644 webroot/rsrc/css/phui/phui-icon.css diff --git a/resources/sprite/manifest/actions.json b/resources/sprite/manifest/actions.json index 75799137c5..0001ecf0ba 100644 --- a/resources/sprite/manifest/actions.json +++ b/resources/sprite/manifest/actions.json @@ -3,7 +3,7 @@ "sprites" : { "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" }, "actions-close-grey" : { @@ -18,7 +18,7 @@ }, "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" }, "actions-flag-grey" : { @@ -33,7 +33,7 @@ }, "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" }, "actions-heart-grey" : { @@ -48,7 +48,7 @@ }, "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" }, "actions-move-grey" : { @@ -63,7 +63,7 @@ }, "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" }, "actions-new-grey" : { @@ -78,7 +78,7 @@ }, "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" }, "actions-search-grey" : { @@ -93,7 +93,7 @@ }, "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" }, "actions-settings-grey" : { @@ -108,7 +108,7 @@ }, "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" }, "actions-star-grey" : { @@ -123,7 +123,7 @@ }, "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" }, "actions-tag-grey" : { @@ -138,7 +138,7 @@ }, "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" }, "actions-wrench-grey" : { diff --git a/resources/sprite/manifest/tokens.json b/resources/sprite/manifest/tokens.json index f55ebde96c..11d0983c66 100644 --- a/resources/sprite/manifest/tokens.json +++ b/resources/sprite/manifest/tokens.json @@ -1,84 +1,84 @@ { "version" : 1, "sprites" : { - "token-coin-1" : { - "name" : "token-coin-1", - "rule" : ".token-coin-1", + "tokens-coin-1" : { + "name" : "tokens-coin-1", + "rule" : ".tokens-coin-1", "hash" : "5e1fa22d5ef7f2d8ea14839c303315bb" }, - "token-coin-2" : { - "name" : "token-coin-2", - "rule" : ".token-coin-2", + "tokens-coin-2" : { + "name" : "tokens-coin-2", + "rule" : ".tokens-coin-2", "hash" : "6a6ef9f8730e5919fa16669258ecb74d" }, - "token-coin-3" : { - "name" : "token-coin-3", - "rule" : ".token-coin-3", + "tokens-coin-3" : { + "name" : "tokens-coin-3", + "rule" : ".tokens-coin-3", "hash" : "97256d9133c6aaf965925218d846cc32" }, - "token-coin-4" : { - "name" : "token-coin-4", - "rule" : ".token-coin-4", + "tokens-coin-4" : { + "name" : "tokens-coin-4", + "rule" : ".tokens-coin-4", "hash" : "51cb98e751ad6f7f6d30d0acbe3bfc7c" }, - "token-heart-1" : { - "name" : "token-heart-1", - "rule" : ".token-heart-1", + "tokens-heart-1" : { + "name" : "tokens-heart-1", + "rule" : ".tokens-heart-1", "hash" : "eacfe71d6ede3f994223a02e875135b2" }, - "token-heart-2" : { - "name" : "token-heart-2", - "rule" : ".token-heart-2", + "tokens-heart-2" : { + "name" : "tokens-heart-2", + "rule" : ".tokens-heart-2", "hash" : "4745a935630e1b049e63c93e88667867" }, - "token-like-1" : { - "name" : "token-like-1", - "rule" : ".token-like-1", + "tokens-like-1" : { + "name" : "tokens-like-1", + "rule" : ".tokens-like-1", "hash" : "6e38278e6653c03135157d2865907722" }, - "token-like-2" : { - "name" : "token-like-2", - "rule" : ".token-like-2", + "tokens-like-2" : { + "name" : "tokens-like-2", + "rule" : ".tokens-like-2", "hash" : "fb47711ebbc21515cfd6fab3a19d8c7a" }, - "token-medal-1" : { - "name" : "token-medal-1", - "rule" : ".token-medal-1", + "tokens-medal-1" : { + "name" : "tokens-medal-1", + "rule" : ".tokens-medal-1", "hash" : "979c6f8b7dad182e912a0d67b44595c2" }, - "token-medal-2" : { - "name" : "token-medal-2", - "rule" : ".token-medal-2", + "tokens-medal-2" : { + "name" : "tokens-medal-2", + "rule" : ".tokens-medal-2", "hash" : "2263fc36370d88bceb620128902a51ae" }, - "token-medal-3" : { - "name" : "token-medal-3", - "rule" : ".token-medal-3", + "tokens-medal-3" : { + "name" : "tokens-medal-3", + "rule" : ".tokens-medal-3", "hash" : "95a83057cbd9ebb7ca2f1f082c72ddac" }, - "token-medal-4" : { - "name" : "token-medal-4", - "rule" : ".token-medal-4", + "tokens-medal-4" : { + "name" : "tokens-medal-4", + "rule" : ".tokens-medal-4", "hash" : "c8c94dd2f0e8a2a8711f1f21be61ea3b" }, - "token-misc-1" : { - "name" : "token-misc-1", - "rule" : ".token-misc-1", + "tokens-misc-1" : { + "name" : "tokens-misc-1", + "rule" : ".tokens-misc-1", "hash" : "d16df367d29e0aedabcfb11c672ebd8c" }, - "token-misc-2" : { - "name" : "token-misc-2", - "rule" : ".token-misc-2", + "tokens-misc-2" : { + "name" : "tokens-misc-2", + "rule" : ".tokens-misc-2", "hash" : "74d971c084b2f7665a84c61c0846446c" }, - "token-misc-3" : { - "name" : "token-misc-3", - "rule" : ".token-misc-3", + "tokens-misc-3" : { + "name" : "tokens-misc-3", + "rule" : ".tokens-misc-3", "hash" : "c91387778404c8e88f243477d056d985" }, - "token-misc-4" : { - "name" : "token-misc-4", - "rule" : ".token-misc-4", + "tokens-misc-4" : { + "name" : "tokens-misc-4", + "rule" : ".tokens-misc-4", "hash" : "4705e7c79906180c04286a62d375f33b" } }, diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index 51bebd6e22..43091b7ba7 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -2839,15 +2839,6 @@ celerity_register_resource_map(array( ), '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' => array( 'uri' => '/res/3d02ca59/rsrc/css/layout/phabricator-action-list-view.css', @@ -3525,7 +3516,7 @@ celerity_register_resource_map(array( ), 'phabricator-workboard-view-css' => array( - 'uri' => '/res/14217087/rsrc/css/layout/phabricator-workboard-view.css', + 'uri' => '/res/e48df9e8/rsrc/css/layout/phabricator-workboard-view.css', 'type' => 'css', 'requires' => array( @@ -3606,13 +3597,22 @@ celerity_register_resource_map(array( ), 'phui-feed-story-css' => array( - 'uri' => '/res/9b5bb654/rsrc/css/phui/phui-feed-story.css', + 'uri' => '/res/a2db2369/rsrc/css/phui/phui-feed-story.css', 'type' => 'css', 'requires' => array( ), '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' => array( 'uri' => '/res/a1bb9056/rsrc/css/application/ponder/comments.css', @@ -3786,7 +3786,7 @@ celerity_register_resource_map(array( ), 'sprite-actions-css' => array( - 'uri' => '/res/00b8f8bc/rsrc/css/sprite-actions.css', + 'uri' => '/res/89d67d5a/rsrc/css/sprite-actions.css', 'type' => 'css', 'requires' => array( @@ -3876,7 +3876,7 @@ celerity_register_resource_map(array( ), 'sprite-tokens-css' => array( - 'uri' => '/res/9ae0de5b/rsrc/css/sprite-tokens.css', + 'uri' => '/res/edb4e341/rsrc/css/sprite-tokens.css', 'type' => 'css', 'requires' => array( @@ -3912,7 +3912,7 @@ celerity_register_resource_map(array( ), 'tokens-css' => array( - 'uri' => '/res/6b3c65c7/rsrc/css/application/tokens/tokens.css', + 'uri' => '/res/1699df7d/rsrc/css/application/tokens/tokens.css', 'type' => 'css', 'requires' => array( diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php index 973dfd02ad..ce89a8270d 100644 --- a/src/__phutil_library_map__.php +++ b/src/__phutil_library_map__.php @@ -667,6 +667,8 @@ phutil_register_library_map(array( 'PHUIBoxExample' => 'applications/uiexample/examples/PHUIBoxExample.php', 'PHUIBoxView' => 'view/phui/PHUIBoxView.php', 'PHUIFeedStoryView' => 'view/phui/PHUIFeedStoryView.php', + 'PHUIIconExample' => 'applications/uiexample/examples/PHUIIconExample.php', + 'PHUIIconView' => 'view/phui/PHUIIconView.php', 'PackageCreateMail' => 'applications/owners/mail/PackageCreateMail.php', 'PackageDeleteMail' => 'applications/owners/mail/PackageDeleteMail.php', 'PackageMail' => 'applications/owners/mail/PackageMail.php', @@ -678,7 +680,6 @@ phutil_register_library_map(array( 'PhabricatorAccessLogConfigOptions' => 'applications/config/option/PhabricatorAccessLogConfigOptions.php', 'PhabricatorActionHeaderExample' => 'applications/uiexample/examples/PhabricatorActionHeaderExample.php', 'PhabricatorActionHeaderView' => 'view/layout/PhabricatorActionHeaderView.php', - 'PhabricatorActionIconView' => 'view/layout/PhabricatorActionIconView.php', 'PhabricatorActionListExample' => 'applications/uiexample/examples/PhabricatorActionListExample.php', 'PhabricatorActionListView' => 'view/layout/PhabricatorActionListView.php', 'PhabricatorActionView' => 'view/layout/PhabricatorActionView.php', @@ -2372,6 +2373,8 @@ phutil_register_library_map(array( 'PHUIBoxExample' => 'PhabricatorUIExample', 'PHUIBoxView' => 'AphrontTagView', 'PHUIFeedStoryView' => 'AphrontView', + 'PHUIIconExample' => 'PhabricatorUIExample', + 'PHUIIconView' => 'AphrontView', 'PackageCreateMail' => 'PackageMail', 'PackageDeleteMail' => 'PackageMail', 'PackageMail' => 'PhabricatorMail', @@ -2382,7 +2385,6 @@ phutil_register_library_map(array( 'PhabricatorAccessLogConfigOptions' => 'PhabricatorApplicationConfigOptions', 'PhabricatorActionHeaderExample' => 'PhabricatorUIExample', 'PhabricatorActionHeaderView' => 'AphrontView', - 'PhabricatorActionIconView' => 'AphrontView', 'PhabricatorActionListExample' => 'PhabricatorUIExample', 'PhabricatorActionListView' => 'AphrontView', 'PhabricatorActionView' => 'AphrontView', diff --git a/src/applications/tokens/storage/PhabricatorToken.php b/src/applications/tokens/storage/PhabricatorToken.php index 8e01e07dff..a22db91551 100644 --- a/src/applications/tokens/storage/PhabricatorToken.php +++ b/src/applications/tokens/storage/PhabricatorToken.php @@ -35,12 +35,10 @@ final class PhabricatorToken extends PhabricatorTokenDAO $sprite = substr($this->getPHID(), 10); - return phutil_tag( - 'div', - array( - 'class' => 'sprite-tokens token-icon token-'.$sprite, - ), - ''); + return id(new PHUIIconView()) + ->setSpriteSheet(PHUIIconView::SPRITE_TOKENS) + ->setSpriteIcon($sprite); + } } diff --git a/src/applications/uiexample/examples/PHUIIconExample.php b/src/applications/uiexample/examples/PHUIIconExample.php new file mode 100644 index 0000000000..a6a0116298 --- /dev/null +++ b/src/applications/uiexample/examples/PHUIIconExample.php @@ -0,0 +1,144 @@ +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 + )); + } +} diff --git a/src/applications/uiexample/examples/PhabricatorActionHeaderExample.php b/src/applications/uiexample/examples/PhabricatorActionHeaderExample.php index 5ff8c8d72e..c6558fe1f8 100644 --- a/src/applications/uiexample/examples/PhabricatorActionHeaderExample.php +++ b/src/applications/uiexample/examples/PhabricatorActionHeaderExample.php @@ -105,33 +105,33 @@ final class PhabricatorActionHeaderExample extends PhabricatorUIExample { $title3 = id(new PhabricatorHeaderView()) ->setHeader(pht('With Action Icons')); - $action1 = new PhabricatorActionIconView(); - $action1->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS); + $action1 = new PHUIIconView(); + $action1->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS); $action1->setSpriteIcon('settings-grey'); $action1->setHref('#'); - $action2 = new PhabricatorActionIconView(); - $action2->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS); + $action2 = new PHUIIconView(); + $action2->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS); $action2->setSpriteIcon('heart-white'); $action2->setHref('#'); - $action3 = new PhabricatorActionIconView(); - $action3->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS); + $action3 = new PHUIIconView(); + $action3->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS); $action3->setSpriteIcon('tag-white'); $action3->setHref('#'); - $action4 = new PhabricatorActionIconView(); - $action4->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS); + $action4 = new PHUIIconView(); + $action4->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS); $action4->setSpriteIcon('new-white'); $action4->setHref('#'); - $action5 = new PhabricatorActionIconView(); - $action5->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS); + $action5 = new PHUIIconView(); + $action5->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS); $action5->setSpriteIcon('search-white'); $action5->setHref('#'); - $action6 = new PhabricatorActionIconView(); - $action6->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS); + $action6 = new PHUIIconView(); + $action6->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS); $action6->setSpriteIcon('move-white'); $action6->setHref('#'); @@ -199,8 +199,8 @@ final class PhabricatorActionHeaderExample extends PhabricatorUIExample { ->setBackgroundColor(PhabricatorTagView::COLOR_BLUE) ->setName('Closed'); - $action1 = new PhabricatorActionIconView(); - $action1->setSpriteSheet(PhabricatorActionIconView::SPRITE_ACTIONS); + $action1 = new PHUIIconView(); + $action1->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS); $action1->setSpriteIcon('flag-grey'); $action1->setHref('#'); diff --git a/src/applications/uiexample/examples/PhabricatorWorkboardExample.php b/src/applications/uiexample/examples/PhabricatorWorkboardExample.php index ddd9388d39..da7ee6f366 100644 --- a/src/applications/uiexample/examples/PhabricatorWorkboardExample.php +++ b/src/applications/uiexample/examples/PhabricatorWorkboardExample.php @@ -131,21 +131,21 @@ final class PhabricatorWorkboardExample extends PhabricatorUIExample { ->addPanel($panel2) ->addPanel($panel3); - $action = new PhabricatorActionIconView(); + $action = new PHUIIconView(); $action->setHref('/maniphest/task/create'); $action->setImage('/rsrc/image/actions/edit.png'); - $person1 = new PhabricatorActionIconView(); + $person1 = new PHUIIconView(); $person1->setHref('http://en.wikipedia.org/wiki/George_Washington'); $person1->setImage( 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->setImage( 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->setImage( celerity_get_resource_uri('/rsrc/image/people/taft.png')); diff --git a/src/infrastructure/celerity/CeleritySpriteGenerator.php b/src/infrastructure/celerity/CeleritySpriteGenerator.php index 8a4b8b9249..84f0a3a83e 100644 --- a/src/infrastructure/celerity/CeleritySpriteGenerator.php +++ b/src/infrastructure/celerity/CeleritySpriteGenerator.php @@ -120,7 +120,7 @@ final class CeleritySpriteGenerator { $tcss[] = '.actions-'.$icon.$suffix; if ($color == 'dark') { $tcss[] = '.device-desktop '. - '.actions-'.$icon.'-grey.phabricator-action-icon-item-link:hover'; + '.actions-'.$icon.'-grey.phui-icon-item-link:hover'; } $sprite->setTargetCSS(implode(', ', $tcss)); @@ -308,8 +308,8 @@ final class CeleritySpriteGenerator { $path = $this->getPath('tokens_1x/'.$token.'.png'); $sprite = id(clone $template) - ->setName('token-'.$token) - ->setTargetCSS('.token-'.$token) + ->setName('tokens-'.$token) + ->setTargetCSS('.tokens-'.$token) ->setSourceFile($path, 1); $sprites[] = $sprite; diff --git a/src/view/layout/PhabricatorActionHeaderView.php b/src/view/layout/PhabricatorActionHeaderView.php index f7d3e3391d..1b1bbba53f 100644 --- a/src/view/layout/PhabricatorActionHeaderView.php +++ b/src/view/layout/PhabricatorActionHeaderView.php @@ -19,7 +19,7 @@ final class PhabricatorActionHeaderView extends AphrontView { private $iconColor = PhabricatorActionHeaderView::ICON_GREY; private $headerColor; - public function addAction(PhabricatorActionIconView $action) { + public function addAction(PHUIIconView $action) { $this->actions[] = $action; return $this; } diff --git a/src/view/layout/PhabricatorWorkboardView.php b/src/view/layout/PhabricatorWorkboardView.php index 4dd6fba252..a6d3431c94 100644 --- a/src/view/layout/PhabricatorWorkboardView.php +++ b/src/view/layout/PhabricatorWorkboardView.php @@ -16,7 +16,7 @@ final class PhabricatorWorkboardView extends AphrontView { return $this; } - public function addAction(PhabricatorActionIconView $action) { + public function addAction(PHUIIconView $action) { $this->actions[] = $action; return $this; } diff --git a/src/view/phui/PHUIFeedStoryView.php b/src/view/phui/PHUIFeedStoryView.php index a9e861d1a5..cfbbd5369c 100644 --- a/src/view/phui/PHUIFeedStoryView.php +++ b/src/view/phui/PHUIFeedStoryView.php @@ -80,7 +80,7 @@ final class PHUIFeedStoryView extends AphrontView { $actor = ''; if ($this->image) { - $actor = new PhabricatorActionIconView(); + $actor = new PHUIIconView(); $actor->setImage($this->image); if ($this->imageHref) { $actor->setHref($this->imageHref); @@ -118,9 +118,9 @@ final class PHUIFeedStoryView extends AphrontView { $icon = null; if ($this->appIcon) { - $icon = new PhabricatorActionIconView(); + $icon = new PHUIIconView(); $icon->setSpriteIcon($this->appIcon); - $icon->setSpriteSheet(PhabricatorActionIconView::SPRITE_APPS); + $icon->setSpriteSheet(PHUIIconView::SPRITE_APPS); } $foot = phutil_tag( diff --git a/src/view/layout/PhabricatorActionIconView.php b/src/view/phui/PHUIIconView.php similarity index 75% rename from src/view/layout/PhabricatorActionIconView.php rename to src/view/phui/PHUIIconView.php index 53891b6b9f..3f2877ea1d 100644 --- a/src/view/layout/PhabricatorActionIconView.php +++ b/src/view/phui/PHUIIconView.php @@ -1,14 +1,19 @@ headSize = $size; + return $this; + } + public function setSpriteIcon($sprite) { $this->spriteIcon = $sprite; return $this; @@ -38,18 +48,18 @@ final class PhabricatorActionIconView extends AphrontView { } public function render() { - require_celerity_resource('phabricator-action-icon-view-css'); + require_celerity_resource('phui-icon-view-css'); $tag = 'span'; if ($this->href) { $tag = 'a'; } + $classes = array(); + $classes[] = 'phui-icon-item-link'; + if ($this->spriteIcon) { require_celerity_resource('sprite-'.$this->spriteSheet.'-css'); - - $classes = array(); - $classes[] = 'phabricator-action-icon-item-link'; $classes[] = 'sprite-'.$this->spriteSheet; $classes[] = $this->spriteSheet.'-'.$this->spriteIcon; @@ -62,11 +72,15 @@ final class PhabricatorActionIconView extends AphrontView { ), ''); } else { + if ($this->headSize) { + $classes[] = $this->headSize; + } + $action_icon = phutil_tag( $tag, array( 'href' => $this->href ? $this->href : null, - 'class' => 'phabricator-action-icon-item-link', + 'class' => implode(' ', $classes), 'sigil' => $this->workflow ? 'workflow' : null, 'style' => 'background-image: url('.$this->image.');' ), diff --git a/webroot/rsrc/css/application/tokens/tokens.css b/webroot/rsrc/css/application/tokens/tokens.css index f460e4dc17..0ce257942e 100644 --- a/webroot/rsrc/css/application/tokens/tokens.css +++ b/webroot/rsrc/css/application/tokens/tokens.css @@ -2,13 +2,6 @@ * @provides tokens-css */ -.token-icon { - position: relative; - display: inline-block; - width: 16px; - height: 16px; -} - button.token-button { background: #f6f6f6; border: 1px solid #333333; diff --git a/webroot/rsrc/css/layout/phabricator-action-icon-view.css b/webroot/rsrc/css/layout/phabricator-action-icon-view.css deleted file mode 100644 index 6b1cb9ad95..0000000000 --- a/webroot/rsrc/css/layout/phabricator-action-icon-view.css +++ /dev/null @@ -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; -} diff --git a/webroot/rsrc/css/layout/phabricator-workboard-view.css b/webroot/rsrc/css/layout/phabricator-workboard-view.css index 2aa7d11b45..2f01b61c55 100644 --- a/webroot/rsrc/css/layout/phabricator-workboard-view.css +++ b/webroot/rsrc/css/layout/phabricator-workboard-view.css @@ -48,14 +48,14 @@ margin: 0px; } -.phabricator-workboard-view .phabricator-action-icon-item-link { +.phabricator-workboard-view .phui-icon-item-link { display: block; width: 50px; height: 50px; 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; } diff --git a/webroot/rsrc/css/phui/phui-feed-story.css b/webroot/rsrc/css/phui/phui-feed-story.css index a742a33464..27b04b2fa0 100644 --- a/webroot/rsrc/css/phui/phui-feed-story.css +++ b/webroot/rsrc/css/phui/phui-feed-story.css @@ -16,7 +16,7 @@ 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; height: 35px; background-size: 35px; @@ -42,7 +42,7 @@ padding: 10px; } -.phui-feed-story-foot .phabricator-action-icon-item-link { +.phui-feed-story-foot .phui-icon-item-link { float: left; display: inline-block; margin-right: 5px; diff --git a/webroot/rsrc/css/phui/phui-icon.css b/webroot/rsrc/css/phui/phui-icon.css new file mode 100644 index 0000000000..6d55b6d4b6 --- /dev/null +++ b/webroot/rsrc/css/phui/phui-icon.css @@ -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; +} + + diff --git a/webroot/rsrc/css/sprite-actions.css b/webroot/rsrc/css/sprite-actions.css index 98ce7049bf..2ef91be074 100644 --- a/webroot/rsrc/css/sprite-actions.css +++ b/webroot/rsrc/css/sprite-actions.css @@ -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; } -.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; } -.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; } -.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; } -.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; } -.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; } -.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; } -.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; } -.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; } -.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; } diff --git a/webroot/rsrc/css/sprite-tokens.css b/webroot/rsrc/css/sprite-tokens.css index 9dca748da1..f8d50757b1 100644 --- a/webroot/rsrc/css/sprite-tokens.css +++ b/webroot/rsrc/css/sprite-tokens.css @@ -11,66 +11,66 @@ -.token-coin-1 { +.tokens-coin-1 { background-position: 0px 0px; } -.token-coin-2 { +.tokens-coin-2 { background-position: -17px 0px; } -.token-coin-3 { +.tokens-coin-3 { background-position: -34px 0px; } -.token-coin-4 { +.tokens-coin-4 { background-position: -51px 0px; } -.token-heart-1 { +.tokens-heart-1 { background-position: 0px -17px; } -.token-heart-2 { +.tokens-heart-2 { background-position: -17px -17px; } -.token-like-1 { +.tokens-like-1 { background-position: -34px -17px; } -.token-like-2 { +.tokens-like-2 { background-position: -51px -17px; } -.token-medal-1 { +.tokens-medal-1 { background-position: 0px -34px; } -.token-medal-2 { +.tokens-medal-2 { background-position: -17px -34px; } -.token-medal-3 { +.tokens-medal-3 { background-position: -34px -34px; } -.token-medal-4 { +.tokens-medal-4 { background-position: -51px -34px; } -.token-misc-1 { +.tokens-misc-1 { background-position: 0px -51px; } -.token-misc-2 { +.tokens-misc-2 { background-position: -17px -51px; } -.token-misc-3 { +.tokens-misc-3 { background-position: -34px -51px; } -.token-misc-4 { +.tokens-misc-4 { background-position: -51px -51px; }