revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-22 23:02:42 +01:00
Code Issues Releases Wiki Activity

Update people hovercard UI

Browse source 
Summary: Removes Badges, they felt awkward. Updates UI, larger image, better layout, more icons.

Test Plan: Review numerous layouts with fancy new search tool.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Differential Revision: https://secure.phabricator.com/D17391
This commit is contained in:
Chad Little 2017-02-21 14:18:17 -08:00
parent ab9c1b73b5
commit 89ce42c15c
8 changed files with 130 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
resources/celerity/map.php
View file

@ -9,7 +9,7 @@ return array(
'names' => array(
'conpherence.pkg.css' => 'a520d619',
'conpherence.pkg.js' => '6249a1cf',
'core.pkg.css' => '0d7ecd3b',
'core.pkg.css' => 'cc0250e8',
'core.pkg.js' => '1fa7c0c5',
'darkconsole.pkg.js' => 'e7393ebb',
'differential.pkg.css' => '4815647b',
@ -96,7 +96,7 @@ return array(
'rsrc/css/application/policy/policy-transaction-detail.css' => '82100a43',
'rsrc/css/application/policy/policy.css' => '957ea14c',
'rsrc/css/application/ponder/ponder-view.css' => 'fbd45f96',
'rsrc/css/application/project/project-card-view.css' => 'f25746f5',
'rsrc/css/application/project/project-card-view.css' => '77219296',
'rsrc/css/application/project/project-view.css' => '9f6ce0e1',
'rsrc/css/application/releeph/releeph-core.css' => '9b3c5733',
'rsrc/css/application/releeph/releeph-preview-branch.css' => 'b7a6f4a5',
@ -130,7 +130,7 @@ return array(
'rsrc/css/phui/object-item/phui-oi-simple-ui.css' => 'a8beebea',
'rsrc/css/phui/phui-action-list.css' => 'f980c059',
'rsrc/css/phui/phui-action-panel.css' => '91c7b835',
'rsrc/css/phui/phui-badge.css' => '3baef8db',
'rsrc/css/phui/phui-badge.css' => '22fe77f8',
'rsrc/css/phui/phui-basic-nav-view.css' => 'a0705f53',
'rsrc/css/phui/phui-big-info-view.css' => 'bd903741',
'rsrc/css/phui/phui-box.css' => '269cbc99',
@ -150,9 +150,9 @@ return array(
'rsrc/css/phui/phui-form.css' => '5815af7b',
'rsrc/css/phui/phui-head-thing.css' => 'fd311e5f',
'rsrc/css/phui/phui-header-view.css' => 'fef6a54e',
'rsrc/css/phui/phui-hovercard.css' => 'e904f5dc',
'rsrc/css/phui/phui-hovercard.css' => 'ae091fc5',
'rsrc/css/phui/phui-icon-set-selector.css' => '87db8fee',
'rsrc/css/phui/phui-icon.css' => '09f46dd9',
'rsrc/css/phui/phui-icon.css' => '12b387a1',
'rsrc/css/phui/phui-image-mask.css' => 'a8498f9c',
'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
'rsrc/css/phui/phui-info-view.css' => 'ec92802a',
@ -837,7 +837,7 @@ return array(
'phrequent-css' => 'ffc185ad',
'phriction-document-css' => '4282e4ad',
'phui-action-panel-css' => '91c7b835',
'phui-badge-view-css' => '3baef8db',
'phui-badge-view-css' => '22fe77f8',
'phui-basic-nav-view-css' => 'a0705f53',
'phui-big-info-view-css' => 'bd903741',
'phui-box-css' => '269cbc99',
@ -863,9 +863,9 @@ return array(
'phui-head-thing-view-css' => 'fd311e5f',
'phui-header-view-css' => 'fef6a54e',
'phui-hovercard' => '1bd28176',
'phui-hovercard-view-css' => 'e904f5dc',
'phui-hovercard-view-css' => 'ae091fc5',
'phui-icon-set-selector-css' => '87db8fee',
'phui-icon-view-css' => '09f46dd9',
'phui-icon-view-css' => '12b387a1',
'phui-image-mask-css' => 'a8498f9c',
'phui-info-panel-css' => '27ea50a1',
'phui-info-view-css' => 'ec92802a',
@ -905,7 +905,7 @@ return array(
'policy-edit-css' => '815c66f7',
'policy-transaction-detail-css' => '82100a43',
'ponder-view-css' => 'fbd45f96',
'project-card-view-css' => 'f25746f5',
'project-card-view-css' => '77219296',
'project-view-css' => '9f6ce0e1',
'releeph-core' => '9b3c5733',
'releeph-preview-branch' => 'b7a6f4a5',

1
src/applications/people/engineextension/PeopleHovercardEngineExtension.php
View file

@ -27,7 +27,6 @@ final class PeopleHovercardEngineExtension
->needAvailability(true)
->needProfileImage(true)
->needProfile(true)
->needBadges(true)
->execute();
$users = mpull($users, null, 'getPHID');

9
src/applications/people/menuitem/PhabricatorPeoplePictureProfileMenuItem.php
View file

@ -36,6 +36,13 @@ final class PhabricatorPeoplePictureProfileMenuItem
$picture = $user->getProfileImageURI();
$name = $user->getUsername();
$classes = array();
$classes[] = 'people-menu-image';
if ($user->getIsDisabled()) {
$classes[] = 'phui-image-disabled';
}
$href = urisprintf(
'/p/%s/',
$user->getUsername());
@ -44,7 +51,7 @@ final class PhabricatorPeoplePictureProfileMenuItem
'img',
array(
'src' => $picture,
'class' => 'people-menu-image',
'class' => implode(' ', $classes),
));
$can_edit = PhabricatorPolicyFilter::hasCapability(

110
src/applications/people/view/PhabricatorUserCardView.php
View file

@ -33,9 +33,7 @@ final class PhabricatorUserCardView extends AphrontTagView {
$classes[] = 'project-card-view';
if ($this->profile->getIsDisabled()) {
$classes[] = 'project-card-grey';
} else {
$classes[] = 'project-card-blue';
$classes[] = 'project-card-disabled';
}
return array(
@ -56,10 +54,12 @@ final class PhabricatorUserCardView extends AphrontTagView {
// the most important tag. Users can click through to the profile to get
// more details.
$classes = array();
if ($user->getIsDisabled()) {
$tag_icon = 'fa-ban';
$tag_title = pht('Disabled');
$tag_shade = PHUITagView::COLOR_RED;
$classes[] = 'phui-image-disabled';
} else if (!$user->getIsApproved()) {
$tag_icon = 'fa-ban';
$tag_title = pht('Unapproved Account');
@ -87,47 +87,60 @@ final class PhabricatorUserCardView extends AphrontTagView {
$tag->setShade($tag_shade);
}
$header = id(new PHUIHeaderView())
->setHeader($user->getFullName())
->addTag($tag)
->setUser($viewer)
->setImage($picture);
$body = array();
/* TODO: Replace with Conpherence Availability if we ship it */
$body[] = $this->addItem(
pht('User Since'),
'fa-user-plus',
phabricator_date($user->getDateCreated(), $viewer));
if (PhabricatorApplication::isClassInstalledForViewer(
'PhabricatorCalendarApplication',
$viewer)) {
$body[] = $this->addItem(
pht('Availability'),
'fa-calendar-o',
id(new PHUIUserAvailabilityView())
->setViewer($viewer)
->setAvailableUser($user));
}
$badges = $this->buildBadges($user, $viewer);
if ($badges) {
$badges = id(new PHUIBadgeBoxView())
->addItems($badges)
->setCollapsed(true);
$body[] = phutil_tag(
'div',
$classes[] = 'project-card-image';
$image = phutil_tag(
'img',
array(
'class' => 'phui-hovercard-body-item hovercard-badges',
),
$badges);
}
'src' => $picture,
'class' => implode(' ', $classes),
));
$body = phutil_tag(
$href = urisprintf(
'/p/%s/',
$user->getUsername());
$image = phutil_tag(
'a',
array(
'href' => $href,
),
$image);
$name = phutil_tag_div('project-card-name',
$user->getRealname());
$username = phutil_tag_div('project-card-username',
'@'.$user->getUsername());
$tag = phutil_tag_div('phui-header-subheader',
$tag);
$header = phutil_tag(
'div',
array(
'class' => 'project-card-body',
'class' => 'project-card-header',
),
$body);
array(
$name,
$username,
$tag,
$body,
));
$card = phutil_tag(
'div',
@ -135,47 +148,24 @@ final class PhabricatorUserCardView extends AphrontTagView {
'class' => 'project-card-inner',
),
array(
$image,
$header,
$body,
));
return $card;
}
private function addItem($label, $value) {
$item = array(
phutil_tag('strong', array(), $label),
': ',
phutil_tag('span', array(), $value),
);
return phutil_tag_div('project-card-item', $item);
}
private function buildBadges(
PhabricatorUser $user,
$viewer) {
$class = 'PhabricatorBadgesApplication';
$items = array();
if (PhabricatorApplication::isClassInstalledForViewer($class, $viewer)) {
$badge_phids = $user->getBadgePHIDs();
if ($badge_phids) {
$badges = id(new PhabricatorBadgesQuery())
->setViewer($viewer)
->withPHIDs($badge_phids)
->withStatuses(array(PhabricatorBadgesBadge::STATUS_ACTIVE))
->execute();
foreach ($badges as $badge) {
$items[] = id(new PHUIBadgeMiniView())
->setIcon($badge->getIcon())
->setHeader($badge->getName())
->setQuality($badge->getQuality());
}
}
}
return $items;
private function addItem($icon, $value) {
$icon = id(new PHUIIconView())
->addClass('project-card-item-icon')
->setIcon($icon);
$text = phutil_tag(
'span',
array(
'class' => 'project-card-item-text',
),
$value);
return phutil_tag_div('project-card-item', array($icon, $text));
}
}

52
webroot/rsrc/css/application/project/project-card-view.css
View file

@ -9,7 +9,8 @@
border: 1px solid {$lightblueborder};
border-radius: 3px;
box-shadow: {$dropshadow};
width: 380px;
width: 420px;
position: relative;
}
.project-card-view .phui-header-shell {
@ -35,6 +36,53 @@
display: block;
}
.project-card-view .project-card-image {
height: 140px;
width: 140px;
margin: 6px;
border-radius: 3px;
}
.project-card-view .project-card-item div {
display: inline;
}
.project-card-view .project-card-item {
margin-bottom: 2px;
}
.project-card-view .project-card-item-text {
color: {$greytext};
}
.project-card-view .project-card-item-icon {
width: 20px;
}
.project-card-view .project-card-header {
position: absolute;
top: 12px;
left: 158px;
}
.project-card-header .project-card-name {
font-size: 20px;
font-family: 'Aleo', {$fontfamily};
font-weight: bold;
color: #000;
margin-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
width: 250px;
overflow: hidden;
}
.project-card-header .project-card-username {
font-size: 14px;
color: {$bluetext};
margin-bottom: 12px;
}
.project-card-view .phui-header-shell .phui-header-col1 {
vertical-align: top;
width: 64px;
@ -65,7 +113,7 @@
}
.project-card-view .project-card-body {
padding: 0 12px 12px 76px;
padding: 0 12px 12px 12px;
color: {$darkbluetext};
}

5
webroot/rsrc/css/phui/phui-badge.css
View file

@ -183,11 +183,6 @@
line-height: 24px;
text-align: center;
display: inline-block;
opacity: 0.7;
}
.phui-badge-mini:hover {
opacity: 1;
}
.phui-badge-mini .phui-icon-view {

6
webroot/rsrc/css/phui/phui-hovercard.css
View file

@ -81,7 +81,11 @@
}
.hovercard-badges {
margin: 8px 0 0 0;
margin: 6px 0 0 0;
padding: 4px;
background: {$page.background};
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.hovercard-badges .phui-badge-flex-item {

8
webroot/rsrc/css/phui/phui-icon.css
View file

@ -31,7 +31,7 @@
}
.phui-icon-has-text:before {
margin-right: 4px;
margin-right: 6px;
}
a.phui-icon-view:hover {
@ -39,6 +39,12 @@ a.phui-icon-view:hover {
color: {$sky};
}
img.phui-image-disabled {
opacity: .8;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
/* - Icon in a Circle ------------------------------------------------------- */
.phui-icon-circle {