1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-09 16:32:39 +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 2016-03-08 17:50:01 -08:00
parent 5d6bb0ffeb
commit 3d44a5c253
8 changed files with 96 additions and 66 deletions

View file

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

View file

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

View file

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

View file

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

View file

@ -125,7 +125,7 @@
}
.phui-property-list-text-content {
padding: 12px 4px;
padding: 16px 4px;
overflow: hidden;
}

View file

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

View file

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 B