2012-11-24 01:35:39 +01:00
|
|
|
<?php
|
|
|
|
|
|
|
|
final class CeleritySpriteGenerator {
|
|
|
|
|
|
|
|
public function buildIconSheet() {
|
|
|
|
$icons = $this->getDirectoryList('icons_1x');
|
|
|
|
|
|
|
|
$colors = array(
|
|
|
|
'',
|
|
|
|
'grey',
|
|
|
|
'white',
|
|
|
|
);
|
|
|
|
|
|
|
|
$scales = array(
|
|
|
|
'1x' => 1,
|
|
|
|
'2x' => 2,
|
|
|
|
);
|
|
|
|
|
|
|
|
$template = id(new PhutilSprite())
|
|
|
|
->setSourceSize(14, 14);
|
|
|
|
|
|
|
|
$sprites = array();
|
|
|
|
foreach ($colors as $color) {
|
|
|
|
foreach ($icons as $icon) {
|
|
|
|
$prefix = 'icons_';
|
|
|
|
if (strlen($color)) {
|
|
|
|
$prefix .= $color.'_';
|
|
|
|
}
|
|
|
|
|
|
|
|
$suffix = '';
|
|
|
|
if (strlen($color)) {
|
|
|
|
$suffix = '-'.$color;
|
|
|
|
}
|
|
|
|
|
|
|
|
$sprite = id(clone $template)
|
Add action icons to object list views
Summary:
We have a few interfaces where add "Edit", "Delete" or some other action to a list. Currently, this happens via icons, but these are cumbersome and weird, are inconsistent, can't be workflow'd, are hard to hit on desktops and virtually impossible to hit on mobile, and generally just feel iffy to me. Prominent examples are Projects and Flags. I'd like to try adding an "edit" action to Maniphest (to provide quick edit from list views, basically). It looks like some of Releeph would benefit here, as well.
Instead, provide first-class actions:
{F42978}
They produce targets which my meaty ham-fists can plausibly hit on mobile, too:
{F42979}
(We could do some kind of swipe-to-expose thing eventually, but I think putting them by default is OK?)
Test Plan: Added UIExamples. Checked desktop/mobile.
Reviewers: chad, btrahan, edward
Reviewed By: btrahan
CC: aran
Differential Revision: https://secure.phabricator.com/D5890
2013-05-10 21:57:01 +02:00
|
|
|
->setName('icons-'.$icon.$suffix);
|
2012-11-24 01:35:39 +01:00
|
|
|
|
2013-01-22 18:56:18 +01:00
|
|
|
$tcss = array();
|
Add action icons to object list views
Summary:
We have a few interfaces where add "Edit", "Delete" or some other action to a list. Currently, this happens via icons, but these are cumbersome and weird, are inconsistent, can't be workflow'd, are hard to hit on desktops and virtually impossible to hit on mobile, and generally just feel iffy to me. Prominent examples are Projects and Flags. I'd like to try adding an "edit" action to Maniphest (to provide quick edit from list views, basically). It looks like some of Releeph would benefit here, as well.
Instead, provide first-class actions:
{F42978}
They produce targets which my meaty ham-fists can plausibly hit on mobile, too:
{F42979}
(We could do some kind of swipe-to-expose thing eventually, but I think putting them by default is OK?)
Test Plan: Added UIExamples. Checked desktop/mobile.
Reviewers: chad, btrahan, edward
Reviewed By: btrahan
CC: aran
Differential Revision: https://secure.phabricator.com/D5890
2013-05-10 21:57:01 +02:00
|
|
|
$tcss[] = '.icons-'.$icon.$suffix;
|
2012-11-24 01:35:39 +01:00
|
|
|
if ($color == 'white') {
|
2013-01-22 18:56:18 +01:00
|
|
|
$tcss[] = '.device-desktop .phabricator-action-view:hover '.
|
Add action icons to object list views
Summary:
We have a few interfaces where add "Edit", "Delete" or some other action to a list. Currently, this happens via icons, but these are cumbersome and weird, are inconsistent, can't be workflow'd, are hard to hit on desktops and virtually impossible to hit on mobile, and generally just feel iffy to me. Prominent examples are Projects and Flags. I'd like to try adding an "edit" action to Maniphest (to provide quick edit from list views, basically). It looks like some of Releeph would benefit here, as well.
Instead, provide first-class actions:
{F42978}
They produce targets which my meaty ham-fists can plausibly hit on mobile, too:
{F42979}
(We could do some kind of swipe-to-expose thing eventually, but I think putting them by default is OK?)
Test Plan: Added UIExamples. Checked desktop/mobile.
Reviewers: chad, btrahan, edward
Reviewed By: btrahan
CC: aran
Differential Revision: https://secure.phabricator.com/D5890
2013-05-10 21:57:01 +02:00
|
|
|
'.icons-'.$icon;
|
2013-06-06 01:29:32 +02:00
|
|
|
$tcss[] = '.device-desktop .phui-list-sidenav '.
|
|
|
|
'.phui-list-item-href:hover .icons-'.$icon;
|
2012-11-24 01:35:39 +01:00
|
|
|
}
|
|
|
|
|
2013-01-22 18:56:18 +01:00
|
|
|
$sprite->setTargetCSS(implode(', ', $tcss));
|
|
|
|
|
2012-11-24 01:35:39 +01:00
|
|
|
foreach ($scales as $scale_key => $scale) {
|
|
|
|
$path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png');
|
|
|
|
$sprite->setSourceFile($path, $scale);
|
|
|
|
}
|
|
|
|
$sprites[] = $sprite;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
$remarkup_icons = $this->getDirectoryList('remarkup_1x');
|
|
|
|
foreach ($remarkup_icons as $icon) {
|
|
|
|
$prefix = 'remarkup_';
|
|
|
|
|
|
|
|
// Strip 'text_' from these file names.
|
|
|
|
$class_name = substr($icon, 5);
|
|
|
|
|
2013-08-30 00:59:15 +02:00
|
|
|
if ($class_name == 'fullscreen_off') {
|
|
|
|
$tcss = '.remarkup-control-fullscreen-mode .remarkup-assist-fullscreen';
|
2013-04-20 04:50:21 +02:00
|
|
|
} else {
|
|
|
|
$tcss = '.remarkup-assist-'.$class_name;
|
|
|
|
}
|
|
|
|
|
2012-11-24 01:35:39 +01:00
|
|
|
$sprite = id(clone $template)
|
|
|
|
->setName('remarkup-assist-'.$icon)
|
2013-04-20 04:50:21 +02:00
|
|
|
->setTargetCSS($tcss);
|
|
|
|
|
2012-11-24 01:35:39 +01:00
|
|
|
foreach ($scales as $scale_key => $scale) {
|
|
|
|
$path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png');
|
|
|
|
$sprite->setSourceFile($path, $scale);
|
|
|
|
}
|
|
|
|
$sprites[] = $sprite;
|
|
|
|
}
|
|
|
|
|
Add action icons to object list views
Summary:
We have a few interfaces where add "Edit", "Delete" or some other action to a list. Currently, this happens via icons, but these are cumbersome and weird, are inconsistent, can't be workflow'd, are hard to hit on desktops and virtually impossible to hit on mobile, and generally just feel iffy to me. Prominent examples are Projects and Flags. I'd like to try adding an "edit" action to Maniphest (to provide quick edit from list views, basically). It looks like some of Releeph would benefit here, as well.
Instead, provide first-class actions:
{F42978}
They produce targets which my meaty ham-fists can plausibly hit on mobile, too:
{F42979}
(We could do some kind of swipe-to-expose thing eventually, but I think putting them by default is OK?)
Test Plan: Added UIExamples. Checked desktop/mobile.
Reviewers: chad, btrahan, edward
Reviewed By: btrahan
CC: aran
Differential Revision: https://secure.phabricator.com/D5890
2013-05-10 21:57:01 +02:00
|
|
|
$sheet = $this->buildSheet('icons', true);
|
2012-11-24 01:35:39 +01:00
|
|
|
$sheet->setScales($scales);
|
|
|
|
foreach ($sprites as $sprite) {
|
|
|
|
$sheet->addSprite($sprite);
|
|
|
|
}
|
|
|
|
|
|
|
|
return $sheet;
|
|
|
|
}
|
|
|
|
|
2013-04-04 19:38:50 +02:00
|
|
|
public function buildActionsSheet() {
|
|
|
|
$icons = $this->getDirectoryList('actions_white_1x');
|
|
|
|
|
|
|
|
$colors = array(
|
|
|
|
'dark',
|
|
|
|
'grey',
|
|
|
|
'white',
|
|
|
|
);
|
|
|
|
|
|
|
|
$scales = array(
|
|
|
|
'1x' => 1,
|
|
|
|
'2x' => 2,
|
|
|
|
);
|
|
|
|
|
|
|
|
$template = id(new PhutilSprite())
|
|
|
|
->setSourceSize(24, 24);
|
|
|
|
|
|
|
|
$sprites = array();
|
|
|
|
foreach ($colors as $color) {
|
|
|
|
foreach ($icons as $icon) {
|
|
|
|
$prefix = 'actions_';
|
|
|
|
if (strlen($color)) {
|
|
|
|
$prefix .= $color.'_';
|
|
|
|
}
|
|
|
|
|
|
|
|
$suffix = '';
|
|
|
|
if (strlen($color)) {
|
|
|
|
$suffix = '-'.$color;
|
|
|
|
}
|
|
|
|
|
|
|
|
$sprite = id(clone $template)
|
2013-04-05 16:40:27 +02:00
|
|
|
->setName('actions-'.$icon.$suffix);
|
2013-04-04 19:38:50 +02:00
|
|
|
|
|
|
|
$tcss = array();
|
2013-04-05 16:40:27 +02:00
|
|
|
$tcss[] = '.actions-'.$icon.$suffix;
|
|
|
|
if ($color == 'dark') {
|
|
|
|
$tcss[] = '.device-desktop '.
|
Add action icons to object list views
Summary:
We have a few interfaces where add "Edit", "Delete" or some other action to a list. Currently, this happens via icons, but these are cumbersome and weird, are inconsistent, can't be workflow'd, are hard to hit on desktops and virtually impossible to hit on mobile, and generally just feel iffy to me. Prominent examples are Projects and Flags. I'd like to try adding an "edit" action to Maniphest (to provide quick edit from list views, basically). It looks like some of Releeph would benefit here, as well.
Instead, provide first-class actions:
{F42978}
They produce targets which my meaty ham-fists can plausibly hit on mobile, too:
{F42979}
(We could do some kind of swipe-to-expose thing eventually, but I think putting them by default is OK?)
Test Plan: Added UIExamples. Checked desktop/mobile.
Reviewers: chad, btrahan, edward
Reviewed By: btrahan
CC: aran
Differential Revision: https://secure.phabricator.com/D5890
2013-05-10 21:57:01 +02:00
|
|
|
'.actions-'.$icon.'-grey.phui-icon-view:hover';
|
2013-04-04 19:38:50 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
$sprite->setTargetCSS(implode(', ', $tcss));
|
|
|
|
|
|
|
|
foreach ($scales as $scale_key => $scale) {
|
|
|
|
$path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png');
|
|
|
|
$sprite->setSourceFile($path, $scale);
|
|
|
|
}
|
|
|
|
$sprites[] = $sprite;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2013-04-05 16:40:27 +02:00
|
|
|
$sheet = $this->buildSheet('actions', true);
|
2013-04-04 19:38:50 +02:00
|
|
|
$sheet->setScales($scales);
|
|
|
|
foreach ($sprites as $sprite) {
|
|
|
|
$sheet->addSprite($sprite);
|
|
|
|
}
|
|
|
|
|
|
|
|
return $sheet;
|
|
|
|
}
|
|
|
|
|
|
|
|
public function buildMiniconsSheet() {
|
|
|
|
$icons = $this->getDirectoryList('minicons_white_1x');
|
|
|
|
|
|
|
|
$colors = array(
|
|
|
|
'white',
|
2013-04-05 16:40:27 +02:00
|
|
|
'dark',
|
2013-04-04 19:38:50 +02:00
|
|
|
);
|
|
|
|
|
|
|
|
$scales = array(
|
|
|
|
'1x' => 1,
|
|
|
|
'2x' => 2,
|
|
|
|
);
|
|
|
|
|
|
|
|
$template = id(new PhutilSprite())
|
|
|
|
->setSourceSize(16, 16);
|
|
|
|
|
|
|
|
$sprites = array();
|
|
|
|
foreach ($colors as $color) {
|
|
|
|
foreach ($icons as $icon) {
|
|
|
|
$prefix = 'minicons_';
|
|
|
|
if (strlen($color)) {
|
|
|
|
$prefix .= $color.'_';
|
|
|
|
}
|
|
|
|
|
|
|
|
$suffix = '';
|
|
|
|
if (strlen($color)) {
|
|
|
|
$suffix = '-'.$color;
|
|
|
|
}
|
|
|
|
|
|
|
|
$sprite = id(clone $template)
|
|
|
|
->setName('minicons-'.$icon.$suffix);
|
|
|
|
|
|
|
|
$sprite->setTargetCSS('.minicons-'.$icon.$suffix);
|
|
|
|
|
|
|
|
foreach ($scales as $scale_key => $scale) {
|
|
|
|
$path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png');
|
|
|
|
$sprite->setSourceFile($path, $scale);
|
|
|
|
}
|
|
|
|
$sprites[] = $sprite;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
$sheet = $this->buildSheet('minicons', true);
|
|
|
|
$sheet->setScales($scales);
|
|
|
|
foreach ($sprites as $sprite) {
|
|
|
|
$sheet->addSprite($sprite);
|
|
|
|
}
|
|
|
|
|
|
|
|
return $sheet;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2012-11-27 23:03:25 +01:00
|
|
|
public function buildMenuSheet() {
|
|
|
|
$sprites = array();
|
|
|
|
|
|
|
|
$sources = array(
|
|
|
|
'seen_read_all' => array(
|
2013-02-26 23:56:25 +01:00
|
|
|
'x' => 18,
|
|
|
|
'y' => 18,
|
2012-11-27 23:03:25 +01:00
|
|
|
'css' =>
|
|
|
|
'.alert-notifications .phabricator-main-menu-alert-icon',
|
|
|
|
),
|
|
|
|
'seen_have_unread' => array(
|
2013-02-26 23:56:25 +01:00
|
|
|
'x' => 18,
|
|
|
|
'y' => 18,
|
2012-11-27 23:03:25 +01:00
|
|
|
'css' =>
|
|
|
|
'.alert-notifications:hover .phabricator-main-menu-alert-icon',
|
|
|
|
),
|
|
|
|
'unseen_any' => array(
|
2013-02-26 23:56:25 +01:00
|
|
|
'x' => 18,
|
|
|
|
'y' => 18,
|
2012-11-27 23:03:25 +01:00
|
|
|
'css' =>
|
|
|
|
'.alert-notifications.alert-unread .phabricator-main-menu-alert-icon',
|
|
|
|
),
|
2012-12-07 22:35:49 +01:00
|
|
|
'arrow-right' => array(
|
|
|
|
'x' => 9,
|
|
|
|
'y' => 31,
|
|
|
|
'css' => '.phabricator-crumb-divider',
|
|
|
|
),
|
2013-03-22 19:50:30 +01:00
|
|
|
'search' => array(
|
2012-12-07 22:36:35 +01:00
|
|
|
'x' => 24,
|
2013-03-22 19:50:30 +01:00
|
|
|
'y' => 24,
|
|
|
|
'css' => '.menu-icon-search',
|
2012-12-07 22:36:35 +01:00
|
|
|
),
|
2013-03-22 19:50:30 +01:00
|
|
|
'search_blue' => array(
|
2013-03-03 17:17:57 +01:00
|
|
|
'x' => 24,
|
2013-03-22 19:50:30 +01:00
|
|
|
'y' => 24,
|
|
|
|
'css' => '.menu-icon-search-blue',
|
2013-03-03 17:17:57 +01:00
|
|
|
),
|
2013-07-28 22:47:09 +02:00
|
|
|
'new' => array(
|
|
|
|
'x' => 24,
|
|
|
|
'y' => 24,
|
|
|
|
'css' => '.menu-icon-new',
|
|
|
|
),
|
|
|
|
'new_blue' => array(
|
|
|
|
'x' => 24,
|
|
|
|
'y' => 24,
|
|
|
|
'css' => '.menu-icon-new-blue',
|
|
|
|
),
|
2012-12-07 22:36:35 +01:00
|
|
|
'app' => array(
|
|
|
|
'x' => 24,
|
2013-03-22 19:50:30 +01:00
|
|
|
'y' => 24,
|
2012-12-07 22:36:35 +01:00
|
|
|
'css' => '.menu-icon-app',
|
|
|
|
),
|
2013-03-03 17:17:57 +01:00
|
|
|
'app_blue' => array(
|
|
|
|
'x' => 24,
|
2013-03-22 19:50:30 +01:00
|
|
|
'y' => 24,
|
2013-03-03 17:17:57 +01:00
|
|
|
'css' => '.menu-icon-app-blue',
|
|
|
|
),
|
2012-12-07 23:29:09 +01:00
|
|
|
'logo' => array(
|
2013-07-18 00:53:26 +02:00
|
|
|
'x' => 149,
|
|
|
|
'y' => 26,
|
2012-12-07 23:29:09 +01:00
|
|
|
'css' => '.phabricator-main-menu-logo-image',
|
|
|
|
),
|
2013-01-27 02:04:18 +01:00
|
|
|
'conf-off' => array(
|
2013-02-26 23:56:25 +01:00
|
|
|
'x' => 18,
|
|
|
|
'y' => 18,
|
2013-01-27 02:04:18 +01:00
|
|
|
'css' =>
|
|
|
|
'.alert-notifications .phabricator-main-menu-message-icon',
|
|
|
|
),
|
|
|
|
'conf-hover' => array(
|
2013-02-26 23:56:25 +01:00
|
|
|
'x' => 18,
|
|
|
|
'y' => 18,
|
2013-01-27 02:04:18 +01:00
|
|
|
'css' =>
|
|
|
|
'.alert-notifications:hover .phabricator-main-menu-message-icon',
|
|
|
|
),
|
|
|
|
'conf-unseen' => array(
|
2013-02-26 23:56:25 +01:00
|
|
|
'x' => 18,
|
|
|
|
'y' => 18,
|
2013-01-27 02:04:18 +01:00
|
|
|
'css' =>
|
|
|
|
'.alert-notifications.message-unread '.
|
|
|
|
'.phabricator-main-menu-message-icon',
|
|
|
|
),
|
2012-11-27 23:03:25 +01:00
|
|
|
);
|
|
|
|
|
|
|
|
$scales = array(
|
|
|
|
'1x' => 1,
|
|
|
|
'2x' => 2,
|
|
|
|
);
|
|
|
|
|
|
|
|
$template = new PhutilSprite();
|
|
|
|
foreach ($sources as $name => $spec) {
|
|
|
|
$sprite = id(clone $template)
|
|
|
|
->setName($name)
|
|
|
|
->setSourceSize($spec['x'], $spec['y'])
|
|
|
|
->setTargetCSS($spec['css']);
|
|
|
|
|
|
|
|
foreach ($scales as $scale_name => $scale) {
|
2012-12-07 22:35:49 +01:00
|
|
|
$path = 'menu_'.$scale_name.'/'.$name.'.png';
|
2012-11-27 23:03:25 +01:00
|
|
|
$path = $this->getPath($path);
|
|
|
|
|
|
|
|
$sprite->setSourceFile($path, $scale);
|
|
|
|
}
|
|
|
|
$sprites[] = $sprite;
|
|
|
|
}
|
|
|
|
|
Use application icons for "Eye" menu and Crumbs
Summary:
Issues here:
- Need an application-sized "eye", or a "home" icon for "Phabricator Home".
- Some of the "apps_lb_2x" sliced images are the "_dark_" versions, not the light versions.
- If you slice an application-sized "logout" (power off) icon and application-sized "help" (questionmark in circle) icon I can replace the current menu icons and nearly get rid of "autosprite".
- To replace the icons on /applications/, the non-retina size is "4x", so we'd need "8x" for retina. Alternatively I can reduce the icon sizes by 50%.
- The "Help", "Settings" and "Logout" items currently have a "glowing" hover state, which needs a variant (or we can drop it).
- The /applications/ icons have a white hover state (or we can drop it).
- The 1x application (14x14) icons aren't used anywhere right now, should they be? Maybe in the feed in the future, etc?
- The "apps-2x" and "apps-large" sheets are the same image, but getting them to actually use the same file is a bit tricky, so I just left them separate for now.
Test Plan:
{F26698}
{F26699}
Reviewers: chad
Reviewed By: chad
CC: aran
Maniphest Tasks: T1960
Differential Revision: https://secure.phabricator.com/D4108
2012-12-07 22:37:28 +01:00
|
|
|
$sheet = $this->buildSheet('menu', true);
|
2012-11-27 23:03:25 +01:00
|
|
|
$sheet->setScales($scales);
|
|
|
|
foreach ($sprites as $sprite) {
|
|
|
|
$sheet->addSprite($sprite);
|
|
|
|
}
|
|
|
|
|
|
|
|
return $sheet;
|
|
|
|
}
|
|
|
|
|
2013-02-15 16:47:14 +01:00
|
|
|
public function buildTokenSheet() {
|
2013-11-04 20:50:19 +01:00
|
|
|
$icons = $this->getDirectoryList('tokens_1x');
|
|
|
|
$scales = array(
|
|
|
|
'1x' => 1,
|
|
|
|
'2x' => 2,
|
|
|
|
);
|
2013-02-15 16:47:14 +01:00
|
|
|
$template = id(new PhutilSprite())
|
|
|
|
->setSourceSize(16, 16);
|
|
|
|
|
|
|
|
$sprites = array();
|
2013-11-04 20:50:19 +01:00
|
|
|
$prefix = 'tokens_';
|
|
|
|
foreach ($icons as $icon) {
|
2013-02-15 16:47:14 +01:00
|
|
|
$sprite = id(clone $template)
|
2013-11-04 20:50:19 +01:00
|
|
|
->setName('tokens-'.$icon)
|
|
|
|
->setTargetCSS('.tokens-'.$icon);
|
2013-02-15 16:47:14 +01:00
|
|
|
|
2013-11-04 20:50:19 +01:00
|
|
|
foreach ($scales as $scale_key => $scale) {
|
|
|
|
$path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png');
|
|
|
|
$sprite->setSourceFile($path, $scale);
|
|
|
|
}
|
2013-02-15 16:47:14 +01:00
|
|
|
$sprites[] = $sprite;
|
|
|
|
}
|
|
|
|
|
2013-11-04 20:50:19 +01:00
|
|
|
$sheet = $this->buildSheet('tokens', true);
|
|
|
|
$sheet->setScales($scales);
|
2013-02-15 16:47:14 +01:00
|
|
|
foreach ($sprites as $sprite) {
|
|
|
|
$sheet->addSprite($sprite);
|
|
|
|
}
|
|
|
|
|
|
|
|
return $sheet;
|
|
|
|
}
|
|
|
|
|
2013-10-13 04:15:38 +02:00
|
|
|
public function buildProjectsSheet() {
|
|
|
|
$icons = $this->getDirectoryList('projects_1x');
|
|
|
|
$scales = array(
|
|
|
|
'1x' => 1,
|
|
|
|
'2x' => 2,
|
|
|
|
);
|
|
|
|
$template = id(new PhutilSprite())
|
|
|
|
->setSourceSize(50, 50);
|
|
|
|
|
|
|
|
$sprites = array();
|
2013-10-17 18:32:34 +02:00
|
|
|
$prefix = 'projects-';
|
2013-10-13 04:15:38 +02:00
|
|
|
foreach ($icons as $icon) {
|
|
|
|
$sprite = id(clone $template)
|
|
|
|
->setName($prefix.$icon)
|
|
|
|
->setTargetCSS('.'.$prefix.$icon);
|
|
|
|
|
|
|
|
foreach ($scales as $scale_key => $scale) {
|
2013-10-17 18:32:34 +02:00
|
|
|
$path = $this->getPath('projects_'.$scale_key.'/'.$icon.'.png');
|
2013-10-13 04:15:38 +02:00
|
|
|
$sprite->setSourceFile($path, $scale);
|
|
|
|
}
|
|
|
|
$sprites[] = $sprite;
|
|
|
|
}
|
|
|
|
|
|
|
|
$sheet = $this->buildSheet('projects', true);
|
|
|
|
$sheet->setScales($scales);
|
|
|
|
foreach ($sprites as $sprite) {
|
|
|
|
$sheet->addSprite($sprite);
|
|
|
|
}
|
|
|
|
|
|
|
|
return $sheet;
|
|
|
|
}
|
|
|
|
|
2013-04-23 01:41:00 +02:00
|
|
|
public function buildPaymentsSheet() {
|
|
|
|
$icons = $this->getDirectoryList('payments_2x');
|
|
|
|
$scales = array(
|
|
|
|
'2x' => 1,
|
|
|
|
);
|
|
|
|
$template = id(new PhutilSprite())
|
|
|
|
->setSourceSize(60, 32);
|
|
|
|
|
|
|
|
$sprites = array();
|
|
|
|
$prefix = 'payments_';
|
|
|
|
foreach ($icons as $icon) {
|
|
|
|
$sprite = id(clone $template)
|
|
|
|
->setName('payments-'.$icon)
|
|
|
|
->setTargetCSS('.payments-'.$icon);
|
|
|
|
|
|
|
|
foreach ($scales as $scale_key => $scale) {
|
|
|
|
$path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png');
|
|
|
|
$sprite->setSourceFile($path, $scale);
|
|
|
|
}
|
|
|
|
$sprites[] = $sprite;
|
|
|
|
}
|
|
|
|
|
|
|
|
$sheet = $this->buildSheet('payments', true);
|
|
|
|
$sheet->setScales($scales);
|
|
|
|
foreach ($sprites as $sprite) {
|
|
|
|
$sheet->addSprite($sprite);
|
|
|
|
}
|
|
|
|
|
|
|
|
return $sheet;
|
|
|
|
}
|
|
|
|
|
2013-02-15 16:47:14 +01:00
|
|
|
|
2013-01-29 00:56:29 +01:00
|
|
|
public function buildConpherenceSheet() {
|
2013-03-13 21:03:51 +01:00
|
|
|
$name = 'conpherence';
|
|
|
|
$icons = $this->getDirectoryList($name.'_1x');
|
2013-01-29 00:56:29 +01:00
|
|
|
$scales = array(
|
|
|
|
'1x' => 1,
|
|
|
|
'2x' => 2,
|
|
|
|
);
|
|
|
|
$template = id(new PhutilSprite())
|
|
|
|
->setSourceSize(32, 32);
|
|
|
|
|
|
|
|
$sprites = array();
|
2013-02-15 16:47:14 +01:00
|
|
|
foreach ($icons as $icon) {
|
2013-01-29 00:56:29 +01:00
|
|
|
$color = preg_match('/_on/', $icon) ? 'on' : 'off';
|
|
|
|
|
2013-03-13 21:03:51 +01:00
|
|
|
$prefix = $name.'_';
|
2013-01-29 00:56:29 +01:00
|
|
|
|
|
|
|
$sprite = id(clone $template)
|
|
|
|
->setName($prefix.$icon);
|
|
|
|
|
2013-01-29 19:56:01 +01:00
|
|
|
$tcss = array();
|
|
|
|
$tcss[] = '.'.$prefix.$icon;
|
|
|
|
if ($color == 'on') {
|
|
|
|
$class = str_replace('_on', '_off', $prefix.$icon);
|
|
|
|
$tcss[] = '.device-desktop .'.$class.':hover ';
|
|
|
|
}
|
|
|
|
|
|
|
|
$sprite->setTargetCSS(implode(', ', $tcss));
|
2013-01-29 00:56:29 +01:00
|
|
|
|
|
|
|
foreach ($scales as $scale_key => $scale) {
|
|
|
|
$path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png');
|
|
|
|
$sprite->setSourceFile($path, $scale);
|
|
|
|
}
|
|
|
|
$sprites[] = $sprite;
|
|
|
|
}
|
|
|
|
|
2013-03-13 21:03:51 +01:00
|
|
|
$sheet = $this->buildSheet($name, true);
|
2013-01-29 00:56:29 +01:00
|
|
|
$sheet->setScales($scales);
|
|
|
|
foreach ($sprites as $sprite) {
|
|
|
|
$sheet->addSprite($sprite);
|
|
|
|
}
|
|
|
|
|
|
|
|
return $sheet;
|
|
|
|
}
|
|
|
|
|
2013-03-10 22:16:16 +01:00
|
|
|
public function buildDocsSheet() {
|
|
|
|
$icons = $this->getDirectoryList('docs_1x');
|
|
|
|
$scales = array(
|
|
|
|
'1x' => 1,
|
|
|
|
'2x' => 2,
|
|
|
|
);
|
|
|
|
$template = id(new PhutilSprite())
|
|
|
|
->setSourceSize(32, 32);
|
|
|
|
|
|
|
|
$sprites = array();
|
|
|
|
$prefix = 'docs_';
|
|
|
|
foreach ($icons as $icon) {
|
|
|
|
$sprite = id(clone $template)
|
|
|
|
->setName($prefix.$icon)
|
|
|
|
->setTargetCSS('.'.$prefix.$icon);
|
|
|
|
|
|
|
|
foreach ($scales as $scale_key => $scale) {
|
|
|
|
$path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png');
|
|
|
|
$sprite->setSourceFile($path, $scale);
|
|
|
|
}
|
|
|
|
$sprites[] = $sprite;
|
|
|
|
}
|
|
|
|
|
|
|
|
$sheet = $this->buildSheet('docs', true);
|
|
|
|
$sheet->setScales($scales);
|
|
|
|
foreach ($sprites as $sprite) {
|
|
|
|
$sheet->addSprite($sprite);
|
|
|
|
}
|
|
|
|
|
|
|
|
return $sheet;
|
|
|
|
}
|
|
|
|
|
2013-06-11 19:22:09 +02:00
|
|
|
public function buildLoginSheet() {
|
|
|
|
$icons = $this->getDirectoryList('login_1x');
|
|
|
|
$scales = array(
|
|
|
|
'1x' => 1,
|
|
|
|
'2x' => 2,
|
|
|
|
);
|
|
|
|
$template = id(new PhutilSprite())
|
|
|
|
->setSourceSize(34, 34);
|
|
|
|
|
|
|
|
$sprites = array();
|
|
|
|
$prefix = 'login_';
|
|
|
|
foreach ($icons as $icon) {
|
|
|
|
$sprite = id(clone $template)
|
2013-06-13 00:05:16 +02:00
|
|
|
->setName('login-'.$icon)
|
|
|
|
->setTargetCSS('.login-'.$icon);
|
2013-06-11 19:22:09 +02:00
|
|
|
|
|
|
|
foreach ($scales as $scale_key => $scale) {
|
|
|
|
$path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png');
|
|
|
|
$sprite->setSourceFile($path, $scale);
|
|
|
|
}
|
|
|
|
$sprites[] = $sprite;
|
|
|
|
}
|
|
|
|
|
|
|
|
$sheet = $this->buildSheet('login', true);
|
|
|
|
$sheet->setScales($scales);
|
|
|
|
foreach ($sprites as $sprite) {
|
|
|
|
$sheet->addSprite($sprite);
|
|
|
|
}
|
|
|
|
|
|
|
|
return $sheet;
|
|
|
|
}
|
|
|
|
|
2013-07-17 17:44:11 +02:00
|
|
|
public function buildStatusSheet() {
|
|
|
|
$icons = $this->getDirectoryList('status_1x');
|
|
|
|
$scales = array(
|
|
|
|
'1x' => 1,
|
|
|
|
'2x' => 2,
|
|
|
|
);
|
|
|
|
$template = id(new PhutilSprite())
|
|
|
|
->setSourceSize(14, 14);
|
|
|
|
|
|
|
|
$sprites = array();
|
|
|
|
$prefix = 'status_';
|
2013-10-23 19:16:09 +02:00
|
|
|
$extra_css = array(
|
|
|
|
'policy-custom-white' =>
|
|
|
|
', .dropdown-menu-item:hover .status-policy-custom',
|
|
|
|
'policy-all-white' =>
|
|
|
|
', .dropdown-menu-item:hover .status-policy-all',
|
|
|
|
'policy-unknown-white' =>
|
|
|
|
', .dropdown-menu-item:hover .status-policy-unknown',
|
|
|
|
'policy-admin-white' =>
|
|
|
|
', .dropdown-menu-item:hover .status-policy-admin',
|
|
|
|
'policy-public-white' =>
|
|
|
|
', .dropdown-menu-item:hover .status-policy-public',
|
|
|
|
'policy-project-white' =>
|
|
|
|
', .dropdown-menu-item:hover .status-policy-project',
|
|
|
|
'policy-noone-white' =>
|
|
|
|
', .dropdown-menu-item:hover .status-policy-noone',
|
|
|
|
);
|
|
|
|
|
2013-07-17 17:44:11 +02:00
|
|
|
foreach ($icons as $icon) {
|
|
|
|
$sprite = id(clone $template)
|
|
|
|
->setName('status-'.$icon)
|
2013-10-23 19:16:09 +02:00
|
|
|
->setTargetCSS('.status-'.$icon.idx($extra_css, $icon));
|
2013-07-17 17:44:11 +02:00
|
|
|
|
|
|
|
foreach ($scales as $scale_key => $scale) {
|
|
|
|
$path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png');
|
|
|
|
$sprite->setSourceFile($path, $scale);
|
|
|
|
}
|
|
|
|
$sprites[] = $sprite;
|
|
|
|
}
|
|
|
|
|
|
|
|
$sheet = $this->buildSheet('status', true);
|
|
|
|
$sheet->setScales($scales);
|
|
|
|
foreach ($sprites as $sprite) {
|
|
|
|
$sheet->addSprite($sprite);
|
|
|
|
}
|
|
|
|
|
|
|
|
return $sheet;
|
|
|
|
}
|
|
|
|
|
2012-12-07 22:35:49 +01:00
|
|
|
public function buildGradientSheet() {
|
|
|
|
$gradients = $this->getDirectoryList('gradients');
|
|
|
|
|
|
|
|
$template = new PhutilSprite();
|
|
|
|
|
|
|
|
$unusual_heights = array(
|
|
|
|
'dark-menu-label' => 25,
|
|
|
|
'breadcrumbs' => 31,
|
2013-01-16 00:49:48 +01:00
|
|
|
'menu-label' => 24,
|
2013-04-04 19:38:50 +02:00
|
|
|
'red-header' => 70,
|
|
|
|
'blue-header' => 70,
|
|
|
|
'green-header' => 70,
|
|
|
|
'yellow-header' => 70,
|
2013-04-10 00:50:48 +02:00
|
|
|
'grey-header' => 70,
|
|
|
|
'dark-grey-header' => 70,
|
2013-09-29 00:55:38 +02:00
|
|
|
'lightblue-header' => 240,
|
2012-12-07 22:35:49 +01:00
|
|
|
);
|
|
|
|
|
|
|
|
$extra_css = array(
|
2013-01-16 00:49:48 +01:00
|
|
|
'dark-menu-label' =>
|
2013-06-05 17:41:43 +02:00
|
|
|
', .phabricator-dark-menu .phui-list-item-type-label',
|
2013-01-16 00:49:48 +01:00
|
|
|
'menu-label' =>
|
2013-06-05 17:41:43 +02:00
|
|
|
', .phabricator-side-menu .phui-list-item-type-label',
|
2012-12-07 22:35:49 +01:00
|
|
|
);
|
|
|
|
|
|
|
|
$sprites = array();
|
|
|
|
foreach ($gradients as $gradient) {
|
|
|
|
$path = $this->getPath('gradients/'.$gradient.'.png');
|
|
|
|
$sprite = id(clone $template)
|
|
|
|
->setName('gradient-'.$gradient)
|
|
|
|
->setSourceFile($path)
|
|
|
|
->setTargetCSS('.gradient-'.$gradient.idx($extra_css, $gradient));
|
|
|
|
|
|
|
|
$sprite->setSourceSize(4, idx($unusual_heights, $gradient, 26));
|
|
|
|
|
|
|
|
$sprites[] = $sprite;
|
|
|
|
}
|
|
|
|
|
|
|
|
$sheet = $this->buildSheet(
|
|
|
|
'gradient',
|
Use application icons for "Eye" menu and Crumbs
Summary:
Issues here:
- Need an application-sized "eye", or a "home" icon for "Phabricator Home".
- Some of the "apps_lb_2x" sliced images are the "_dark_" versions, not the light versions.
- If you slice an application-sized "logout" (power off) icon and application-sized "help" (questionmark in circle) icon I can replace the current menu icons and nearly get rid of "autosprite".
- To replace the icons on /applications/, the non-retina size is "4x", so we'd need "8x" for retina. Alternatively I can reduce the icon sizes by 50%.
- The "Help", "Settings" and "Logout" items currently have a "glowing" hover state, which needs a variant (or we can drop it).
- The /applications/ icons have a white hover state (or we can drop it).
- The 1x application (14x14) icons aren't used anywhere right now, should they be? Maybe in the feed in the future, etc?
- The "apps-2x" and "apps-large" sheets are the same image, but getting them to actually use the same file is a bit tricky, so I just left them separate for now.
Test Plan:
{F26698}
{F26699}
Reviewers: chad
Reviewed By: chad
CC: aran
Maniphest Tasks: T1960
Differential Revision: https://secure.phabricator.com/D4108
2012-12-07 22:37:28 +01:00
|
|
|
false,
|
2012-12-07 22:35:49 +01:00
|
|
|
PhutilSpriteSheet::TYPE_REPEAT_X,
|
2013-06-05 17:41:43 +02:00
|
|
|
', .phabricator-dark-menu .phui-list-item-type-label, '.
|
|
|
|
'.phabricator-side-menu .phui-list-item-type-label');
|
2012-12-07 22:35:49 +01:00
|
|
|
foreach ($sprites as $sprite) {
|
|
|
|
$sheet->addSprite($sprite);
|
|
|
|
}
|
|
|
|
|
|
|
|
return $sheet;
|
|
|
|
}
|
|
|
|
|
Use application icons for "Eye" menu and Crumbs
Summary:
Issues here:
- Need an application-sized "eye", or a "home" icon for "Phabricator Home".
- Some of the "apps_lb_2x" sliced images are the "_dark_" versions, not the light versions.
- If you slice an application-sized "logout" (power off) icon and application-sized "help" (questionmark in circle) icon I can replace the current menu icons and nearly get rid of "autosprite".
- To replace the icons on /applications/, the non-retina size is "4x", so we'd need "8x" for retina. Alternatively I can reduce the icon sizes by 50%.
- The "Help", "Settings" and "Logout" items currently have a "glowing" hover state, which needs a variant (or we can drop it).
- The /applications/ icons have a white hover state (or we can drop it).
- The 1x application (14x14) icons aren't used anywhere right now, should they be? Maybe in the feed in the future, etc?
- The "apps-2x" and "apps-large" sheets are the same image, but getting them to actually use the same file is a bit tricky, so I just left them separate for now.
Test Plan:
{F26698}
{F26699}
Reviewers: chad
Reviewed By: chad
CC: aran
Maniphest Tasks: T1960
Differential Revision: https://secure.phabricator.com/D4108
2012-12-07 22:37:28 +01:00
|
|
|
public function buildAppsSheet() {
|
|
|
|
return $this->buildAppsSheetVariant(1);
|
|
|
|
}
|
|
|
|
|
|
|
|
public function buildAppsLargeSheet() {
|
|
|
|
return $this->buildAppsSheetVariant(2);
|
|
|
|
}
|
|
|
|
|
|
|
|
public function buildAppsXLargeSheet() {
|
|
|
|
return $this->buildAppsSheetVariant(3);
|
|
|
|
}
|
|
|
|
|
|
|
|
private function buildAppsSheetVariant($variant) {
|
|
|
|
|
|
|
|
if ($variant == 1) {
|
|
|
|
$scales = array(
|
|
|
|
'1x' => 1,
|
|
|
|
'2x' => 2,
|
|
|
|
);
|
|
|
|
$variant_name = 'apps';
|
|
|
|
$variant_short = '';
|
|
|
|
$size_x = 14;
|
|
|
|
$size_y = 14;
|
|
|
|
|
|
|
|
$colors = array(
|
|
|
|
'dark' => 'dark',
|
2013-07-27 17:53:40 +02:00
|
|
|
'white' => 'white',
|
Use application icons for "Eye" menu and Crumbs
Summary:
Issues here:
- Need an application-sized "eye", or a "home" icon for "Phabricator Home".
- Some of the "apps_lb_2x" sliced images are the "_dark_" versions, not the light versions.
- If you slice an application-sized "logout" (power off) icon and application-sized "help" (questionmark in circle) icon I can replace the current menu icons and nearly get rid of "autosprite".
- To replace the icons on /applications/, the non-retina size is "4x", so we'd need "8x" for retina. Alternatively I can reduce the icon sizes by 50%.
- The "Help", "Settings" and "Logout" items currently have a "glowing" hover state, which needs a variant (or we can drop it).
- The /applications/ icons have a white hover state (or we can drop it).
- The 1x application (14x14) icons aren't used anywhere right now, should they be? Maybe in the feed in the future, etc?
- The "apps-2x" and "apps-large" sheets are the same image, but getting them to actually use the same file is a bit tricky, so I just left them separate for now.
Test Plan:
{F26698}
{F26699}
Reviewers: chad
Reviewed By: chad
CC: aran
Maniphest Tasks: T1960
Differential Revision: https://secure.phabricator.com/D4108
2012-12-07 22:37:28 +01:00
|
|
|
);
|
|
|
|
} else if ($variant == 2) {
|
|
|
|
$scales = array(
|
|
|
|
'2x' => 1,
|
|
|
|
'4x' => 2,
|
|
|
|
);
|
|
|
|
$variant_name = 'apps-large';
|
|
|
|
$variant_short = '-large';
|
|
|
|
$size_x = 28;
|
|
|
|
$size_y = 28;
|
|
|
|
|
|
|
|
$colors = array(
|
|
|
|
'light' => 'lb',
|
|
|
|
'dark' => 'dark',
|
|
|
|
'blue' => 'blue',
|
2013-07-27 17:53:40 +02:00
|
|
|
'white' => 'white',
|
Use application icons for "Eye" menu and Crumbs
Summary:
Issues here:
- Need an application-sized "eye", or a "home" icon for "Phabricator Home".
- Some of the "apps_lb_2x" sliced images are the "_dark_" versions, not the light versions.
- If you slice an application-sized "logout" (power off) icon and application-sized "help" (questionmark in circle) icon I can replace the current menu icons and nearly get rid of "autosprite".
- To replace the icons on /applications/, the non-retina size is "4x", so we'd need "8x" for retina. Alternatively I can reduce the icon sizes by 50%.
- The "Help", "Settings" and "Logout" items currently have a "glowing" hover state, which needs a variant (or we can drop it).
- The /applications/ icons have a white hover state (or we can drop it).
- The 1x application (14x14) icons aren't used anywhere right now, should they be? Maybe in the feed in the future, etc?
- The "apps-2x" and "apps-large" sheets are the same image, but getting them to actually use the same file is a bit tricky, so I just left them separate for now.
Test Plan:
{F26698}
{F26699}
Reviewers: chad
Reviewed By: chad
CC: aran
Maniphest Tasks: T1960
Differential Revision: https://secure.phabricator.com/D4108
2012-12-07 22:37:28 +01:00
|
|
|
);
|
|
|
|
} else {
|
|
|
|
$scales = array(
|
|
|
|
'4x' => 1,
|
|
|
|
);
|
|
|
|
$variant_name = 'apps-xlarge';
|
|
|
|
$variant_short = '-xlarge';
|
|
|
|
$size_x = 56;
|
|
|
|
$size_y = 56;
|
|
|
|
|
|
|
|
$colors = array(
|
|
|
|
'dark' => 'dark',
|
|
|
|
/*
|
|
|
|
|
|
|
|
TODO: These are available but not currently used.
|
|
|
|
|
|
|
|
'blue' => 'blue',
|
|
|
|
'light' => 'lb',
|
|
|
|
*/
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
$apps = $this->getDirectoryList('apps_dark_1x');
|
|
|
|
|
|
|
|
$template = id(new PhutilSprite())
|
|
|
|
->setSourceSize($size_x, $size_y);
|
|
|
|
|
|
|
|
$sprites = array();
|
|
|
|
foreach ($apps as $app) {
|
|
|
|
foreach ($colors as $color => $color_path) {
|
|
|
|
|
2013-04-13 18:09:42 +02:00
|
|
|
$css = '.apps-'.$app.'-'.$color.$variant_short;
|
Use application icons for "Eye" menu and Crumbs
Summary:
Issues here:
- Need an application-sized "eye", or a "home" icon for "Phabricator Home".
- Some of the "apps_lb_2x" sliced images are the "_dark_" versions, not the light versions.
- If you slice an application-sized "logout" (power off) icon and application-sized "help" (questionmark in circle) icon I can replace the current menu icons and nearly get rid of "autosprite".
- To replace the icons on /applications/, the non-retina size is "4x", so we'd need "8x" for retina. Alternatively I can reduce the icon sizes by 50%.
- The "Help", "Settings" and "Logout" items currently have a "glowing" hover state, which needs a variant (or we can drop it).
- The /applications/ icons have a white hover state (or we can drop it).
- The 1x application (14x14) icons aren't used anywhere right now, should they be? Maybe in the feed in the future, etc?
- The "apps-2x" and "apps-large" sheets are the same image, but getting them to actually use the same file is a bit tricky, so I just left them separate for now.
Test Plan:
{F26698}
{F26699}
Reviewers: chad
Reviewed By: chad
CC: aran
Maniphest Tasks: T1960
Differential Revision: https://secure.phabricator.com/D4108
2012-12-07 22:37:28 +01:00
|
|
|
if ($color == 'blue' && $variant_name == 'apps-large') {
|
2013-04-13 18:09:42 +02:00
|
|
|
$css .= ', .phabricator-crumb-view:hover .apps-'.$app.'-dark-large';
|
Use application icons for "Eye" menu and Crumbs
Summary:
Issues here:
- Need an application-sized "eye", or a "home" icon for "Phabricator Home".
- Some of the "apps_lb_2x" sliced images are the "_dark_" versions, not the light versions.
- If you slice an application-sized "logout" (power off) icon and application-sized "help" (questionmark in circle) icon I can replace the current menu icons and nearly get rid of "autosprite".
- To replace the icons on /applications/, the non-retina size is "4x", so we'd need "8x" for retina. Alternatively I can reduce the icon sizes by 50%.
- The "Help", "Settings" and "Logout" items currently have a "glowing" hover state, which needs a variant (or we can drop it).
- The /applications/ icons have a white hover state (or we can drop it).
- The 1x application (14x14) icons aren't used anywhere right now, should they be? Maybe in the feed in the future, etc?
- The "apps-2x" and "apps-large" sheets are the same image, but getting them to actually use the same file is a bit tricky, so I just left them separate for now.
Test Plan:
{F26698}
{F26699}
Reviewers: chad
Reviewed By: chad
CC: aran
Maniphest Tasks: T1960
Differential Revision: https://secure.phabricator.com/D4108
2012-12-07 22:37:28 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
$sprite = id(clone $template)
|
2013-04-13 18:09:42 +02:00
|
|
|
->setName('apps-'.$app.'-'.$color.$variant_short)
|
Use application icons for "Eye" menu and Crumbs
Summary:
Issues here:
- Need an application-sized "eye", or a "home" icon for "Phabricator Home".
- Some of the "apps_lb_2x" sliced images are the "_dark_" versions, not the light versions.
- If you slice an application-sized "logout" (power off) icon and application-sized "help" (questionmark in circle) icon I can replace the current menu icons and nearly get rid of "autosprite".
- To replace the icons on /applications/, the non-retina size is "4x", so we'd need "8x" for retina. Alternatively I can reduce the icon sizes by 50%.
- The "Help", "Settings" and "Logout" items currently have a "glowing" hover state, which needs a variant (or we can drop it).
- The /applications/ icons have a white hover state (or we can drop it).
- The 1x application (14x14) icons aren't used anywhere right now, should they be? Maybe in the feed in the future, etc?
- The "apps-2x" and "apps-large" sheets are the same image, but getting them to actually use the same file is a bit tricky, so I just left them separate for now.
Test Plan:
{F26698}
{F26699}
Reviewers: chad
Reviewed By: chad
CC: aran
Maniphest Tasks: T1960
Differential Revision: https://secure.phabricator.com/D4108
2012-12-07 22:37:28 +01:00
|
|
|
->setTargetCSS($css);
|
|
|
|
|
|
|
|
foreach ($scales as $scale_name => $scale) {
|
|
|
|
$path = $this->getPath(
|
|
|
|
'apps_'.$color_path.'_'.$scale_name.'/'.$app.'.png');
|
|
|
|
$sprite->setSourceFile($path, $scale);
|
|
|
|
}
|
|
|
|
|
|
|
|
$sprites[] = $sprite;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
$sheet = $this->buildSheet($variant_name, count($scales) > 1);
|
|
|
|
$sheet->setScales($scales);
|
|
|
|
foreach ($sprites as $sprite) {
|
|
|
|
$sheet->addSprite($sprite);
|
|
|
|
}
|
|
|
|
|
|
|
|
return $sheet;
|
|
|
|
}
|
|
|
|
|
2012-12-07 22:35:49 +01:00
|
|
|
|
2012-11-24 01:35:39 +01:00
|
|
|
private function getPath($to_path = null) {
|
|
|
|
$root = dirname(phutil_get_library_root('phabricator'));
|
|
|
|
return $root.'/resources/sprite/'.$to_path;
|
|
|
|
}
|
|
|
|
|
|
|
|
private function getDirectoryList($dir) {
|
|
|
|
$path = $this->getPath($dir);
|
|
|
|
|
|
|
|
$result = array();
|
|
|
|
|
|
|
|
$images = Filesystem::listDirectory($path, $include_hidden = false);
|
|
|
|
foreach ($images as $image) {
|
|
|
|
if (!preg_match('/\.png$/', $image)) {
|
|
|
|
throw new Exception(
|
|
|
|
"Expected file '{$image}' in '{$path}' to be a sprite source ".
|
|
|
|
"ending in '.png'.");
|
|
|
|
}
|
|
|
|
$result[] = substr($image, 0, -4);
|
|
|
|
}
|
|
|
|
|
|
|
|
return $result;
|
|
|
|
}
|
|
|
|
|
Use application icons for "Eye" menu and Crumbs
Summary:
Issues here:
- Need an application-sized "eye", or a "home" icon for "Phabricator Home".
- Some of the "apps_lb_2x" sliced images are the "_dark_" versions, not the light versions.
- If you slice an application-sized "logout" (power off) icon and application-sized "help" (questionmark in circle) icon I can replace the current menu icons and nearly get rid of "autosprite".
- To replace the icons on /applications/, the non-retina size is "4x", so we'd need "8x" for retina. Alternatively I can reduce the icon sizes by 50%.
- The "Help", "Settings" and "Logout" items currently have a "glowing" hover state, which needs a variant (or we can drop it).
- The /applications/ icons have a white hover state (or we can drop it).
- The 1x application (14x14) icons aren't used anywhere right now, should they be? Maybe in the feed in the future, etc?
- The "apps-2x" and "apps-large" sheets are the same image, but getting them to actually use the same file is a bit tricky, so I just left them separate for now.
Test Plan:
{F26698}
{F26699}
Reviewers: chad
Reviewed By: chad
CC: aran
Maniphest Tasks: T1960
Differential Revision: https://secure.phabricator.com/D4108
2012-12-07 22:37:28 +01:00
|
|
|
private function buildSheet(
|
|
|
|
$name,
|
|
|
|
$has_retina,
|
|
|
|
$type = null,
|
|
|
|
$extra_css = '') {
|
|
|
|
|
2012-11-24 01:35:39 +01:00
|
|
|
$sheet = new PhutilSpriteSheet();
|
|
|
|
|
|
|
|
$at = '@';
|
2012-12-07 22:35:49 +01:00
|
|
|
|
|
|
|
switch ($type) {
|
|
|
|
case PhutilSpriteSheet::TYPE_STANDARD:
|
|
|
|
default:
|
|
|
|
$type = PhutilSpriteSheet::TYPE_STANDARD;
|
|
|
|
$repeat_rule = 'no-repeat';
|
|
|
|
break;
|
|
|
|
case PhutilSpriteSheet::TYPE_REPEAT_X:
|
|
|
|
$repeat_rule = 'repeat-x';
|
|
|
|
break;
|
|
|
|
case PhutilSpriteSheet::TYPE_REPEAT_Y:
|
|
|
|
$repeat_rule = 'repeat-y';
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
Use application icons for "Eye" menu and Crumbs
Summary:
Issues here:
- Need an application-sized "eye", or a "home" icon for "Phabricator Home".
- Some of the "apps_lb_2x" sliced images are the "_dark_" versions, not the light versions.
- If you slice an application-sized "logout" (power off) icon and application-sized "help" (questionmark in circle) icon I can replace the current menu icons and nearly get rid of "autosprite".
- To replace the icons on /applications/, the non-retina size is "4x", so we'd need "8x" for retina. Alternatively I can reduce the icon sizes by 50%.
- The "Help", "Settings" and "Logout" items currently have a "glowing" hover state, which needs a variant (or we can drop it).
- The /applications/ icons have a white hover state (or we can drop it).
- The 1x application (14x14) icons aren't used anywhere right now, should they be? Maybe in the feed in the future, etc?
- The "apps-2x" and "apps-large" sheets are the same image, but getting them to actually use the same file is a bit tricky, so I just left them separate for now.
Test Plan:
{F26698}
{F26699}
Reviewers: chad
Reviewed By: chad
CC: aran
Maniphest Tasks: T1960
Differential Revision: https://secure.phabricator.com/D4108
2012-12-07 22:37:28 +01:00
|
|
|
$retina_rules = null;
|
|
|
|
if ($has_retina) {
|
|
|
|
$retina_rules = <<<EOCSS
|
|
|
|
@media
|
|
|
|
only screen and (min-device-pixel-ratio: 1.5),
|
|
|
|
only screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
|
|
|
.sprite-{$name}{$extra_css} {
|
|
|
|
background-image: url(/rsrc/image/sprite-{$name}-X2.png);
|
|
|
|
background-size: {X}px {Y}px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
EOCSS;
|
|
|
|
}
|
|
|
|
|
2012-12-07 22:35:49 +01:00
|
|
|
$sheet->setSheetType($type);
|
2012-11-24 01:35:39 +01:00
|
|
|
$sheet->setCSSHeader(<<<EOCSS
|
|
|
|
/**
|
|
|
|
* @provides sprite-{$name}-css
|
|
|
|
* {$at}generated
|
|
|
|
*/
|
|
|
|
|
2012-12-07 22:35:49 +01:00
|
|
|
.sprite-{$name}{$extra_css} {
|
2012-11-24 01:35:39 +01:00
|
|
|
background-image: url(/rsrc/image/sprite-{$name}.png);
|
2012-12-07 22:35:49 +01:00
|
|
|
background-repeat: {$repeat_rule};
|
2012-11-24 01:35:39 +01:00
|
|
|
}
|
|
|
|
|
Use application icons for "Eye" menu and Crumbs
Summary:
Issues here:
- Need an application-sized "eye", or a "home" icon for "Phabricator Home".
- Some of the "apps_lb_2x" sliced images are the "_dark_" versions, not the light versions.
- If you slice an application-sized "logout" (power off) icon and application-sized "help" (questionmark in circle) icon I can replace the current menu icons and nearly get rid of "autosprite".
- To replace the icons on /applications/, the non-retina size is "4x", so we'd need "8x" for retina. Alternatively I can reduce the icon sizes by 50%.
- The "Help", "Settings" and "Logout" items currently have a "glowing" hover state, which needs a variant (or we can drop it).
- The /applications/ icons have a white hover state (or we can drop it).
- The 1x application (14x14) icons aren't used anywhere right now, should they be? Maybe in the feed in the future, etc?
- The "apps-2x" and "apps-large" sheets are the same image, but getting them to actually use the same file is a bit tricky, so I just left them separate for now.
Test Plan:
{F26698}
{F26699}
Reviewers: chad
Reviewed By: chad
CC: aran
Maniphest Tasks: T1960
Differential Revision: https://secure.phabricator.com/D4108
2012-12-07 22:37:28 +01:00
|
|
|
{$retina_rules}
|
|
|
|
|
2012-11-24 01:35:39 +01:00
|
|
|
EOCSS
|
|
|
|
);
|
|
|
|
|
|
|
|
return $sheet;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|