diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 6a4bfbf3c1..1bd87c45e5 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -7,7 +7,7 @@ return array( 'names' => array( - 'core.pkg.css' => 'fc4bf764', + 'core.pkg.css' => 'd4378b92', 'core.pkg.js' => '8c184823', 'darkconsole.pkg.js' => 'df001cab', 'differential.pkg.css' => '4a93db37', @@ -142,7 +142,7 @@ return array( 'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b', 'rsrc/css/phui/phui-spacing.css' => '042804d6', 'rsrc/css/phui/phui-status.css' => '2f562399', - 'rsrc/css/phui/phui-tag-view.css' => 'ef0a9ca8', + 'rsrc/css/phui/phui-tag-view.css' => '652934b3', 'rsrc/css/phui/phui-text.css' => '23e9b4b7', 'rsrc/css/phui/phui-timeline-view.css' => 'bbd990d0', 'rsrc/css/phui/phui-workboard-view.css' => '2bf82d00', @@ -787,7 +787,7 @@ return array( 'phui-remarkup-preview-css' => '19ad512b', 'phui-spacing-css' => '042804d6', 'phui-status-list-view-css' => '2f562399', - 'phui-tag-view-css' => 'ef0a9ca8', + 'phui-tag-view-css' => '652934b3', 'phui-text-css' => '23e9b4b7', 'phui-timeline-view-css' => 'bbd990d0', 'phui-workboard-view-css' => '2bf82d00', diff --git a/src/applications/uiexample/examples/PHUITagExample.php b/src/applications/uiexample/examples/PHUITagExample.php index d1113a4acb..551c6ea7b0 100644 --- a/src/applications/uiexample/examples/PHUITagExample.php +++ b/src/applications/uiexample/examples/PHUITagExample.php @@ -156,6 +156,21 @@ final class PHUITagExample extends PhabricatorUIExample { ->appendChild($icons) ->addPadding(PHUI::PADDING_LARGE); + $shades = PHUITagView::getShades(); + $tags = array(); + foreach ($shades as $shade) { + $tags[] = id(new PHUITagView()) + ->setType(PHUITagView::TYPE_OBJECT) + ->setShade($shade) + ->setIcon('fa-tags') + ->setName(ucwords($shade)); + $tags[] = hsprintf('

'); + } + + $content4 = id(new PHUIBoxView()) + ->appendChild($tags) + ->addPadding(PHUI::PADDING_LARGE); + $box = id(new PHUIObjectBoxView()) ->setHeaderText('Inline') ->appendChild($intro); @@ -172,6 +187,10 @@ final class PHUITagExample extends PhabricatorUIExample { ->setHeaderText('Icons') ->appendChild($content3); - return array($box, $box1, $box2, $box3); + $box4 = id(new PHUIObjectBoxView()) + ->setHeaderText('Shades') + ->appendChild($content4); + + return array($box, $box1, $box2, $box3, $box4); } } diff --git a/src/view/phui/PHUIIconView.php b/src/view/phui/PHUIIconView.php index c950f08d3f..37cf8f48e0 100644 --- a/src/view/phui/PHUIIconView.php +++ b/src/view/phui/PHUIIconView.php @@ -20,6 +20,7 @@ final class PHUIIconView extends AphrontTagView { private $spriteIcon; private $spriteSheet; private $iconFont; + private $iconColor; public function setHref($href) { $this->href = $href; @@ -51,8 +52,9 @@ final class PHUIIconView extends AphrontTagView { return $this; } - public function setIconFont($icon) { + public function setIconFont($icon, $color = null) { $this->iconFont = $icon; + $this->iconColor = $color; return $this; } @@ -75,13 +77,14 @@ final class PHUIIconView extends AphrontTagView { require_celerity_resource('sprite-'.$this->spriteSheet.'-css'); $classes[] = 'sprite-'.$this->spriteSheet; $classes[] = $this->spriteSheet.'-'.$this->spriteIcon; - } else if ($this->iconFont) { require_celerity_resource('phui-font-icon-base-css'); require_celerity_resource('font-fontawesome'); $classes[] = 'phui-font-fa'; $classes[] = $this->iconFont; - + if ($this->iconColor) { + $classes[] = $this->iconColor; + } } else { if ($this->headSize) { $classes[] = $this->headSize; diff --git a/src/view/phui/PHUITagView.php b/src/view/phui/PHUITagView.php index 4ab4fa781d..06e6022435 100644 --- a/src/view/phui/PHUITagView.php +++ b/src/view/phui/PHUITagView.php @@ -5,6 +5,7 @@ final class PHUITagView extends AphrontView { const TYPE_PERSON = 'person'; const TYPE_OBJECT = 'object'; const TYPE_STATE = 'state'; + const TYPE_SHADE = 'shade'; const COLOR_RED = 'red'; const COLOR_ORANGE = 'orange'; @@ -16,6 +17,8 @@ final class PHUITagView extends AphrontView { const COLOR_BLACK = 'black'; const COLOR_GREY = 'grey'; const COLOR_WHITE = 'white'; + const COLOR_BLUEGREY = 'bluegrey'; + const COLOR_CHECKERED = 'checkered'; const COLOR_OBJECT = 'object'; const COLOR_PERSON = 'person'; @@ -30,6 +33,7 @@ final class PHUITagView extends AphrontView { private $external; private $id; private $icon; + private $shade; public function setID($id) { $this->id = $id; @@ -43,6 +47,8 @@ final class PHUITagView extends AphrontView { public function setType($type) { $this->type = $type; switch ($type) { + case self::TYPE_SHADE: + break; case self::TYPE_OBJECT: $this->setBackgroundColor(self::COLOR_OBJECT); break; @@ -53,6 +59,11 @@ final class PHUITagView extends AphrontView { return $this; } + public function setShade($shade) { + $this->shade = $shade; + return $this; + } + public function setDotColor($dot_color) { $this->dotColor = $dot_color; return $this; @@ -84,9 +95,7 @@ final class PHUITagView extends AphrontView { } public function setIcon($icon) { - $icon_view = id(new PHUIIconView()) - ->setIconFont($icon); - $this->icon = $icon_view; + $this->icon = $icon; return $this; } @@ -102,7 +111,10 @@ final class PHUITagView extends AphrontView { ); $color = null; - if ($this->backgroundColor) { + if ($this->shade) { + $classes[] = 'phui-tag-shade'; + $color = 'phui-tag-shade-'.$this->shade; + } else if ($this->backgroundColor) { $color = 'phui-tag-color-'.$this->backgroundColor; } @@ -119,7 +131,8 @@ final class PHUITagView extends AphrontView { } if ($this->icon) { - $icon = $this->icon; + $icon = id(new PHUIIconView()) + ->setIconFont($this->icon, $this->shade); $classes[] = 'phui-tag-icon-view'; } else { $icon = null; @@ -196,6 +209,22 @@ final class PHUITagView extends AphrontView { ); } + public static function getShades() { + return array( + self::COLOR_RED, + self::COLOR_ORANGE, + self::COLOR_YELLOW, + self::COLOR_BLUE, + self::COLOR_INDIGO, + self::COLOR_VIOLET, + self::COLOR_GREEN, + self::COLOR_BLACK, + self::COLOR_GREY, + self::COLOR_BLUEGREY, + self::COLOR_CHECKERED, + ); + } + public function setExternal($external) { $this->external = $external; return $this; diff --git a/webroot/rsrc/css/phui/phui-tag-view.css b/webroot/rsrc/css/phui/phui-tag-view.css index 3a0c3519c5..6369f5a865 100644 --- a/webroot/rsrc/css/phui/phui-tag-view.css +++ b/webroot/rsrc/css/phui/phui-tag-view.css @@ -132,6 +132,82 @@ a.phui-tag-type-object:link, border-color: #f1f7ff; } +.phui-tag-shade { + font-weight: normal; +} + +.phui-tag-shade .phui-icon-view { + font-size: 12px; + top: 2px; +} + +.phui-tag-shade-bluegrey { + background-color: {$lightbluebackground}; + border-color: {$lightbluetext}; + color: {$bluetext}; +} + +.phui-tag-shade-red { + background-color: {$lightred}; + border-color: {$red}; + color: {$red} +} + +.phui-tag-shade-orange { + background-color: {$lightorange}; + border-color: {$orange}; + color: {$orange}; +} + +.phui-tag-shade-yellow { + background-color: {$lightyellow}; + border-color: {$yellow}; + color: {$yellow}; +} + +.phui-tag-shade-blue { + background-color: {$lightblue}; + border-color: {$blue}; + color: {$blue}; +} + +.phui-tag-shade-indigo { + background-color: {$lightindigo}; + border-color: {$indigo}; + color: {$indigo}; +} + +.phui-tag-shade-green { + background-color: {$lightgreen}; + border-color: {$green}; + color: {$green}; +} + +.phui-tag-shade-violet { + background-color: {$lightviolet}; + border-color: {$violet}; + color: {$violet}; +} + +.phui-tag-shade-black { + background-color: {$darkgreybackground}; + border-color: #333333; +} + +.phui-tag-shade-grey { + background-color: {$lightgreybackground}; + border-color: {$lightgreytext}; + color: {$lightgreytext}; +} + +.phui-tag-shade-checkered { + background: url(/rsrc/image/checker_light.png); + border-style: dashed; + border-color: {$greyborder}; + color: black; + text-shadow: 1px 1px #fff; +} + a.phui-tag-view:hover .phui-tag-core.phui-tag-color-person { border-color: #d9ebfd;