1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-09-19 16:58:48 +02:00

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
This commit is contained in:
Chad Little 2016-11-12 20:59:22 -08:00
parent 558d194302
commit 037793ab60
5 changed files with 128 additions and 71 deletions

View file

@ -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',

View file

@ -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',

View file

@ -1,6 +1,6 @@
<?php
final class PHUIInfoView extends AphrontView {
final class PHUIInfoView extends AphrontTagView {
const SEVERITY_ERROR = 'error';
const SEVERITY_WARNING = 'warning';
@ -10,11 +10,12 @@ final class PHUIInfoView extends AphrontView {
private $title;
private $errors;
private $severity;
private $severity = null;
private $id;
private $buttons = array();
private $isHidden;
private $flush;
private $icon;
public function setTitle($title) {
$this->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,
);
}
}

View file

@ -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 {

View file

@ -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;
}