diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 8875583e99..cb7a908fcb 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -121,7 +121,7 @@ return array( 'rsrc/css/phui/calendar/phui-calendar-month.css' => '476be7e0', 'rsrc/css/phui/calendar/phui-calendar.css' => 'ccabe893', 'rsrc/css/phui/phui-action-list.css' => 'c5eba19d', - 'rsrc/css/phui/phui-action-panel.css' => '3ee9afd5', + 'rsrc/css/phui/phui-action-panel.css' => '714a6c2f', 'rsrc/css/phui/phui-badge.css' => 'f25c3476', 'rsrc/css/phui/phui-box.css' => 'a5bb366d', 'rsrc/css/phui/phui-button.css' => '16020a60', @@ -764,7 +764,7 @@ return array( 'phortune-css' => '9149f103', 'phrequent-css' => 'ffc185ad', 'phriction-document-css' => 'd1861e06', - 'phui-action-panel-css' => '3ee9afd5', + 'phui-action-panel-css' => '714a6c2f', 'phui-badge-view-css' => 'f25c3476', 'phui-box-css' => 'a5bb366d', 'phui-button-css' => '16020a60', diff --git a/src/applications/uiexample/examples/PHUIActionPanelExample.php b/src/applications/uiexample/examples/PHUIActionPanelExample.php index cbffbf6124..ef27eacae7 100644 --- a/src/applications/uiexample/examples/PHUIActionPanelExample.php +++ b/src/applications/uiexample/examples/PHUIActionPanelExample.php @@ -13,8 +13,7 @@ final class PHUIActionPanelExample extends PhabricatorUIExample { public function renderExample() { $view = id(new AphrontMultiColumnView()) - ->setFluidLayout(true) - ->setBorder(true); + ->setFluidLayout(true); /* Action Panels */ $panel1 = id(new PHUIActionPanelView()) @@ -22,8 +21,7 @@ final class PHUIActionPanelExample extends PhabricatorUIExample { ->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); + ->setState(PHUIActionPanelView::STATE_INFO); $view->addColumn($panel1); $panel2 = id(new PHUIActionPanelView()) @@ -31,7 +29,6 @@ final class PHUIActionPanelExample extends PhabricatorUIExample { ->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); @@ -40,7 +37,6 @@ final class PHUIActionPanelExample extends PhabricatorUIExample { ->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); @@ -49,13 +45,11 @@ final class PHUIActionPanelExample extends PhabricatorUIExample { ->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); $view2 = id(new AphrontMultiColumnView()) - ->setFluidLayout(true) - ->setBorder(true); + ->setFluidLayout(true); /* Action Panels */ $panel1 = id(new PHUIActionPanelView()) @@ -63,33 +57,31 @@ final class PHUIActionPanelExample extends PhabricatorUIExample { ->setHeader(pht('Account Balance')) ->setHref('#') ->setSubHeader(pht('You were last billed $2,245.12 on Dec 12, 2014.')) - ->setStatus(pht('Account in good standing.')) ->setState(PHUIActionPanelView::STATE_SUCCESS); $view2->addColumn($panel1); $panel2 = id(new PHUIActionPanelView()) - ->setBigText('148') + ->setBigText(true) ->setHeader(pht('Instance Users')) ->setHref('#') ->setSubHeader( - pht('You currently have 140 active and 8 inactive accounts')); + pht('148')); $view2->addColumn($panel2); $panel3 = id(new PHUIActionPanelView()) - ->setBigText('March 12') + ->setBigText(true) ->setHeader(pht('Next Maintenance Window')) ->setHref('#') ->setSubHeader( - pht('At 6:00 am PST, Phacility will conduct weekly maintenence.')) - ->setStatus(pht('Very Important!')) + pht('March 12')) ->setState(PHUIActionPanelView::STATE_ERROR); $view2->addColumn($panel3); $panel4 = id(new PHUIActionPanelView()) - ->setBigText('1,113,377') + ->setBigText(true) ->setHeader(pht('Lines of Code')) ->setHref('#') - ->setSubHeader(pht('Your team has reviewed lots of code!')); + ->setSubHeader(pht('1,113,377')); $view2->addColumn($panel4); $view = phutil_tag_div('mlb', $view); diff --git a/src/view/phui/PHUIActionPanelView.php b/src/view/phui/PHUIActionPanelView.php index ad260f2037..c798ae855f 100644 --- a/src/view/phui/PHUIActionPanelView.php +++ b/src/view/phui/PHUIActionPanelView.php @@ -52,29 +52,8 @@ final class PHUIActionPanelView extends AphrontTagView { 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_SUCCESS: - $icon->setIconFont('fa-check msr'); - break; - case self::STATE_NONE: - return null; - break; - } - return $icon; + protected function getTagName() { + return 'div'; } protected function getTagAttributes() { @@ -82,43 +61,26 @@ final class PHUIActionPanelView extends AphrontTagView { $classes = array(); $classes[] = 'phui-action-panel'; - if ($this->status) { - $classes[] = 'phui-action-panel-has-status'; + if ($this->state) { $classes[] = $this->state; - + } + if ($this->bigText) { + $classes[] = 'phui-action-panel-bigtext'; } return array( 'class' => implode(' ', $classes), ); - } protected function getTagContent() { $icon = null; - if ($this->fontIcon || $this->bigText) { - if ($this->fontIcon) { - $fonticon = id(new PHUIIconView()) - ->setIconFont($this->fontIcon); - } else { - $fonticon = phutil_tag( - 'span', - array( - 'class' => 'phui-action-panel-bigtext', - ), - $this->bigText); - } - if ($this->href) { - $fonticon = phutil_tag( - 'a', - array( - 'href' => $this->href, - ), - $fonticon); - } + if ($this->fontIcon) { + $fonticon = id(new PHUIIconView()) + ->setIconFont($this->fontIcon); $icon = phutil_tag( - 'div', + 'span', array( 'class' => 'phui-action-panel-icon', ), @@ -147,26 +109,39 @@ final class PHUIActionPanelView extends AphrontTagView { $subheader = null; if ($this->subHeader) { $subheader = phutil_tag( - 'div', + 'span', array( 'class' => 'phui-action-panel-subheader', ), $this->subHeader); } - $status = null; - if ($this->status && $this->state) { - $state_icon = $this->getStateIcon(); - $status = phutil_tag( - ($this->href) ? 'a' : 'div', - array( - 'class' => 'phui-action-panel-status', - 'href' => ($this->href) ? $this->href : null, - ), - array($state_icon, $this->status)); - } + $row = phutil_tag( + 'span', + array( + 'class' => 'phui-action-panel-row', + ), + array( + $icon, + $subheader, + )); - return array($icon, $header, $subheader, $status); + $table = phutil_tag( + 'span', + array( + 'class' => 'phui-action-panel-table', + ), + $row); + + $content = phutil_tag( + 'a', + array( + 'href' => $this->href, + 'class' => 'phui-action-panel-hitarea', + ), + $table); + + return array($header, $content); } diff --git a/webroot/rsrc/css/phui/phui-action-panel.css b/webroot/rsrc/css/phui/phui-action-panel.css index 0c9aa2c838..4569e1077b 100644 --- a/webroot/rsrc/css/phui/phui-action-panel.css +++ b/webroot/rsrc/css/phui/phui-action-panel.css @@ -4,23 +4,39 @@ .phui-action-panel { position: relative; + background-color: {$lightbluebackground}; + border: 1px solid {$lightgreyborder}; + border-radius: 3px; + margin: 0 8px; + min-height: 108px; } -.phui-action-panel-has-status.phui-action-panel { - padding-bottom: 44px; +.phui-action-panel-hitarea { + display: block; +} + +.phui-action-panel-table { + display: table; + height: 80px; + width: 100%; +} + +.phui-action-panel-row { + display: table-row; } .phui-action-panel-icon { - height: 128px; - line-height: 160px; + width: 64px; text-align: center; - vertical-align: bottom; + vertical-align: middle; + display: table-cell; } -.phui-action-panel-bigtext { - font-size: 40px; - color: {$lightgreytext}; - line-height: 96px; +.phui-action-panel-bigtext .phui-action-panel-subheader { + font-size: 28px; + color: {$darkbluetext}; + text-align: center; + padding: 0 8px; } .phui-action-panel-icon a { @@ -37,25 +53,28 @@ } .phui-action-panel-icon .phui-icon-view { - font-size: 64px; - color: {$lightgreytext}; + font-size: 36px; + color: {$lightbluetext}; } .phui-action-panel-header { - padding: 0 8px 4px 8px; - font-weight: bold; - font-size: {$biggerfontsize}; - color: {$darkbluetext}; + padding: 8px; + border-bottom: 1px solid {$thinblueborder}; } .phui-action-panel-header a { - color: {$blue}; + color: {$darkbluetext}; } .phui-action-panel-subheader { - padding: 0 8px 4px 8px; - font-size: {$normalfontsize}; - color: {$bluetext}; + display: table-cell; + vertical-align: middle; + color: {$darkbluetext}; + padding: 0 8px 0 0; +} + +.phui-action-panel-subheader a { + text-decoraction: none; } .phui-action-panel-status { @@ -80,52 +99,67 @@ color: {$greytext}; } -.phui-action-panel-warn .phui-action-panel-status { - background-color: {$lightyellow}; - border-left: 4px solid #bc7837; - color: #bc7837; +.phui-action-panel-warn { + background-color: {$sh-yellowbackground}; + border-color: {$sh-yellowborder}; } -.phui-action-panel-warn .phui-action-panel-status .phui-icon-view { - color: #bc7837; +.phui-action-panel-warn .phui-action-panel-icon .phui-icon-view { + color: {$sh-yellowicon}; } -.phui-action-panel-error .phui-action-panel-status { - background-color: {$lightred}; - border-left: 4px solid {$red}; - color: {$red}; +.phui-action-panel-warn .phui-action-panel-header { + border-color: {$sh-lightyellowborder}; } -.phui-action-panel-error .phui-action-panel-status .phui-icon-view { - color: {$red}; +.phui-action-panel-error { + background-color: {$sh-redbackground}; + border-color: {$sh-redborder}; } -.phui-action-panel-info .phui-action-panel-status { - background-color: {$lightblue}; - border-left: 4px solid {$blue}; - color: {$blue}; +.phui-action-panel-error .phui-action-panel-icon .phui-icon-view { + color: {$sh-redicon}; } -.phui-action-panel-info .phui-action-panel-status .phui-icon-view { - color: {$blue}; +.phui-action-panel-error .phui-action-panel-header { + border-color: {$sh-lightredborder}; } -.phui-action-panel-success .phui-action-panel-status { - background-color: {$lightgreen}; - color: {$green}; - border-left: 4px solid {$green}; +.phui-action-panel-info { + background-color: {$sh-bluebackground}; + border-color: {$sh-blueborder}; } -.phui-action-panel-success .phui-action-panel-status .phui-icon-view { - color: {$green}; +.phui-action-panel-info .phui-action-panel-icon .phui-icon-view { + color: {$sh-blueicon}; } -.phui-action-panel-progress .phui-action-panel-status { - background-color: {$lightblue}; - color: {$blue}; - border-left: 4px solid {$blue}; +.phui-action-panel-info .phui-action-panel-header { + border-color: {$sh-lightblueborder}; } -.phui-action-panel-progress .phui-action-panel-status .phui-icon-view { - color: {$blue}; +.phui-action-panel-success { + background-color: {$sh-greenbackground}; + border-color: {$sh-greenborder}; +} + +.phui-action-panel-success .phui-action-panel-icon .phui-icon-view { + color: {$sh-greenicon}; +} + +.phui-action-panel-success .phui-action-panel-header { + border-color: {$sh-lightgreenborder}; +} + +.phui-action-panel-progress { + background-color: {$sh-violetbackground}; + border-color: {$sh-violetborder}; +} + +.phui-action-panel-progress .phui-action-panel-icon .phui-icon-view { + color: {$sh-violeticon}; +} + +.phui-action-panel-progress .phui-action-panel-header { + border-color: {$sh-lightvioletborder}; }