From 7d4ec48a0ed1e39df7fa70b58a4654a790e64559 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Mon, 23 Feb 2015 11:03:09 -0800 Subject: [PATCH] Add SUCCESS state and buttons to PHUIErrorView Summary: I'm looking at beefing up PHUIErrorView for additional use cases as I remove some older AphrontViews. This will likely morph into PHUIInfoView and be a more lightweight version of PHUIObjectBox. Test Plan: UIExamples, mobile and desktop layouts. Have actual use cases coming in next diffs (may tweak design more then) {F311943} Reviewers: epriestley, btrahan Reviewed By: btrahan Subscribers: Korvin, epriestley Differential Revision: https://secure.phabricator.com/D11849 --- resources/celerity/map.php | 6 +- .../uiexample/examples/PHUIErrorExample.php | 7 +++ src/view/form/PHUIErrorView.php | 19 +++++++ webroot/rsrc/css/phui/phui-error-view.css | 56 +++++++++++++++++-- 4 files changed, 80 insertions(+), 8 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index f7c9e478e4..ff588a7075 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -7,7 +7,7 @@ */ return array( 'names' => array( - 'core.pkg.css' => '4efed816', + 'core.pkg.css' => 'ef45fe3b', 'core.pkg.js' => '23d653bb', 'darkconsole.pkg.js' => '8ab24e01', 'differential.pkg.css' => '380f07e5', @@ -127,7 +127,7 @@ return array( 'rsrc/css/phui/phui-button.css' => 'ffe12633', 'rsrc/css/phui/phui-crumbs-view.css' => '594d719e', 'rsrc/css/phui/phui-document.css' => '8240b0b1', - 'rsrc/css/phui/phui-error-view.css' => 'ad042fdd', + 'rsrc/css/phui/phui-error-view.css' => '41518665', 'rsrc/css/phui/phui-feed-story.css' => 'c9f3a0b5', 'rsrc/css/phui/phui-fontkit.css' => '9b345998', 'rsrc/css/phui/phui-form-view.css' => '8b78a986', @@ -780,7 +780,7 @@ return array( 'phui-calendar-month-css' => 'a92e47d2', 'phui-crumbs-view-css' => '594d719e', 'phui-document-view-css' => '8240b0b1', - 'phui-error-view-css' => 'ad042fdd', + 'phui-error-view-css' => '41518665', 'phui-feed-story-css' => 'c9f3a0b5', 'phui-font-icon-base-css' => '3dad2ae3', 'phui-fontkit-css' => '9b345998', diff --git a/src/applications/uiexample/examples/PHUIErrorExample.php b/src/applications/uiexample/examples/PHUIErrorExample.php index 72d4c3bbe0..58e307fbde 100644 --- a/src/applications/uiexample/examples/PHUIErrorExample.php +++ b/src/applications/uiexample/examples/PHUIErrorExample.php @@ -20,8 +20,14 @@ final class PHUIErrorExample extends PhabricatorUIExample { PHUIErrorView::SEVERITY_WARNING => 'Warning', PHUIErrorView::SEVERITY_NOTICE => 'Notice', PHUIErrorView::SEVERITY_NODATA => 'No Data', + PHUIErrorView::SEVERITY_SUCCESS => 'Success', ); + $button = id(new PHUIButtonView()) + ->setTag('a') + ->setText('Resolve Issue') + ->addClass('grey'); + $views = array(); // Only Title foreach ($sevs as $sev => $title) { @@ -35,6 +41,7 @@ final class PHUIErrorExample extends PhabricatorUIExample { $view = new PHUIErrorView(); $view->setSeverity($sev); $view->appendChild('Several issues were encountered.'); + $view->addButton($button); $views[] = $view; } // Only Errors diff --git a/src/view/form/PHUIErrorView.php b/src/view/form/PHUIErrorView.php index b8a29941a0..bb6771e050 100644 --- a/src/view/form/PHUIErrorView.php +++ b/src/view/form/PHUIErrorView.php @@ -6,11 +6,13 @@ final class PHUIErrorView extends AphrontView { const SEVERITY_WARNING = 'warning'; const SEVERITY_NOTICE = 'notice'; const SEVERITY_NODATA = 'nodata'; + const SEVERITY_SUCCESS = 'success'; private $title; private $errors; private $severity; private $id; + private $buttons = array(); public function setTitle($title) { $this->title = $title; @@ -32,6 +34,11 @@ final class PHUIErrorView extends AphrontView { return $this; } + public function addButton($button) { + $this->buttons[] = $button; + return $this; + } + final public function render() { require_celerity_resource('phui-error-view-css'); @@ -72,6 +79,7 @@ final class PHUIErrorView extends AphrontView { $classes = array(); $classes[] = 'phui-error-view'; $classes[] = 'phui-error-severity-'.$this->severity; + $classes[] = 'grouped'; $classes = implode(' ', $classes); $children = $this->renderChildren(); @@ -89,6 +97,16 @@ final class PHUIErrorView extends AphrontView { $children); } + $buttons = null; + if (!empty($this->buttons)) { + $buttons = phutil_tag( + 'div', + array( + 'class' => 'phui-error-view-actions', + ), + $this->buttons); + } + return phutil_tag( 'div', array( @@ -96,6 +114,7 @@ final class PHUIErrorView extends AphrontView { 'class' => $classes, ), array( + $buttons, $title, $body, )); diff --git a/webroot/rsrc/css/phui/phui-error-view.css b/webroot/rsrc/css/phui/phui-error-view.css index 44b8c6dc05..cf4e436b98 100644 --- a/webroot/rsrc/css/phui/phui-error-view.css +++ b/webroot/rsrc/css/phui/phui-error-view.css @@ -24,6 +24,12 @@ line-height: 1.45em; } +.phui-error-view-actions { + margin-top: -3px; + margin-bottom: -4px; + float: right; +} + .phui-error-view-head + .phui-error-view-body { padding-top: 4px; } @@ -44,24 +50,59 @@ h1.phui-error-view-head { line-height: 1.5em; } -.phui-error-severity-error { +.phui-error-view .phui-error-view-actions .button:hover { + background: #fff; + box-shadow: none; +} + +.phui-error-severity-error, +.phui-error-severity-error .button { border-color: {$red}; background: {$lightred}; } -.phui-error-severity-warning { +.phui-error-severity-error .button { + color: {$red}; +} + +.phui-error-severity-warning, +.phui-error-severity-warning .button { border-color: {$yellow}; background: {$lightyellow}; } -.phui-error-severity-notice { +.phui-error-severity-warning .button { + color: #bc7837; +} + +.phui-error-severity-notice, +.phui-error-severity-notice .button { border-color: {$blue}; background: {$lightblue}; } -.phui-error-severity-nodata { +.phui-error-severity-notice .button { + color: {$blue}; +} + +.phui-error-severity-nodata, +.phui-error-severity-nodata .button { border-color: {$lightgreyborder}; - background-color: #fff; + background: #fff; +} + +.phui-error-severity-nodata .button { + color: {$greytext}; +} + +.phui-error-severity-success, +.phui-error-severity-success .button { + border-color: {$green}; + background: {$lightgreen}; +} + +.phui-error-severity-success .button { + color: {$green}; } .legalpad .phui-error-view { @@ -96,6 +137,11 @@ h1.phui-error-view-head { color: {$blue}; } +.phui-object-box .phui-error-severity-success, +.aphront-dialog-body .phui-error-severity-success { + color: {$green}; +} + .phui-crumbs-view + .phui-error-view { margin-top: 0; }