mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-26 00:32:42 +01:00
Polish up timeline for PHIUTwoColumnView
Summary: This inverts colors and icons a bit, so they're not as harsh. So instead of a dark green item with white icon, its now light green with a dark green icon. I've also changed all text and comment boxes to be "grey" visually to separate out the UI from converation/actions. Give it a spin and let me know how this feels. I still need to update the comment UI.
Test Plan:
UIExamples, lots of various tasks and diffs.
{F1163837}
{F1163839}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D15442
This commit is contained in:
Chad Little
parent
5d6bb0ffeb
commit
3d44a5c253
8 changed files with 96 additions and 66 deletions
|
|
@ -7,7 +7,7 @@
|
|||
*/
|
||||
return array(
|
||||
'names' => array(
|
||||
'core.pkg.css' => 'd3b3a609',
|
||||
'core.pkg.css' => '9c8e888d',
|
||||
'core.pkg.js' => '7d8faf57',
|
||||
'darkconsole.pkg.js' => 'e7393ebb',
|
||||
'differential.pkg.css' => '2de124c9',
|
||||
|
|
@ -149,14 +149,14 @@ return array(
|
|||
'rsrc/css/phui/phui-pager.css' => 'bea33d23',
|
||||
'rsrc/css/phui/phui-pinboard-view.css' => '2495140e',
|
||||
'rsrc/css/phui/phui-profile-menu.css' => '7e92a89a',
|
||||
'rsrc/css/phui/phui-property-list-view.css' => '27b2849e',
|
||||
'rsrc/css/phui/phui-property-list-view.css' => 'b12e801c',
|
||||
'rsrc/css/phui/phui-remarkup-preview.css' => '1a8f2591',
|
||||
'rsrc/css/phui/phui-segment-bar-view.css' => '46342871',
|
||||
'rsrc/css/phui/phui-spacing.css' => '042804d6',
|
||||
'rsrc/css/phui/phui-status.css' => '37309046',
|
||||
'rsrc/css/phui/phui-tag-view.css' => '6bbd83e2',
|
||||
'rsrc/css/phui/phui-timeline-view.css' => '2efceff8',
|
||||
'rsrc/css/phui/phui-two-column-view.css' => '38871c98',
|
||||
'rsrc/css/phui/phui-timeline-view.css' => 'a0173eba',
|
||||
'rsrc/css/phui/phui-two-column-view.css' => 'e6bf86b6',
|
||||
'rsrc/css/phui/workboards/phui-workboard-color.css' => 'ac6fe6a7',
|
||||
'rsrc/css/phui/workboards/phui-workboard.css' => 'e6d89647',
|
||||
'rsrc/css/phui/workboards/phui-workcard.css' => '3646fb96',
|
||||
|
|
@ -273,6 +273,7 @@ return array(
|
|||
'rsrc/image/checker_dark.png' => 'd8e65881',
|
||||
'rsrc/image/checker_light.png' => 'a0155918',
|
||||
'rsrc/image/checker_lighter.png' => 'd5da91b6',
|
||||
'rsrc/image/d5d8e1.png' => '0c2a1497',
|
||||
'rsrc/image/darkload.gif' => '1ffd3ec6',
|
||||
'rsrc/image/divot.png' => '94dded62',
|
||||
'rsrc/image/examples/hero.png' => '979a86ae',
|
||||
|
|
@ -837,15 +838,15 @@ return array(
|
|||
'phui-pager-css' => 'bea33d23',
|
||||
'phui-pinboard-view-css' => '2495140e',
|
||||
'phui-profile-menu-css' => '7e92a89a',
|
||||
'phui-property-list-view-css' => '27b2849e',
|
||||
'phui-property-list-view-css' => 'b12e801c',
|
||||
'phui-remarkup-preview-css' => '1a8f2591',
|
||||
'phui-segment-bar-view-css' => '46342871',
|
||||
'phui-spacing-css' => '042804d6',
|
||||
'phui-status-list-view-css' => '37309046',
|
||||
'phui-tag-view-css' => '6bbd83e2',
|
||||
'phui-theme-css' => '027ba77e',
|
||||
'phui-timeline-view-css' => '2efceff8',
|
||||
'phui-two-column-view-css' => '38871c98',
|
||||
'phui-timeline-view-css' => 'a0173eba',
|
||||
'phui-two-column-view-css' => 'e6bf86b6',
|
||||
'phui-workboard-color-css' => 'ac6fe6a7',
|
||||
'phui-workboard-view-css' => 'e6d89647',
|
||||
'phui-workcard-view-css' => '3646fb96',
|
||||
|
|
|
|||
|
|
@ -71,6 +71,7 @@ final class CelerityDefaultPostprocessor
|
|||
'hoverselectedgrey' => '#bbc4ca',
|
||||
'hoverselectedblue' => '#e6e9ee',
|
||||
'borderinset' => 'inset 0 0 0 1px rgba(55,55,55,.15)',
|
||||
'timeline' => '#d5d8e1',
|
||||
|
||||
// Alphas
|
||||
'alphawhite' => '255,255,255',
|
||||
|
|
|
|||
|
|
@ -9,6 +9,13 @@ final class PhabricatorContentSourceView extends AphrontView {
|
|||
return $this;
|
||||
}
|
||||
|
||||
public function getSourceName() {
|
||||
$map = PhabricatorContentSource::getSourceNameMap();
|
||||
$source = $this->contentSource->getSource();
|
||||
return idx($map, $source, null);
|
||||
|
||||
}
|
||||
|
||||
public function render() {
|
||||
require_celerity_resource('phabricator-content-source-view-css');
|
||||
|
||||
|
|
|
|||
|
|
@ -232,11 +232,12 @@ final class PHUITimelineEventView extends AphrontView {
|
|||
$fill_classes = array();
|
||||
$fill_classes[] = 'phui-timeline-icon-fill';
|
||||
if ($this->color) {
|
||||
$fill_classes[] = 'fill-has-color';
|
||||
$fill_classes[] = 'phui-timeline-icon-fill-'.$this->color;
|
||||
}
|
||||
|
||||
$icon = id(new PHUIIconView())
|
||||
->setIcon($this->icon.' white')
|
||||
->setIcon($this->icon)
|
||||
->addClass('phui-timeline-icon');
|
||||
|
||||
$icon = phutil_tag(
|
||||
|
|
@ -504,11 +505,12 @@ final class PHUITimelineEventView extends AphrontView {
|
|||
}
|
||||
|
||||
$source = $this->getContentSource();
|
||||
$content_source = null;
|
||||
if ($source) {
|
||||
$extra[] = id(new PhabricatorContentSourceView())
|
||||
$content_source = id(new PhabricatorContentSourceView())
|
||||
->setContentSource($source)
|
||||
->setUser($this->getUser())
|
||||
->render();
|
||||
->setUser($this->getUser());
|
||||
$content_source = pht('Via %s', $content_source->getSourceName());
|
||||
}
|
||||
|
||||
$date_created = null;
|
||||
|
|
@ -528,6 +530,7 @@ final class PHUITimelineEventView extends AphrontView {
|
|||
$this->getUser());
|
||||
if ($this->anchor) {
|
||||
Javelin::initBehavior('phabricator-watch-anchor');
|
||||
Javelin::initBehavior('phabricator-tooltips');
|
||||
|
||||
$anchor = id(new PhabricatorAnchorView())
|
||||
->setAnchorName($this->anchor)
|
||||
|
|
@ -535,10 +538,14 @@ final class PHUITimelineEventView extends AphrontView {
|
|||
|
||||
$date = array(
|
||||
$anchor,
|
||||
phutil_tag(
|
||||
javelin_tag(
|
||||
'a',
|
||||
array(
|
||||
'href' => '#'.$this->anchor,
|
||||
'sigil' => 'has-tooltip',
|
||||
'meta' => array(
|
||||
'tip' => $content_source,
|
||||
),
|
||||
),
|
||||
$date),
|
||||
);
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@
|
|||
}
|
||||
|
||||
.phui-property-list-text-content {
|
||||
padding: 12px 4px;
|
||||
padding: 16px 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
|
||||
.phui-timeline-view {
|
||||
padding: 0 16px;
|
||||
background-image: url('/rsrc/image/BFCFDA.png');
|
||||
background-image: url('/rsrc/image/d5d8e1.png');
|
||||
background-repeat: repeat-y;
|
||||
background-position: 94px;
|
||||
background-position: 96px;
|
||||
}
|
||||
|
||||
.device .phui-timeline-view {
|
||||
|
|
@ -23,8 +23,8 @@
|
|||
}
|
||||
|
||||
.phui-timeline-major-event .phui-timeline-group {
|
||||
border-left: 1px solid {$lightblueborder};
|
||||
border-right: 1px solid {$lightblueborder};
|
||||
border-left: 1px solid {$timeline};
|
||||
border-right: 1px solid {$timeline};
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
}
|
||||
|
||||
.device-desktop .phui-timeline-event-view.phui-timeline-minor-event {
|
||||
margin-left: 65px;
|
||||
margin-left: 67px;
|
||||
}
|
||||
|
||||
.device-desktop .phui-timeline-spacer {
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
}
|
||||
|
||||
.device-desktop .phui-timeline-wedge {
|
||||
border-bottom: 1px solid {$lightblueborder};
|
||||
border-bottom: 1px solid {$timeline};
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
}
|
||||
|
|
@ -61,25 +61,25 @@
|
|||
}
|
||||
|
||||
.phui-timeline-major-event .phui-timeline-content {
|
||||
border-top: 1px solid {$lightblueborder};
|
||||
border-bottom: 1px solid {$lightblueborder};
|
||||
border-top: 1px solid {$timeline};
|
||||
border-bottom: 1px solid {$timeline};
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.phui-timeline-title {
|
||||
line-height: 22px;
|
||||
line-height: 24px;
|
||||
min-height: 19px;
|
||||
position: relative;
|
||||
color: {$bluetext};
|
||||
color: {$greytext};
|
||||
}
|
||||
|
||||
.phui-timeline-minor-event .phui-timeline-title {
|
||||
padding: 4px 8px 4px 33px;
|
||||
padding: 1px 8px 4px 33px;
|
||||
}
|
||||
|
||||
.phui-timeline-title a {
|
||||
font-weight: bold;
|
||||
color: {$darkbluetext};
|
||||
color: {$darkgreytext};
|
||||
}
|
||||
|
||||
.device-desktop .phui-timeline-wedge {
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
}
|
||||
|
||||
.device-desktop .phui-timeline-minor-event .phui-timeline-wedge {
|
||||
top: 13px;
|
||||
top: 12px;
|
||||
left: -18px;
|
||||
width: 20px;
|
||||
}
|
||||
|
|
@ -100,7 +100,6 @@
|
|||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
border-radius: 3px;
|
||||
box-shadow: {$borderinset};
|
||||
background-size: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -113,22 +112,29 @@
|
|||
}
|
||||
|
||||
.device-desktop .phui-timeline-minor-event .phui-timeline-image {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-size: 28px auto;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background-size: 26px auto;
|
||||
left: -41px;
|
||||
}
|
||||
|
||||
.phui-timeline-major-event .phui-timeline-title {
|
||||
background: {$lightbluebackground};
|
||||
background: {$lightgreybackground};
|
||||
min-height: 22px;
|
||||
border-top-right-radius: 3px;
|
||||
border-top-left-radius: 3px;
|
||||
}
|
||||
|
||||
.phui-timeline-title + .phui-timeline-title {
|
||||
.phui-timeline-major-event .phui-timeline-title + .phui-timeline-title {
|
||||
border-radius: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.phui-timeline-major-event .phui-timeline-title + .phui-timeline-title
|
||||
.phui-timeline-icon-fill {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.phui-timeline-title {
|
||||
padding: 5px 8px;
|
||||
overflow-x: auto;
|
||||
|
|
@ -136,7 +142,7 @@
|
|||
}
|
||||
|
||||
.phui-timeline-title-with-icon {
|
||||
padding-left: 38px;
|
||||
padding-left: 36px;
|
||||
}
|
||||
|
||||
.phui-timeline-title-with-menu {
|
||||
|
|
@ -170,9 +176,10 @@
|
|||
|
||||
.phui-timeline-major-event .phui-timeline-content
|
||||
.phui-timeline-core-content {
|
||||
padding: 16px 12px;
|
||||
padding: 16px;
|
||||
line-height: 18px;
|
||||
background: #fff;
|
||||
border-top: 1px solid rgba({$alphablue},.1);
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
|
@ -203,52 +210,49 @@
|
|||
border-width: 0;
|
||||
}
|
||||
|
||||
.phui-timeline-spacer.phui-timeline-spacer-bold {
|
||||
border-bottom: 4px solid {$lightblueborder};
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.phui-timeline-spacer-bold + .phui-timeline-spacer {
|
||||
background-color: #ebecee;
|
||||
}
|
||||
|
||||
.phui-timeline-icon-fill {
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: {$lightblueborder};
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.phui-icon-view.phui-timeline-icon:before {
|
||||
font-size: 15px;
|
||||
.phui-timeline-icon {
|
||||
color: {$sh-blueicon};
|
||||
}
|
||||
|
||||
.phui-timeline-minor-event .phui-timeline-icon-fill {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
.phui-icon-view.phui-timeline-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.phui-timeline-icon-fill {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
border-radius: 3px;
|
||||
background-color: #E6E9F1;
|
||||
}
|
||||
|
||||
.phui-timeline-major-event .phui-timeline-icon-fill {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.phui-timeline-icon-fill .phui-timeline-icon {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.phui-timeline-minor-event .phui-timeline-icon-fill .phui-timeline-icon {
|
||||
margin-top: 7px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.phui-timeline-extra,
|
||||
.phui-timeline-extra .phabricator-content-source-view {
|
||||
font-size: {$smallestfontsize};
|
||||
font-size: {$smallerfontsize};
|
||||
font-weight: normal;
|
||||
color: {$lightbluetext};
|
||||
color: {$lightgreytext};
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.phui-timeline-title .phui-timeline-extra a {
|
||||
font-weight: normal;
|
||||
color: {$lightgreytext};
|
||||
}
|
||||
|
||||
.device-desktop .phui-timeline-extra {
|
||||
|
|
@ -267,6 +271,10 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.phui-timeline-icon-fill.fill-has-color .phui-icon-view {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.phui-timeline-icon-fill-red {
|
||||
background-color: {$red};
|
||||
}
|
||||
|
|
@ -304,7 +312,7 @@
|
|||
}
|
||||
|
||||
.phui-timeline-icon-fill-black {
|
||||
background-color: #333;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.phui-timeline-shell.anchor-target {
|
||||
|
|
@ -343,7 +351,7 @@
|
|||
|
||||
.phui-timeline-title .phui-timeline-extra-information a {
|
||||
font-weight: normal;
|
||||
color: {$bluetext};
|
||||
color: {$greytext};
|
||||
}
|
||||
|
||||
.phui-timeline-comment-actions .phui-icon-view {
|
||||
|
|
@ -359,11 +367,11 @@
|
|||
right: 3px;
|
||||
top: 6px;
|
||||
width: 28px;
|
||||
height: 22px;
|
||||
height: 24px;
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
font-size: 15px;
|
||||
border-left: 1px solid {$lightblueborder};
|
||||
font-size: 16px;
|
||||
border-left: 1px solid {$thinblueborder};
|
||||
}
|
||||
|
||||
.phui-timeline-menu:focus {
|
||||
|
|
@ -379,11 +387,13 @@ a.phui-timeline-menu .phui-icon-view {
|
|||
}
|
||||
|
||||
.device-desktop a.phui-timeline-menu:hover .phui-icon-view {
|
||||
color: {$darkgreytext};
|
||||
color: {$sky};
|
||||
}
|
||||
|
||||
.phui-timeline-menu.phuix-dropdown-open {
|
||||
background: {$hovergrey};
|
||||
background: rgba({$alphablue},0.1);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.phui-timeline-view + .phui-object-box {
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@
|
|||
|
||||
.phui-two-column-view .phui-timeline-view {
|
||||
padding: 0;
|
||||
background-position: 78px;
|
||||
background-position: 80px;
|
||||
}
|
||||
|
||||
.phui-two-column-view .phui-main-column .phui-object-box + .phui-timeline-view {
|
||||
|
|
@ -107,6 +107,10 @@
|
|||
border-top: 1px solid {$thinblueborder};
|
||||
}
|
||||
|
||||
.device-phone .phui-main-column .phui-timeline-older-transactions-are-hidden {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Main Column Properties */
|
||||
|
||||
.device-desktop .phui-main-column .phui-property-list-key {
|
||||
|
|
|
|||
BIN
webroot/rsrc/image/d5d8e1.png
Normal file
BIN
webroot/rsrc/image/d5d8e1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 B |
Loading…
Reference in a new issue