From f379858874a3336dc36cc8b7e77b0d0b698b2fff Mon Sep 17 00:00:00 2001 From: Chad Little Date: Fri, 19 Aug 2016 12:49:38 -0700 Subject: [PATCH] Add setBackground to PHUIIconView Summary: Ref T11132. Adds a background color option to PHUIIconView, for use whereever, and NUX. Also normalize icon placement for mixed image/icon result list. Test Plan: Test in UIExamples, and Global Settings. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T11132 Differential Revision: https://secure.phabricator.com/D16424 --- resources/celerity/map.php | 14 +++---- ...PhabricatorUserPreferencesSearchEngine.php | 7 +++- .../uiexample/examples/PHUIIconExample.php | 22 ++++++++++- src/view/phui/PHUIIconView.php | 10 +++++ webroot/rsrc/css/font/phui-font-icon-base.css | 39 +++++++++++++++++++ webroot/rsrc/css/phui/phui-icon.css | 17 ++++++++ .../css/phui/phui-object-item-list-view.css | 34 +++++----------- 7 files changed, 108 insertions(+), 35 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 413027ffdc..b7c80fbaed 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -7,7 +7,7 @@ */ return array( 'names' => array( - 'core.pkg.css' => 'ba6d7e7a', + 'core.pkg.css' => 'ed7ae7bb', 'core.pkg.js' => 'b562c3db', 'darkconsole.pkg.js' => 'e7393ebb', 'differential.pkg.css' => '3fb7f532', @@ -112,7 +112,7 @@ return array( 'rsrc/css/font/font-aleo.css' => '8bdb2835', 'rsrc/css/font/font-awesome.css' => '2b7ebbcc', 'rsrc/css/font/font-lato.css' => 'c7ccd872', - 'rsrc/css/font/phui-font-icon-base.css' => '6449bce8', + 'rsrc/css/font/phui-font-icon-base.css' => '4e8274c4', 'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82', 'rsrc/css/layout/phabricator-source-code-view.css' => 'cbeef983', 'rsrc/css/phui/calendar/phui-calendar-day.css' => '572b1893', @@ -141,13 +141,13 @@ return array( 'rsrc/css/phui/phui-header-view.css' => '06385974', 'rsrc/css/phui/phui-hovercard.css' => 'de1a2119', 'rsrc/css/phui/phui-icon-set-selector.css' => '1ab67aad', - 'rsrc/css/phui/phui-icon.css' => 'd0534b71', + 'rsrc/css/phui/phui-icon.css' => 'b1dbd620', 'rsrc/css/phui/phui-image-mask.css' => 'a8498f9c', 'rsrc/css/phui/phui-info-panel.css' => '27ea50a1', 'rsrc/css/phui/phui-info-view.css' => '28efab79', 'rsrc/css/phui/phui-list.css' => '9da2aa00', 'rsrc/css/phui/phui-object-box.css' => '6b487c57', - 'rsrc/css/phui/phui-object-item-list-view.css' => 'aefe157c', + 'rsrc/css/phui/phui-object-item-list-view.css' => '40010767', 'rsrc/css/phui/phui-pager.css' => 'bea33d23', 'rsrc/css/phui/phui-pinboard-view.css' => '2495140e', 'rsrc/css/phui/phui-profile-menu.css' => '8a3fc181', @@ -840,7 +840,7 @@ return array( 'phui-document-view-css' => 'c32e8dec', 'phui-document-view-pro-css' => 'dc3d46ed', 'phui-feed-story-css' => 'aa49845d', - 'phui-font-icon-base-css' => '6449bce8', + 'phui-font-icon-base-css' => '4e8274c4', 'phui-fontkit-css' => '9cda225e', 'phui-form-css' => 'aac1d51d', 'phui-form-view-css' => '76b4a46c', @@ -849,14 +849,14 @@ return array( 'phui-hovercard' => '1bd28176', 'phui-hovercard-view-css' => 'de1a2119', 'phui-icon-set-selector-css' => '1ab67aad', - 'phui-icon-view-css' => 'd0534b71', + 'phui-icon-view-css' => 'b1dbd620', 'phui-image-mask-css' => 'a8498f9c', 'phui-info-panel-css' => '27ea50a1', 'phui-info-view-css' => '28efab79', 'phui-inline-comment-view-css' => '5953c28e', 'phui-list-view-css' => '9da2aa00', 'phui-object-box-css' => '6b487c57', - 'phui-object-item-list-view-css' => 'aefe157c', + 'phui-object-item-list-view-css' => '40010767', 'phui-pager-css' => 'bea33d23', 'phui-pinboard-view-css' => '2495140e', 'phui-profile-menu-css' => '8a3fc181', diff --git a/src/applications/settings/query/PhabricatorUserPreferencesSearchEngine.php b/src/applications/settings/query/PhabricatorUserPreferencesSearchEngine.php index dc01a5191b..a677ed0e66 100644 --- a/src/applications/settings/query/PhabricatorUserPreferencesSearchEngine.php +++ b/src/applications/settings/query/PhabricatorUserPreferencesSearchEngine.php @@ -62,11 +62,14 @@ final class PhabricatorUserPreferencesSearchEngine ->setViewer($viewer); foreach ($settings as $setting) { + $icon = id(new PHUIIconView()) + ->setIcon('fa-globe') + ->setBackground('bg-sky'); + $item = id(new PHUIObjectItemView()) ->setHeader($setting->getDisplayName()) ->setHref($setting->getEditURI()) - // TODO: Replace this with NUX Style bg / white icon when built - ->setImageIcon('fa-globe') + ->setImageIcon($icon) ->addAttribute(pht('Edit global default settings for all users.')); $list->addItem($item); diff --git a/src/applications/uiexample/examples/PHUIIconExample.php b/src/applications/uiexample/examples/PHUIIconExample.php index 1db4aa202f..8e01d6e16a 100644 --- a/src/applications/uiexample/examples/PHUIIconExample.php +++ b/src/applications/uiexample/examples/PHUIIconExample.php @@ -130,6 +130,17 @@ final class PHUIIconExample extends PhabricatorUIExample { ->addClass('mmr'); } + $squares = array('fa-briefcase', 'fa-code', 'fa-globe', 'fa-home'); + $squareview = array(); + foreach ($squares as $icon) { + $squareview[] = + id(new PHUIIconView()) + ->setIcon($icon) + ->setBackground('bg-blue') + ->setHref('#') + ->addClass('mmr'); + } + $layout_cicons = id(new PHUIBoxView()) ->appendChild($cicons) ->addMargin(PHUI::MARGIN_LARGE); @@ -155,6 +166,10 @@ final class PHUIIconExample extends PhabricatorUIExample { ->addMargin(PHUI::MARGIN_MEDIUM); $layout5 = id(new PHUIBoxView()) + ->appendChild($squareview) + ->addMargin(PHUI::MARGIN_MEDIUM); + + $layout6 = id(new PHUIBoxView()) ->appendChild($loginview) ->addMargin(PHUI::MARGIN_MEDIUM); @@ -187,9 +202,13 @@ final class PHUIIconExample extends PhabricatorUIExample { ->appendChild($layout4); $wrap5 = id(new PHUIObjectBoxView()) - ->setHeaderText(pht('Authentication')) + ->setHeaderText(pht('Squares')) ->appendChild($layout5); + $wrap6 = id(new PHUIObjectBoxView()) + ->setHeaderText(pht('Authentication')) + ->appendChild($layout6); + return phutil_tag( 'div', array( @@ -202,6 +221,7 @@ final class PHUIIconExample extends PhabricatorUIExample { $wrap3, $wrap4, $wrap5, + $wrap6, )); } } diff --git a/src/view/phui/PHUIIconView.php b/src/view/phui/PHUIIconView.php index af9af313ee..cdc3825135 100644 --- a/src/view/phui/PHUIIconView.php +++ b/src/view/phui/PHUIIconView.php @@ -17,6 +17,7 @@ final class PHUIIconView extends AphrontTagView { private $spriteSheet; private $iconFont; private $iconColor; + private $iconBackground; public function setHref($href) { $this->href = $href; @@ -54,6 +55,11 @@ final class PHUIIconView extends AphrontTagView { return $this; } + public function setBackground($color) { + $this->iconBackground = $color; + return $this; + } + protected function getTagName() { $tag = 'span'; if ($this->href) { @@ -79,6 +85,10 @@ final class PHUIIconView extends AphrontTagView { if ($this->iconColor) { $classes[] = $this->iconColor; } + if ($this->iconBackground) { + $classes[] = 'phui-icon-square'; + $classes[] = $this->iconBackground; + } } else { if ($this->headSize) { $classes[] = $this->headSize; diff --git a/webroot/rsrc/css/font/phui-font-icon-base.css b/webroot/rsrc/css/font/phui-font-icon-base.css index 23194b3bda..a1b0d61d0d 100644 --- a/webroot/rsrc/css/font/phui-font-icon-base.css +++ b/webroot/rsrc/css/font/phui-font-icon-base.css @@ -151,6 +151,45 @@ color: rgba({$alphagrey},0.3); } +/* Backgrounds */ + +.phui-icon-view.bg-dark { + background-color: {$darkgreytext}; +} +.phui-icon-view.bg-bluegrey { + background-color: {$bluetext}; +} +.phui-icon-view.bg-red { + background-color: {$red}; +} +.phui-icon-view.bg-orange { + background-color: {$orange}; +} +.phui-icon-view.bg-yellow { + background-color: {$yellow}; +} +.phui-icon-view.bg-green { + background-color: {$green} +} +.phui-icon-view.bg-blue { + background-color: {$blue}; +} +.phui-icon-view.bg-sky { + background-color: {$sky}; +} +.phui-icon-view.bg-indigo { + background-color: {$indigo}; +} +.phui-icon-view.bg-pink { + background-color: {$pink}; +} +.phui-icon-view.bg-fire { + background-color: {$fire}; +} +.phui-icon-view.bg-violet { + background-color: {$violet}; +} + /* Hovers */ .device-desktop a.phui-icon-view.lightgreytext:hover, diff --git a/webroot/rsrc/css/phui/phui-icon.css b/webroot/rsrc/css/phui/phui-icon.css index aa362034ed..e2124c28b8 100644 --- a/webroot/rsrc/css/phui/phui-icon.css +++ b/webroot/rsrc/css/phui/phui-icon.css @@ -80,3 +80,20 @@ a.phui-icon-circle:hover { a.phui-icon-circle:hover .phui-icon-view { color: {$sky}; } + +/* - Icon in a Square ------------------------------------------------------- */ + +.phui-icon-view.phui-icon-square { + height: 40px; + width: 40px; + color: #fff; + font-size: 26px; + text-align: center; + line-height: 38px; + border-radius: 3px; +} + +a.phui-icon-view.phui-icon-square:hover { + text-decoration: none; + color: #fff; +} diff --git a/webroot/rsrc/css/phui/phui-object-item-list-view.css b/webroot/rsrc/css/phui/phui-object-item-list-view.css index a3e9bccc9c..506ffc7985 100644 --- a/webroot/rsrc/css/phui/phui-object-item-list-view.css +++ b/webroot/rsrc/css/phui/phui-object-item-list-view.css @@ -651,37 +651,19 @@ ul.phui-object-item-list-view .phui-object-item-selected .phui-object-item-image-icon { background: none; - width: 30px; - height: 30px; - margin: 4px 0; + width: 40px; + height: 40px; + margin: 8px 6px; position: absolute; } .phui-object-item-image-icon .phui-icon-view { position: absolute; - width: 24px; - height: 24px; - left: 6px; - top: 10px; - font-size: 24px; + width: 40px; + height: 40px; + font-size: 26px; text-align: center; - vertical-align: bottom; -} - -.phui-object-item-with-image-icon .phui-object-item-frame { - min-height: 48px; -} - -.phui-object-item-with-image-icon .phui-object-item-content-box { - margin-left: 36px; -} - -.device-desktop .phui-object-item-launcher-list .phui-object-item-content { - margin-right: 0; -} - -.device-desktop .phui-object-item-launcher-list .phui-object-icon-pane { - width: auto; + line-height: 36px; } .phui-object-item-image { @@ -693,10 +675,12 @@ ul.phui-object-item-list-view .phui-object-item-selected 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; }