From 81809713e0780aeb135cd4f8b32131a0adf7e5dd Mon Sep 17 00:00:00 2001 From: Chad Little Date: Fri, 26 May 2017 11:42:31 -0700 Subject: [PATCH] Try layering state icons on PHUICircleIconView Summary: I think this is reasonable for my current use case, but stacking icons overally is pretty clunky. Test Plan: UIExamples {F4978899} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D18032 --- resources/celerity/map.php | 6 +-- .../uiexample/examples/PHUIIconExample.php | 17 +++++++ src/view/phui/PHUIIconCircleView.php | 47 ++++++++++++++++++- webroot/rsrc/css/phui/phui-icon.css | 34 +++++++++++++- 4 files changed, 98 insertions(+), 6 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 8f5dee69e8..a2119c98a4 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -9,7 +9,7 @@ return array( 'names' => array( 'conpherence.pkg.css' => 'ff161f2d', 'conpherence.pkg.js' => 'b5b51108', - 'core.pkg.css' => 'b666574e', + 'core.pkg.css' => '19f6f61f', 'core.pkg.js' => '21d34805', 'darkconsole.pkg.js' => '1f9a31bc', 'differential.pkg.css' => '7d4cfa59', @@ -158,7 +158,7 @@ return array( 'rsrc/css/phui/phui-header-view.css' => 'a3d1aecd', 'rsrc/css/phui/phui-hovercard.css' => 'f0592bcf', 'rsrc/css/phui/phui-icon-set-selector.css' => '87db8fee', - 'rsrc/css/phui/phui-icon.css' => '12b387a1', + 'rsrc/css/phui/phui-icon.css' => '4c6d624c', 'rsrc/css/phui/phui-image-mask.css' => 'a8498f9c', 'rsrc/css/phui/phui-info-panel.css' => '27ea50a1', 'rsrc/css/phui/phui-info-view.css' => '6e217679', @@ -862,7 +862,7 @@ return array( 'phui-hovercard' => '1bd28176', 'phui-hovercard-view-css' => 'f0592bcf', 'phui-icon-set-selector-css' => '87db8fee', - 'phui-icon-view-css' => '12b387a1', + 'phui-icon-view-css' => '4c6d624c', 'phui-image-mask-css' => 'a8498f9c', 'phui-info-panel-css' => '27ea50a1', 'phui-info-view-css' => '6e217679', diff --git a/src/applications/uiexample/examples/PHUIIconExample.php b/src/applications/uiexample/examples/PHUIIconExample.php index 8e01d6e16a..1bf96ce8e5 100644 --- a/src/applications/uiexample/examples/PHUIIconExample.php +++ b/src/applications/uiexample/examples/PHUIIconExample.php @@ -130,6 +130,23 @@ final class PHUIIconExample extends PhabricatorUIExample { ->addClass('mmr'); } + $circles = array('fa-gear', 'fa-recycle'); + $colors = array('green', 'pink', 'red', 'sky', 'violet'); + foreach ($circles as $circle) { + $states = PHUIIconCircleView::getStateMap(); + foreach ($states as $state => $name) { + $i = array_rand($colors); + $circleview[] = + id(new PHUIIconCircleView()) + ->setIcon($circle) + ->setSize(PHUIIconCircleView::SMALL) + ->setState($state) + ->setColor($colors[$i]) + ->setHref('#') + ->addClass('mmr'); + } + } + $squares = array('fa-briefcase', 'fa-code', 'fa-globe', 'fa-home'); $squareview = array(); foreach ($squares as $icon) { diff --git a/src/view/phui/PHUIIconCircleView.php b/src/view/phui/PHUIIconCircleView.php index 083818969f..11e2a2ac3b 100644 --- a/src/view/phui/PHUIIconCircleView.php +++ b/src/view/phui/PHUIIconCircleView.php @@ -6,10 +6,22 @@ final class PHUIIconCircleView extends AphrontTagView { private $icon; private $color; private $size; + private $state; const SMALL = 'circle-small'; const MEDIUM = 'circle-medium'; + const STATE_FAIL = 'fa-times-circle'; + const STATE_INFO = 'fa-info-circle'; + const STATE_STOP = 'fa-stop-circle'; + const STATE_START = 'fa-play-circle'; + const STATE_PAUSE = 'fa-pause-circle'; + const STATE_SUCCESS = 'fa-check-circle'; + const STATE_WARNING = 'fa-exclamation-circle'; + const STATE_PLUS = 'fa-plus-circle'; + const STATE_MINUS = 'fa-minus-circle'; + const STATE_UNKNOWN = 'fa-question-circle'; + public function setHref($href) { $this->href = $href; return $this; @@ -30,6 +42,11 @@ final class PHUIIconCircleView extends AphrontTagView { return $this; } + public function setState($state) { + $this->state = $state; + return $this; + } + protected function getTagName() { $tag = 'span'; if ($this->href) { @@ -54,6 +71,10 @@ final class PHUIIconCircleView extends AphrontTagView { $classes[] = $this->size; } + if ($this->state) { + $classes[] = 'phui-icon-circle-state'; + } + return array( 'href' => $this->href, 'class' => $classes, @@ -61,8 +82,32 @@ final class PHUIIconCircleView extends AphrontTagView { } protected function getTagContent() { + $state = null; + if ($this->state) { + $state = id(new PHUIIconView()) + ->setIcon($this->state.' '.$this->color) + ->addClass('phui-icon-circle-state-icon'); + } + return id(new PHUIIconView()) - ->setIcon($this->icon); + ->setIcon($this->icon) + ->addClass('phui-icon-circle-icon') + ->appendChild($state); + } + + public static function getStateMap() { + return array( + self::STATE_FAIL => pht('Failure'), + self::STATE_INFO => pht('Information'), + self::STATE_STOP => pht('Stop'), + self::STATE_START => pht('Start'), + self::STATE_PAUSE => pht('Pause'), + self::STATE_SUCCESS => pht('Success'), + self::STATE_WARNING => pht('Warning'), + self::STATE_PLUS => pht('Plus'), + self::STATE_MINUS => pht('Minus'), + self::STATE_UNKNOWN => pht('Unknown'), + ); } } diff --git a/webroot/rsrc/css/phui/phui-icon.css b/webroot/rsrc/css/phui/phui-icon.css index 22b33bca11..627b7632fe 100644 --- a/webroot/rsrc/css/phui/phui-icon.css +++ b/webroot/rsrc/css/phui/phui-icon.css @@ -57,6 +57,7 @@ img.phui-image-disabled { cursor: pointer; background: transparent; padding: 0; + position: relative; } .phui-icon-circle.circle-medium { @@ -65,7 +66,21 @@ img.phui-image-disabled { border-radius: 36px; } -.phui-icon-circle .phui-icon-view { +.phui-icon-circle.phui-icon-circle-state { + border-color: transparent; + background-color: {$bluebackground}; +} + +.phui-icon-circle.phui-icon-circle-state .phui-icon-circle-icon { + color: {$bluetext}; + font-size: 16px; +} + +a.phui-icon-circle.phui-icon-circle-state:hover { + border-color: transparent !important; +} + +.phui-icon-circle .phui-icon-circle-icon { height: 24px; width: 24px; font-size: 11px; @@ -74,7 +89,7 @@ img.phui-image-disabled { cursor: pointer; } -.phui-icon-circle.circle-medium .phui-icon-view { +.phui-icon-circle.circle-medium .phui-icon-circle-icon { font-size: 18px; line-height: 36px; } @@ -129,6 +144,21 @@ a.phui-icon-circle.hover-red:hover .phui-icon-view { color: {$red}; } +a.phui-icon-circle .phui-icon-view.phui-icon-circle-state-icon { + position: absolute; + width: 14px; + height: 14px; + display: inline-block; + font-size: 12px; + right: -3px; + top: -4px; + text-shadow: + -1px -1px 0 #fff, + 1px -1px 0 #fff, + -1px 1px 0 #fff, + 1px 1px 0 #fff; +} + /* - Icon in a Square ------------------------------------------------------- */ .phui-icon-view.phui-icon-square { -- 2.51.2