From e077d2f7a79ac595451a327aab729258926c1c8d Mon Sep 17 00:00:00 2001 From: Chad Little Date: Wed, 14 Dec 2016 11:35:51 -0800 Subject: [PATCH] Reorganize phui-object-item CSS, add drag ui Summary: Reorgaizes the CSS here a bit, by object list style, adds in a new drag ui class, which will be used in menu ordering. Test Plan: Workboards, Home Apps. {F2126266} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D17057 --- resources/celerity/map.php | 110 ++- resources/celerity/packages.php | 7 +- .../meta/query/PhabricatorAppSearchEngine.php | 2 +- ...habricatorHomePreferencesSettingsPanel.php | 4 +- src/view/phui/PHUIObjectItemListView.php | 34 +- src/view/phui/PHUIObjectItemView.php | 100 +-- webroot/rsrc/css/aphront/dialog-view.css | 10 +- .../css/application/config/config-page.css | 2 +- webroot/rsrc/css/application/flag/flag.css | 2 +- .../css/application/project/project-view.css | 4 +- .../css/application/search/search-results.css | 2 +- .../layout/phabricator-source-code-view.css | 2 +- .../css/phui/object-item/phui-oi-big-ui.css | 48 ++ .../css/phui/object-item/phui-oi-color.css | 68 ++ .../css/phui/object-item/phui-oi-drag-ui.css | 59 ++ .../css/phui/object-item/phui-oi-flush-ui.css | 13 + .../phui/object-item/phui-oi-list-view.css | 625 ++++++++++++++ .../phui/object-item/phui-oi-simple-ui.css | 43 + webroot/rsrc/css/phui/phui-box.css | 14 +- webroot/rsrc/css/phui/phui-crumbs-view.css | 2 +- .../css/phui/phui-object-item-list-view.css | 790 ------------------ webroot/rsrc/css/phui/phui-tag-view.css | 4 +- .../rsrc/css/phui/phui-two-column-view.css | 2 +- .../css/phui/workboards/phui-workcard.css | 68 +- .../css/phui/workboards/phui-workpanel.css | 8 +- .../maniphest/behavior-batch-selector.js | 2 +- 26 files changed, 1072 insertions(+), 953 deletions(-) create mode 100644 webroot/rsrc/css/phui/object-item/phui-oi-big-ui.css create mode 100644 webroot/rsrc/css/phui/object-item/phui-oi-color.css create mode 100644 webroot/rsrc/css/phui/object-item/phui-oi-drag-ui.css create mode 100644 webroot/rsrc/css/phui/object-item/phui-oi-flush-ui.css create mode 100644 webroot/rsrc/css/phui/object-item/phui-oi-list-view.css create mode 100644 webroot/rsrc/css/phui/object-item/phui-oi-simple-ui.css delete mode 100644 webroot/rsrc/css/phui/phui-object-item-list-view.css diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 686bb008cb..b85ec8d42b 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -9,7 +9,7 @@ return array( 'names' => array( 'conpherence.pkg.css' => '0b64e988', 'conpherence.pkg.js' => '6249a1cf', - 'core.pkg.css' => 'e18bf0da', + 'core.pkg.css' => '55d12594', 'core.pkg.js' => 'e4260032', 'darkconsole.pkg.js' => 'e7393ebb', 'differential.pkg.css' => 'a4ba74b5', @@ -18,10 +18,10 @@ return array( 'diffusion.pkg.js' => '84c8f8fd', 'favicon.ico' => '30672e08', 'maniphest.pkg.css' => '4845691a', - 'maniphest.pkg.js' => '949a7498', + 'maniphest.pkg.js' => '5ab2753f', 'rsrc/css/aphront/aphront-bars.css' => '231ac33c', 'rsrc/css/aphront/dark-console.css' => 'f54bf286', - 'rsrc/css/aphront/dialog-view.css' => '49b2a8a3', + 'rsrc/css/aphront/dialog-view.css' => '938f52c5', 'rsrc/css/aphront/list-filter-view.css' => '5d6f0526', 'rsrc/css/aphront/multi-column.css' => '84cc6640', 'rsrc/css/aphront/notification.css' => '3f6c89c9', @@ -42,7 +42,7 @@ return array( 'rsrc/css/application/chatlog/chatlog.css' => 'd295b020', 'rsrc/css/application/conduit/conduit-api.css' => '7bc725c4', 'rsrc/css/application/config/config-options.css' => '0ede4c9b', - 'rsrc/css/application/config/config-page.css' => 'b80124ae', + 'rsrc/css/application/config/config-page.css' => 'c1d5121b', 'rsrc/css/application/config/config-template.css' => '8f18fa41', 'rsrc/css/application/config/setup-issue.css' => 'f794cfc3', 'rsrc/css/application/config/unhandled-exception.css' => '4c96257a', @@ -71,7 +71,7 @@ return array( 'rsrc/css/application/diffusion/diffusion-source.css' => '68b30fd3', 'rsrc/css/application/feed/feed.css' => 'ecd4ec57', 'rsrc/css/application/files/global-drag-and-drop.css' => '5c1b47c2', - 'rsrc/css/application/flag/flag.css' => '5337623f', + 'rsrc/css/application/flag/flag.css' => 'bba8f811', 'rsrc/css/application/harbormaster/harbormaster.css' => 'f491c9f4', 'rsrc/css/application/herald/herald-test.css' => 'a52e323e', 'rsrc/css/application/herald/herald.css' => 'dc31f6e9', @@ -97,13 +97,13 @@ return array( 'rsrc/css/application/policy/policy.css' => '957ea14c', 'rsrc/css/application/ponder/ponder-view.css' => 'fbd45f96', 'rsrc/css/application/project/project-card-view.css' => '9418c97d', - 'rsrc/css/application/project/project-view.css' => '55d99221', + 'rsrc/css/application/project/project-view.css' => '1e6f7072', 'rsrc/css/application/releeph/releeph-core.css' => '9b3c5733', 'rsrc/css/application/releeph/releeph-preview-branch.css' => 'b7a6f4a5', 'rsrc/css/application/releeph/releeph-request-differential-create-dialog.css' => '8d8b92cd', 'rsrc/css/application/releeph/releeph-request-typeahead.css' => '667a48ae', 'rsrc/css/application/search/application-search-view.css' => '8452c849', - 'rsrc/css/application/search/search-results.css' => '7dea472c', + 'rsrc/css/application/search/search-results.css' => '64ad079a', 'rsrc/css/application/slowvote/slowvote.css' => 'a94b7230', 'rsrc/css/application/tokens/tokens.css' => '3d0f239e', 'rsrc/css/application/uiexample/example.css' => '528b19de', @@ -117,23 +117,29 @@ return array( 'rsrc/css/font/font-lato.css' => 'c7ccd872', 'rsrc/css/font/phui-font-icon-base.css' => '870a7360', 'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82', - 'rsrc/css/layout/phabricator-source-code-view.css' => 'cbeef983', + 'rsrc/css/layout/phabricator-source-code-view.css' => '4383192f', 'rsrc/css/phui/calendar/phui-calendar-day.css' => '572b1893', 'rsrc/css/phui/calendar/phui-calendar-list.css' => 'fcc9fb41', 'rsrc/css/phui/calendar/phui-calendar-month.css' => '8e10e92c', 'rsrc/css/phui/calendar/phui-calendar.css' => '477acfaa', + 'rsrc/css/phui/object-item/phui-oi-big-ui.css' => '19f9369b', + 'rsrc/css/phui/object-item/phui-oi-color.css' => 'cd2b9b77', + 'rsrc/css/phui/object-item/phui-oi-drag-ui.css' => 'f12cbc9f', + 'rsrc/css/phui/object-item/phui-oi-flush-ui.css' => '9d9685d6', + 'rsrc/css/phui/object-item/phui-oi-list-view.css' => 'bff632a4', + 'rsrc/css/phui/object-item/phui-oi-simple-ui.css' => 'a8beebea', 'rsrc/css/phui/phui-action-list.css' => 'e1d48300', 'rsrc/css/phui/phui-action-panel.css' => '91c7b835', 'rsrc/css/phui/phui-badge.css' => '3baef8db', 'rsrc/css/phui/phui-basic-nav-view.css' => '7093573b', 'rsrc/css/phui/phui-big-info-view.css' => 'bd903741', - 'rsrc/css/phui/phui-box.css' => '5c8387cf', + 'rsrc/css/phui/phui-box.css' => '33b629f8', 'rsrc/css/phui/phui-button.css' => '43f4912e', 'rsrc/css/phui/phui-chart.css' => '6bf6f78e', 'rsrc/css/phui/phui-cms.css' => 'be43c8a8', 'rsrc/css/phui/phui-comment-form.css' => 'c953b75e', 'rsrc/css/phui/phui-comment-panel.css' => 'f50152ad', - 'rsrc/css/phui/phui-crumbs-view.css' => '195ac419', + 'rsrc/css/phui/phui-crumbs-view.css' => 'f82868f2', 'rsrc/css/phui/phui-curtain-view.css' => '947bf1a4', 'rsrc/css/phui/phui-document-pro.css' => 'c354e312', 'rsrc/css/phui/phui-document-summary.css' => '9ca48bdf', @@ -154,7 +160,6 @@ return array( 'rsrc/css/phui/phui-lightbox.css' => '0a035e40', 'rsrc/css/phui/phui-list.css' => '9da2aa00', 'rsrc/css/phui/phui-object-box.css' => '6b487c57', - 'rsrc/css/phui/phui-object-item-list-view.css' => '87278fa0', 'rsrc/css/phui/phui-pager.css' => 'bea33d23', 'rsrc/css/phui/phui-pinboard-view.css' => '2495140e', 'rsrc/css/phui/phui-profile-menu.css' => '4768721a', @@ -163,13 +168,13 @@ return array( 'rsrc/css/phui/phui-segment-bar-view.css' => '46342871', 'rsrc/css/phui/phui-spacing.css' => '042804d6', 'rsrc/css/phui/phui-status.css' => 'd5263e49', - 'rsrc/css/phui/phui-tag-view.css' => '6bbd83e2', + 'rsrc/css/phui/phui-tag-view.css' => '84d65f26', 'rsrc/css/phui/phui-timeline-view.css' => 'bc523970', - 'rsrc/css/phui/phui-two-column-view.css' => 'f662d744', + 'rsrc/css/phui/phui-two-column-view.css' => '7babf5b9', 'rsrc/css/phui/workboards/phui-workboard-color.css' => 'b60ef38a', 'rsrc/css/phui/workboards/phui-workboard.css' => '16441d5e', - 'rsrc/css/phui/workboards/phui-workcard.css' => '0c62d7c5', - 'rsrc/css/phui/workboards/phui-workpanel.css' => '92197373', + 'rsrc/css/phui/workboards/phui-workcard.css' => '00979e40', + 'rsrc/css/phui/workboards/phui-workpanel.css' => 'a3a63478', 'rsrc/css/sprite-login.css' => '587d92d7', 'rsrc/css/sprite-tokens.css' => '9cdfd599', 'rsrc/css/syntax/syntax-default.css' => '9923583c', @@ -420,7 +425,7 @@ return array( 'rsrc/js/application/herald/PathTypeahead.js' => 'f7fc67ec', 'rsrc/js/application/herald/herald-rule-editor.js' => '7ebaeed3', 'rsrc/js/application/maniphest/behavior-batch-editor.js' => '782ab6e7', - 'rsrc/js/application/maniphest/behavior-batch-selector.js' => '7b98d7c5', + 'rsrc/js/application/maniphest/behavior-batch-selector.js' => '0825c27a', 'rsrc/js/application/maniphest/behavior-line-chart.js' => 'e4232876', 'rsrc/js/application/maniphest/behavior-list-edit.js' => 'a9f88de2', 'rsrc/js/application/maniphest/behavior-subpriorityeditor.js' => '71237763', @@ -544,7 +549,7 @@ return array( 'almanac-css' => 'dbb9b3af', 'aphront-bars' => '231ac33c', 'aphront-dark-console-css' => 'f54bf286', - 'aphront-dialog-view-css' => '49b2a8a3', + 'aphront-dialog-view-css' => '938f52c5', 'aphront-list-filter-view-css' => '5d6f0526', 'aphront-multi-column-view-css' => '84cc6640', 'aphront-panel-view-css' => '8427b78d', @@ -558,7 +563,7 @@ return array( 'changeset-view-manager' => 'a2828756', 'conduit-api-css' => '7bc725c4', 'config-options-css' => '0ede4c9b', - 'config-page-css' => 'b80124ae', + 'config-page-css' => 'c1d5121b', 'conpherence-durable-column-view' => 'd82e130c', 'conpherence-header-pane-css' => '1c81cda6', 'conpherence-menu-css' => '4f51db5a', @@ -654,7 +659,7 @@ return array( 'javelin-behavior-line-chart' => 'e4232876', 'javelin-behavior-load-blame' => '42126667', 'javelin-behavior-maniphest-batch-editor' => '782ab6e7', - 'javelin-behavior-maniphest-batch-selector' => '7b98d7c5', + 'javelin-behavior-maniphest-batch-selector' => '0825c27a', 'javelin-behavior-maniphest-list-editor' => 'a9f88de2', 'javelin-behavior-maniphest-subpriority-editor' => '71237763', 'javelin-behavior-owners-path-editor' => '7a68dda3', @@ -790,7 +795,7 @@ return array( 'phabricator-feed-css' => 'ecd4ec57', 'phabricator-file-upload' => '680ea2c8', 'phabricator-filetree-view-css' => 'fccf9f82', - 'phabricator-flag-css' => '5337623f', + 'phabricator-flag-css' => 'bba8f811', 'phabricator-keyboard-shortcut' => '1ae869f2', 'phabricator-keyboard-shortcut-manager' => '4a021c10', 'phabricator-main-menu-view' => 'f03e17be', @@ -802,10 +807,10 @@ return array( 'phabricator-phtize' => 'd254d646', 'phabricator-prefab' => '8d40ae75', 'phabricator-remarkup-css' => '8606d9c6', - 'phabricator-search-results-css' => '7dea472c', + 'phabricator-search-results-css' => '64ad079a', 'phabricator-shaped-request' => '7cbe244b', 'phabricator-slowvote-css' => 'a94b7230', - 'phabricator-source-code-view-css' => 'cbeef983', + 'phabricator-source-code-view-css' => '4383192f', 'phabricator-standard-page-view' => '894d8a25', 'phabricator-textareautils' => '320810c8', 'phabricator-title' => '485aaa6c', @@ -836,7 +841,7 @@ return array( 'phui-badge-view-css' => '3baef8db', 'phui-basic-nav-view-css' => '7093573b', 'phui-big-info-view-css' => 'bd903741', - 'phui-box-css' => '5c8387cf', + 'phui-box-css' => '33b629f8', 'phui-button-css' => '43f4912e', 'phui-calendar-css' => '477acfaa', 'phui-calendar-day-css' => '572b1893', @@ -846,7 +851,7 @@ return array( 'phui-cms-css' => 'be43c8a8', 'phui-comment-form-css' => 'c953b75e', 'phui-comment-panel-css' => 'f50152ad', - 'phui-crumbs-view-css' => '195ac419', + 'phui-crumbs-view-css' => 'f82868f2', 'phui-curtain-view-css' => '947bf1a4', 'phui-document-summary-view-css' => '9ca48bdf', 'phui-document-view-css' => 'c32e8dec', @@ -870,7 +875,12 @@ return array( 'phui-lightbox-css' => '0a035e40', 'phui-list-view-css' => '9da2aa00', 'phui-object-box-css' => '6b487c57', - 'phui-object-item-list-view-css' => '87278fa0', + 'phui-oi-big-ui-css' => '19f9369b', + 'phui-oi-color-css' => 'cd2b9b77', + 'phui-oi-drag-ui-css' => 'f12cbc9f', + 'phui-oi-flush-ui-css' => '9d9685d6', + 'phui-oi-list-view-css' => 'bff632a4', + 'phui-oi-simple-ui-css' => 'a8beebea', 'phui-pager-css' => 'bea33d23', 'phui-pinboard-view-css' => '2495140e', 'phui-profile-menu-css' => '4768721a', @@ -879,14 +889,14 @@ return array( 'phui-segment-bar-view-css' => '46342871', 'phui-spacing-css' => '042804d6', 'phui-status-list-view-css' => 'd5263e49', - 'phui-tag-view-css' => '6bbd83e2', + 'phui-tag-view-css' => '84d65f26', 'phui-theme-css' => '798c69b8', 'phui-timeline-view-css' => 'bc523970', - 'phui-two-column-view-css' => 'f662d744', + 'phui-two-column-view-css' => '7babf5b9', 'phui-workboard-color-css' => 'b60ef38a', 'phui-workboard-view-css' => '16441d5e', - 'phui-workcard-view-css' => '0c62d7c5', - 'phui-workpanel-view-css' => '92197373', + 'phui-workcard-view-css' => '00979e40', + 'phui-workpanel-view-css' => 'a3a63478', 'phuix-action-list-view' => 'b5c256b8', 'phuix-action-view' => '8cf6d262', 'phuix-autocomplete' => '6d86ce8b', @@ -898,7 +908,7 @@ return array( 'policy-transaction-detail-css' => '82100a43', 'ponder-view-css' => 'fbd45f96', 'project-card-view-css' => '9418c97d', - 'project-view-css' => '55d99221', + 'project-view-css' => '1e6f7072', 'releeph-core' => '9b3c5733', 'releeph-preview-branch' => 'b7a6f4a5', 'releeph-request-differential-create-dialog' => '8d8b92cd', @@ -961,6 +971,12 @@ return array( 'phabricator-prefab', 'phuix-icon-view', ), + '0825c27a' => array( + 'javelin-behavior', + 'javelin-dom', + 'javelin-stratcom', + 'javelin-util', + ), '08675c6d' => array( 'javelin-behavior', 'javelin-behavior-device', @@ -1040,6 +1056,9 @@ return array( '185bbd53' => array( 'javelin-install', ), + '19f9369b' => array( + 'phui-oi-list-view-css', + ), '1aa4c968' => array( 'javelin-behavior', 'javelin-stratcom', @@ -1522,12 +1541,6 @@ return array( 'owners-path-editor', 'javelin-behavior', ), - '7b98d7c5' => array( - 'javelin-behavior', - 'javelin-dom', - 'javelin-stratcom', - 'javelin-util', - ), '7cbe244b' => array( 'javelin-install', 'javelin-util', @@ -1650,9 +1663,6 @@ return array( 'javelin-dom', 'javelin-request', ), - 92197373 => array( - 'phui-workcard-view-css', - ), '92b9ec77' => array( 'javelin-behavior', 'javelin-stratcom', @@ -1718,6 +1728,9 @@ return array( 'javelin-workflow', 'javelin-stratcom', ), + '9d9685d6' => array( + 'phui-oi-list-view-css', + ), '9f36c42d' => array( 'javelin-behavior', 'javelin-stratcom', @@ -1747,6 +1760,9 @@ return array( 'javelin-behavior-device', 'javelin-vector', ), + 'a3a63478' => array( + 'phui-workcard-view-css', + ), 'a464fe03' => array( 'javelin-behavior', 'javelin-uri', @@ -1762,6 +1778,9 @@ return array( 'javelin-stratcom', 'javelin-dom', ), + 'a8beebea' => array( + 'phui-oi-list-view-css', + ), 'a8d8459d' => array( 'javelin-behavior', 'javelin-dom', @@ -1980,6 +1999,9 @@ return array( 'javelin-util', 'phabricator-notification-css', ), + 'cd2b9b77' => array( + 'phui-oi-list-view-css', + ), 'd0c516d5' => array( 'javelin-behavior', 'javelin-dom', @@ -2149,6 +2171,9 @@ return array( 'f03e17be' => array( 'phui-theme-css', ), + 'f12cbc9f' => array( + 'phui-oi-list-view-css', + ), 'f2e58483' => array( 'javelin-behavior', 'javelin-dom', @@ -2285,7 +2310,12 @@ return array( 'phabricator-nav-view-css', 'phui-basic-nav-view-css', 'phui-crumbs-view-css', - 'phui-object-item-list-view-css', + 'phui-oi-list-view-css', + 'phui-oi-color-css', + 'phui-oi-big-ui-css', + 'phui-oi-drag-ui-css', + 'phui-oi-simple-ui-css', + 'phui-oi-flush-ui-css', 'global-drag-and-drop-css', 'phui-spacing-css', 'phui-form-css', diff --git a/resources/celerity/packages.php b/resources/celerity/packages.php index affa180dc1..95cf5303ef 100644 --- a/resources/celerity/packages.php +++ b/resources/celerity/packages.php @@ -117,7 +117,12 @@ return array( 'phabricator-nav-view-css', 'phui-basic-nav-view-css', 'phui-crumbs-view-css', - 'phui-object-item-list-view-css', + 'phui-oi-list-view-css', + 'phui-oi-color-css', + 'phui-oi-big-ui-css', + 'phui-oi-drag-ui-css', + 'phui-oi-simple-ui-css', + 'phui-oi-flush-ui-css', 'global-drag-and-drop-css', 'phui-spacing-css', 'phui-form-css', diff --git a/src/applications/meta/query/PhabricatorAppSearchEngine.php b/src/applications/meta/query/PhabricatorAppSearchEngine.php index 62e1c1020e..b609a8b137 100644 --- a/src/applications/meta/query/PhabricatorAppSearchEngine.php +++ b/src/applications/meta/query/PhabricatorAppSearchEngine.php @@ -201,7 +201,7 @@ final class PhabricatorAppSearchEngine $results[] = phutil_tag( 'h1', array( - 'class' => 'phui-object-item-list-header', + 'class' => 'phui-oi-list-header', ), idx($group_names, $group, $group)); } diff --git a/src/applications/settings/panel/PhabricatorHomePreferencesSettingsPanel.php b/src/applications/settings/panel/PhabricatorHomePreferencesSettingsPanel.php index d12db30f83..ac950eade1 100644 --- a/src/applications/settings/panel/PhabricatorHomePreferencesSettingsPanel.php +++ b/src/applications/settings/panel/PhabricatorHomePreferencesSettingsPanel.php @@ -148,7 +148,8 @@ final class PhabricatorHomePreferencesSettingsPanel $list = id(new PHUIObjectItemListView()) ->setViewer($viewer) - ->setID($list_id); + ->setID($list_id) + ->setDrag(true); Javelin::initBehavior( 'reorder-applications', @@ -170,7 +171,6 @@ final class PhabricatorHomePreferencesSettingsPanel $item = id(new PHUIObjectItemView()) ->setHeader($application->getName()) ->setImageIcon($icon) - ->addAttribute($application->getShortDescription()) ->setGrippable(true); $item->addAction( diff --git a/src/view/phui/PHUIObjectItemListView.php b/src/view/phui/PHUIObjectItemListView.php index 6c81053f0a..53e86382c2 100644 --- a/src/view/phui/PHUIObjectItemListView.php +++ b/src/view/phui/PHUIObjectItemListView.php @@ -9,8 +9,9 @@ final class PHUIObjectItemListView extends AphrontTagView { private $flush; private $simple; private $big; + private $drag; private $allowEmptyList; - private $itemClass = 'phui-object-item-standard'; + private $itemClass = 'phui-oi-standard'; public function setAllowEmptyList($allow_empty_list) { $this->allowEmptyList = $allow_empty_list; @@ -46,6 +47,12 @@ final class PHUIObjectItemListView extends AphrontTagView { return $this; } + public function setDrag($drag) { + $this->drag = $drag; + $this->setItemClass('phui-oi-drag'); + return $this; + } + public function setNoDataString($no_data_string) { $this->noDataString = $no_data_string; return $this; @@ -67,16 +74,26 @@ final class PHUIObjectItemListView extends AphrontTagView { protected function getTagAttributes() { $classes = array(); + $classes[] = 'phui-oi-list-view'; - $classes[] = 'phui-object-item-list-view'; if ($this->flush) { - $classes[] = 'phui-object-list-flush'; + $classes[] = 'phui-oi-list-flush'; + require_celerity_resource('phui-oi-flush-ui-css'); } + if ($this->simple) { - $classes[] = 'phui-object-list-simple'; + $classes[] = 'phui-oi-list-simple'; + require_celerity_resource('phui-oi-simple-ui-css'); } + if ($this->big) { - $classes[] = 'phui-object-list-big'; + $classes[] = 'phui-oi-list-big'; + require_celerity_resource('phui-oi-big-ui-css'); + } + + if ($this->drag) { + $classes[] = 'phui-oi-list-drag'; + require_celerity_resource('phui-oi-drag-ui-css'); } return array( @@ -86,14 +103,15 @@ final class PHUIObjectItemListView extends AphrontTagView { protected function getTagContent() { $viewer = $this->getUser(); - require_celerity_resource('phui-object-item-list-view-css'); + require_celerity_resource('phui-oi-list-view-css'); + require_celerity_resource('phui-oi-color-css'); $header = null; if (strlen($this->header)) { $header = phutil_tag( 'h1', array( - 'class' => 'phui-object-item-list-header', + 'class' => 'phui-oi-list-header', ), $this->header); } @@ -120,7 +138,7 @@ final class PHUIObjectItemListView extends AphrontTagView { $items = phutil_tag( 'li', array( - 'class' => 'phui-object-item-empty', + 'class' => 'phui-oi-empty', ), $string); diff --git a/src/view/phui/PHUIObjectItemView.php b/src/view/phui/PHUIObjectItemView.php index 80fe6fb4d0..6d193081d2 100644 --- a/src/view/phui/PHUIObjectItemView.php +++ b/src/view/phui/PHUIObjectItemView.php @@ -229,45 +229,45 @@ final class PHUIObjectItemView extends AphrontTagView { protected function getTagAttributes() { $item_classes = array(); - $item_classes[] = 'phui-object-item'; + $item_classes[] = 'phui-oi'; if ($this->icons) { - $item_classes[] = 'phui-object-item-with-icons'; + $item_classes[] = 'phui-oi-with-icons'; } if ($this->attributes) { - $item_classes[] = 'phui-object-item-with-attrs'; + $item_classes[] = 'phui-oi-with-attrs'; } if ($this->handleIcons) { - $item_classes[] = 'phui-object-item-with-handle-icons'; + $item_classes[] = 'phui-oi-with-handle-icons'; } if ($this->barColor) { - $item_classes[] = 'phui-object-item-bar-color-'.$this->barColor; + $item_classes[] = 'phui-oi-bar-color-'.$this->barColor; } else { - $item_classes[] = 'phui-object-item-no-bar'; + $item_classes[] = 'phui-oi-no-bar'; } if ($this->actions) { $n = count($this->actions); - $item_classes[] = 'phui-object-item-with-actions'; - $item_classes[] = 'phui-object-item-with-'.$n.'-actions'; + $item_classes[] = 'phui-oi-with-actions'; + $item_classes[] = 'phui-oi-with-'.$n.'-actions'; } if ($this->disabled) { - $item_classes[] = 'phui-object-item-disabled'; + $item_classes[] = 'phui-oi-disabled'; } switch ($this->effect) { case 'highlighted': - $item_classes[] = 'phui-object-item-highlighted'; + $item_classes[] = 'phui-oi-highlighted'; break; case 'selected': - $item_classes[] = 'phui-object-item-selected'; + $item_classes[] = 'phui-oi-selected'; break; case 'visited': - $item_classes[] = 'phui-object-item-visited'; + $item_classes[] = 'phui-oi-visited'; break; case null: break; @@ -276,15 +276,15 @@ final class PHUIObjectItemView extends AphrontTagView { } if ($this->getGrippable()) { - $item_classes[] = 'phui-object-item-grippable'; + $item_classes[] = 'phui-oi-grippable'; } if ($this->getImageURI()) { - $item_classes[] = 'phui-object-item-with-image'; + $item_classes[] = 'phui-oi-with-image'; } if ($this->getImageIcon()) { - $item_classes[] = 'phui-object-item-with-image-icon'; + $item_classes[] = 'phui-oi-with-image-icon'; } return array( @@ -296,7 +296,7 @@ final class PHUIObjectItemView extends AphrontTagView { $viewer = $this->getUser(); $content_classes = array(); - $content_classes[] = 'phui-object-item-content'; + $content_classes[] = 'phui-oi-content'; $header_name = array(); @@ -311,7 +311,7 @@ final class PHUIObjectItemView extends AphrontTagView { phutil_tag( 'span', array( - 'class' => 'phui-object-item-objname', + 'class' => 'phui-oi-objname', ), $this->objectName), ' ', @@ -329,7 +329,7 @@ final class PHUIObjectItemView extends AphrontTagView { $this->href ? 'a' : 'div', array( 'href' => $this->href, - 'class' => 'phui-object-item-link', + 'class' => 'phui-oi-link', 'title' => $title_text, ), $this->header); @@ -340,7 +340,7 @@ final class PHUIObjectItemView extends AphrontTagView { $header = phutil_tag( 'div', array( - 'class' => 'phui-object-item-name', + 'class' => 'phui-oi-name', ), javelin_tag( 'span', @@ -360,7 +360,7 @@ final class PHUIObjectItemView extends AphrontTagView { $icon = $spec['icon']; $icon = id(new PHUIIconView()) ->setIcon($icon) - ->addClass('phui-object-item-icon-image'); + ->addClass('phui-oi-icon-image'); if (isset($spec['attributes']['tip'])) { $sigil = 'has-tooltip'; @@ -375,7 +375,7 @@ final class PHUIObjectItemView extends AphrontTagView { $label = phutil_tag( 'span', array( - 'class' => 'phui-object-item-icon-label', + 'class' => 'phui-oi-icon-label', ), $spec['label']); @@ -389,7 +389,7 @@ final class PHUIObjectItemView extends AphrontTagView { } $classes = array(); - $classes[] = 'phui-object-item-icon'; + $classes[] = 'phui-oi-icon'; if (isset($spec['attributes']['class'])) { $classes[] = $spec['attributes']['class']; } @@ -405,7 +405,7 @@ final class PHUIObjectItemView extends AphrontTagView { $icons[] = phutil_tag( 'ul', array( - 'class' => 'phui-object-item-icons', + 'class' => 'phui-oi-icons', ), $icon_list); } @@ -420,7 +420,7 @@ final class PHUIObjectItemView extends AphrontTagView { $handle_bar = phutil_tag( 'li', array( - 'class' => 'phui-object-item-handle-icons', + 'class' => 'phui-oi-handle-icons', ), $handle_bar); } @@ -431,14 +431,14 @@ final class PHUIObjectItemView extends AphrontTagView { $bylines[] = phutil_tag( 'div', array( - 'class' => 'phui-object-item-byline', + 'class' => 'phui-oi-byline', ), $byline); } $bylines = phutil_tag( 'div', array( - 'class' => 'phui-object-item-bylines', + 'class' => 'phui-oi-bylines', ), $bylines); } @@ -448,7 +448,7 @@ final class PHUIObjectItemView extends AphrontTagView { $subhead = phutil_tag( 'div', array( - 'class' => 'phui-object-item-subhead', + 'class' => 'phui-oi-subhead', ), $this->subhead); } @@ -468,7 +468,7 @@ final class PHUIObjectItemView extends AphrontTagView { $spacer = phutil_tag( 'span', array( - 'class' => 'phui-object-item-attribute-spacer', + 'class' => 'phui-oi-attribute-spacer', ), "\xC2\xB7"); $first = true; @@ -476,7 +476,7 @@ final class PHUIObjectItemView extends AphrontTagView { $attrs[] = phutil_tag( 'li', array( - 'class' => 'phui-object-item-attribute', + 'class' => 'phui-oi-attribute', ), array( ($first ? null : $spacer), @@ -488,7 +488,7 @@ final class PHUIObjectItemView extends AphrontTagView { $attrs = phutil_tag( 'ul', array( - 'class' => 'phui-object-item-attributes', + 'class' => 'phui-oi-attributes', ), array( $handle_bar, @@ -507,7 +507,7 @@ final class PHUIObjectItemView extends AphrontTagView { $grippable = phutil_tag( 'div', array( - 'class' => 'phui-object-item-grip', + 'class' => 'phui-oi-grip', ), ''); } @@ -528,7 +528,7 @@ final class PHUIObjectItemView extends AphrontTagView { $image = phutil_tag( 'div', array( - 'class' => 'phui-object-item-image', + 'class' => 'phui-oi-image', 'style' => 'background-image: url('.$this->getImageURI().')', ), ''); @@ -536,7 +536,7 @@ final class PHUIObjectItemView extends AphrontTagView { $image = phutil_tag( 'div', array( - 'class' => 'phui-object-item-image-icon', + 'class' => 'phui-oi-image-icon', ), $this->getImageIcon()); } @@ -556,7 +556,7 @@ final class PHUIObjectItemView extends AphrontTagView { $column0 = phutil_tag( 'div', array( - 'class' => 'phui-object-item-col0', + 'class' => 'phui-oi-col0', ), $status); } @@ -565,7 +565,7 @@ final class PHUIObjectItemView extends AphrontTagView { $column0 = phutil_tag( 'div', array( - 'class' => 'phui-object-item-col0 phui-object-item-badge', + 'class' => 'phui-oi-col0 phui-oi-badge', ), $this->badge); } @@ -574,7 +574,7 @@ final class PHUIObjectItemView extends AphrontTagView { $countdown = phutil_tag( 'div', array( - 'class' => 'phui-object-item-countdown-number', + 'class' => 'phui-oi-countdown-number', ), array( phutil_tag_div('', $this->countdownNum), @@ -583,7 +583,7 @@ final class PHUIObjectItemView extends AphrontTagView { $column0 = phutil_tag( 'div', array( - 'class' => 'phui-object-item-col0 phui-object-item-countdown', + 'class' => 'phui-oi-col0 phui-oi-countdown', ), $countdown); } @@ -591,7 +591,7 @@ final class PHUIObjectItemView extends AphrontTagView { $column1 = phutil_tag( 'div', array( - 'class' => 'phui-object-item-col1', + 'class' => 'phui-oi-col1', ), array( $header, @@ -603,7 +603,7 @@ final class PHUIObjectItemView extends AphrontTagView { $column2 = phutil_tag( 'div', array( - 'class' => 'phui-object-item-col2', + 'class' => 'phui-oi-col2', ), array( $icons, @@ -615,7 +615,7 @@ final class PHUIObjectItemView extends AphrontTagView { $column2 = phutil_tag( 'div', array( - 'class' => 'phui-object-item-col2 phui-object-item-launch-button', + 'class' => 'phui-oi-col2 phui-oi-launch-button', ), array( $this->launchButton, @@ -625,10 +625,10 @@ final class PHUIObjectItemView extends AphrontTagView { $table = phutil_tag( 'div', array( - 'class' => 'phui-object-item-table', + 'class' => 'phui-oi-table', ), phutil_tag_div( - 'phui-object-item-table-row', + 'phui-oi-table-row', array( $column0, $column1, @@ -638,7 +638,7 @@ final class PHUIObjectItemView extends AphrontTagView { $box = phutil_tag( 'div', array( - 'class' => 'phui-object-item-content-box', + 'class' => 'phui-oi-content-box', ), array( $grippable, @@ -656,7 +656,7 @@ final class PHUIObjectItemView extends AphrontTagView { $actions = phutil_tag( 'ul', array( - 'class' => 'phui-object-item-actions', + 'class' => 'phui-oi-actions', ), $actions); } @@ -664,7 +664,7 @@ final class PHUIObjectItemView extends AphrontTagView { $frame_content = phutil_tag( 'div', array( - 'class' => 'phui-object-item-frame-content', + 'class' => 'phui-oi-frame-content', ), array( $actions, @@ -678,13 +678,13 @@ final class PHUIObjectItemView extends AphrontTagView { 'img', array( 'src' => $this->coverImage, - 'class' => 'phui-object-item-cover-image', + 'class' => 'phui-oi-cover-image', )); $frame_cover = phutil_tag( 'div', array( - 'class' => 'phui-object-item-frame-cover', + 'class' => 'phui-oi-frame-cover', ), $cover_image); } @@ -692,7 +692,7 @@ final class PHUIObjectItemView extends AphrontTagView { $frame = phutil_tag( 'div', array( - 'class' => 'phui-object-item-frame', + 'class' => 'phui-oi-frame', ), array( $frame_cover, @@ -709,7 +709,7 @@ final class PHUIObjectItemView extends AphrontTagView { ->setIcon($icon); $options = array( - 'class' => 'phui-object-item-status-icon', + 'class' => 'phui-oi-status-icon', ); if (strlen($label)) { @@ -725,7 +725,7 @@ final class PHUIObjectItemView extends AphrontTagView { Javelin::initBehavior('phabricator-tooltips'); $options = array( - 'class' => 'phui-object-item-handle-icon', + 'class' => 'phui-oi-handle-icon', 'style' => 'background-image: url('.$handle->getImageURI().')', ); diff --git a/webroot/rsrc/css/aphront/dialog-view.css b/webroot/rsrc/css/aphront/dialog-view.css index 9cf56394df..3b2de1cee6 100644 --- a/webroot/rsrc/css/aphront/dialog-view.css +++ b/webroot/rsrc/css/aphront/dialog-view.css @@ -158,18 +158,18 @@ margin-top: 16px; } -.device-desktop .aphront-dialog-flush .phui-object-item-list-view { +.device-desktop .aphront-dialog-flush .phui-oi-list-view { margin: 0; padding: 0; } -.aphront-dialog-flush .phui-object-item-list-view.phui-object-list-stackable - .phui-object-item { +.aphront-dialog-flush .phui-oi-list-view.phui-object-list-stackable + .phui-oi { border: 0; } -.aphront-dialog-flush .phui-object-item-list-view.phui-object-list-stackable - .phui-object-item-frame { +.aphront-dialog-flush .phui-oi-list-view.phui-object-list-stackable + .phui-oi-frame { border: 0; border-top: 1px solid {$thinblueborder}; } diff --git a/webroot/rsrc/css/application/config/config-page.css b/webroot/rsrc/css/application/config/config-page.css index 5fe15aadb8..82cb9642d2 100644 --- a/webroot/rsrc/css/application/config/config-page.css +++ b/webroot/rsrc/css/application/config/config-page.css @@ -39,7 +39,7 @@ margin: 0 4px; } -.device-desktop .config-page-content .phui-object-item-list-view { +.device-desktop .config-page-content .phui-oi-list-view { padding-left: 0; padding-right: 0; } diff --git a/webroot/rsrc/css/application/flag/flag.css b/webroot/rsrc/css/application/flag/flag.css index 8f6f7a45e8..7d5f0af5d2 100644 --- a/webroot/rsrc/css/application/flag/flag.css +++ b/webroot/rsrc/css/application/flag/flag.css @@ -7,7 +7,7 @@ background: transparent 0 0 no-repeat; } -.phui-object-item .phabricator-flag-icon { +.phui-oi .phabricator-flag-icon { float: left; margin: 2px; margin-right: 8px; diff --git a/webroot/rsrc/css/application/project/project-view.css b/webroot/rsrc/css/application/project/project-view.css index 7fc3001d80..5b72e1c9eb 100644 --- a/webroot/rsrc/css/application/project/project-view.css +++ b/webroot/rsrc/css/application/project/project-view.css @@ -72,7 +72,7 @@ margin-bottom: 0; } -.project-view-home .phui-box-grey .phui-object-item-list-view { +.project-view-home .phui-box-grey .phui-oi-list-view { padding: 4px 8px 0 8px; } @@ -80,7 +80,7 @@ background-color: #fff; } -.project-view-home .phui-box-grey .phui-object-item-attribute .phui-icon-view { +.project-view-home .phui-box-grey .phui-oi-attribute .phui-icon-view { color: {$lightgreytext}; } diff --git a/webroot/rsrc/css/application/search/search-results.css b/webroot/rsrc/css/application/search/search-results.css index f02efe1315..734d86c029 100644 --- a/webroot/rsrc/css/application/search/search-results.css +++ b/webroot/rsrc/css/application/search/search-results.css @@ -2,7 +2,7 @@ * @provides phabricator-search-results-css */ -.phui-object-item-link strong { +.phui-oi-link strong { color: {$fire}; text-decoration: underline; } diff --git a/webroot/rsrc/css/layout/phabricator-source-code-view.css b/webroot/rsrc/css/layout/phabricator-source-code-view.css index 4bd57fcfcb..7e956b580a 100644 --- a/webroot/rsrc/css/layout/phabricator-source-code-view.css +++ b/webroot/rsrc/css/layout/phabricator-source-code-view.css @@ -10,7 +10,7 @@ background-color: #FFFEF5; } -.phui-object-item .phabricator-source-code-container { +.phui-oi .phabricator-source-code-container { margin-left: 8px; } diff --git a/webroot/rsrc/css/phui/object-item/phui-oi-big-ui.css b/webroot/rsrc/css/phui/object-item/phui-oi-big-ui.css new file mode 100644 index 0000000000..7fcc6d4ef7 --- /dev/null +++ b/webroot/rsrc/css/phui/object-item/phui-oi-big-ui.css @@ -0,0 +1,48 @@ +/** + * @provides phui-oi-big-ui-css + * @requires phui-oi-list-view-css + */ + +.phui-oi-list-big ul.phui-oi-list-view { + margin: 0; + padding: 20px; +} + +.phui-oi-list-big .phui-oi-no-bar .phui-oi-frame { + border: 0; +} + +.phui-oi-list-big .phui-oi-image-icon { + margin: 8px 2px 12px; +} + +.phui-oi-list-big a.phui-oi-link { + color: #000; + font-size: {$biggestfontsize}; +} + +.phui-oi-list-big .phui-oi-name { + padding-top: 6px; +} + +.phui-oi-list-big .phui-oi-launch-button a.button { + font-size: {$normalfontsize}; + padding: 3px 12px 4px; +} + +.device-desktop .phui-oi-list-big .phui-oi { + margin-bottom: 8px; +} + +.phui-oi-list-big .phui-oi-col0 { + vertical-align: top; + padding: 0; +} + +.phui-oi-list-big .phui-oi-status-icon { + padding: 5px; +} + +.phui-oi-list-big .phui-oi-visited a.phui-oi-link { + color: {$violet}; +} diff --git a/webroot/rsrc/css/phui/object-item/phui-oi-color.css b/webroot/rsrc/css/phui/object-item/phui-oi-color.css new file mode 100644 index 0000000000..e9ec630727 --- /dev/null +++ b/webroot/rsrc/css/phui/object-item/phui-oi-color.css @@ -0,0 +1,68 @@ +/** + * @provides phui-oi-color-css + * @requires phui-oi-list-view-css + */ + + +/* - Bar Colors ---------------------------------------------------------------- + Colors for the left-hand border bars, used to indicate object status or other + attributes. +*/ + +.phui-oi-bar-color-red { + border-left-color: {$red}; +} + +.phui-oi-bar-color-orange { + border-left-color: {$orange}; +} + +.phui-oi-bar-color-yellow { + border-left-color: {$yellow}; +} + +.phui-oi-bar-color-green { + border-left-color: {$green}; +} + +.phui-oi-bar-color-sky { + border-left-color: {$sky}; +} + +.phui-oi-bar-color-blue { + border-left-color: {$blue}; +} + +.phui-oi-bar-color-indigo { + border-left-color: {$indigo}; +} + +.phui-oi-bar-color-violet { + border-left-color: {$violet}; +} + +.phui-oi-bar-color-pink { + border-left-color: {$pink}; +} + +.phui-oi-bar-color-fire { + border-left-color: {$fire}; +} + +.phui-oi-bar-color-bluegrey { + border-left-color: {$bluetext}; +} + +.phui-oi-bar-color-lightbluetext { + border-left-color: {$lightbluetext}; +} + +.phui-oi-bar-color-grey, +.phui-oi-bar-color-lightgreytext { + border-left-color: {$lightgreytext}; +} + +.phui-oi-bar-color-black, +.phui-oi-bar-color-dark { + border-left-color: {$darkgreytext}; +} diff --git a/webroot/rsrc/css/phui/object-item/phui-oi-drag-ui.css b/webroot/rsrc/css/phui/object-item/phui-oi-drag-ui.css new file mode 100644 index 0000000000..caf9ff8dd0 --- /dev/null +++ b/webroot/rsrc/css/phui/object-item/phui-oi-drag-ui.css @@ -0,0 +1,59 @@ +/** + * @provides phui-oi-drag-ui-css + * @requires phui-oi-list-view-css + */ + +.phui-object-box .phui-oi-list-view.phui-oi-list-drag { + margin-top: 8px; + margin-bottom: 4px; +} + +.phui-oi.phui-oi-drag { + background: {$bluebackground}; + border-radius: 3px; + border: none; +} + +.phui-oi.phui-oi-drag, +.phui-oi.phui-oi-drag .phui-oi-frame { + border: none; +} + +.phui-object-box .phui-oi-list-view .phui-oi.phui-oi-drag { + margin-top: 4px; +} + +.phui-oi-drag.phui-oi-with-image-icon .phui-oi-frame, +.phui-oi-drag.phui-oi-with-image .phui-oi-frame, +.phui-oi-drag .phui-oi-frame { + min-height: 36px; +} + +.phui-oi-drag .phui-oi-list-icon { + height: auto; + width: auto; +} + +.phui-oi-drag .phui-oi-image-icon .phui-icon-view { + height: 16px; + width: 16px; + font-size: 16px; + line-height: 20px; +} + +.phui-oi-drag.phui-oi-grippable .phui-oi-frame { + padding-left: 28px; +} + +.phui-oi-drag .phui-oi-grip { + left: 4px; +} + +.phui-oi-drag.phui-oi-with-image-icon .phui-oi-content-box, +.phui-oi-drag.phui-oi-with-image .phui-oi-content-box { + margin-left: 24px; +} + +.phui-oi-list-drag .drag-ghost { + margin-top: 4px; +} diff --git a/webroot/rsrc/css/phui/object-item/phui-oi-flush-ui.css b/webroot/rsrc/css/phui/object-item/phui-oi-flush-ui.css new file mode 100644 index 0000000000..2902cb22ce --- /dev/null +++ b/webroot/rsrc/css/phui/object-item/phui-oi-flush-ui.css @@ -0,0 +1,13 @@ +/** + * @provides phui-oi-flush-ui-css + * @requires phui-oi-list-view-css + */ + +.phui-oi-list-view.phui-oi-list-flush { + padding: 0; + margin: 0; +} + +.phui-object-box .phui-oi-list-flush .phui-oi { + margin: 0; +} diff --git a/webroot/rsrc/css/phui/object-item/phui-oi-list-view.css b/webroot/rsrc/css/phui/object-item/phui-oi-list-view.css new file mode 100644 index 0000000000..018245e21c --- /dev/null +++ b/webroot/rsrc/css/phui/object-item/phui-oi-list-view.css @@ -0,0 +1,625 @@ +/** + * @provides phui-oi-list-view-css + */ + +.phui-oi { + border-left-width: 0; +} + +ul.phui-oi-list-view { + padding: 8px; + list-style: none; +} + +.device-desktop .phui-oi-list-view { + padding: 16px; +} + +.phui-oi-list-view + .phui-oi-list-view { + padding-top: 0; +} + +.phui-object-box .phui-oi-list-view .phui-oi { + margin: 0; +} + +.phui-oi-list-view .phui-info-view { + margin: 0; +} + +.phui-object-box .phui-oi-list-view .phui-info-view { + color: {$greytext}; + border: none; +} + +.phui-oi { + border-style: solid; + border-color: {$lightgreyborder}; + margin: 5px 0; + overflow: hidden; + background: #fff; + margin-bottom: 4px; +} + +.phui-oi .phui-icon-view { + display: inline-block; +} + +.phui-oi-frame { + border-color: {$lightblueborder}; + border-width: 1px 1px 1px 0; + border-style: solid; + position: relative; + min-height: 33px; + overflow: hidden; +} + +.phui-oi-cover-image { + display: none; +} + +.phui-oi-no-bar .phui-oi-frame { + border-width: 1px; +} + +.device-desktop .phui-oi { + margin: 0 0 4px 0; +} + +.phui-object-box .phui-oi-list-view { + margin: 0; +} + +.phui-oi-status-icon { + font-weight: bold; + padding: 3px; + font-size: 16px; +} + +.phui-oi-list-view .phui-oi-col0 .phui-icon-view { + width: 17px; + text-align: center; + overflow: visible; + position: relative; + left: -1px; +} + +.phui-oi-name { + padding: 8px 8px 0; + white-space: nowrap; + word-wrap: break-word; + overflow: hidden; + text-overflow: ellipsis; + font-weight: bold; + -webkit-font-smoothing: antialiased; +} + +.device-phone .phui-oi-name { + overflow: normal; + white-space: normal; + font-weight: bold; +} + +.phui-oi-link { + display: inline; +} + +.phui-oi-objname { + color: #000; + cursor: text; + font-weight: bold; +} + +.phui-oi-content { + margin: 4px 8px 2px 0; + overflow: hidden; +} + +.phui-oi-grippable { + cursor: move; +} + +.device .phui-oi-grippable { + cursor: normal; +} + +.phui-oi-grip { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 20px; + background: url('/rsrc/image/texture/grip.png') center center no-repeat; +} + +.device .phui-oi-grip { + display: none; +} + +.phui-oi-grippable .phui-oi-frame { + padding-left: 16px; +} + +.device .phui-oi-grippable .phui-oi-frame { + padding-left: 0; +} + +.phui-oi-list-header { + padding: 0 0 8px 0; + color: {$darkgreytext}; +} + +.phui-oi-table { + display: table; + table-layout: fixed; + width: 100%; +} + +.phui-oi-table-row { + display: table-row; +} + +.phui-oi-col0 { + width: 20px; + display: table-cell; + vertical-align: middle; + padding-left: 4px; +} + +.device-phone .phui-oi-col0 { + vertical-align: top; + padding-top: 8px; +} + +.phui-oi-col1 { + display: table-cell; + vertical-align: top; +} + +.phui-oi-col2 { + width: 160px; + display: table-cell; + vertical-align: top; +} + +.device-phone .phui-oi-col1, +.device-phone .phui-oi-col2 { + display: block; + width: auto; +} + +/* - Item Actions -------------------------------------------------------------- + + Action buttons, like "Edit" and "Delete". + +*/ + +.phui-oi-actions { + position: absolute; + right: 4px; + top: 4px; + bottom: 4px; + vertical-align: middle; + text-align: right; +} + +.phui-oi-actions .phui-list-item-view { + float: right; + height: 100%; + width: 24px; + display: inline-block; + position: relative; +} + +.phui-oi-actions .phui-list-item-href { + display: inline-block; + position: relative; + width: 24px; + height: 100%; +} + +.device-desktop .phui-oi-actions .phui-list-item-href:hover { + background: {$hoverblue}; + border-radius: 3px; +} + +.phui-oi-actions .phui-list-item-icon { + width: 14px; + height: 14px; + position: absolute; + display: block; + top: 50%; + margin-top: -7px; + left: 3px; +} + +.phui-oi-actions .phui-list-item-name { + display: none; +} + +.phui-oi-with-1-actions .phui-oi-content-box { + margin-right: 28px; + overflow: hidden; +} + +.phui-oi-with-2-actions .phui-oi-content-box { + margin-right: 54px; + overflow: hidden; +} + +.phui-oi-with-3-actions .phui-oi-content-box { + margin-right: 76px; + overflow: hidden; +} + + +/* - Object Box List ----------------------------------------------------------- + + Tighter, stacking list when inside an Object Box + +*/ + +.phui-object-box .phui-oi-list-view { + padding: 0; + border: none; +} + +.phui-object-box .phui-oi-frame { + border-right: none; +} + +.phui-object-box .phui-oi:last-child + .phui-oi-frame { + border-bottom: none; +} + + +/* - Subhead ------------------------------------------------------------------- + + Descriptive Text or Links under the main header, before attributes. + +*/ + +.phui-oi-subhead { + color: {$greytext}; + padding: 0 8px 6px; +} + + +/* - Attribute List ------------------------------------------------------------ + + Object attributes, commonly used to render created date, etc. + +*/ + +.phui-oi-attributes { + padding: 0 8px 6px; + line-height: 18px; + min-height: 21px; +} + +.phui-oi-attribute { + display: inline-block; + color: {$greytext}; + vertical-align: top; +} + +.phui-oi-attribute-spacer { + padding: 0 4px; +} + + +/* - Icons --------------------------------------------------------------------- + + Icons, which show object state. On mobile, they are rendered without labels + to save space. + +*/ + +.phui-object-icon-pane { + margin: 8px 0 4px; +} + +.device-phone .phui-object-icon-pane { + margin: 0 0 4px; +} + +.phui-oi-icons { + padding: 0 4px 0 0; +} + +.device-phone .phui-oi-icons { + padding: 0 0 0 8px; +} + +ul.phui-oi-icons { + margin: 0; +} + +.phui-oi-icon { + vertical-align: middle; + font-size: {$smallerfontsize}; + color: {$greytext}; + text-align: right; + white-space: nowrap; + overflow: hidden; + min-height: 18px; + line-height: 18px; +} + +.device-phone .phui-oi-icon { + text-align: left; + font-size: 13px; +} + +/* + * Items with icon 'none' still have on mobile, thus creating a weird vertical + * margin for elements which follow + */ +.device-phone .phui-oi-icon .none { + display: none; +} + +.phui-oi-icon-image { + width: 14px; + height: 14px; + font-size: 13px; + margin-right: 4px; +} + + +/* - Disabled ------------------------------------------------------------------ + + Disabled/inactive objects. + +*/ + + +.phui-oi.phui-oi-disabled .phui-oi-link, +.phui-oi.phui-oi-disabled .phui-oi-link a { + color: {$lightgreytext}; +} + +.phui-oi.phui-oi-disabled .phui-oi-frame { + border-color: #d7d7d7; +} + +.phui-oi.phui-oi-disabled .phui-oi-objname { + color: {$greytext}; + text-decoration: line-through; +} + + +/* - Effects ------------------------------------------------------------------- + + Effects like highlighted items. + +*/ + +.phui-oi.phui-oi-highlighted { + background: {$sh-yellowbackground}; +} + +ul.phui-oi-list-view .phui-oi-highlighted + .phui-oi-frame { + border-color: {$sh-yellowborder}; +} + +.phui-oi-selected { + background: {$sh-bluebackground}; +} + +ul.phui-oi-list-view .phui-oi-selected + .phui-oi-frame { + border-color: {$sh-blueborder}; +} + + +/* - Handle Icons -------------------------------------------------------------- + + Shows owners, reviewers, etc., using profile picture icons. + +*/ + +.phui-oi-handle-icons { + bottom: 0; + right: 4px; + position: absolute; +} + +.phui-oi-handle-icon { + width: 24px; + height: 24px; + display: inline-block; + background-size: 100%; + border-radius: 3px; + background-repeat: no-repeat; +} + + +/* - Bylines ------------------------------------------------------------------- + + Shows owners, authors, reviewers, etc., in text. + +*/ + +.phui-oi-bylines { + padding: 0 4px 0 8px; + margin: 4px 0 8px; + font-size: {$smallerfontsize}; + color: {$greytext}; + text-align: right; +} + +.phui-oi-byline { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +.device-phone .phui-oi-bylines { + float: none; + text-align: left; + padding: 0 8px; + font-size: {$normalfontsize}; +} + + +/* - Draggable List ------------------------------------------------------------ + + These classes are applied by and/or provided for use with JX.DraggableList. + +*/ + +.drag-ghost { + position: relative; + background: {$sh-indigobackground}; + border-radius: 3px; + margin-bottom: 4px; + border: 1px dashed {$sh-indigoborder}; +} + +.drag-dragging { + opacity: 0.25; +} + +.drag-sending { + opacity: 0.5; +} + +.drag-clone, +.drag-frame { + /* This allows mousewheel events to pass through the clone and frame while + they are being dragged. Without this, the mousewheel does not work during + a drag operation. */ + pointer-events: none; +} + +.drag-frame { + position: fixed; + overflow: hidden; + left: 0; + right: 0; + top: 0; + bottom: 0; +} + +.drag-clone { + position: absolute; + list-style: none; +} + +/* - Badges ---------------------------------------------------------------- */ + +.phui-oi-col0.phui-oi-badge { + width: 28px; +} + +.phui-oi-col0.phui-oi-badge .phui-icon-view { + left: 0; +} + +/* - Countdowns ------------------------------------------------------------ */ + +.phui-oi-col0.phui-oi-countdown { + width: 52px; + padding: 0; +} + +.phui-oi-countdown .phui-oi-countdown-number { + border-right: 1px solid {$thinblueborder}; + text-align: center; + color: {$bluetext}; +} + + +/* - Dashboards ------------------------------------------------------------ */ + +.phui-object-box .phui-oi-list-view .phui-oi-frame { + border: none; + border-bottom: 1px solid {$thinblueborder}; +} + +.drag-clone.phui-oi-standard .phui-oi-frame { + border: none; + opacity: 0.8; + background: {$sh-bluebackground}; +} + +.phui-object-box .phui-oi-list-header { + font-size: {$normalfontsize}; + color: {$darkbluetext}; + border-top: 1px solid {$thinblueborder}; + border-bottom: 1px solid {$thinblueborder}; + padding: 8px; + background-color: {$lightgreybackground}; +} + +.phui-object-box .phui-header-shell + .phui-oi-list-view .phui-oi-list-header, +.phui-object-box .phui-object-box-hidden-content + .phui-oi-list-view + .phui-oi-list-header, +.phui-object-box .phui-object-box-hidden-content + .phui-oi-list-header { + border-top: none; + } + +.dashboard-pane .phui-oi-empty .phui-info-view { + border: none; + margin: 0; +} + +.device-desktop .aphront-multi-column-fluid .aphront-multi-column-2-up + .aphront-multi-column-column-outer.third .phui-oi-col2 { + display: none; + } + + +/* - Launcher List ---------------------------------------------------------- */ + +.phui-oi-image-icon { + background: none; + width: 40px; + height: 40px; + margin: 8px 6px; + position: absolute; +} + +.phui-oi-image-icon .phui-icon-view { + position: absolute; + width: 40px; + height: 40px; + font-size: 26px; + text-align: center; + line-height: 36px; +} + +.phui-oi-image { + width: 40px; + height: 40px; + border-radius: 3px; + background-size: 100%; + margin: 8px 6px; + position: absolute; +} + +.phui-oi-with-image-icon .phui-oi-frame, +.phui-oi-with-image .phui-oi-frame { + min-height: 52px; +} + +.phui-oi-with-image-icon .phui-oi-content-box, +.phui-oi-with-image .phui-oi-content-box { + margin-left: 46px; +} + +/* - Launcher Button -------------------------------------------------------- */ + +.phui-oi-col2.phui-oi-launch-button { + text-align: right; + vertical-align: middle; + padding-right: 4px; +} + +.device-phone .phui-oi-col2.phui-oi-launch-button { + padding: 0 8px 8px; + text-align: left; +} diff --git a/webroot/rsrc/css/phui/object-item/phui-oi-simple-ui.css b/webroot/rsrc/css/phui/object-item/phui-oi-simple-ui.css new file mode 100644 index 0000000000..e838f1ce3e --- /dev/null +++ b/webroot/rsrc/css/phui/object-item/phui-oi-simple-ui.css @@ -0,0 +1,43 @@ +/** + * @provides phui-oi-simple-ui-css + * @requires phui-oi-list-view-css + */ + +.phui-oi-list-simple .phui-oi-with-image .phui-oi-frame { + min-height: 26px; +} + +.phui-oi-list-simple .phui-oi-image { + height: 26px; + width: 26px; + margin: 0; +} + +.phui-oi-list-simple .phui-oi-with-image + .phui-oi-content-box { + margin-left: 32px; +} + +.phui-oi-list-simple .phui-oi-name { + padding: 2px 0; +} + +.phui-oi-list-simple .phui-oi-name a { + color: {$darkbluetext}; +} + +.phui-oi-list-view.phui-oi-list-simple .phui-oi-frame { + border: none; + margin-bottom: 4px; +} + +.phui-oi-list-view.phui-oi-list-simple li:last-child + .phui-oi-frame { + margin: 0; +} + +.phui-oi-list-simple .phui-oi-actions { + top: 2px; + bottom: 2px; + right: 2px; +} diff --git a/webroot/rsrc/css/phui/phui-box.css b/webroot/rsrc/css/phui/phui-box.css index 8d2acd0069..ef0816f826 100644 --- a/webroot/rsrc/css/phui/phui-box.css +++ b/webroot/rsrc/css/phui/phui-box.css @@ -24,18 +24,18 @@ border-color: {$thinblueborder}; } -.phui-box-blue .phui-object-item, -.phui-box-grey .phui-object-item { +.phui-box-blue .phui-oi, +.phui-box-grey .phui-oi { background: transparent; } -.phui-box-blue .phui-object-item-link, -.phui-box-grey .phui-object-item-link { +.phui-box-blue .phui-oi-link, +.phui-box-grey .phui-oi-link { color: {$darkbluetext}; } -.phui-box-blue .phui-object-item-list-view, -.phui-box-grey .phui-object-item-list-view { +.phui-box-blue .phui-oi-list-view, +.phui-box-grey .phui-oi-list-view { background-color: #fff; } @@ -98,7 +98,7 @@ body.device .phui-box-blue-property.phui-object-box.phui-object-box-collapsed color: {$bluetext}; } -.phui-box-blue-property .phui-object-item-list-view { +.phui-box-blue-property .phui-oi-list-view { padding: 2px 8px; } diff --git a/webroot/rsrc/css/phui/phui-crumbs-view.css b/webroot/rsrc/css/phui/phui-crumbs-view.css index 3cf8013723..d2d0744819 100644 --- a/webroot/rsrc/css/phui/phui-crumbs-view.css +++ b/webroot/rsrc/css/phui/phui-crumbs-view.css @@ -119,7 +119,7 @@ body .phui-crumbs-view + .phui-object-box { margin-top: 0; } -body .phui-crumbs-view + .phui-object-item-list-view { +body .phui-crumbs-view + .phui-oi-list-view { padding-top: 0; } diff --git a/webroot/rsrc/css/phui/phui-object-item-list-view.css b/webroot/rsrc/css/phui/phui-object-item-list-view.css deleted file mode 100644 index 2f77102f42..0000000000 --- a/webroot/rsrc/css/phui/phui-object-item-list-view.css +++ /dev/null @@ -1,790 +0,0 @@ -/** - * @provides phui-object-item-list-view-css - */ - -ul.phui-object-item-list-view { - padding: 8px; - list-style: none; -} - -.device-desktop .phui-object-item-list-view { - padding: 16px; -} - -.phui-object-item-list-view + .phui-object-item-list-view { - padding-top: 0; -} - -.phui-object-item-list-view.phui-object-list-flush { - padding: 0; - margin: 0; -} - -.phui-object-box .phui-object-item-list-view .phui-object-item { - margin: 0; -} - -.phui-object-item-list-view .phui-info-view { - margin: 0; -} - -.phui-object-box .phui-object-item-list-view .phui-info-view { - color: {$greytext}; - border: none; -} - -.phui-object-item { - border-style: solid; - border-color: {$lightgreyborder}; - margin: 5px 0; - overflow: hidden; - background: #fff; - margin-bottom: 4px; -} - -.phui-object-item .phui-icon-view { - display: inline-block; -} - -.phui-object-item-frame { - border-color: {$lightblueborder}; - border-width: 1px 1px 1px 0; - border-style: solid; - position: relative; - min-height: 33px; - overflow: hidden; -} - -.phui-object-item-cover-image { - display: none; -} - -.phui-object-item-no-bar .phui-object-item-frame { - border-width: 1px; -} - -.device-desktop .phui-object-item { - margin: 0 0 4px 0; -} - -.phui-object-box .phui-object-list-flush .phui-object-item { - margin: 0; -} - -.phui-object-box .phui-object-item-list-view { - margin: 0; -} - -.phui-object-item-status-icon { - font-weight: bold; - padding: 3px; - font-size: 16px; -} - -.phui-object-item-list-view .phui-object-item-col0 .phui-icon-view { - width: 17px; - text-align: center; - overflow: visible; - position: relative; - left: -1px; -} - -.phui-object-item-name { - padding: 8px 8px 0; - white-space: nowrap; - word-wrap: break-word; - overflow: hidden; - text-overflow: ellipsis; - font-weight: bold; - -webkit-font-smoothing: antialiased; -} - -.device-phone .phui-object-item-name { - overflow: normal; - white-space: normal; - font-weight: bold; -} - -.phui-object-item-link { - display: inline; -} - -.phui-object-item-objname { - color: #000; - cursor: text; - font-weight: bold; -} - -.phui-object-item-content { - margin: 4px 8px 2px 0; - overflow: hidden; -} - -.phui-object-item-grippable { - cursor: move; -} - -.device .phui-object-item-grippable { - cursor: normal; -} - -.phui-object-item-grip { - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 20px; - background: url('/rsrc/image/texture/grip.png') center center no-repeat; -} - -.device .phui-object-item-grip { - display: none; -} - -.phui-object-item-grippable .phui-object-item-frame { - padding-left: 16px; -} - -.device .phui-object-item-grippable .phui-object-item-frame { - padding-left: 0; -} - -.phui-object-item-list-header { - padding: 0 0 8px 0; - color: {$darkgreytext}; -} - -.phui-object-item-table { - display: table; - table-layout: fixed; - width: 100%; -} - -.phui-object-item-table-row { - display: table-row; -} - -.phui-object-item-col0 { - width: 20px; - display: table-cell; - vertical-align: middle; - padding-left: 4px; -} - -.device-phone .phui-object-item-col0 { - vertical-align: top; - padding-top: 8px; -} - -.phui-object-item-col1 { - display: table-cell; - vertical-align: top; -} - -.phui-object-item-col2 { - width: 160px; - display: table-cell; - vertical-align: top; -} - -.device-phone .phui-object-item-col1, -.device-phone .phui-object-item-col2 { - display: block; - width: auto; -} - -/* - Item Actions -------------------------------------------------------------- - - Action buttons, like "Edit" and "Delete". - -*/ - -.phui-object-item-actions { - position: absolute; - right: 4px; - top: 4px; - bottom: 4px; - vertical-align: middle; - text-align: right; -} - -.phui-object-item-actions .phui-list-item-view { - float: right; - height: 100%; - width: 24px; - display: inline-block; - position: relative; -} - -.phui-object-item-actions .phui-list-item-href { - display: inline-block; - position: relative; - width: 24px; - height: 100%; -} - -.device-desktop .phui-object-item-actions .phui-list-item-href:hover { - background: {$hoverblue}; - border-radius: 3px; -} - -.phui-object-item-actions .phui-list-item-icon { - width: 14px; - height: 14px; - position: absolute; - display: block; - top: 50%; - margin-top: -7px; - left: 3px; -} - -.phui-object-item-actions .phui-list-item-name { - display: none; -} - -.phui-object-item-with-1-actions .phui-object-item-content-box { - margin-right: 28px; - overflow: hidden; -} - -.phui-object-item-with-2-actions .phui-object-item-content-box { - margin-right: 54px; - overflow: hidden; -} - -.phui-object-item-with-3-actions .phui-object-item-content-box { - margin-right: 76px; - overflow: hidden; -} - - -/* - Object Box List ----------------------------------------------------------- - - Tighter, stacking list when inside an Object Box - -*/ - -.phui-object-box .phui-object-item-list-view { - padding: 0; - border: none; -} - -.phui-object-box .phui-object-item-frame { - border-right: none; -} - -.phui-object-box .phui-object-item:last-child - .phui-object-item-frame { - border-bottom: none; -} - - -/* - Subhead ------------------------------------------------------------------- - - Descriptive Text or Links under the main header, before attributes. - -*/ - -.phui-object-item-subhead { - color: {$greytext}; - padding: 0 8px 6px; -} - - -/* - Attribute List ------------------------------------------------------------ - - Object attributes, commonly used to render created date, etc. - -*/ - -.phui-object-item-attributes { - padding: 0 8px 6px; - line-height: 18px; - min-height: 21px; -} - -.phui-object-item-attribute { - display: inline-block; - color: {$greytext}; - vertical-align: top; -} - -.phui-object-item-attribute-spacer { - padding: 0 4px; -} - - -/* - Icons --------------------------------------------------------------------- - - Icons, which show object state. On mobile, they are rendered without labels - to save space. - -*/ - -.phui-object-icon-pane { - margin: 8px 0 4px; -} - -.device-phone .phui-object-icon-pane { - margin: 0 0 4px; -} - -.phui-object-item-icons { - padding: 0 4px 0 0; -} - -.device-phone .phui-object-item-icons { - padding: 0 0 0 8px; -} - -ul.phui-object-item-icons { - margin: 0; -} - -.phui-object-item-icon { - vertical-align: middle; - font-size: {$smallerfontsize}; - color: {$greytext}; - text-align: right; - white-space: nowrap; - overflow: hidden; - min-height: 18px; - line-height: 18px; -} - -.device-phone .phui-object-item-icon { - text-align: left; - font-size: 13px; -} - -/* - * Items with icon 'none' still have on mobile, thus creating a weird vertical - * margin for elements which follow - */ -.device-phone .phui-object-item-icon .none { - display: none; -} - -.phui-object-item-icon-image { - width: 14px; - height: 14px; - font-size: 13px; - margin-right: 4px; -} - -/* - Bar Colors ---------------------------------------------------------------- - Colors for the left-hand border bars, used to indicate object status or other - attributes. -*/ - -.phui-object-item { - border-left-width: 0; -} - -.phui-object-item-bar-color-red { - border-left-color: {$red}; -} - -.phui-object-item-bar-color-orange { - border-left-color: {$orange}; -} - -.phui-object-item-bar-color-yellow { - border-left-color: {$yellow}; -} - -.phui-object-item-bar-color-green { - border-left-color: {$green}; -} - -.phui-object-item-bar-color-sky { - border-left-color: {$sky}; -} - -.phui-object-item-bar-color-blue { - border-left-color: {$blue}; -} - -.phui-object-item-bar-color-indigo { - border-left-color: {$indigo}; -} - -.phui-object-item-bar-color-violet { - border-left-color: {$violet}; -} - -.phui-object-item-bar-color-pink { - border-left-color: {$pink}; -} - -.phui-object-item-bar-color-fire { - border-left-color: {$fire}; -} - -.phui-object-item-bar-color-bluegrey { - border-left-color: {$bluetext}; -} - -.phui-object-item-bar-color-lightbluetext { - border-left-color: {$lightbluetext}; -} - -.phui-object-item-bar-color-grey, -.phui-object-item-bar-color-lightgreytext { - border-left-color: {$lightgreytext}; -} - -.phui-object-item-bar-color-black, -.phui-object-item-bar-color-dark { - border-left-color: {$darkgreytext}; -} - - -/* - Disabled ------------------------------------------------------------------ - - Disabled/inactive objects. - -*/ - - -.phui-object-item.phui-object-item-disabled .phui-object-item-link, -.phui-object-item.phui-object-item-disabled .phui-object-item-link a { - color: {$lightgreytext}; -} - -.phui-object-item.phui-object-item-disabled .phui-object-item-frame { - border-color: #d7d7d7; -} - -.phui-object-item.phui-object-item-disabled .phui-object-item-objname { - color: {$greytext}; - text-decoration: line-through; -} - - -/* - Effects ------------------------------------------------------------------- - - Effects like highlighted items. - -*/ - -.phui-object-item.phui-object-item-highlighted { - background: {$sh-yellowbackground}; -} - -ul.phui-object-item-list-view .phui-object-item-highlighted - .phui-object-item-frame { - border-color: {$sh-yellowborder}; -} - -.phui-object-item-selected { - background: {$sh-bluebackground}; -} - -ul.phui-object-item-list-view .phui-object-item-selected - .phui-object-item-frame { - border-color: {$sh-blueborder}; -} - - -/* - Handle Icons -------------------------------------------------------------- - - Shows owners, reviewers, etc., using profile picture icons. - -*/ - -.phui-object-item-handle-icons { - bottom: 0; - right: 4px; - position: absolute; -} - -.phui-object-item-handle-icon { - width: 24px; - height: 24px; - display: inline-block; - background-size: 100%; - border-radius: 3px; - background-repeat: no-repeat; -} - - -/* - Bylines ------------------------------------------------------------------- - - Shows owners, authors, reviewers, etc., in text. - -*/ - -.phui-object-item-bylines { - padding: 0 4px 0 8px; - margin: 4px 0 8px; - font-size: {$smallerfontsize}; - color: {$greytext}; - text-align: right; -} - -.phui-object-item-byline { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} - -.device-phone .phui-object-item-bylines { - float: none; - text-align: left; - padding: 0 8px; - font-size: {$normalfontsize}; -} - - -/* - Draggable List ------------------------------------------------------------ - - These classes are applied by and/or provided for use with JX.DraggableList. - -*/ - -.drag-ghost { - position: relative; - background: {$sh-indigobackground}; - border-radius: 3px; - margin-bottom: 4px; - border: 1px dashed {$sh-indigoborder}; -} - -.drag-dragging { - opacity: 0.25; -} - -.drag-sending { - opacity: 0.5; -} - -.drag-clone, -.drag-frame { - /* This allows mousewheel events to pass through the clone and frame while - they are being dragged. Without this, the mousewheel does not work during - a drag operation. */ - pointer-events: none; -} - -.drag-frame { - position: fixed; - overflow: hidden; - left: 0; - right: 0; - top: 0; - bottom: 0; -} - -.drag-clone { - position: absolute; - list-style: none; -} - -/* - Badges ---------------------------------------------------------------- */ - -.phui-object-item-col0.phui-object-item-badge { - width: 28px; -} - -.phui-object-item-col0.phui-object-item-badge .phui-icon-view { - left: 0; -} - -/* - Countdowns ------------------------------------------------------------ */ - -.phui-object-item-col0.phui-object-item-countdown { - width: 52px; - padding: 0; -} - -.phui-object-item-countdown .phui-object-item-countdown-number { - border-right: 1px solid {$thinblueborder}; - text-align: center; - color: {$bluetext}; -} - - -/* - Dashboards ------------------------------------------------------------ */ - -.phui-object-box .phui-object-item-list-view .phui-object-item-frame { - border: none; - border-bottom: 1px solid {$thinblueborder}; -} - -.drag-clone.phui-object-item-standard .phui-object-item-frame { - border: none; - opacity: 0.8; - background: {$sh-bluebackground}; -} - -.phui-object-box .phui-object-item-list-header { - font-size: {$normalfontsize}; - color: {$darkbluetext}; - border-top: 1px solid {$thinblueborder}; - border-bottom: 1px solid {$thinblueborder}; - padding: 8px; - background-color: {$lightgreybackground}; -} - -.phui-object-box .phui-header-shell + .phui-object-item-list-view - .phui-object-item-list-header, -.phui-object-box .phui-object-box-hidden-content + .phui-object-item-list-view - .phui-object-item-list-header, -.phui-object-box .phui-object-box-hidden-content + - .phui-object-item-list-header { - border-top: none; - } - -.dashboard-pane .phui-object-item-empty .phui-info-view { - border: none; - margin: 0; -} - -.device-desktop .aphront-multi-column-fluid .aphront-multi-column-2-up - .aphront-multi-column-column-outer.third .phui-object-item-col2 { - display: none; - } - - -/* - Launcher List ---------------------------------------------------------- */ - -.phui-object-item-image-icon { - background: none; - width: 40px; - height: 40px; - margin: 8px 6px; - position: absolute; -} - -.phui-object-item-image-icon .phui-icon-view { - position: absolute; - width: 40px; - height: 40px; - font-size: 26px; - text-align: center; - line-height: 36px; -} - -.phui-object-item-image { - width: 40px; - height: 40px; - border-radius: 3px; - background-size: 100%; - margin: 8px 6px; - position: absolute; -} - -.phui-object-item-with-image-icon .phui-object-item-frame, -.phui-object-item-with-image .phui-object-item-frame { - min-height: 52px; -} - -.phui-object-item-with-image-icon .phui-object-item-content-box, -.phui-object-item-with-image .phui-object-item-content-box { - margin-left: 46px; -} - -/* - Launcher Button -------------------------------------------------------- */ - -.phui-object-item-col2.phui-object-item-launch-button { - text-align: right; - vertical-align: middle; - padding-right: 4px; -} - -.device-phone .phui-object-item-col2.phui-object-item-launch-button { - padding: 0 8px 8px; - text-align: left; -} - -/* - Simple List------------------------------------------------------------- */ - -.phui-object-list-simple .phui-object-item-with-image .phui-object-item-frame { - min-height: 26px; -} - -.phui-object-list-simple .phui-object-item-image { - height: 26px; - width: 26px; - margin: 0; -} - -.phui-object-list-simple .phui-object-item-with-image - .phui-object-item-content-box { - margin-left: 32px; -} - -.phui-object-list-simple .phui-object-item-name { - padding: 2px 0; -} - -.phui-object-list-simple .phui-object-item-name a { - color: {$darkbluetext}; -} - -.phui-object-item-list-view.phui-object-list-simple .phui-object-item-frame { - border: none; - margin-bottom: 4px; -} - -.phui-object-item-list-view.phui-object-list-simple li:last-child - .phui-object-item-frame { - margin: 0; -} - -.phui-object-list-simple .phui-object-item-actions { - top: 2px; - bottom: 2px; - right: 2px; -} - -/* - Big List---------------------------------------------------------------- */ - -.phui-object-list-big ul.phui-object-item-list-view { - margin: 0; - padding: 20px; -} - -.phui-object-list-big .phui-object-item-no-bar .phui-object-item-frame { - border: 0; -} - -.phui-object-list-big .phui-object-item-image-icon { - margin: 8px 2px 12px; -} - -.phui-object-list-big a.phui-object-item-link { - color: #000; - font-size: {$biggestfontsize}; -} - -.phui-object-list-big .phui-object-item-name { - padding-top: 6px; -} - -.phui-object-list-big .phui-object-item-launch-button a.button { - font-size: {$normalfontsize}; - padding: 3px 12px 4px; -} - -.device-desktop .phui-object-list-big .phui-object-item { - margin-bottom: 8px; -} - -.phui-object-list-big .phui-object-item-col0 { - vertical-align: top; - padding: 0; -} - -.phui-object-list-big .phui-object-item-status-icon { - padding: 5px; -} - -.phui-object-list-big .phui-object-item-visited a.phui-object-item-link { - color: {$violet}; -} - -.device-desktop .phui-object-list-big .phui-object-item-frame:hover { - -} diff --git a/webroot/rsrc/css/phui/phui-tag-view.css b/webroot/rsrc/css/phui/phui-tag-view.css index 729c4719e5..f14909bc06 100644 --- a/webroot/rsrc/css/phui/phui-tag-view.css +++ b/webroot/rsrc/css/phui/phui-tag-view.css @@ -145,11 +145,11 @@ a.phui-tag-view:hover margin-top: 4px; } -.phui-object-item .phabricator-handle-tag-list { +.phui-oi .phabricator-handle-tag-list { display: inline; } -.phui-object-item .phabricator-handle-tag-list-item { +.phui-oi .phabricator-handle-tag-list-item { display: inline-block; margin: 0 4px 2px 0; } diff --git a/webroot/rsrc/css/phui/phui-two-column-view.css b/webroot/rsrc/css/phui/phui-two-column-view.css index a486231a63..0020df8b84 100644 --- a/webroot/rsrc/css/phui/phui-two-column-view.css +++ b/webroot/rsrc/css/phui/phui-two-column-view.css @@ -199,7 +199,7 @@ padding: 12px; } -.phui-two-column-view .phui-side-column .phui-object-item-empty +.phui-two-column-view .phui-side-column .phui-oi-empty .phui-info-view { margin-bottom: 0; } diff --git a/webroot/rsrc/css/phui/workboards/phui-workcard.css b/webroot/rsrc/css/phui/workboards/phui-workcard.css index 64792c6915..5af162b4bc 100644 --- a/webroot/rsrc/css/phui/workboards/phui-workcard.css +++ b/webroot/rsrc/css/phui/workboards/phui-workcard.css @@ -2,7 +2,7 @@ * @provides phui-workcard-view-css */ -.phui-workcard.phui-object-item { +.phui-workcard.phui-oi { background-color: #fff; border-radius: 3px; margin-bottom: 8px; @@ -10,22 +10,22 @@ box-sizing: border-box; } -.phui-workcard .phui-object-item-name { +.phui-workcard .phui-oi-name { padding-bottom: 4px; } -.phui-workcard .phui-object-item-content { +.phui-workcard .phui-oi-content { margin-top: 0; } -.phui-workcard .phui-object-item-frame { +.phui-workcard .phui-oi-frame { border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-color: {$thinblueborder}; border-bottom-color: {$lightblueborder}; } -.phui-workcard.phui-object-item .phui-object-item-objname { +.phui-workcard.phui-oi .phui-oi-objname { -webkit-touch-callout: text; -webkit-user-select: text; -khtml-user-select: text; @@ -34,36 +34,36 @@ user-select: text; } -.phui-workcard .phui-object-item-link { +.phui-workcard .phui-oi-link { white-space: normal; font-weight: normal; color: #000; margin-left: 2px; } -.phui-object-item-disabled.phui-workcard { +.phui-oi-disabled.phui-workcard { background-color: rgba({$alphawhite},.67); } -.phui-object-item-disabled.phui-workcard .phui-object-item-link { +.phui-oi-disabled.phui-workcard .phui-oi-link { color: {$greytext}; } -.device-desktop .phui-workcard .phui-object-item-with-1-actions - .phui-object-item-content-box { +.device-desktop .phui-workcard .phui-oi-with-1-actions + .phui-oi-content-box { margin-right: 0; overflow: hidden; } -.phui-workcard .phui-object-item-objname { +.phui-workcard .phui-oi-objname { vertical-align: top; } -.phui-workcard.phui-object-item-grippable .phui-object-item-frame { +.phui-workcard.phui-oi-grippable .phui-oi-frame { padding-left: 0; } -.phui-workcard .phui-object-item-grip { +.phui-workcard .phui-oi-grip { display: none; } @@ -71,28 +71,28 @@ display: none; } -.phui-workcard.phui-object-item .phui-list-item-href { +.phui-workcard.phui-oi .phui-list-item-href { height: 24px; width: 24px; } -.device-desktop .phui-workcard.phui-object-item:hover +.device-desktop .phui-workcard.phui-oi:hover .phui-list-item-href { background: #fff; opacity: .7; } -.device-desktop .phui-workcard.phui-object-item +.device-desktop .phui-workcard.phui-oi .phui-list-item-href:hover { background: {$sh-bluebackground}; opacity: 1; } -.phui-workcard.phui-object-item:hover .phui-list-item-icon { +.phui-workcard.phui-oi:hover .phui-list-item-icon { display: block; } -.phui-workcard .phui-object-item-attributes { +.phui-workcard .phui-oi-attributes { margin-right: 12px; } @@ -100,21 +100,21 @@ margin-bottom: 8px; } -.phui-workcard .phui-object-item-cover-image { +.phui-workcard .phui-oi-cover-image { display: block; padding: 8px 8px 0 8px; width: 263px; } -.phui-workcard.phui-object-item.phui-workcard-upload-target { +.phui-workcard.phui-oi.phui-workcard-upload-target { background-color: {$sh-greenbackground}; } -.phui-object-item-list-view .phui-workcard:last-child { +.phui-oi-list-view .phui-workcard:last-child { margin-bottom: 0; } -.phui-workcard .phui-object-item-attribute-spacer { +.phui-workcard .phui-oi-attribute-spacer { display: none; } @@ -123,54 +123,54 @@ display: inline-block; } -.phui-workcard .phui-object-item-attribute { +.phui-workcard .phui-oi-attribute { display: inline; } /* - Draggable Colors --------------------------------------------------------*/ -.phui-workcard.phui-object-item.drag-clone { +.phui-workcard.phui-oi.drag-clone { box-shadow: {$dropshadow}; background-color: {$sh-greybackground}; } -.phui-workcard.phui-object-item.drag-clone .phui-list-item-href { +.phui-workcard.phui-oi.drag-clone .phui-list-item-href { display: none; } -.phui-workcard.drag-clone.phui-object-item-bar-color-red { +.phui-workcard.drag-clone.phui-oi-bar-color-red { background-color: {$sh-redbackground}; } -.phui-workcard.drag-clone.phui-object-item-bar-color-orange { +.phui-workcard.drag-clone.phui-oi-bar-color-orange { background-color: {$sh-orangebackground}; } -.phui-workcard.drag-clone.phui-object-item-bar-color-yellow { +.phui-workcard.drag-clone.phui-oi-bar-color-yellow { background-color: {$sh-yellowbackground}; } -.phui-workcard.drag-clone.phui-object-item-bar-color-green { +.phui-workcard.drag-clone.phui-oi-bar-color-green { background-color: {$sh-greenbackground}; } -.phui-workcard.drag-clone.phui-object-item-bar-color-blue { +.phui-workcard.drag-clone.phui-oi-bar-color-blue { background-color: {$sh-bluebackground}; } -.phui-workcard.drag-clone.phui-object-item-bar-color-indigo { +.phui-workcard.drag-clone.phui-oi-bar-color-indigo { background-color: {$sh-indigobackground}; } -.phui-workcard.drag-clone.phui-object-item-bar-color-violet { +.phui-workcard.drag-clone.phui-oi-bar-color-violet { background-color: {$sh-violetbackground}; } -.phui-workcard.drag-clone.phui-object-item-bar-color-pink { +.phui-workcard.drag-clone.phui-oi-bar-color-pink { background-color: {$sh-pinkbackground}; } -.phui-workcard.drag-clone.phui-object-item-bar-color-sky { +.phui-workcard.drag-clone.phui-oi-bar-color-sky { background-color: {$sh-bluebackground}; } diff --git a/webroot/rsrc/css/phui/workboards/phui-workpanel.css b/webroot/rsrc/css/phui/workboards/phui-workpanel.css index 899c6f74eb..617ff5aa6d 100644 --- a/webroot/rsrc/css/phui/workboards/phui-workpanel.css +++ b/webroot/rsrc/css/phui/workboards/phui-workpanel.css @@ -83,7 +83,7 @@ width: auto; } -.phui-workpanel-body .phui-object-item-list-view { +.phui-workpanel-body .phui-oi-list-view { min-height: 54px; background-color: transparent; } @@ -115,18 +115,18 @@ border-radius: 4px; } -.project-panel-empty .phui-object-item-list-view { +.project-panel-empty .phui-oi-list-view { background: rgba(234, 230, 247, 0.85); border-radius: 3px; margin-bottom: 4px; border: 1px dashed {$sh-indigoborder}; } -.project-panel-empty .phui-object-item-list-view .drag-ghost { +.project-panel-empty .phui-oi-list-view .drag-ghost { display: none; } -.project-panel-empty .phui-object-item-list-view.drag-target-list { +.project-panel-empty .phui-oi-list-view.drag-target-list { background: rgba({$alphawhite},.7); } diff --git a/webroot/rsrc/js/application/maniphest/behavior-batch-selector.js b/webroot/rsrc/js/application/maniphest/behavior-batch-selector.js index 30a557e268..b7728abb57 100644 --- a/webroot/rsrc/js/application/maniphest/behavior-batch-selector.js +++ b/webroot/rsrc/js/application/maniphest/behavior-batch-selector.js @@ -35,7 +35,7 @@ JX.behavior('maniphest-batch-selector', function(config) { JX.DOM.alterClass( task, - 'phui-object-item-selected', + 'phui-oi-selected', is_selected(task)); update();