mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-10 00:42:41 +01:00
PHUITagColors for Objects
Summary: Provides a base set of shaded object tags for use in Phabricator.
Test Plan:
Lots of Photoshop and Chrome.
{F170252, size=full}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: epriestley, Korvin
Differential Revision: https://secure.phabricator.com/D9737
This commit is contained in:
Chad Little
parent
3dda0c82f9
commit
390abb7452
5 changed files with 247 additions and 90 deletions
|
|
@ -7,7 +7,7 @@
|
|||
return array(
|
||||
'names' =>
|
||||
array(
|
||||
'core.pkg.css' => '47277ca5',
|
||||
'core.pkg.css' => 'c2e44da2',
|
||||
'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' => '652934b3',
|
||||
'rsrc/css/phui/phui-tag-view.css' => '67017012',
|
||||
'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' => '652934b3',
|
||||
'phui-tag-view-css' => '67017012',
|
||||
'phui-text-css' => '23e9b4b7',
|
||||
'phui-timeline-view-css' => 'bbd990d0',
|
||||
'phui-workboard-view-css' => '2bf82d00',
|
||||
|
|
|
|||
|
|
@ -163,7 +163,8 @@ final class PHUITagExample extends PhabricatorUIExample {
|
|||
->setType(PHUITagView::TYPE_OBJECT)
|
||||
->setShade($shade)
|
||||
->setIcon('fa-tags')
|
||||
->setName(ucwords($shade));
|
||||
->setName(ucwords($shade))
|
||||
->setHref('#');
|
||||
$tags[] = hsprintf('<br /><br />');
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -222,16 +222,89 @@ final class CelerityResourceTransformer {
|
|||
'darkbluetext' => '#464C5C',
|
||||
|
||||
// Base Greens
|
||||
'lightgreenborder' => '#bfdac1',
|
||||
'greenborder' => '#8cb89c',
|
||||
'lightgreenborder' => '#bfdac1',
|
||||
'greenborder' => '#8cb89c',
|
||||
'greentext' => '#3e6d35',
|
||||
'lightgreenbackground' => '#e6f2e4',
|
||||
|
||||
// Base Red
|
||||
'lightredborder' => '#f4c6c6',
|
||||
'redborder' => '#eb9797',
|
||||
'lightredborder' => '#f4c6c6',
|
||||
'redborder' => '#eb9797',
|
||||
'redtext' => '#802b2b',
|
||||
'lightredbackground' => '#f5e1e1',
|
||||
|
||||
// Base Violet
|
||||
'lightvioletborder' => '#cfbddb',
|
||||
'violetborder' => '#b589ba',
|
||||
'lightvioletborder' => '#cfbddb',
|
||||
'violetborder' => '#b589ba',
|
||||
'violettext' => '#603c73',
|
||||
'lightvioletbackground' => '#e9dfee',
|
||||
|
||||
// Shades are a more muted set of our base colors
|
||||
// better suited to blending into other UIs.
|
||||
|
||||
// Shade Red
|
||||
'sh-lightredborder' => '#eac0c0',
|
||||
'sh-redborder' => '#d1abab',
|
||||
'sh-redicon' => '#c85a5a',
|
||||
'sh-redtext' => '#a53737',
|
||||
'sh-redbackground' => '#f7e6e6',
|
||||
|
||||
// Shade Orange
|
||||
'sh-lightorangeborder' => '#f6d0b1',
|
||||
'sh-orangeborder' => '#dbb99e',
|
||||
'sh-orangeicon' => '#e78331',
|
||||
'sh-orangetext' => '#ba6016',
|
||||
'sh-orangebackground' => '#fbede1',
|
||||
|
||||
// Shade Yellow
|
||||
'sh-lightyellowborder' => '#e2cfbd',
|
||||
'sh-yellowborder' => '#c9b8a8',
|
||||
'sh-yellowicon' => '#9b946e',
|
||||
'sh-yellowtext' => '#726f56',
|
||||
'sh-yellowbackground' => '#fdf3da',
|
||||
|
||||
// Shade Green
|
||||
'sh-lightgreenborder' => '#b4ddb5',
|
||||
'sh-greenborder' => '#a0c4a1',
|
||||
'sh-greenicon' => '#4ca74e',
|
||||
'sh-greentext' => '#326d34',
|
||||
'sh-greenbackground' => '#ddefdd',
|
||||
|
||||
// Shade Blue
|
||||
'sh-lightblueborder' => '#bfcfda',
|
||||
'sh-blueborder' => '#a7b5bf',
|
||||
'sh-blueicon' => '#6b748c',
|
||||
'sh-bluetext' => '#464c5c',
|
||||
'sh-bluebackground' => '#dee7f8',
|
||||
|
||||
// Shade Indigo
|
||||
'sh-lightindigoborder' => '#f3c7ea',
|
||||
'sh-indigoborder' => '#d5aecd',
|
||||
'sh-indigoicon' => '#e26fcb',
|
||||
'sh-indigotext' => '#da49be',
|
||||
'sh-indigobackground' => '#fbeaf8',
|
||||
|
||||
// Shade Violet
|
||||
'sh-lightvioletborder' => '#d5c2df',
|
||||
'sh-violetborder' => '#bcabc5',
|
||||
'sh-violeticon' => '#9260ad',
|
||||
'sh-violettext' => '#69427f',
|
||||
'sh-violetbackground' => '#efe8f3',
|
||||
|
||||
// Shade Grey
|
||||
'sh-lightgreyborder' => '#cbcbcb',
|
||||
'sh-greyborder' => '#b2b2b2',
|
||||
'sh-greyicon' => '#757575',
|
||||
'sh-greytext' => '#555555',
|
||||
'sh-greybackground' => '#e7e7e7',
|
||||
|
||||
// Shade Disabled
|
||||
'sh-lightdisabledborder' => '#e5e5e5',
|
||||
'sh-disabledborder' => '#cbcbcb',
|
||||
'sh-disabledicon' => '#bababa',
|
||||
'sh-disabledtext' => '#a6a6a6',
|
||||
'sh-disabledbackground' => '#f3f3f3',
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ final class PHUITagView extends AphrontView {
|
|||
const COLOR_WHITE = 'white';
|
||||
const COLOR_BLUEGREY = 'bluegrey';
|
||||
const COLOR_CHECKERED = 'checkered';
|
||||
const COLOR_DISABLED = 'disabled';
|
||||
|
||||
const COLOR_OBJECT = 'object';
|
||||
const COLOR_PERSON = 'person';
|
||||
|
|
@ -113,7 +114,7 @@ final class PHUITagView extends AphrontView {
|
|||
$color = null;
|
||||
if ($this->shade) {
|
||||
$classes[] = 'phui-tag-shade';
|
||||
$color = 'phui-tag-shade-'.$this->shade;
|
||||
$classes[] = 'phui-tag-shade-'.$this->shade;;
|
||||
} else if ($this->backgroundColor) {
|
||||
$color = 'phui-tag-color-'.$this->backgroundColor;
|
||||
}
|
||||
|
|
@ -132,7 +133,7 @@ final class PHUITagView extends AphrontView {
|
|||
|
||||
if ($this->icon) {
|
||||
$icon = id(new PHUIIconView())
|
||||
->setIconFont($this->icon, $this->shade);
|
||||
->setIconFont($this->icon);
|
||||
$classes[] = 'phui-tag-icon-view';
|
||||
} else {
|
||||
$icon = null;
|
||||
|
|
@ -218,10 +219,9 @@ final class PHUITagView extends AphrontView {
|
|||
self::COLOR_INDIGO,
|
||||
self::COLOR_VIOLET,
|
||||
self::COLOR_GREEN,
|
||||
self::COLOR_BLACK,
|
||||
self::COLOR_GREY,
|
||||
self::COLOR_BLUEGREY,
|
||||
self::COLOR_CHECKERED,
|
||||
self::COLOR_DISABLED,
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -132,82 +132,6 @@ 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;
|
||||
|
|
@ -217,3 +141,162 @@ a.phui-tag-view:hover
|
|||
.phui-tag-core.phui-tag-color-object {
|
||||
border-color: #d7d7d7;
|
||||
}
|
||||
|
||||
/* - Shaded Tags ---------------------------------------------------------------
|
||||
|
||||
For object representation inside text areas and lists.
|
||||
|
||||
*/
|
||||
|
||||
.phui-tag-shade {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.phui-tag-shade .phui-icon-view {
|
||||
font-size: 12px;
|
||||
top: 2px;
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
.phui-tag-shade-red .phui-tag-core {
|
||||
background-color: {$sh-redbackground};
|
||||
border-color: {$sh-lightredborder};
|
||||
color: {$sh-redtext};
|
||||
}
|
||||
|
||||
.phui-tag-shade-red .phui-icon-view {
|
||||
color: {$sh-redicon};
|
||||
}
|
||||
|
||||
a.phui-tag-view:hover.phui-tag-shade-red .phui-tag-core {
|
||||
border-color: {$sh-redborder};
|
||||
}
|
||||
|
||||
.phui-tag-shade-orange .phui-tag-core {
|
||||
background-color: {$sh-orangebackground};
|
||||
border-color: {$sh-lightorangeborder};
|
||||
color: {$sh-orangetext};
|
||||
}
|
||||
|
||||
.phui-tag-shade-orange .phui-icon-view {
|
||||
color: {$sh-orangeicon};
|
||||
}
|
||||
|
||||
a.phui-tag-view:hover.phui-tag-shade-orange .phui-tag-core {
|
||||
border-color: {$sh-orangeborder};
|
||||
}
|
||||
|
||||
.phui-tag-shade-yellow .phui-tag-core {
|
||||
background-color: {$sh-yellowbackground};
|
||||
border-color: {$sh-lightyellowborder};
|
||||
color: {$sh-yellowtext};
|
||||
}
|
||||
|
||||
.phui-tag-shade-yellow .phui-icon-view {
|
||||
color: {$sh-yellowicon};
|
||||
}
|
||||
|
||||
a.phui-tag-view:hover.phui-tag-shade-yellow .phui-tag-core {
|
||||
border-color: {$sh-yellowborder};
|
||||
}
|
||||
|
||||
.phui-tag-shade-blue .phui-tag-core {
|
||||
background-color: {$sh-bluebackground};
|
||||
border-color: {$sh-lightblueborder};
|
||||
color: {$sh-bluetext};
|
||||
}
|
||||
|
||||
.phui-tag-shade-blue .phui-icon-view {
|
||||
color: {$sh-blueicon};
|
||||
}
|
||||
|
||||
a.phui-tag-view:hover.phui-tag-shade-blue .phui-tag-core {
|
||||
border-color: {$sh-blueborder};
|
||||
}
|
||||
|
||||
.phui-tag-shade-indigo .phui-tag-core {
|
||||
background-color: {$sh-indigobackground};
|
||||
border-color: {$sh-lightindigoborder};
|
||||
color: {$sh-indigotext};
|
||||
}
|
||||
|
||||
.phui-tag-shade-indigo .phui-icon-view {
|
||||
color: {$sh-indigoicon};
|
||||
}
|
||||
|
||||
a.phui-tag-view:hover.phui-tag-shade-indigo .phui-tag-core {
|
||||
border-color: {$sh-indigoborder};
|
||||
}
|
||||
|
||||
.phui-tag-shade-green .phui-tag-core {
|
||||
background-color: {$sh-greenbackground};
|
||||
border-color: {$sh-lightgreenborder};
|
||||
color: {$sh-greentext};
|
||||
}
|
||||
|
||||
.phui-tag-shade-green .phui-icon-view {
|
||||
color: {$sh-greenicon};
|
||||
}
|
||||
|
||||
a.phui-tag-view:hover.phui-tag-shade-green .phui-tag-core {
|
||||
border-color: {$sh-greenborder};
|
||||
}
|
||||
|
||||
.phui-tag-shade-violet .phui-tag-core {
|
||||
background-color: {$sh-violetbackground};
|
||||
border-color: {$sh-lightvioletborder};
|
||||
color: {$sh-violettext};
|
||||
}
|
||||
|
||||
.phui-tag-shade-violet .phui-icon-view {
|
||||
color: {$sh-violeticon};
|
||||
}
|
||||
|
||||
a.phui-tag-view:hover.phui-tag-shade-violet .phui-tag-core {
|
||||
border-color: {$sh-violetborder};
|
||||
}
|
||||
|
||||
.phui-tag-shade-grey .phui-tag-core {
|
||||
background-color: {$sh-greybackground};
|
||||
border-color: {$sh-lightgreyborder};
|
||||
color: {$sh-greytext};
|
||||
}
|
||||
|
||||
.phui-tag-shade-grey .phui-icon-view {
|
||||
color: {$sh-greyicon};
|
||||
}
|
||||
|
||||
a.phui-tag-view:hover.phui-tag-shade-grey .phui-tag-core {
|
||||
border-color: {$sh-greyborder};
|
||||
}
|
||||
|
||||
.phui-tag-shade-checkered .phui-tag-core {
|
||||
background: url(/rsrc/image/checker_lighter.png);
|
||||
border-style: dashed;
|
||||
border-color: {$sh-greyborder};
|
||||
color: {$sh-greytext};
|
||||
text-shadow: 1px 1px #fff;
|
||||
}
|
||||
|
||||
.phui-tag-shade-checkered .phui-icon-view {
|
||||
color: {$sh-greyicon};
|
||||
}
|
||||
|
||||
a.phui-tag-view:hover.phui-tag-shade-checkered .phui-tag-core {
|
||||
border-style: solid;
|
||||
border-color: {$sh-greyborder};
|
||||
}
|
||||
|
||||
.phui-tag-shade-disabled .phui-tag-core {
|
||||
background-color: {$sh-disabledbackground};
|
||||
border-color: {$sh-lightdisabledborder};
|
||||
color: {$sh-disabledtext};
|
||||
}
|
||||
|
||||
.phui-tag-shade-disabled .phui-icon-view {
|
||||
color: {$sh-disabledicon};
|
||||
}
|
||||
|
||||
a.phui-tag-view:hover.phui-tag-shade-disabled .phui-tag-core {
|
||||
border-color: {$sh-disabledborder};
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue