diff --git a/resources/celerity/map.php b/resources/celerity/map.php index d80181cdbb..8f470f2724 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -122,6 +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-box.css' => '7b3a2eed', 'rsrc/css/phui/phui-button.css' => '008ba5e2', 'rsrc/css/phui/phui-crumbs-view.css' => '594d719e', @@ -765,6 +766,7 @@ return array( 'phrequent-css' => 'ffc185ad', 'phriction-document-css' => '7d7f0071', 'phui-action-header-view-css' => '89c497e7', + 'phui-action-panel-css' => '43989d50', 'phui-box-css' => '7b3a2eed', 'phui-button-css' => '008ba5e2', 'phui-calendar-css' => '8675968e', diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php index 9fb262734c..869f386a9c 100644 --- a/src/__phutil_library_map__.php +++ b/src/__phutil_library_map__.php @@ -1122,6 +1122,8 @@ phutil_register_library_map(array( 'PHUI' => 'view/phui/PHUI.php', 'PHUIActionHeaderExample' => 'applications/uiexample/examples/PHUIActionHeaderExample.php', 'PHUIActionHeaderView' => 'view/phui/PHUIActionHeaderView.php', + 'PHUIActionPanelExample' => 'applications/uiexample/examples/PHUIActionPanelExample.php', + 'PHUIActionPanelView' => 'view/phui/PHUIActionPanelView.php', 'PHUIBoxExample' => 'applications/uiexample/examples/PHUIBoxExample.php', 'PHUIBoxView' => 'view/phui/PHUIBoxView.php', 'PHUIButtonBarExample' => 'applications/uiexample/examples/PHUIButtonBarExample.php', @@ -4318,6 +4320,8 @@ phutil_register_library_map(array( 'PHIDQueryConduitAPIMethod' => 'PHIDConduitAPIMethod', 'PHUIActionHeaderExample' => 'PhabricatorUIExample', 'PHUIActionHeaderView' => 'AphrontView', + 'PHUIActionPanelExample' => 'PhabricatorUIExample', + 'PHUIActionPanelView' => 'AphrontTagView', 'PHUIBoxExample' => 'PhabricatorUIExample', 'PHUIBoxView' => 'AphrontTagView', 'PHUIButtonBarExample' => 'PhabricatorUIExample', diff --git a/src/applications/uiexample/examples/PHUIActionPanelExample.php b/src/applications/uiexample/examples/PHUIActionPanelExample.php new file mode 100644 index 0000000000..04dfa223a3 --- /dev/null +++ b/src/applications/uiexample/examples/PHUIActionPanelExample.php @@ -0,0 +1,59 @@ +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); + } +} diff --git a/src/view/phui/PHUIActionPanelView.php b/src/view/phui/PHUIActionPanelView.php new file mode 100644 index 0000000000..d1d0273086 --- /dev/null +++ b/src/view/phui/PHUIActionPanelView.php @@ -0,0 +1,151 @@ +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); + + } + +} diff --git a/webroot/rsrc/css/phui/phui-action-panel.css b/webroot/rsrc/css/phui/phui-action-panel.css new file mode 100644 index 0000000000..668a61b43c --- /dev/null +++ b/webroot/rsrc/css/phui/phui-action-panel.css @@ -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}; +}