From a66e6c2126dd1e405143c1d73e2adaab2d4ae390 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Wed, 12 Jun 2013 15:05:16 -0700 Subject: [PATCH] Add Login icons to PHUIIconView. Summary: Prepping to use. Test Plan: UIExamples Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6191 --- resources/sprite/manifest/login.json | 90 +++++++++--------- src/__celerity_resource_map__.php | 92 +++++++++---------- .../uiexample/examples/PHUIIconExample.php | 33 ++++++- .../celerity/CeleritySpriteGenerator.php | 4 +- src/view/phui/PHUIIconView.php | 1 + webroot/rsrc/css/phui/phui-icon.css | 5 + webroot/rsrc/css/sprite-login.css | 30 +++--- 7 files changed, 146 insertions(+), 109 deletions(-) diff --git a/resources/sprite/manifest/login.json b/resources/sprite/manifest/login.json index 03516e3486..1979fa3402 100644 --- a/resources/sprite/manifest/login.json +++ b/resources/sprite/manifest/login.json @@ -1,79 +1,79 @@ { "version" : 1, "sprites" : { - "login_Amazon" : { - "name" : "login_Amazon", - "rule" : ".login_Amazon", + "login-Amazon" : { + "name" : "login-Amazon", + "rule" : ".login-Amazon", "hash" : "5961e41c525ef46c88558616fcf23272" }, - "login_Asana" : { - "name" : "login_Asana", - "rule" : ".login_Asana", + "login-Asana" : { + "name" : "login-Asana", + "rule" : ".login-Asana", "hash" : "30df492eab339fa64c9ae9b21bb46a18" }, - "login_Disqus" : { - "name" : "login_Disqus", - "rule" : ".login_Disqus", + "login-Disqus" : { + "name" : "login-Disqus", + "rule" : ".login-Disqus", "hash" : "5f46ac50a5d9d13245971c298f49e13b" }, - "login_Dropbox" : { - "name" : "login_Dropbox", - "rule" : ".login_Dropbox", + "login-Dropbox" : { + "name" : "login-Dropbox", + "rule" : ".login-Dropbox", "hash" : "572ab36301762414365b68c0bc185ac5" }, - "login_Facebook" : { - "name" : "login_Facebook", - "rule" : ".login_Facebook", + "login-Facebook" : { + "name" : "login-Facebook", + "rule" : ".login-Facebook", "hash" : "2b1511f5b4d12076dd9086d1bb187b28" }, - "login_Generic" : { - "name" : "login_Generic", - "rule" : ".login_Generic", + "login-Generic" : { + "name" : "login-Generic", + "rule" : ".login-Generic", "hash" : "60d75c38668ffd6eea91a40e66186601" }, - "login_Github" : { - "name" : "login_Github", - "rule" : ".login_Github", + "login-Github" : { + "name" : "login-Github", + "rule" : ".login-Github", "hash" : "633696beb8c1eaac642ce4955be917d8" }, - "login_Google" : { - "name" : "login_Google", - "rule" : ".login_Google", + "login-Google" : { + "name" : "login-Google", + "rule" : ".login-Google", "hash" : "b7d3962a31df1e6c13e0a3c97c08f11d" }, - "login_HTTP" : { - "name" : "login_HTTP", - "rule" : ".login_HTTP", + "login-HTTP" : { + "name" : "login-HTTP", + "rule" : ".login-HTTP", "hash" : "6fcf0f666c0f6f1e1cd8f397b41ed176" }, - "login_LDAP" : { - "name" : "login_LDAP", - "rule" : ".login_LDAP", + "login-LDAP" : { + "name" : "login-LDAP", + "rule" : ".login-LDAP", "hash" : "5b4e01ddf35cd40c8f061c90abc89b6c" }, - "login_Linkedin" : { - "name" : "login_Linkedin", - "rule" : ".login_Linkedin", + "login-Linkedin" : { + "name" : "login-Linkedin", + "rule" : ".login-Linkedin", "hash" : "0dd89825046fa4fd0fe402aa2cd55fd1" }, - "login_Openid" : { - "name" : "login_Openid", - "rule" : ".login_Openid", + "login-Openid" : { + "name" : "login-Openid", + "rule" : ".login-Openid", "hash" : "9267ffbb8d4e6dee409c4d8fa2d50c0a" }, - "login_Phabricator" : { - "name" : "login_Phabricator", - "rule" : ".login_Phabricator", + "login-Phabricator" : { + "name" : "login-Phabricator", + "rule" : ".login-Phabricator", "hash" : "fad258eb347a1ccf5800b0ee2d8e6e49" }, - "login_Twitter" : { - "name" : "login_Twitter", - "rule" : ".login_Twitter", + "login-Twitter" : { + "name" : "login-Twitter", + "rule" : ".login-Twitter", "hash" : "0b64983507a720b365474b778a966bab" }, - "login_Yahoo" : { - "name" : "login_Yahoo", - "rule" : ".login_Yahoo", + "login-Yahoo" : { + "name" : "login-Yahoo", + "rule" : ".login-Yahoo", "hash" : "1cc6fceee294045fe6d1c1d3aa31d2c1" } }, diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index 96fbba06aa..7d7f492828 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -3723,7 +3723,7 @@ celerity_register_resource_map(array( ), 'phui-icon-view-css' => array( - 'uri' => '/res/1b1a37b5/rsrc/css/phui/phui-icon.css', + 'uri' => '/res/7fd37b96/rsrc/css/phui/phui-icon.css', 'type' => 'css', 'requires' => array( @@ -3984,7 +3984,7 @@ celerity_register_resource_map(array( ), 'sprite-login-css' => array( - 'uri' => '/res/7294661a/rsrc/css/sprite-login.css', + 'uri' => '/res/8bec1ba2/rsrc/css/sprite-login.css', 'type' => 'css', 'requires' => array( @@ -4048,7 +4048,7 @@ celerity_register_resource_map(array( ), array( 'packages' => array( - 'e2eeaf23' => + '76d08512' => array( 'name' => 'core.pkg.css', 'symbols' => @@ -4096,7 +4096,7 @@ celerity_register_resource_map(array( 40 => 'phabricator-property-list-view-css', 41 => 'phabricator-tag-view-css', ), - 'uri' => '/res/pkg/e2eeaf23/core.pkg.css', + 'uri' => '/res/pkg/76d08512/core.pkg.css', 'type' => 'css', ), 'f2ad0683' => @@ -4290,16 +4290,16 @@ celerity_register_resource_map(array( 'reverse' => array( 'aphront-attached-file-view-css' => 'a7ca34a9', - 'aphront-dialog-view-css' => 'e2eeaf23', - 'aphront-error-view-css' => 'e2eeaf23', - 'aphront-form-view-css' => 'e2eeaf23', - 'aphront-list-filter-view-css' => 'e2eeaf23', - 'aphront-pager-view-css' => 'e2eeaf23', - 'aphront-panel-view-css' => 'e2eeaf23', - 'aphront-table-view-css' => 'e2eeaf23', - 'aphront-tokenizer-control-css' => 'e2eeaf23', - 'aphront-tooltip-css' => 'e2eeaf23', - 'aphront-typeahead-control-css' => 'e2eeaf23', + 'aphront-dialog-view-css' => '76d08512', + 'aphront-error-view-css' => '76d08512', + 'aphront-form-view-css' => '76d08512', + 'aphront-list-filter-view-css' => '76d08512', + 'aphront-pager-view-css' => '76d08512', + 'aphront-panel-view-css' => '76d08512', + 'aphront-table-view-css' => '76d08512', + 'aphront-tokenizer-control-css' => '76d08512', + 'aphront-tooltip-css' => '76d08512', + 'aphront-typeahead-control-css' => '76d08512', 'differential-changeset-view-css' => 'dd27a69b', 'differential-core-view-css' => 'dd27a69b', 'differential-inline-comment-editor' => '9488bb69', @@ -4313,7 +4313,7 @@ celerity_register_resource_map(array( 'differential-table-of-contents-css' => 'dd27a69b', 'diffusion-commit-view-css' => 'c8ce2d88', 'diffusion-icons-css' => 'c8ce2d88', - 'global-drag-and-drop-css' => 'e2eeaf23', + 'global-drag-and-drop-css' => '76d08512', 'inline-comment-summary-css' => 'dd27a69b', 'javelin-aphlict' => 'f2ad0683', 'javelin-behavior' => 'a9f14d76', @@ -4387,55 +4387,55 @@ celerity_register_resource_map(array( 'javelin-util' => 'a9f14d76', 'javelin-vector' => 'a9f14d76', 'javelin-workflow' => 'a9f14d76', - 'lightbox-attachment-css' => 'e2eeaf23', + 'lightbox-attachment-css' => '76d08512', 'maniphest-task-summary-css' => 'a7ca34a9', 'maniphest-transaction-detail-css' => 'a7ca34a9', - 'phabricator-action-list-view-css' => 'e2eeaf23', - 'phabricator-application-launch-view-css' => 'e2eeaf23', + 'phabricator-action-list-view-css' => '76d08512', + 'phabricator-application-launch-view-css' => '76d08512', 'phabricator-busy' => 'f2ad0683', 'phabricator-content-source-view-css' => 'dd27a69b', - 'phabricator-core-buttons-css' => 'e2eeaf23', - 'phabricator-core-css' => 'e2eeaf23', - 'phabricator-crumbs-view-css' => 'e2eeaf23', + 'phabricator-core-buttons-css' => '76d08512', + 'phabricator-core-css' => '76d08512', + 'phabricator-crumbs-view-css' => '76d08512', 'phabricator-drag-and-drop-file-upload' => '9488bb69', 'phabricator-dropdown-menu' => 'f2ad0683', 'phabricator-file-upload' => 'f2ad0683', - 'phabricator-filetree-view-css' => 'e2eeaf23', - 'phabricator-flag-css' => 'e2eeaf23', - 'phabricator-form-view-css' => 'e2eeaf23', - 'phabricator-header-view-css' => 'e2eeaf23', + 'phabricator-filetree-view-css' => '76d08512', + 'phabricator-flag-css' => '76d08512', + 'phabricator-form-view-css' => '76d08512', + 'phabricator-header-view-css' => '76d08512', 'phabricator-hovercard' => 'f2ad0683', - 'phabricator-jump-nav' => 'e2eeaf23', + 'phabricator-jump-nav' => '76d08512', 'phabricator-keyboard-shortcut' => 'f2ad0683', 'phabricator-keyboard-shortcut-manager' => 'f2ad0683', - 'phabricator-main-menu-view' => 'e2eeaf23', + 'phabricator-main-menu-view' => '76d08512', 'phabricator-menu-item' => 'f2ad0683', - 'phabricator-nav-view-css' => 'e2eeaf23', + 'phabricator-nav-view-css' => '76d08512', 'phabricator-notification' => 'f2ad0683', - 'phabricator-notification-css' => 'e2eeaf23', - 'phabricator-notification-menu-css' => 'e2eeaf23', - 'phabricator-object-item-list-view-css' => 'e2eeaf23', + 'phabricator-notification-css' => '76d08512', + 'phabricator-notification-menu-css' => '76d08512', + 'phabricator-object-item-list-view-css' => '76d08512', 'phabricator-object-selector-css' => 'dd27a69b', 'phabricator-phtize' => 'f2ad0683', 'phabricator-prefab' => 'f2ad0683', 'phabricator-project-tag-css' => 'a7ca34a9', - 'phabricator-property-list-view-css' => 'e2eeaf23', - 'phabricator-remarkup-css' => 'e2eeaf23', + 'phabricator-property-list-view-css' => '76d08512', + 'phabricator-remarkup-css' => '76d08512', 'phabricator-shaped-request' => '9488bb69', - 'phabricator-side-menu-view-css' => 'e2eeaf23', - 'phabricator-standard-page-view' => 'e2eeaf23', - 'phabricator-tag-view-css' => 'e2eeaf23', + 'phabricator-side-menu-view-css' => '76d08512', + 'phabricator-standard-page-view' => '76d08512', + 'phabricator-tag-view-css' => '76d08512', 'phabricator-textareautils' => 'f2ad0683', 'phabricator-tooltip' => 'f2ad0683', - 'phabricator-transaction-view-css' => 'e2eeaf23', - 'phabricator-zindex-css' => 'e2eeaf23', - 'phui-form-css' => 'e2eeaf23', - 'phui-icon-view-css' => 'e2eeaf23', - 'spacing-css' => 'e2eeaf23', - 'sprite-apps-large-css' => 'e2eeaf23', - 'sprite-gradient-css' => 'e2eeaf23', - 'sprite-icons-css' => 'e2eeaf23', - 'sprite-menu-css' => 'e2eeaf23', - 'syntax-highlighting-css' => 'e2eeaf23', + 'phabricator-transaction-view-css' => '76d08512', + 'phabricator-zindex-css' => '76d08512', + 'phui-form-css' => '76d08512', + 'phui-icon-view-css' => '76d08512', + 'spacing-css' => '76d08512', + 'sprite-apps-large-css' => '76d08512', + 'sprite-gradient-css' => '76d08512', + 'sprite-icons-css' => '76d08512', + 'sprite-menu-css' => '76d08512', + 'syntax-highlighting-css' => '76d08512', ), )); diff --git a/src/applications/uiexample/examples/PHUIIconExample.php b/src/applications/uiexample/examples/PHUIIconExample.php index df11e47c8c..c0160a5594 100644 --- a/src/applications/uiexample/examples/PHUIIconExample.php +++ b/src/applications/uiexample/examples/PHUIIconExample.php @@ -100,6 +100,20 @@ final class PHUIIconExample extends PhabricatorUIExample { ->setSpriteIcon($token); } + $logins = array( + 'Asana', + 'Dropbox', + 'Google', + 'Github'); + $loginview = array(); + foreach ($logins as $login) { + $loginview[] = + id(new PHUIIconView()) + ->setSpriteSheet(PHUIIconView::SPRITE_LOGIN) + ->setSpriteIcon($login) + ->addClass(PHUI::MARGIN_SMALL_RIGHT); + } + $layout1 = array( id(new PHUIBoxView()) @@ -140,6 +154,14 @@ final class PHUIIconExample extends PhabricatorUIExample { ->addPadding(PHUI::PADDING_MEDIUM) ->setShadow(true)); + $layout5 = + array( + id(new PHUIBoxView()) + ->appendChild($loginview) + ->addMargin(PHUI::MARGIN_MEDIUM) + ->addPadding(PHUI::PADDING_MEDIUM) + ->setShadow(true)); + $head1 = id(new PhabricatorHeaderView()) ->setHeader(pht('Action Icons!')); @@ -152,6 +174,9 @@ final class PHUIIconExample extends PhabricatorUIExample { $head4 = id(new PhabricatorHeaderView()) ->setHeader(pht('Payments')); + $head5 = id(new PhabricatorHeaderView()) + ->setHeader(pht('Authentication')); + $wrap1 = id(new PHUIBoxView()) ->appendChild($layout1) ->addMargin(PHUI::MARGIN_LARGE); @@ -168,6 +193,10 @@ final class PHUIIconExample extends PhabricatorUIExample { ->appendChild($layout4) ->addMargin(PHUI::MARGIN_LARGE); + $wrap5 = id(new PHUIBoxView()) + ->appendChild($layout5) + ->addMargin(PHUI::MARGIN_LARGE); + return phutil_tag( 'div', array( @@ -181,7 +210,9 @@ final class PHUIIconExample extends PhabricatorUIExample { $head3, $wrap3, $head4, - $wrap4 + $wrap4, + $head5, + $wrap5 )); } } diff --git a/src/infrastructure/celerity/CeleritySpriteGenerator.php b/src/infrastructure/celerity/CeleritySpriteGenerator.php index ac384dbd2d..e18d951711 100644 --- a/src/infrastructure/celerity/CeleritySpriteGenerator.php +++ b/src/infrastructure/celerity/CeleritySpriteGenerator.php @@ -450,8 +450,8 @@ final class CeleritySpriteGenerator { $prefix = 'login_'; foreach ($icons as $icon) { $sprite = id(clone $template) - ->setName($prefix.$icon) - ->setTargetCSS('.'.$prefix.$icon); + ->setName('login-'.$icon) + ->setTargetCSS('.login-'.$icon); foreach ($scales as $scale_key => $scale) { $path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png'); diff --git a/src/view/phui/PHUIIconView.php b/src/view/phui/PHUIIconView.php index 88af517a6c..aec244ae9e 100644 --- a/src/view/phui/PHUIIconView.php +++ b/src/view/phui/PHUIIconView.php @@ -8,6 +8,7 @@ final class PHUIIconView extends AphrontTagView { const SPRITE_TOKENS = 'tokens'; const SPRITE_PAYMENTS = 'payments'; const SPRITE_ICONS = 'icons'; + const SPRITE_LOGIN = 'login'; const HEAD_SMALL = 'phuihead-small'; const HEAD_MEDIUM = 'phuihead-medium'; diff --git a/webroot/rsrc/css/phui/phui-icon.css b/webroot/rsrc/css/phui/phui-icon.css index ba59ec31ca..014fdb0589 100644 --- a/webroot/rsrc/css/phui/phui-icon.css +++ b/webroot/rsrc/css/phui/phui-icon.css @@ -32,6 +32,11 @@ width: 60px; } +.phui-icon-view.sprite-login { + height: 34px; + width: 34px; +} + .phui-icon-view.phuihead-medium { height: 50px; width: 50px; diff --git a/webroot/rsrc/css/sprite-login.css b/webroot/rsrc/css/sprite-login.css index b696a32c35..d0e5575918 100644 --- a/webroot/rsrc/css/sprite-login.css +++ b/webroot/rsrc/css/sprite-login.css @@ -18,62 +18,62 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) { } -.login_Amazon { +.login-Amazon { background-position: 0px 0px; } -.login_Asana { +.login-Asana { background-position: -35px 0px; } -.login_Disqus { +.login-Disqus { background-position: -70px 0px; } -.login_Dropbox { +.login-Dropbox { background-position: -105px 0px; } -.login_Facebook { +.login-Facebook { background-position: 0px -35px; } -.login_Generic { +.login-Generic { background-position: -35px -35px; } -.login_Github { +.login-Github { background-position: -70px -35px; } -.login_Google { +.login-Google { background-position: -105px -35px; } -.login_HTTP { +.login-HTTP { background-position: 0px -70px; } -.login_LDAP { +.login-LDAP { background-position: -35px -70px; } -.login_Linkedin { +.login-Linkedin { background-position: -70px -70px; } -.login_Openid { +.login-Openid { background-position: -105px -70px; } -.login_Phabricator { +.login-Phabricator { background-position: 0px -105px; } -.login_Twitter { +.login-Twitter { background-position: -35px -105px; } -.login_Yahoo { +.login-Yahoo { background-position: -70px -105px; } -- 2.51.2