diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 26ebc596f3..0649f9dbc0 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' => '5ffe8b79', + 'core.pkg.css' => '6e9cf0af', 'core.pkg.js' => '599698a7', 'darkconsole.pkg.js' => '1f9a31bc', 'differential.pkg.css' => '7d4cfa59', @@ -172,7 +172,7 @@ return array( 'rsrc/css/phui/phui-segment-bar-view.css' => 'b1d1b892', 'rsrc/css/phui/phui-spacing.css' => '042804d6', 'rsrc/css/phui/phui-status.css' => 'd5263e49', - 'rsrc/css/phui/phui-tag-view.css' => 'cc4fd402', + 'rsrc/css/phui/phui-tag-view.css' => '3fa7765e', 'rsrc/css/phui/phui-timeline-view.css' => '313c7f22', 'rsrc/css/phui/phui-two-column-view.css' => 'ce9fa0b7', 'rsrc/css/phui/workboards/phui-workboard-color.css' => '783cdff5', @@ -882,7 +882,7 @@ return array( 'phui-segment-bar-view-css' => 'b1d1b892', 'phui-spacing-css' => '042804d6', 'phui-status-list-view-css' => 'd5263e49', - 'phui-tag-view-css' => 'cc4fd402', + 'phui-tag-view-css' => '3fa7765e', 'phui-theme-css' => '9f261c6b', 'phui-timeline-view-css' => '313c7f22', 'phui-two-column-view-css' => 'ce9fa0b7', diff --git a/src/applications/phid/PhabricatorObjectHandle.php b/src/applications/phid/PhabricatorObjectHandle.php index 49255fd9e8..1e6812b53b 100644 --- a/src/applications/phid/PhabricatorObjectHandle.php +++ b/src/applications/phid/PhabricatorObjectHandle.php @@ -407,8 +407,8 @@ final class PhabricatorObjectHandle public function renderTag() { return id(new PHUITagView()) - ->setType(PHUITagView::TYPE_OBJECT) - ->setShade($this->getTagColor()) + ->setType(PHUITagView::TYPE_SHADE) + ->setColor($this->getTagColor()) ->setIcon($this->getIcon()) ->setHref($this->getURI()) ->setName($this->getLinkName()); diff --git a/src/applications/phid/view/PHUIHandleTagListView.php b/src/applications/phid/view/PHUIHandleTagListView.php index c4ef3762c3..abae359a16 100644 --- a/src/applications/phid/view/PHUIHandleTagListView.php +++ b/src/applications/phid/view/PHUIHandleTagListView.php @@ -121,8 +121,8 @@ final class PHUIHandleTagListView extends AphrontTagView { private function newPlaceholderTag() { return id(new PHUITagView()) - ->setType(PHUITagView::TYPE_OBJECT) - ->setShade(PHUITagView::COLOR_DISABLED) + ->setType(PHUITagView::TYPE_SHADE) + ->setColor(PHUITagView::COLOR_DISABLED) ->setSlimShady($this->slim); } diff --git a/src/applications/uiexample/examples/PHUITagExample.php b/src/applications/uiexample/examples/PHUITagExample.php index 155fe4e9da..764caaf717 100644 --- a/src/applications/uiexample/examples/PHUITagExample.php +++ b/src/applications/uiexample/examples/PHUITagExample.php @@ -162,15 +162,15 @@ final class PHUITagExample extends PhabricatorUIExample { $tags = array(); foreach ($shades as $shade) { $tags[] = id(new PHUITagView()) - ->setType(PHUITagView::TYPE_OBJECT) - ->setShade($shade) + ->setType(PHUITagView::TYPE_SHADE) + ->setColor($shade) ->setIcon('fa-tags') ->setName(ucwords($shade)) ->setHref('#'); $tags[] = hsprintf(' '); $tags[] = id(new PHUITagView()) - ->setType(PHUITagView::TYPE_OBJECT) - ->setShade($shade) + ->setType(PHUITagView::TYPE_SHADE) + ->setColor($shade) ->setSlimShady(true) ->setIcon('fa-tags') ->setName(ucwords($shade)) @@ -182,6 +182,26 @@ final class PHUITagExample extends PhabricatorUIExample { ->appendChild($tags) ->addPadding(PHUI::PADDING_LARGE); + $outlines = PHUITagView::getOutlines(); + $tags = array(); + foreach ($outlines as $outline) { + $tags[] = id(new PHUITagView()) + ->setType(PHUITagView::TYPE_OUTLINE) + ->setShade($outline) + ->setName($outline); + $tags[] = hsprintf(' '); + $tags[] = id(new PHUITagView()) + ->setType(PHUITagView::TYPE_OUTLINE) + ->setShade($outline) + ->setSlimShady(true) + ->setName($outline); + $tags[] = hsprintf('

'); + } + + $content5 = id(new PHUIBoxView()) + ->appendChild($tags) + ->addPadding(PHUI::PADDING_LARGE); + $box = id(new PHUIObjectBoxView()) ->setHeaderText(pht('Inline')) ->appendChild($intro); @@ -202,6 +222,10 @@ final class PHUITagExample extends PhabricatorUIExample { ->setHeaderText(pht('Shades')) ->appendChild($content4); - return array($box, $box1, $box2, $box3, $box4); + $box5 = id(new PHUIObjectBoxView()) + ->setHeaderText(pht('Outlines')) + ->appendChild($content5); + + return array($box, $box1, $box2, $box3, $box4, $box5); } } diff --git a/src/view/phui/PHUITagView.php b/src/view/phui/PHUITagView.php index ae80fc1731..e8d30e935e 100644 --- a/src/view/phui/PHUITagView.php +++ b/src/view/phui/PHUITagView.php @@ -6,6 +6,7 @@ final class PHUITagView extends AphrontTagView { const TYPE_OBJECT = 'object'; const TYPE_STATE = 'state'; const TYPE_SHADE = 'shade'; + const TYPE_OUTLINE = 'outline'; const COLOR_RED = 'red'; const COLOR_ORANGE = 'orange'; @@ -15,6 +16,8 @@ final class PHUITagView extends AphrontTagView { const COLOR_VIOLET = 'violet'; const COLOR_GREEN = 'green'; const COLOR_BLACK = 'black'; + const COLOR_SKY = 'sky'; + const COLOR_FIRE = 'fire'; const COLOR_GREY = 'grey'; const COLOR_WHITE = 'white'; const COLOR_PINK = 'pink'; @@ -29,6 +32,7 @@ final class PHUITagView extends AphrontTagView { private $href; private $name; private $phid; + private $color; private $backgroundColor; private $dotColor; private $closed; @@ -41,6 +45,7 @@ final class PHUITagView extends AphrontTagView { $this->type = $type; switch ($type) { case self::TYPE_SHADE: + case self::TYPE_OUTLINE: break; case self::TYPE_OBJECT: $this->setBackgroundColor(self::COLOR_OBJECT); @@ -52,8 +57,14 @@ final class PHUITagView extends AphrontTagView { return $this; } + /* Deprecated, use setColor */ public function setShade($shade) { - $this->shade = $shade; + $this->color = $shade; + return $this; + } + + public function setColor($color) { + $this->color = $color; return $this; } @@ -109,12 +120,16 @@ final class PHUITagView extends AphrontTagView { 'phui-tag-type-'.$this->type, ); - if ($this->shade) { + if ($this->color) { + $classes[] = 'phui-tag-'.$this->color; + } + + if ($this->slimShady) { + $classes[] = 'phui-tag-slim'; + } + + if ($this->type == self::TYPE_SHADE) { $classes[] = 'phui-tag-shade'; - $classes[] = 'phui-tag-shade-'.$this->shade; - if ($this->slimShady) { - $classes[] = 'phui-tag-shade-slim'; - } } if ($this->icon) { @@ -240,6 +255,32 @@ final class PHUITagView extends AphrontTagView { return idx(self::getShadeMap(), $shade, $shade); } + public static function getOutlines() { + return array_keys(self::getOutlineMap()); + } + + public static function getOutlineMap() { + return array( + self::COLOR_RED => pht('Red'), + self::COLOR_ORANGE => pht('Orange'), + self::COLOR_YELLOW => pht('Yellow'), + self::COLOR_BLUE => pht('Blue'), + self::COLOR_INDIGO => pht('Indigo'), + self::COLOR_VIOLET => pht('Violet'), + self::COLOR_GREEN => pht('Green'), + self::COLOR_GREY => pht('Grey'), + self::COLOR_PINK => pht('Pink'), + self::COLOR_SKY => pht('Sky'), + self::COLOR_FIRE => pht('Fire'), + self::COLOR_BLACK => pht('Black'), + self::COLOR_DISABLED => pht('Disabled'), + ); + } + + public static function getOutlineName($outline) { + return idx(self::getOutlineMap(), $outline, $outline); + } + public function setExternal($external) { $this->external = $external; diff --git a/webroot/rsrc/css/phui/phui-tag-view.css b/webroot/rsrc/css/phui/phui-tag-view.css index d5b2710d7b..56b5badf8d 100644 --- a/webroot/rsrc/css/phui/phui-tag-view.css +++ b/webroot/rsrc/css/phui/phui-tag-view.css @@ -161,225 +161,233 @@ a.phui-tag-view:hover */ -.phui-tag-shade { +.phui-tag-view.phui-tag-type-shade { font-weight: normal; } -.phui-tag-shade .phui-icon-view { +.phui-tag-view.phui-tag-type-shade .phui-icon-view { font-size: 12px; } -.phui-tag-shade-slim .phui-icon-view { + +/* - Slim Tags ----------------------------------------------------------------- + + A thinner tag for object list, workboards. + +*/ + +.phui-tag-slim .phui-icon-view { font-size: 11px; } -.phui-tag-shade-slim .phui-tag-core { +.phui-tag-slim .phui-tag-core { font-size: {$smallerfontsize}; } + /* - Red -------------------------------------------------------------------- */ -.phui-tag-shade-red .phui-tag-core, +.phui-tag-red .phui-tag-core, .jx-tokenizer-token.red { background: {$sh-redbackground}; border-color: {$sh-lightredborder}; color: {$sh-redtext}; } -.phui-tag-shade-red .phui-icon-view, +.phui-tag-red .phui-icon-view, .jx-tokenizer-token.red .phui-icon-view, .jx-tokenizer-token.red .jx-tokenizer-x { color: {$sh-redicon}; } -a.phui-tag-view:hover.phui-tag-shade-red .phui-tag-core, +a.phui-tag-view:hover.phui-tag-red .phui-tag-core, .jx-tokenizer-token.red:hover { border-color: {$sh-redborder}; } /* - Orange ----------------------------------------------------------------- */ -.phui-tag-shade-orange .phui-tag-core, +.phui-tag-orange .phui-tag-core, .jx-tokenizer-token.orange { background: {$sh-orangebackground}; border-color: {$sh-lightorangeborder}; color: {$sh-orangetext}; } -.phui-tag-shade-orange .phui-icon-view, +.phui-tag-orange .phui-icon-view, .jx-tokenizer-token.orange .phui-icon-view, .jx-tokenizer-token.orange .jx-tokenizer-x { color: {$sh-orangeicon}; } -a.phui-tag-view:hover.phui-tag-shade-orange .phui-tag-core, +a.phui-tag-view:hover.phui-tag-orange .phui-tag-core, .jx-tokenizer-token.orange:hover { border-color: {$sh-orangeborder}; } /* - Yellow ----------------------------------------------------------------- */ -.phui-tag-shade-yellow .phui-tag-core, +.phui-tag-yellow .phui-tag-core, .jx-tokenizer-token.yellow { background: {$sh-yellowbackground}; border-color: {$sh-lightyellowborder}; color: {$sh-yellowtext}; } -.phui-tag-shade-yellow .phui-icon-view, +.phui-tag-yellow .phui-icon-view, .jx-tokenizer-token.yellow .phui-icon-view, .jx-tokenizer-token.yellow .jx-tokenizer-x { color: {$sh-yellowicon}; } -a.phui-tag-view:hover.phui-tag-shade-yellow .phui-tag-core, +a.phui-tag-view:hover.phui-tag-yellow .phui-tag-core, .jx-tokenizer-token.yellow:hover { border-color: {$sh-yellowborder}; } /* - Blue ------------------------------------------------------------------- */ -.phui-tag-shade-blue .phui-tag-core, +.phui-tag-blue .phui-tag-core, .jx-tokenizer-token.blue { background: {$sh-bluebackground}; border-color: {$sh-lightblueborder}; color: {$sh-bluetext}; } -.phui-tag-shade-blue .phui-icon-view, +.phui-tag-blue .phui-icon-view, .jx-tokenizer-token.blue .phui-icon-view, .jx-tokenizer-token.blue .jx-tokenizer-x { color: {$sh-blueicon}; } -a.phui-tag-view:hover.phui-tag-shade-blue .phui-tag-core, +a.phui-tag-view:hover.phui-tag-blue .phui-tag-core, .jx-tokenizer-token.blue:hover { border-color: {$sh-blueborder}; } /* - Sky ------------------------------------------------------------------- */ -.phui-tag-shade-sky .phui-tag-core, +.phui-tag-sky .phui-tag-core, .jx-tokenizer-token.sky { background: #E0F0FA; border-color: {$sh-lightblueborder}; color: {$sh-bluetext}; } -.phui-tag-shade-sky .phui-icon-view, +.phui-tag-sky .phui-icon-view, .jx-tokenizer-token.sky .phui-icon-view, .jx-tokenizer-token.sky .jx-tokenizer-x { color: {$sh-blueicon}; } -a.phui-tag-view:hover.phui-tag-shade-sky .phui-tag-core, +a.phui-tag-view:hover.phui-tag-sky .phui-tag-core, .jx-tokenizer-token.sky:hover { border-color: {$sh-blueborder}; } /* - Indigo ----------------------------------------------------------------- */ -.phui-tag-shade-indigo .phui-tag-core, +.phui-tag-indigo .phui-tag-core, .jx-tokenizer-token.indigo { background: {$sh-indigobackground}; border-color: {$sh-lightindigoborder}; color: {$sh-indigotext}; } -.phui-tag-shade-indigo .phui-icon-view, +.phui-tag-indigo .phui-icon-view, .jx-tokenizer-token.indigo .phui-icon-view, .jx-tokenizer-token.indigo .jx-tokenizer-x { color: {$sh-indigoicon}; } -a.phui-tag-view:hover.phui-tag-shade-indigo .phui-tag-core, +a.phui-tag-view:hover.phui-tag-indigo .phui-tag-core, .jx-tokenizer-token.indigo:hover { border-color: {$sh-indigoborder}; } /* - Green ------------------------------------------------------------------ */ -.phui-tag-shade-green .phui-tag-core, +.phui-tag-green .phui-tag-core, .jx-tokenizer-token.green { background: {$sh-greenbackground}; border-color: {$sh-lightgreenborder}; color: {$sh-greentext}; } -.phui-tag-shade-green .phui-icon-view, +.phui-tag-green .phui-icon-view, .jx-tokenizer-token.green .phui-icon-view, .jx-tokenizer-token.green .jx-tokenizer-x { color: {$sh-greenicon}; } -a.phui-tag-view:hover.phui-tag-shade-green .phui-tag-core, +a.phui-tag-view:hover.phui-tag-green .phui-tag-core, .jx-tokenizer-token.green:hover { border-color: {$sh-greenborder}; } /* - Violet ----------------------------------------------------------------- */ -.phui-tag-shade-violet .phui-tag-core, +.phui-tag-violet .phui-tag-core, .jx-tokenizer-token.violet { background: {$sh-violetbackground}; border-color: {$sh-lightvioletborder}; color: {$sh-violettext}; } -.phui-tag-shade-violet .phui-icon-view, +.phui-tag-violet .phui-icon-view, .jx-tokenizer-token.violet .phui-icon-view, .jx-tokenizer-token.violet .jx-tokenizer-x { color: {$sh-violeticon}; } -a.phui-tag-view:hover.phui-tag-shade-violet .phui-tag-core, +a.phui-tag-view:hover.phui-tag-violet .phui-tag-core, .jx-tokenizer-token.violet:hover { border-color: {$sh-violetborder}; } /* - Pink ------------------------------------------------------------------- */ -.phui-tag-shade-pink .phui-tag-core, +.phui-tag-pink .phui-tag-core, .jx-tokenizer-token.pink { background: {$sh-pinkbackground}; border-color: {$sh-lightpinkborder}; color: {$sh-pinktext}; } -.phui-tag-shade-pink .phui-icon-view, +.phui-tag-pink .phui-icon-view, .jx-tokenizer-token.pink .phui-icon-view, .jx-tokenizer-token.pink .jx-tokenizer-x { color: {$sh-pinkicon}; } -a.phui-tag-view:hover.phui-tag-shade-pink .phui-tag-core, +a.phui-tag-view:hover.phui-tag-pink .phui-tag-core, .jx-tokenizer-token.pink:hover { border-color: {$sh-pinkborder}; } /* - Grey ------------------------------------------------------------------- */ -.phui-tag-shade-grey .phui-tag-core, +.phui-tag-grey .phui-tag-core, .jx-tokenizer-token.grey { background: {$sh-greybackground}; border-color: {$sh-lightgreyborder}; color: {$sh-greytext}; } -.phui-tag-shade-grey .phui-icon-view, +.phui-tag-grey .phui-icon-view, .jx-tokenizer-token.grey .phui-icon-view, .jx-tokenizer-token.grey .jx-tokenizer-x { color: {$sh-greyicon}; } -a.phui-tag-view:hover.phui-tag-shade-grey .phui-tag-core, +a.phui-tag-view:hover.phui-tag-grey .phui-tag-core, .jx-tokenizer-token.grey:hover { border-color: {$sh-greyborder}; } /* - Checkered -------------------------------------------------------------- */ -.phui-tag-shade-checkered .phui-tag-core, +.phui-tag-checkered .phui-tag-core, .jx-tokenizer-token.checkered { background: url(/rsrc/image/checker_lighter.png); border-style: dashed; @@ -388,13 +396,13 @@ a.phui-tag-view:hover.phui-tag-shade-grey .phui-tag-core, text-shadow: 1px 1px #fff; } -.phui-tag-shade-checkered .phui-icon-view, +.phui-tag-checkered .phui-icon-view, .jx-tokenizer-token.checkered .phui-icon-view, .jx-tokenizer-token.checkered .jx-tokenizer-x { color: {$sh-greyicon}; } -a.phui-tag-view:hover.phui-tag-shade-checkered .phui-tag-core, +a.phui-tag-view:hover.phui-tag-checkered .phui-tag-core, .jx-tokenizer-token.checkered:hover { border-style: solid; border-color: {$sh-greyborder}; @@ -402,16 +410,101 @@ a.phui-tag-view:hover.phui-tag-shade-checkered .phui-tag-core, /* - Disabled --------------------------------------------------------------- */ -.phui-tag-shade-disabled .phui-tag-core { +.phui-tag-disabled .phui-tag-core { background-color: {$sh-disabledbackground}; border-color: {$sh-lightdisabledborder}; color: {$sh-disabledtext}; } -.phui-tag-shade-disabled .phui-icon-view { +.phui-tag-disabled .phui-icon-view { color: {$sh-disabledicon}; } -a.phui-tag-view:hover.phui-tag-shade-disabled .phui-tag-core { +a.phui-tag-view:hover.phui-tag-disabled .phui-tag-core { border-color: {$sh-disabledborder}; } + +/* - Outline Tags -------------------------------------------------------------- + + Basic Tag with a bold border and white background + +*/ + +.phui-tag-type-outline { + text-transform: uppercase; + font-weight: normal; +} + +.phui-tag-view.phui-tag-type-outline .phui-tag-core { + background: #fff; + padding: 0 6px 1px 6px; +} + +.phui-tag-slim.phui-tag-type-outline .phui-tag-core { + font-size: {$smallestfontsize}; +} + +.phui-tag-type-outline.phui-tag-red .phui-tag-core { + color: {$red}; + border-color: {$red}; +} + +.phui-tag-type-outline.phui-tag-orange .phui-tag-core { + color: {$orange}; + border-color: {$orange}; +} + +.phui-tag-type-outline.phui-tag-yellow .phui-tag-core { + color: {$yellow}; + border-color: {$yellow}; +} + +.phui-tag-type-outline.phui-tag-green .phui-tag-core { + color: {$green}; + border-color: {$green}; +} + +.phui-tag-type-outline.phui-tag-blue .phui-tag-core { + color: {$blue}; + border-color: {$blue}; +} + +.phui-tag-type-outline.phui-tag-indigo .phui-tag-core { + color: {$indigo}; + border-color: {$indigo}; +} + +.phui-tag-type-outline.phui-tag-violet .phui-tag-core { + color: {$violet}; + border-color: {$violet}; +} + +.phui-tag-type-outline.phui-tag-grey .phui-tag-core { + color: {$bluetext}; + border-color: {$bluetext}; +} + +.phui-tag-type-outline.phui-tag-disabled .phui-tag-core { + color: {$lightgreytext}; + border-color: {$lightgreytext}; +} + +.phui-tag-type-outline.phui-tag-pink .phui-tag-core { + color: {$pink}; + border-color: {$pink}; +} + +.phui-tag-type-outline.phui-tag-sky .phui-tag-core { + color: {$sky}; + border-color: {$sky}; +} + +.phui-tag-type-outline.phui-tag-fire .phui-tag-core { + color: {$fire}; + border-color: {$fire}; +} + +.phui-tag-type-outline.phui-tag-black .phui-tag-core { + color: #000; + border-color: #000; +}