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:
parent
e6190ffc67
commit
30298376b5
5 changed files with 139 additions and 12 deletions
|
@ -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',
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue