From 037793ab607a601a7c73061e0027047564f189f8 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Sat, 12 Nov 2016 20:59:22 -0800 Subject: [PATCH] Update PHUIInfoView Summary: Just some minor UI tweaks. Make AphrontTagView, add Icons, whiten background. Test Plan: Legalpad, Settings, Auth, UIExamples, Differential... desktop, mobile. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D16850 --- resources/celerity/map.php | 10 +- src/__phutil_library_map__.php | 2 +- src/view/form/PHUIInfoView.php | 105 +++++++++++++++----- webroot/rsrc/css/phui/phui-document-pro.css | 2 +- webroot/rsrc/css/phui/phui-info-view.css | 80 ++++++++------- 5 files changed, 128 insertions(+), 71 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 6ce8515cd9..05ead243b9 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' => 'c30f462d', + 'core.pkg.css' => '1bc01ec9', 'core.pkg.js' => '9dc857ed', 'darkconsole.pkg.js' => 'e7393ebb', 'differential.pkg.css' => 'a4ba74b5', @@ -135,7 +135,7 @@ return array( 'rsrc/css/phui/phui-comment-form.css' => '4ecc56ef', 'rsrc/css/phui/phui-crumbs-view.css' => '195ac419', 'rsrc/css/phui/phui-curtain-view.css' => '947bf1a4', - 'rsrc/css/phui/phui-document-pro.css' => 'ca1fed81', + 'rsrc/css/phui/phui-document-pro.css' => 'd4559738', 'rsrc/css/phui/phui-document-summary.css' => '9ca48bdf', 'rsrc/css/phui/phui-document.css' => 'c32e8dec', 'rsrc/css/phui/phui-feed-story.css' => '44a9c8e9', @@ -149,7 +149,7 @@ return array( 'rsrc/css/phui/phui-icon.css' => '417f80fb', '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-info-view.css' => 'ec92802a', 'rsrc/css/phui/phui-invisible-character-view.css' => '6993d9f0', 'rsrc/css/phui/phui-list.css' => '9da2aa00', 'rsrc/css/phui/phui-object-box.css' => '6b487c57', @@ -851,7 +851,7 @@ return array( 'phui-curtain-view-css' => '947bf1a4', 'phui-document-summary-view-css' => '9ca48bdf', 'phui-document-view-css' => 'c32e8dec', - 'phui-document-view-pro-css' => 'ca1fed81', + 'phui-document-view-pro-css' => 'd4559738', 'phui-feed-story-css' => '44a9c8e9', 'phui-font-icon-base-css' => '870a7360', 'phui-fontkit-css' => '9cda225e', @@ -865,7 +865,7 @@ return array( 'phui-icon-view-css' => '417f80fb', 'phui-image-mask-css' => 'a8498f9c', 'phui-info-panel-css' => '27ea50a1', - 'phui-info-view-css' => '28efab79', + 'phui-info-view-css' => 'ec92802a', 'phui-inline-comment-view-css' => '5953c28e', 'phui-invisible-character-view-css' => '6993d9f0', 'phui-list-view-css' => '9da2aa00', diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php index 3a06c89c2b..4b138f4c4f 100644 --- a/src/__phutil_library_map__.php +++ b/src/__phutil_library_map__.php @@ -6436,7 +6436,7 @@ phutil_register_library_map(array( 'PHUIInfoExample' => 'PhabricatorUIExample', 'PHUIInfoPanelExample' => 'PhabricatorUIExample', 'PHUIInfoPanelView' => 'AphrontView', - 'PHUIInfoView' => 'AphrontView', + 'PHUIInfoView' => 'AphrontTagView', 'PHUIInvisibleCharacterTestCase' => 'PhabricatorTestCase', 'PHUIInvisibleCharacterView' => 'AphrontView', 'PHUIListExample' => 'PhabricatorUIExample', diff --git a/src/view/form/PHUIInfoView.php b/src/view/form/PHUIInfoView.php index 92481bc614..de93eeb65f 100644 --- a/src/view/form/PHUIInfoView.php +++ b/src/view/form/PHUIInfoView.php @@ -1,6 +1,6 @@ title = $title; @@ -26,6 +27,11 @@ final class PHUIInfoView extends AphrontView { return $this; } + private function getSeverity() { + $severity = $this->severity ? $this->severity : self::SEVERITY_ERROR; + return $severity; + } + public function setErrors(array $errors) { $this->errors = $errors; return $this; @@ -46,12 +52,66 @@ final class PHUIInfoView extends AphrontView { return $this; } + public function setIcon(PHUIIconView $icon) { + $this->icon = $icon; + return $this; + } + + private function getIcon() { + if ($this->icon) { + return $this->icon; + } + + switch ($this->getSeverity()) { + case self::SEVERITY_ERROR: + $icon = 'fa-exclamation-circle'; + break; + case self::SEVERITY_WARNING: + $icon = 'fa-exclamation-triangle'; + break; + case self::SEVERITY_NOTICE: + $icon = 'fa-info-circle'; + break; + case self::SEVERITY_NODATA: + return null; + break; + case self::SEVERITY_SUCCESS: + $icon = 'fa-check-circle'; + break; + } + + $icon = id(new PHUIIconView()) + ->setIcon($icon) + ->addClass('phui-info-icon'); + return $icon; + } + public function addButton(PHUIButtonView $button) { + $button->setColor(PHUIButtonView::GREY); $this->buttons[] = $button; return $this; } - public function render() { + protected function getTagAttributes() { + $classes = array(); + $classes[] = 'phui-info-view'; + $classes[] = 'phui-info-severity-'.$this->getSeverity(); + $classes[] = 'grouped'; + if ($this->flush) { + $classes[] = 'phui-info-view-flush'; + } + if ($this->getIcon()) { + $classes[] = 'phui-info-has-icon'; + } + + return array( + 'id' => $this->id, + 'class' => implode(' ', $classes), + 'style' => $this->isHidden ? 'display: none;' : null, + ); + } + + protected function getTagContent() { require_celerity_resource('phui-info-view-css'); $errors = $this->errors; @@ -87,17 +147,6 @@ final class PHUIInfoView extends AphrontView { $title = null; } - $this->severity = nonempty($this->severity, self::SEVERITY_ERROR); - - $classes = array(); - $classes[] = 'phui-info-view'; - $classes[] = 'phui-info-severity-'.$this->severity; - $classes[] = 'grouped'; - if ($this->flush) { - $classes[] = 'phui-info-view-flush'; - } - $classes = implode(' ', $classes); - $children = $this->renderChildren(); if ($list) { $children[] = $list; @@ -123,17 +172,21 @@ final class PHUIInfoView extends AphrontView { $this->buttons); } - return phutil_tag( - 'div', - array( - 'id' => $this->id, - 'class' => $classes, - 'style' => $this->isHidden ? 'display: none;' : null, - ), - array( - $buttons, - $title, - $body, - )); + $icon = null; + if ($this->getIcon()) { + $icon = phutil_tag( + 'div', + array( + 'class' => 'phui-info-view-icon', + ), + $this->getIcon()); + } + + return array( + $icon, + $buttons, + $title, + $body, + ); } } diff --git a/webroot/rsrc/css/phui/phui-document-pro.css b/webroot/rsrc/css/phui/phui-document-pro.css index 4d0dfbdefd..de6850a8ec 100644 --- a/webroot/rsrc/css/phui/phui-document-pro.css +++ b/webroot/rsrc/css/phui/phui-document-pro.css @@ -167,7 +167,7 @@ a.button.phui-document-toc { } .phui-document-view-pro .phui-info-view { - margin: 16px 0 0 0; + margin: 16px 0; } .phui-document-view-pro .phabricator-remarkup-embed-image-wide { diff --git a/webroot/rsrc/css/phui/phui-info-view.css b/webroot/rsrc/css/phui/phui-info-view.css index d3b12dd4fe..1642822b77 100644 --- a/webroot/rsrc/css/phui/phui-info-view.css +++ b/webroot/rsrc/css/phui/phui-info-view.css @@ -5,6 +5,7 @@ .phui-info-view { border-style: solid; border-width: 1px; + background: #fff; margin: 16px; padding: 12px; border-radius: 3px; @@ -22,10 +23,19 @@ padding: 0; } +.phui-info-view-icon { + width: 24px; + float: left; +} + .phui-info-view-body { line-height: 1.6em; } +.phui-info-view.phui-info-has-icon .phui-info-view-body { + margin-left: 24px; +} + .phui-info-view-body tt { padding: 0 2px; background-color: rgba({$alphagrey},.1); @@ -48,68 +58,58 @@ h1.phui-info-view-head { font-weight: bold; font-size: {$biggerfontsize}; - line-height: 1.2em; + line-height: 1.3em; } .phui-info-view-list { - margin: 0 0 0 16px; - list-style: disc; - line-height: 1.5em; + margin: 0; + list-style: none; + line-height: 1.6em; } -.phui-info-view .phui-info-view-actions .button:hover { - background: #fff; - box-shadow: none; +.phui-info-view .phui-info-icon { + padding-top: 1px; + font-size: 16px; } -.phui-info-severity-error, -.phui-info-severity-error a.button { - border-color: {$sh-redborder}; - background: {$sh-redbackground}; +.phui-info-severity-error { + border-color: {$red}; + border-left-width: 6px; } -.phui-info-severity-error a.button { - color: {$sh-redtext}; +.phui-info-severity-error .phui-info-icon { + color: {$red}; } -.phui-info-severity-warning, -.phui-info-severity-warning a.button { - border-color: {$sh-yellowborder}; - background: {$sh-yellowbackground}; +.phui-info-severity-warning { + border-color: {$yellow}; + border-left-width: 6px; } -.phui-info-severity-warning a.button { - color: {$sh-yellowtext}; +.phui-info-severity-warning .phui-info-icon { + color: {$yellow}; } -.phui-info-severity-notice, -.phui-info-severity-notice a.button { - border-color: {$sh-blueborder}; - background: {$sh-bluebackground}; +.phui-info-severity-notice { + border-color: {$blue}; + border-left-width: 6px; } -.phui-info-severity-notice a.button { - color: {$sh-bluetext}; +.phui-info-severity-notice .phui-info-icon { + color: {$blue}; } -.phui-info-severity-nodata, -.phui-info-severity-nodata a.button { +.phui-info-severity-nodata { border-color: {$lightgreyborder}; - background: #fff; } -.phui-info-severity-nodata a.button { - color: {$greytext}; +.phui-info-severity-success { + border-color: {$green}; + border-left-width: 6px; } -.phui-info-severity-success, -.phui-info-severity-success a.button { - border-color: {$sh-greenborder}; - background: {$sh-greenbackground}; -} - -.phui-info-severity-success a.button { - color: {$sh-greentext}; +.phui-info-severity-success .phui-info-icon { + color: {$green}; } .aphront-dialog-body .phui-info-view { @@ -123,3 +123,7 @@ h1.phui-info-view-head { .phui-crumbs-view.phui-crumbs-border + .phui-info-view { margin-top: 16px; } + +div.phui-object-box .phui-header-shell + .phui-info-view { + margin: 16px 0 8px; +}