Page MenuHomePhabricator
Files F15337271

D17991.diff
No OneTemporary
Actions

D17991.diff
View Options

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -9,7 +9,7 @@
'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 @@
'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 @@
'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
--- a/src/applications/phid/PhabricatorObjectHandle.php
+++ b/src/applications/phid/PhabricatorObjectHandle.php
@@ -407,8 +407,8 @@
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
--- a/src/applications/phid/view/PHUIHandleTagListView.php
+++ b/src/applications/phid/view/PHUIHandleTagListView.php
@@ -121,8 +121,8 @@
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
--- a/src/applications/uiexample/examples/PHUITagExample.php
+++ b/src/applications/uiexample/examples/PHUITagExample.php
@@ -162,15 +162,15 @@
$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 @@
->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('<br /><br />');
+ }
+
+ $content5 = id(new PHUIBoxView())
+ ->appendChild($tags)
+ ->addPadding(PHUI::PADDING_LARGE);
+
$box = id(new PHUIObjectBoxView())
->setHeaderText(pht('Inline'))
->appendChild($intro);
@@ -202,6 +222,10 @@
->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
--- a/src/view/phui/PHUITagView.php
+++ b/src/view/phui/PHUITagView.php
@@ -6,6 +6,7 @@
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 @@
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 @@
private $href;
private $name;
private $phid;
+ private $color;
private $backgroundColor;
private $dotColor;
private $closed;
@@ -41,6 +45,7 @@
$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 @@
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 @@
'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 @@
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
--- a/webroot/rsrc/css/phui/phui-tag-view.css
+++ b/webroot/rsrc/css/phui/phui-tag-view.css
@@ -161,225 +161,233 @@
*/
-.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 @@
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 @@
/* - 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;
+}

File Metadata

Mime Type
text/plain
Expires
Mar 10 2025, 5:05 AM (5 w, 3 d ago)
Storage Engine
blob
Storage Format
Encrypted (AES-256-CBC)
Storage Handle
7401643
Default Alt Text
D17991.diff (17 KB)

Event Timeline

Phabricator · Built by Phacility