From 9c999e3548d9a32057b32bb6dbd3b52e3eb65b0a Mon Sep 17 00:00:00 2001 From: Chad Little Date: Wed, 7 Aug 2013 10:58:09 -0700 Subject: [PATCH] Update pinboard view styles, move to PHUI Summary: Tightens up the CSS to display more items (4 wide on 15") and fixes some mobile CSS issues with appseach. Fixes T3614 Test Plan: Tested Pholio, Macros, mobile layouts Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin Maniphest Tasks: T3614 Differential Revision: https://secure.phabricator.com/D6694 --- src/__celerity_resource_map__.php | 108 +++++++++--------- src/__phutil_library_map__.php | 8 +- .../PhabricatorMacroListController.php | 4 +- .../controller/PholioMockListController.php | 4 +- .../PHUIPinboardItemView.php} | 16 +-- .../PHUIPinboardView.php} | 8 +- webroot/rsrc/css/aphront/list-filter-view.css | 11 +- .../phui-pinboard-view.css} | 36 +++--- 8 files changed, 97 insertions(+), 98 deletions(-) rename src/view/{layout/PhabricatorPinboardItemView.php => phui/PHUIPinboardItemView.php} (80%) rename src/view/{layout/PhabricatorPinboardView.php => phui/PHUIPinboardView.php} (71%) rename webroot/rsrc/css/{layout/phabricator-pinboard-view.css => phui/phui-pinboard-view.css} (60%) diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index 03909c0259..542d563cb5 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -863,7 +863,7 @@ celerity_register_resource_map(array( ), 'aphront-list-filter-view-css' => array( - 'uri' => '/res/d7b529ce/rsrc/css/aphront/list-filter-view.css', + 'uri' => '/res/a90a0c94/rsrc/css/aphront/list-filter-view.css', 'type' => 'css', 'requires' => array( @@ -3345,15 +3345,6 @@ celerity_register_resource_map(array( ), 'disk' => '/rsrc/js/core/phtize.js', ), - 'phabricator-pinboard-view-css' => - array( - 'uri' => '/res/61ecd7cf/rsrc/css/layout/phabricator-pinboard-view.css', - 'type' => 'css', - 'requires' => - array( - ), - 'disk' => '/rsrc/css/layout/phabricator-pinboard-view.css', - ), 'phabricator-prefab' => array( 'uri' => '/res/511859ca/rsrc/js/core/Prefab.js', @@ -3825,6 +3816,15 @@ celerity_register_resource_map(array( ), 'disk' => '/rsrc/css/phui/phui-list.css', ), + 'phui-pinboard-view-css' => + array( + 'uri' => '/res/3b961aa1/rsrc/css/phui/phui-pinboard-view.css', + 'type' => 'css', + 'requires' => + array( + ), + 'disk' => '/rsrc/css/phui/phui-pinboard-view.css', + ), 'phui-remarkup-preview-css' => array( 'uri' => '/res/4535e062/rsrc/css/phui/phui-remarkup-preview.css', @@ -4161,7 +4161,7 @@ celerity_register_resource_map(array( ), array( 'packages' => array( - '604768b8' => + '00dd9b38' => array( 'name' => 'core.pkg.css', 'symbols' => @@ -4209,7 +4209,7 @@ celerity_register_resource_map(array( 40 => 'phabricator-property-list-view-css', 41 => 'phabricator-tag-view-css', ), - 'uri' => '/res/pkg/604768b8/core.pkg.css', + 'uri' => '/res/pkg/00dd9b38/core.pkg.css', 'type' => 'css', ), '606f7152' => @@ -4400,16 +4400,16 @@ celerity_register_resource_map(array( ), 'reverse' => array( - 'aphront-dialog-view-css' => '604768b8', - 'aphront-error-view-css' => '604768b8', - 'aphront-form-view-css' => '604768b8', - 'aphront-list-filter-view-css' => '604768b8', - 'aphront-pager-view-css' => '604768b8', - 'aphront-panel-view-css' => '604768b8', - 'aphront-table-view-css' => '604768b8', - 'aphront-tokenizer-control-css' => '604768b8', - 'aphront-tooltip-css' => '604768b8', - 'aphront-typeahead-control-css' => '604768b8', + 'aphront-dialog-view-css' => '00dd9b38', + 'aphront-error-view-css' => '00dd9b38', + 'aphront-form-view-css' => '00dd9b38', + 'aphront-list-filter-view-css' => '00dd9b38', + 'aphront-pager-view-css' => '00dd9b38', + 'aphront-panel-view-css' => '00dd9b38', + 'aphront-table-view-css' => '00dd9b38', + 'aphront-tokenizer-control-css' => '00dd9b38', + 'aphront-tooltip-css' => '00dd9b38', + 'aphront-typeahead-control-css' => '00dd9b38', 'differential-changeset-view-css' => 'dd27a69b', 'differential-core-view-css' => 'dd27a69b', 'differential-inline-comment-editor' => '48040be9', @@ -4423,7 +4423,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' => '604768b8', + 'global-drag-and-drop-css' => '00dd9b38', 'inline-comment-summary-css' => 'dd27a69b', 'javelin-aphlict' => '606f7152', 'javelin-behavior' => '2dbbb7d1', @@ -4496,55 +4496,55 @@ celerity_register_resource_map(array( 'javelin-util' => '2dbbb7d1', 'javelin-vector' => '2dbbb7d1', 'javelin-workflow' => '2dbbb7d1', - 'lightbox-attachment-css' => '604768b8', + 'lightbox-attachment-css' => '00dd9b38', 'maniphest-task-summary-css' => '06bacb9a', 'maniphest-transaction-detail-css' => '06bacb9a', - 'phabricator-action-list-view-css' => '604768b8', - 'phabricator-application-launch-view-css' => '604768b8', + 'phabricator-action-list-view-css' => '00dd9b38', + 'phabricator-application-launch-view-css' => '00dd9b38', 'phabricator-busy' => '606f7152', 'phabricator-content-source-view-css' => 'dd27a69b', - 'phabricator-core-css' => '604768b8', - 'phabricator-crumbs-view-css' => '604768b8', + 'phabricator-core-css' => '00dd9b38', + 'phabricator-crumbs-view-css' => '00dd9b38', 'phabricator-drag-and-drop-file-upload' => '48040be9', 'phabricator-dropdown-menu' => '606f7152', 'phabricator-file-upload' => '606f7152', - 'phabricator-filetree-view-css' => '604768b8', - 'phabricator-flag-css' => '604768b8', - 'phabricator-form-view-css' => '604768b8', - 'phabricator-header-view-css' => '604768b8', + 'phabricator-filetree-view-css' => '00dd9b38', + 'phabricator-flag-css' => '00dd9b38', + 'phabricator-form-view-css' => '00dd9b38', + 'phabricator-header-view-css' => '00dd9b38', 'phabricator-hovercard' => '606f7152', - 'phabricator-jump-nav' => '604768b8', + 'phabricator-jump-nav' => '00dd9b38', 'phabricator-keyboard-shortcut' => '606f7152', 'phabricator-keyboard-shortcut-manager' => '606f7152', - 'phabricator-main-menu-view' => '604768b8', + 'phabricator-main-menu-view' => '00dd9b38', 'phabricator-menu-item' => '606f7152', - 'phabricator-nav-view-css' => '604768b8', + 'phabricator-nav-view-css' => '00dd9b38', 'phabricator-notification' => '606f7152', - 'phabricator-notification-css' => '604768b8', - 'phabricator-notification-menu-css' => '604768b8', - 'phabricator-object-item-list-view-css' => '604768b8', + 'phabricator-notification-css' => '00dd9b38', + 'phabricator-notification-menu-css' => '00dd9b38', + 'phabricator-object-item-list-view-css' => '00dd9b38', 'phabricator-object-selector-css' => 'dd27a69b', 'phabricator-phtize' => '606f7152', 'phabricator-prefab' => '606f7152', 'phabricator-project-tag-css' => '06bacb9a', - 'phabricator-property-list-view-css' => '604768b8', - 'phabricator-remarkup-css' => '604768b8', + 'phabricator-property-list-view-css' => '00dd9b38', + 'phabricator-remarkup-css' => '00dd9b38', 'phabricator-shaped-request' => '48040be9', - 'phabricator-side-menu-view-css' => '604768b8', - 'phabricator-standard-page-view' => '604768b8', - 'phabricator-tag-view-css' => '604768b8', + 'phabricator-side-menu-view-css' => '00dd9b38', + 'phabricator-standard-page-view' => '00dd9b38', + 'phabricator-tag-view-css' => '00dd9b38', 'phabricator-textareautils' => '606f7152', 'phabricator-tooltip' => '606f7152', - 'phabricator-transaction-view-css' => '604768b8', - 'phabricator-zindex-css' => '604768b8', - 'phui-button-css' => '604768b8', - 'phui-form-css' => '604768b8', - 'phui-icon-view-css' => '604768b8', - 'phui-spacing-css' => '604768b8', - 'sprite-apps-large-css' => '604768b8', - 'sprite-gradient-css' => '604768b8', - 'sprite-icons-css' => '604768b8', - 'sprite-menu-css' => '604768b8', - 'syntax-highlighting-css' => '604768b8', + 'phabricator-transaction-view-css' => '00dd9b38', + 'phabricator-zindex-css' => '00dd9b38', + 'phui-button-css' => '00dd9b38', + 'phui-form-css' => '00dd9b38', + 'phui-icon-view-css' => '00dd9b38', + 'phui-spacing-css' => '00dd9b38', + 'sprite-apps-large-css' => '00dd9b38', + 'sprite-gradient-css' => '00dd9b38', + 'sprite-icons-css' => '00dd9b38', + 'sprite-menu-css' => '00dd9b38', + 'syntax-highlighting-css' => '00dd9b38', ), )); diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php index 4e6c021422..12c02c4af9 100644 --- a/src/__phutil_library_map__.php +++ b/src/__phutil_library_map__.php @@ -748,6 +748,8 @@ phutil_register_library_map(array( 'PHUIListView' => 'view/phui/PHUIListView.php', 'PHUIListViewTestCase' => 'view/layout/__tests__/PHUIListViewTestCase.php', 'PHUIPagedFormView' => 'view/form/PHUIPagedFormView.php', + 'PHUIPinboardItemView' => 'view/phui/PHUIPinboardItemView.php', + 'PHUIPinboardView' => 'view/phui/PHUIPinboardView.php', 'PHUIRemarkupPreviewPanel' => 'view/phui/PHUIRemarkupPreviewPanel.php', 'PHUIStatusItemView' => 'view/phui/PHUIStatusItemView.php', 'PHUIStatusListView' => 'view/phui/PHUIStatusListView.php', @@ -1408,8 +1410,6 @@ phutil_register_library_map(array( 'PhabricatorPhortuneConfigOptions' => 'applications/phortune/option/PhabricatorPhortuneConfigOptions.php', 'PhabricatorPhrequentConfigOptions' => 'applications/phrequent/config/PhabricatorPhrequentConfigOptions.php', 'PhabricatorPhrictionConfigOptions' => 'applications/phriction/config/PhabricatorPhrictionConfigOptions.php', - 'PhabricatorPinboardItemView' => 'view/layout/PhabricatorPinboardItemView.php', - 'PhabricatorPinboardView' => 'view/layout/PhabricatorPinboardView.php', 'PhabricatorPolicies' => 'applications/policy/constants/PhabricatorPolicies.php', 'PhabricatorPolicy' => 'applications/policy/filter/PhabricatorPolicy.php', 'PhabricatorPolicyAwareQuery' => 'infrastructure/query/policy/PhabricatorPolicyAwareQuery.php', @@ -2764,6 +2764,8 @@ phutil_register_library_map(array( 'PHUIListView' => 'AphrontTagView', 'PHUIListViewTestCase' => 'PhabricatorTestCase', 'PHUIPagedFormView' => 'AphrontTagView', + 'PHUIPinboardItemView' => 'AphrontView', + 'PHUIPinboardView' => 'AphrontView', 'PHUIRemarkupPreviewPanel' => 'AphrontTagView', 'PHUIStatusItemView' => 'AphrontTagView', 'PHUIStatusListView' => 'AphrontTagView', @@ -3471,8 +3473,6 @@ phutil_register_library_map(array( 'PhabricatorPhortuneConfigOptions' => 'PhabricatorApplicationConfigOptions', 'PhabricatorPhrequentConfigOptions' => 'PhabricatorApplicationConfigOptions', 'PhabricatorPhrictionConfigOptions' => 'PhabricatorApplicationConfigOptions', - 'PhabricatorPinboardItemView' => 'AphrontView', - 'PhabricatorPinboardView' => 'AphrontView', 'PhabricatorPolicies' => 'PhabricatorPolicyConstants', 'PhabricatorPolicyAwareQuery' => 'PhabricatorOffsetPagedQuery', 'PhabricatorPolicyAwareTestQuery' => 'PhabricatorPolicyAwareQuery', diff --git a/src/applications/macro/controller/PhabricatorMacroListController.php b/src/applications/macro/controller/PhabricatorMacroListController.php index cd8c411d89..12150db52e 100644 --- a/src/applications/macro/controller/PhabricatorMacroListController.php +++ b/src/applications/macro/controller/PhabricatorMacroListController.php @@ -36,11 +36,11 @@ final class PhabricatorMacroListController extends PhabricatorMacroController $this->getLoadedHandles(), $author_phids); - $pinboard = new PhabricatorPinboardView(); + $pinboard = new PHUIPinboardView(); foreach ($macros as $macro) { $file = $macro->getFile(); - $item = new PhabricatorPinboardItemView(); + $item = new PHUIPinboardItemView(); if ($file) { $item->setImageURI($file->getThumb280x210URI()); $item->setImageSize(280, 210); diff --git a/src/applications/pholio/controller/PholioMockListController.php b/src/applications/pholio/controller/PholioMockListController.php index 63a7b24a43..658e75df7d 100644 --- a/src/applications/pholio/controller/PholioMockListController.php +++ b/src/applications/pholio/controller/PholioMockListController.php @@ -37,9 +37,9 @@ final class PholioMockListController } $this->loadHandles($author_phids); - $board = new PhabricatorPinboardView(); + $board = new PHUIPinboardView(); foreach ($mocks as $mock) { - $item = id(new PhabricatorPinboardItemView()) + $item = id(new PHUIPinboardItemView()) ->setHeader('M'.$mock->getID().' '.$mock->getName()) ->setURI('/M'.$mock->getID()) ->setImageURI($mock->getCoverFile()->getThumb280x210URI()) diff --git a/src/view/layout/PhabricatorPinboardItemView.php b/src/view/phui/PHUIPinboardItemView.php similarity index 80% rename from src/view/layout/PhabricatorPinboardItemView.php rename to src/view/phui/PHUIPinboardItemView.php index 9e493904ac..eadf0ba8a7 100644 --- a/src/view/layout/PhabricatorPinboardItemView.php +++ b/src/view/phui/PHUIPinboardItemView.php @@ -1,6 +1,6 @@ 'phabricator-pinboard-item-header', + 'class' => 'phui-pinboard-item-header', ), phutil_tag('a', array('href' => $this->uri), $this->header)); } @@ -51,7 +51,7 @@ final class PhabricatorPinboardItemView extends AphrontView { 'a', array( 'href' => $this->uri, - 'class' => 'phabricator-pinboard-item-image-link', + 'class' => 'phui-pinboard-item-image-link', ), phutil_tag( 'img', @@ -69,21 +69,21 @@ final class PhabricatorPinboardItemView extends AphrontView { 'span', array( 'class' => - 'phabricator-pinboard-icon sprite-icons icons-'.$block[0].'-grey', + 'phui-pinboard-icon sprite-icons icons-'.$block[0].'-grey', ), ''); $count = phutil_tag('span', array(), $block[1]); $icon_list[] = phutil_tag( 'span', array( - 'class' => 'phabricator-pinboard-item-count', + 'class' => 'phui-pinboard-item-count', ), array($icon, $count)); } $icons = phutil_tag( 'div', array( - 'class' => 'phabricator-pinboard-icons', + 'class' => 'phui-pinboard-icons', ), $icon_list); } @@ -93,7 +93,7 @@ final class PhabricatorPinboardItemView extends AphrontView { $content = phutil_tag( 'div', array( - 'class' => 'phabricator-pinboard-item-content', + 'class' => 'phui-pinboard-item-content', ), $content); } @@ -101,7 +101,7 @@ final class PhabricatorPinboardItemView extends AphrontView { return phutil_tag( 'div', array( - 'class' => 'phabricator-pinboard-item-view', + 'class' => 'phui-pinboard-item-view', ), array( $header, diff --git a/src/view/layout/PhabricatorPinboardView.php b/src/view/phui/PHUIPinboardView.php similarity index 71% rename from src/view/layout/PhabricatorPinboardView.php rename to src/view/phui/PHUIPinboardView.php index 992580d6f7..55c61ed423 100644 --- a/src/view/layout/PhabricatorPinboardView.php +++ b/src/view/phui/PHUIPinboardView.php @@ -1,6 +1,6 @@ items[] = $item; return $this; } public function render() { - require_celerity_resource('phabricator-pinboard-view-css'); + require_celerity_resource('phui-pinboard-view-css'); if (!$this->items) { $string = nonempty($this->noDataString, pht('No data.')); @@ -29,7 +29,7 @@ final class PhabricatorPinboardView extends AphrontView { return phutil_tag( 'div', array( - 'class' => 'phabricator-pinboard-view', + 'class' => 'phui-pinboard-view', ), $this->items); } diff --git a/webroot/rsrc/css/aphront/list-filter-view.css b/webroot/rsrc/css/aphront/list-filter-view.css index 6e0eb3c23f..44cd39742d 100644 --- a/webroot/rsrc/css/aphront/list-filter-view.css +++ b/webroot/rsrc/css/aphront/list-filter-view.css @@ -16,8 +16,8 @@ box-shadow: 0 1px 2px rgba(0,0,0,0.2); } -.device-phone .aphront-list-filter-view { - margin: 0; +.device-phone .aphront-list-filter-wrap { + margin: 0 -2px; } .aphront-list-filter-view-content .aphront-form-view { @@ -58,7 +58,7 @@ .device .aphront-list-filter-reveal { width: 98%; margin: auto; - padding: 4px 0; + padding: 8px; } .aphront-list-filter-reveal a { @@ -67,9 +67,8 @@ } .device .aphront-list-filter-reveal a { - margin: 4px auto 0; - float: none; - display: block; + margin: 4px 0; + float: left; } .aphront-list-filter-description { diff --git a/webroot/rsrc/css/layout/phabricator-pinboard-view.css b/webroot/rsrc/css/phui/phui-pinboard-view.css similarity index 60% rename from webroot/rsrc/css/layout/phabricator-pinboard-view.css rename to webroot/rsrc/css/phui/phui-pinboard-view.css index c0475a2997..f9fa857756 100644 --- a/webroot/rsrc/css/layout/phabricator-pinboard-view.css +++ b/webroot/rsrc/css/phui/phui-pinboard-view.css @@ -1,41 +1,41 @@ /** - * @provides phabricator-pinboard-view-css + * @provides phui-pinboard-view-css */ -.phabricator-pinboard-view { - padding: 10px 0 20px 20px; +.phui-pinboard-view { + padding: 8px 0 20px 20px; overflow: hidden; - margin: 1em 0; + margin: 12px 0; } -.device-phone .phabricator-pinboard-view { +.device-phone .phui-pinboard-view { padding: 0; } -.phabricator-pinboard-item-view { - margin: 0 16px 16px 0; +.phui-pinboard-item-view { + margin: 0 8px 16px 0; border: 1px solid #d5d9df; background: #ffffff; border-radius: 3px; float: left; - width: 300px; + width: 288px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); text-align: left; } -.device-desktop .phabricator-pinboard-item-view:hover { +.device-desktop .phui-pinboard-item-view:hover { cursor: pointer; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.30); } /* On phones, show a single column of items. */ -.device-phone .phabricator-pinboard-item-view { +.device-phone .phui-pinboard-item-view { float: none; margin: 0 auto 16px; } -.phabricator-pinboard-item-header { +.phui-pinboard-item-header { padding: 5px 10px; display: block; background: #edf0f4; @@ -47,28 +47,28 @@ overflow: hidden; } -.phabricator-pinboard-item-header a { +.phui-pinboard-item-header a { color: #333; } -.phabricator-pinboard-item-image-link { - padding: 10px; +.phui-pinboard-item-image-link { + padding: 8px 4px; display: block; } -.phabricator-pinboard-item-content { +.phui-pinboard-item-content { padding: 0 10px 5px; overflow: hidden; color: #777; font-size: 11px; } -.phabricator-pinboard-item-count { +.phui-pinboard-item-count { float: left; margin-left: 10px; } -.phabricator-pinboard-icons { +.phui-pinboard-icons { padding: 0 10px 10px 0; color: #aaa; border-bottom: 1px solid #e7e7e7; @@ -76,7 +76,7 @@ overflow: hidden; } -.phabricator-pinboard-icon { +.phui-pinboard-icon { height: 14px; width: 14px; float: left;