1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-10 00:42:41 +01:00

Let PHUITagView colorize completely with "shades"

Summary: See D9710.

Test Plan: quack quack

Reviewers: chad

Reviewed By: chad

Subscribers: epriestley

Differential Revision: https://secure.phabricator.com/D9713
This commit is contained in:
epriestley 2014-06-24 16:00:20 -07:00
parent e6190ffc67
commit 30298376b5
5 changed files with 139 additions and 12 deletions

View file

@ -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',

View file

@ -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('<br /><br />');
}
$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);
}
}

View file

@ -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;

View file

@ -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;

View file

@ -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;