mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-30 09:20:58 +01:00
PHUIActionPanelView
Summary: Super duper sized panels for singluar actions. Test Plan: UIExamples, will need more testing in Phacility. {F286098} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Differential Revision: https://secure.phabricator.com/D11709
This commit is contained in:
parent
8c568d88d7
commit
1d05861fb3
5 changed files with 315 additions and 0 deletions
resources/celerity
src
webroot/rsrc/css/phui
|
@ -122,6 +122,7 @@ return array(
|
||||||
'rsrc/css/phui/calendar/phui-calendar.css' => '8675968e',
|
'rsrc/css/phui/calendar/phui-calendar.css' => '8675968e',
|
||||||
'rsrc/css/phui/phui-action-header-view.css' => '89c497e7',
|
'rsrc/css/phui/phui-action-header-view.css' => '89c497e7',
|
||||||
'rsrc/css/phui/phui-action-list.css' => '9ee9910a',
|
'rsrc/css/phui/phui-action-list.css' => '9ee9910a',
|
||||||
|
'rsrc/css/phui/phui-action-panel.css' => '43989d50',
|
||||||
'rsrc/css/phui/phui-box.css' => '7b3a2eed',
|
'rsrc/css/phui/phui-box.css' => '7b3a2eed',
|
||||||
'rsrc/css/phui/phui-button.css' => '008ba5e2',
|
'rsrc/css/phui/phui-button.css' => '008ba5e2',
|
||||||
'rsrc/css/phui/phui-crumbs-view.css' => '594d719e',
|
'rsrc/css/phui/phui-crumbs-view.css' => '594d719e',
|
||||||
|
@ -765,6 +766,7 @@ return array(
|
||||||
'phrequent-css' => 'ffc185ad',
|
'phrequent-css' => 'ffc185ad',
|
||||||
'phriction-document-css' => '7d7f0071',
|
'phriction-document-css' => '7d7f0071',
|
||||||
'phui-action-header-view-css' => '89c497e7',
|
'phui-action-header-view-css' => '89c497e7',
|
||||||
|
'phui-action-panel-css' => '43989d50',
|
||||||
'phui-box-css' => '7b3a2eed',
|
'phui-box-css' => '7b3a2eed',
|
||||||
'phui-button-css' => '008ba5e2',
|
'phui-button-css' => '008ba5e2',
|
||||||
'phui-calendar-css' => '8675968e',
|
'phui-calendar-css' => '8675968e',
|
||||||
|
|
|
@ -1122,6 +1122,8 @@ phutil_register_library_map(array(
|
||||||
'PHUI' => 'view/phui/PHUI.php',
|
'PHUI' => 'view/phui/PHUI.php',
|
||||||
'PHUIActionHeaderExample' => 'applications/uiexample/examples/PHUIActionHeaderExample.php',
|
'PHUIActionHeaderExample' => 'applications/uiexample/examples/PHUIActionHeaderExample.php',
|
||||||
'PHUIActionHeaderView' => 'view/phui/PHUIActionHeaderView.php',
|
'PHUIActionHeaderView' => 'view/phui/PHUIActionHeaderView.php',
|
||||||
|
'PHUIActionPanelExample' => 'applications/uiexample/examples/PHUIActionPanelExample.php',
|
||||||
|
'PHUIActionPanelView' => 'view/phui/PHUIActionPanelView.php',
|
||||||
'PHUIBoxExample' => 'applications/uiexample/examples/PHUIBoxExample.php',
|
'PHUIBoxExample' => 'applications/uiexample/examples/PHUIBoxExample.php',
|
||||||
'PHUIBoxView' => 'view/phui/PHUIBoxView.php',
|
'PHUIBoxView' => 'view/phui/PHUIBoxView.php',
|
||||||
'PHUIButtonBarExample' => 'applications/uiexample/examples/PHUIButtonBarExample.php',
|
'PHUIButtonBarExample' => 'applications/uiexample/examples/PHUIButtonBarExample.php',
|
||||||
|
@ -4318,6 +4320,8 @@ phutil_register_library_map(array(
|
||||||
'PHIDQueryConduitAPIMethod' => 'PHIDConduitAPIMethod',
|
'PHIDQueryConduitAPIMethod' => 'PHIDConduitAPIMethod',
|
||||||
'PHUIActionHeaderExample' => 'PhabricatorUIExample',
|
'PHUIActionHeaderExample' => 'PhabricatorUIExample',
|
||||||
'PHUIActionHeaderView' => 'AphrontView',
|
'PHUIActionHeaderView' => 'AphrontView',
|
||||||
|
'PHUIActionPanelExample' => 'PhabricatorUIExample',
|
||||||
|
'PHUIActionPanelView' => 'AphrontTagView',
|
||||||
'PHUIBoxExample' => 'PhabricatorUIExample',
|
'PHUIBoxExample' => 'PhabricatorUIExample',
|
||||||
'PHUIBoxView' => 'AphrontTagView',
|
'PHUIBoxView' => 'AphrontTagView',
|
||||||
'PHUIButtonBarExample' => 'PhabricatorUIExample',
|
'PHUIButtonBarExample' => 'PhabricatorUIExample',
|
||||||
|
|
|
@ -0,0 +1,59 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
final class PHUIActionPanelExample extends PhabricatorUIExample {
|
||||||
|
|
||||||
|
public function getName() {
|
||||||
|
return 'Action Panel';
|
||||||
|
}
|
||||||
|
|
||||||
|
public function getDescription() {
|
||||||
|
return 'A panel with strong tendencies for inciting ACTION!';
|
||||||
|
}
|
||||||
|
|
||||||
|
public function renderExample() {
|
||||||
|
|
||||||
|
$view = id(new AphrontMultiColumnView())
|
||||||
|
->setFluidLayout(true)
|
||||||
|
->setBorder(true);
|
||||||
|
|
||||||
|
/* Action Panels */
|
||||||
|
$panel1 = id(new PHUIActionPanelView())
|
||||||
|
->setFontIcon('fa-book')
|
||||||
|
->setHeader(pht('Read Documentation'))
|
||||||
|
->setHref('#')
|
||||||
|
->setSubHeader(pht('Reading is a common way to learn about things.'))
|
||||||
|
->setStatus(pht('Carrots help you see better.'))
|
||||||
|
->setState(PHUIActionPanelView::STATE_NONE);
|
||||||
|
$view->addColumn($panel1);
|
||||||
|
|
||||||
|
$panel2 = id(new PHUIActionPanelView())
|
||||||
|
->setFontIcon('fa-server')
|
||||||
|
->setHeader(pht('Launch Instance'))
|
||||||
|
->setHref('#')
|
||||||
|
->setSubHeader(pht('Maybe this is what you\'re likely here for.'))
|
||||||
|
->setStatus(pht('You have no instances.'))
|
||||||
|
->setState(PHUIActionPanelView::STATE_ERROR);
|
||||||
|
$view->addColumn($panel2);
|
||||||
|
|
||||||
|
$panel3 = id(new PHUIActionPanelView())
|
||||||
|
->setFontIcon('fa-group')
|
||||||
|
->setHeader(pht('Code with Friends'))
|
||||||
|
->setHref('#')
|
||||||
|
->setSubHeader(pht('Writing code is much more fun with friends!'))
|
||||||
|
->setStatus(pht('You need more friends.'))
|
||||||
|
->setState(PHUIActionPanelView::STATE_WARN);
|
||||||
|
$view->addColumn($panel3);
|
||||||
|
|
||||||
|
$panel4 = id(new PHUIActionPanelView())
|
||||||
|
->setFontIcon('fa-cloud-download')
|
||||||
|
->setHeader(pht('Download Data'))
|
||||||
|
->setHref('#')
|
||||||
|
->setSubHeader(pht('Need a backup of all your kitten memes?'))
|
||||||
|
->setStatus(pht('Building Download'))
|
||||||
|
->setState(PHUIActionPanelView::STATE_PROGRESS);
|
||||||
|
$view->addColumn($panel4);
|
||||||
|
|
||||||
|
|
||||||
|
return phutil_tag_div('ml', $view);
|
||||||
|
}
|
||||||
|
}
|
151
src/view/phui/PHUIActionPanelView.php
Normal file
151
src/view/phui/PHUIActionPanelView.php
Normal file
|
@ -0,0 +1,151 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
final class PHUIActionPanelView extends AphrontTagView {
|
||||||
|
|
||||||
|
private $href;
|
||||||
|
private $fontIcon;
|
||||||
|
private $header;
|
||||||
|
private $subHeader;
|
||||||
|
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_PROGRESS = 'phui-action-panel-progress';
|
||||||
|
const STATE_NONE = 'phui-action-panel-none';
|
||||||
|
|
||||||
|
public function setHref($href) {
|
||||||
|
$this->href = $href;
|
||||||
|
return $this;
|
||||||
|
}
|
||||||
|
|
||||||
|
public function setFontIcon($image) {
|
||||||
|
$this->fontIcon = $image;
|
||||||
|
return $this;
|
||||||
|
}
|
||||||
|
|
||||||
|
public function setHeader($header) {
|
||||||
|
$this->header = $header;
|
||||||
|
return $this;
|
||||||
|
}
|
||||||
|
|
||||||
|
public function setSubHeader($sub) {
|
||||||
|
$this->subHeader = $sub;
|
||||||
|
return $this;
|
||||||
|
}
|
||||||
|
|
||||||
|
public function setState($state) {
|
||||||
|
$this->state = $state;
|
||||||
|
return $this;
|
||||||
|
}
|
||||||
|
|
||||||
|
public function setStatus($text) {
|
||||||
|
$this->status = $text;
|
||||||
|
return $this;
|
||||||
|
}
|
||||||
|
|
||||||
|
protected function getStateIcon() {
|
||||||
|
$icon = new PHUIIconView();
|
||||||
|
switch ($this->state) {
|
||||||
|
case self::STATE_WARN:
|
||||||
|
$icon->setIconFont('fa-exclamation-circle msr');
|
||||||
|
break;
|
||||||
|
case self::STATE_INFO:
|
||||||
|
$icon->setIconFont('fa-info-circle msr');
|
||||||
|
break;
|
||||||
|
case self::STATE_ERROR:
|
||||||
|
$icon->setIconFont('fa-exclamation-triangle msr');
|
||||||
|
break;
|
||||||
|
case self::STATE_PROGRESS:
|
||||||
|
$icon->setIconFont('fa-refresh ph-spin msr');
|
||||||
|
break;
|
||||||
|
case self::STATE_NONE:
|
||||||
|
$icon->setIconFont('fa-info-circle msr');
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return $icon;
|
||||||
|
}
|
||||||
|
|
||||||
|
protected function getTagAttributes() {
|
||||||
|
require_celerity_resource('phui-action-panel-css');
|
||||||
|
|
||||||
|
$classes = array();
|
||||||
|
$classes[] = 'phui-action-panel';
|
||||||
|
if ($this->state) {
|
||||||
|
$classes[] = $this->state;
|
||||||
|
}
|
||||||
|
|
||||||
|
return array(
|
||||||
|
'class' => implode(' ', $classes),
|
||||||
|
);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
protected function getTagContent() {
|
||||||
|
|
||||||
|
$icon = null;
|
||||||
|
if ($this->fontIcon) {
|
||||||
|
$fonticon = id(new PHUIIconView())
|
||||||
|
->setIconFont($this->fontIcon);
|
||||||
|
if ($this->href) {
|
||||||
|
$fonticon = phutil_tag(
|
||||||
|
'a',
|
||||||
|
array(
|
||||||
|
'href' => $this->href,
|
||||||
|
),
|
||||||
|
$fonticon);
|
||||||
|
}
|
||||||
|
$icon = phutil_tag(
|
||||||
|
'div',
|
||||||
|
array(
|
||||||
|
'class' => 'phui-action-panel-icon',
|
||||||
|
),
|
||||||
|
$fonticon);
|
||||||
|
}
|
||||||
|
|
||||||
|
$header = null;
|
||||||
|
if ($this->header) {
|
||||||
|
$header = $this->header;
|
||||||
|
if ($this->href) {
|
||||||
|
$header = phutil_tag(
|
||||||
|
'a',
|
||||||
|
array(
|
||||||
|
'href' => $this->href,
|
||||||
|
),
|
||||||
|
$this->header);
|
||||||
|
}
|
||||||
|
$header = phutil_tag(
|
||||||
|
'div',
|
||||||
|
array(
|
||||||
|
'class' => 'phui-action-panel-header',
|
||||||
|
),
|
||||||
|
$header);
|
||||||
|
}
|
||||||
|
|
||||||
|
$subheader = null;
|
||||||
|
if ($this->subHeader) {
|
||||||
|
$subheader = phutil_tag(
|
||||||
|
'div',
|
||||||
|
array(
|
||||||
|
'class' => 'phui-action-panel-subheader',
|
||||||
|
),
|
||||||
|
$this->subHeader);
|
||||||
|
}
|
||||||
|
|
||||||
|
$status = null;
|
||||||
|
if ($this->status && $this->state) {
|
||||||
|
$state_icon = $this->getStateIcon();
|
||||||
|
$status = phutil_tag(
|
||||||
|
'div',
|
||||||
|
array(
|
||||||
|
'class' => 'phui-action-panel-status',
|
||||||
|
),
|
||||||
|
array($state_icon, $this->status));
|
||||||
|
}
|
||||||
|
|
||||||
|
return array($icon, $header, $subheader, $status);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
99
webroot/rsrc/css/phui/phui-action-panel.css
Normal file
99
webroot/rsrc/css/phui/phui-action-panel.css
Normal file
|
@ -0,0 +1,99 @@
|
||||||
|
/**
|
||||||
|
* @provides phui-action-panel-css
|
||||||
|
*/
|
||||||
|
|
||||||
|
.phui-action-panel {
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phui-action-panel-icon {
|
||||||
|
height: 128px;
|
||||||
|
line-height: 160px;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phui-action-panel-icon a:hover .phui-icon-view {
|
||||||
|
color: {$blue};
|
||||||
|
}
|
||||||
|
|
||||||
|
.phui-action-panel-icon .phui-icon-view {
|
||||||
|
font-size: 64px;
|
||||||
|
color: {$lightgreytext};
|
||||||
|
}
|
||||||
|
|
||||||
|
.phui-action-panel-header {
|
||||||
|
padding: 0 8px 4px 8px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14px;
|
||||||
|
color: {$darkbluetext};
|
||||||
|
}
|
||||||
|
|
||||||
|
.phui-action-panel-header a {
|
||||||
|
color: {$blue};
|
||||||
|
}
|
||||||
|
|
||||||
|
.phui-action-panel-subheader {
|
||||||
|
padding: 0 8px 4px 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: {$bluetext};
|
||||||
|
}
|
||||||
|
|
||||||
|
.phui-action-panel-status {
|
||||||
|
padding: 8px 12px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phui-action-panel-none .phui-action-panel-status {
|
||||||
|
background-color: {$lightgreybackground};
|
||||||
|
border-left: 4px solid {$greyborder};
|
||||||
|
color: {$greytext};
|
||||||
|
}
|
||||||
|
|
||||||
|
.phui-action-panel-warn .phui-action-panel-status .phui-icon-view {
|
||||||
|
color: {$greytext};
|
||||||
|
}
|
||||||
|
|
||||||
|
.phui-action-panel-warn .phui-action-panel-status {
|
||||||
|
background-color: {$lightyellow};
|
||||||
|
border-left: 4px solid #bc7837;
|
||||||
|
color: #bc7837;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phui-action-panel-warn .phui-action-panel-status .phui-icon-view {
|
||||||
|
color: #bc7837;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phui-action-panel-error .phui-action-panel-status {
|
||||||
|
background-color: {$lightred};
|
||||||
|
border-left: 4px solid {$red};
|
||||||
|
color: {$red};
|
||||||
|
}
|
||||||
|
|
||||||
|
.phui-action-panel-error .phui-action-panel-status .phui-icon-view {
|
||||||
|
color: {$red};
|
||||||
|
}
|
||||||
|
|
||||||
|
.phui-action-panel-info .phui-action-panel-status {
|
||||||
|
background-color: {$lightblue};
|
||||||
|
border-left: 4px solid {$blue};
|
||||||
|
color: {$blue};
|
||||||
|
}
|
||||||
|
|
||||||
|
.phui-action-panel-info .phui-action-panel-status .phui-icon-view {
|
||||||
|
color: {$blue};
|
||||||
|
}
|
||||||
|
|
||||||
|
.phui-action-panel-progress .phui-action-panel-status {
|
||||||
|
background-color: {$lightblue};
|
||||||
|
color: {$blue};
|
||||||
|
border-left: 4px solid {$blue};
|
||||||
|
}
|
||||||
|
|
||||||
|
.phui-action-panel-progress .phui-action-panel-status .phui-icon-view {
|
||||||
|
color: {$blue};
|
||||||
|
}
|
Loading…
Reference in a new issue