From fce178caf22f63e1cf85b36613a9e35707c833da Mon Sep 17 00:00:00 2001 From: Chad Little <chad@chadsdomain.com> Date: Mon, 9 Feb 2015 07:27:54 -0800 Subject: [PATCH] Add bigtext option to PHUIActionPanelView Summary: Adds option for setting large text instead of icons. Adds success state. Test Plan: Built some more examples. {F286388} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Differential Revision: https://secure.phabricator.com/D11710 --- resources/celerity/map.php | 4 +- .../examples/PHUIActionPanelExample.php | 42 ++++++++++++++++++- src/view/phui/PHUIActionPanelView.php | 27 ++++++++++-- webroot/rsrc/css/phui/phui-action-panel.css | 27 +++++++++++- 4 files changed, 92 insertions(+), 8 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 8f470f2724..a00bd5e087 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -122,7 +122,7 @@ return array( 'rsrc/css/phui/calendar/phui-calendar.css' => '8675968e', 'rsrc/css/phui/phui-action-header-view.css' => '89c497e7', 'rsrc/css/phui/phui-action-list.css' => '9ee9910a', - 'rsrc/css/phui/phui-action-panel.css' => '43989d50', + 'rsrc/css/phui/phui-action-panel.css' => '4bcb288d', 'rsrc/css/phui/phui-box.css' => '7b3a2eed', 'rsrc/css/phui/phui-button.css' => '008ba5e2', 'rsrc/css/phui/phui-crumbs-view.css' => '594d719e', @@ -766,7 +766,7 @@ return array( 'phrequent-css' => 'ffc185ad', 'phriction-document-css' => '7d7f0071', 'phui-action-header-view-css' => '89c497e7', - 'phui-action-panel-css' => '43989d50', + 'phui-action-panel-css' => '4bcb288d', 'phui-box-css' => '7b3a2eed', 'phui-button-css' => '008ba5e2', 'phui-calendar-css' => '8675968e', diff --git a/src/applications/uiexample/examples/PHUIActionPanelExample.php b/src/applications/uiexample/examples/PHUIActionPanelExample.php index 04dfa223a3..229cfec4be 100644 --- a/src/applications/uiexample/examples/PHUIActionPanelExample.php +++ b/src/applications/uiexample/examples/PHUIActionPanelExample.php @@ -53,7 +53,47 @@ final class PHUIActionPanelExample extends PhabricatorUIExample { ->setState(PHUIActionPanelView::STATE_PROGRESS); $view->addColumn($panel4); + $view2 = id(new AphrontMultiColumnView()) + ->setFluidLayout(true) + ->setBorder(true); - return phutil_tag_div('ml', $view); + /* Action Panels */ + $panel1 = id(new PHUIActionPanelView()) + ->setFontIcon('fa-credit-card') + ->setHeader(pht('Account Balance')) + ->setHref('#') + ->setSubHeader(pht('You were last billed $2,245.12 on Dec 12, 2014.')) + ->setStatus(pht('Account in good standing.')) + ->setState(PHUIActionPanelView::STATE_SUCCESS); + $view2->addColumn($panel1); + + $panel2 = id(new PHUIActionPanelView()) + ->setBigText('148') + ->setHeader(pht('Instance Users')) + ->setHref('#') + ->setSubHeader( + pht('You currently have 140 active and 8 inactive accounts')); + $view2->addColumn($panel2); + + $panel3 = id(new PHUIActionPanelView()) + ->setBigText('March 12') + ->setHeader(pht('Next Maintenance Window')) + ->setHref('#') + ->setSubHeader( + pht('At 6:00 am PST, Phacility will conduct weekly maintenence.')) + ->setStatus(pht('Very Important!')) + ->setState(PHUIActionPanelView::STATE_ERROR); + $view2->addColumn($panel3); + + $panel4 = id(new PHUIActionPanelView()) + ->setBigText('1,113,377') + ->setHeader(pht('Lines of Code')) + ->setHref('#') + ->setSubHeader(pht('Your team has reviewed lots of code!')); + $view2->addColumn($panel4); + + $view = phutil_tag_div('mlb', $view); + + return phutil_tag_div('ml', array($view, $view2)); } } diff --git a/src/view/phui/PHUIActionPanelView.php b/src/view/phui/PHUIActionPanelView.php index d1d0273086..822352e05e 100644 --- a/src/view/phui/PHUIActionPanelView.php +++ b/src/view/phui/PHUIActionPanelView.php @@ -6,12 +6,14 @@ final class PHUIActionPanelView extends AphrontTagView { private $fontIcon; private $header; private $subHeader; + private $bigText; private $state; private $status; const STATE_WARN = 'phui-action-panel-warn'; const STATE_INFO = 'phui-action-panel-info'; const STATE_ERROR = 'phui-action-panel-error'; + const STATE_SUCCESS = 'phui-action-panel-success'; const STATE_PROGRESS = 'phui-action-panel-progress'; const STATE_NONE = 'phui-action-panel-none'; @@ -25,6 +27,11 @@ final class PHUIActionPanelView extends AphrontTagView { return $this; } + public function setBigText($text) { + $this->bigText = $text; + return $this; + } + public function setHeader($header) { $this->header = $header; return $this; @@ -60,8 +67,11 @@ final class PHUIActionPanelView extends AphrontTagView { case self::STATE_PROGRESS: $icon->setIconFont('fa-refresh ph-spin msr'); break; + case self::STATE_SUCCESS: + $icon->setIconFont('fa-check msr'); + break; case self::STATE_NONE: - $icon->setIconFont('fa-info-circle msr'); + return null; break; } return $icon; @@ -85,9 +95,18 @@ final class PHUIActionPanelView extends AphrontTagView { protected function getTagContent() { $icon = null; - if ($this->fontIcon) { - $fonticon = id(new PHUIIconView()) - ->setIconFont($this->fontIcon); + if ($this->fontIcon || $this->bigText) { + if ($this->fontIcon) { + $fonticon = id(new PHUIIconView()) + ->setIconFont($this->fontIcon); + } else { + $fonticon = phutil_tag( + 'span', + array( + 'class' => 'phui-action-panel-bigtext', + ), + $this->bigText); + } if ($this->href) { $fonticon = phutil_tag( 'a', diff --git a/webroot/rsrc/css/phui/phui-action-panel.css b/webroot/rsrc/css/phui/phui-action-panel.css index 668a61b43c..e3f18be7bf 100644 --- a/webroot/rsrc/css/phui/phui-action-panel.css +++ b/webroot/rsrc/css/phui/phui-action-panel.css @@ -14,10 +14,25 @@ vertical-align: bottom; } -.phui-action-panel-icon a:hover .phui-icon-view { +.phui-action-panel-bigtext { + font-size: 40px; + color: {$lightgreytext}; + line-height: 96px; +} + +.phui-action-panel-icon a { + display: block; +} + +.phui-action-panel-icon a:hover .phui-icon-view, +.phui-action-panel-icon a:hover .phui-action-panel-bigtext { color: {$blue}; } +.phui-action-panel-icon a:hover { + text-decoration: none; +} + .phui-action-panel-icon .phui-icon-view { font-size: 64px; color: {$lightgreytext}; @@ -88,6 +103,16 @@ color: {$blue}; } +.phui-action-panel-success .phui-action-panel-status { + background-color: {$lightgreen}; + color: {$green}; + border-left: 4px solid {$green}; +} + +.phui-action-panel-success .phui-action-panel-status .phui-icon-view { + color: {$green}; +} + .phui-action-panel-progress .phui-action-panel-status { background-color: {$lightblue}; color: {$blue};