1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-10 00:42:41 +01:00

Add an edit link on hover for Project profile images

Summary: Minor point of polish, but feels really nice. Hover over photo and edit a link to change the picture.

Test Plan:
hover hover, clicky clicky

{F1069179}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Differential Revision: https://secure.phabricator.com/D15109
This commit is contained in:
Chad Little 2016-01-24 13:18:42 -08:00
parent cb1c3424a8
commit 19f4e8631f
4 changed files with 77 additions and 8 deletions

View file

@ -7,7 +7,7 @@
*/
return array(
'names' => array(
'core.pkg.css' => '92f16374',
'core.pkg.css' => '956d6a9f',
'core.pkg.js' => '573e6664',
'darkconsole.pkg.js' => 'e7393ebb',
'differential.pkg.css' => '2de124c9',
@ -133,7 +133,7 @@ return array(
'rsrc/css/phui/phui-fontkit.css' => '9cda225e',
'rsrc/css/phui/phui-form-view.css' => '4a1a0f5e',
'rsrc/css/phui/phui-form.css' => '0b98e572',
'rsrc/css/phui/phui-header-view.css' => '235f0d7d',
'rsrc/css/phui/phui-header-view.css' => 'd53cc835',
'rsrc/css/phui/phui-icon-set-selector.css' => '1ab67aad',
'rsrc/css/phui/phui-icon.css' => '3f33ab57',
'rsrc/css/phui/phui-image-mask.css' => '5a8b09c8',
@ -808,7 +808,7 @@ return array(
'phui-fontkit-css' => '9cda225e',
'phui-form-css' => '0b98e572',
'phui-form-view-css' => '4a1a0f5e',
'phui-header-view-css' => '235f0d7d',
'phui-header-view-css' => 'd53cc835',
'phui-icon-set-selector-css' => '1ab67aad',
'phui-icon-view-css' => '3f33ab57',
'phui-image-mask-css' => '5a8b09c8',

View file

@ -31,6 +31,15 @@ final class PhabricatorProjectProfileController
$header->setStatus('fa-ban', 'red', pht('Archived'));
}
$can_edit = PhabricatorPolicyFilter::hasCapability(
$viewer,
$project,
PhabricatorPolicyCapability::CAN_EDIT);
if ($can_edit) {
$header->setImageEditURL($this->getApplicationURI("picture/{$id}/"));
}
$properties = $this->buildPropertyListView($project);
$watch_action = $this->renderWatchAction($project);

View file

@ -8,6 +8,7 @@ final class PHUIHeaderView extends AphrontTagView {
private $tags = array();
private $image;
private $imageURL = null;
private $imageEditURL = null;
private $subheader;
private $headerIcon;
private $noBackground;
@ -57,6 +58,11 @@ final class PHUIHeaderView extends AphrontTagView {
return $this;
}
public function setImageEditURL($url) {
$this->imageEditURL = $url;
return $this;
}
public function setSubheader($subheader) {
$this->subheader = $subheader;
return $this;
@ -174,16 +180,45 @@ final class PHUIHeaderView extends AphrontTagView {
}
protected function getTagContent() {
$image = null;
if ($this->image) {
$image_href = null;
if ($this->imageURL) {
$image_href = $this->imageURL;
} else if ($this->imageEditURL) {
$image_href = $this->imageEditURL;
}
$image = phutil_tag(
($this->imageURL ? 'a' : 'span'),
'span',
array(
'href' => $this->imageURL,
'class' => 'phui-header-image',
'style' => 'background-image: url('.$this->image.')',
),
' ');
));
if ($image_href) {
$edit_view = null;
if ($this->imageEditURL) {
$edit_view = phutil_tag(
'span',
array(
'class' => 'phui-header-image-edit',
),
pht('Edit'));
}
$image = phutil_tag(
'a',
array(
'href' => $image_href,
'class' => 'phui-header-image-href',
),
array(
$image,
$edit_view,
));
}
}
$viewer = $this->getUser();

View file

@ -128,9 +128,34 @@ body .phui-header-shell.phui-bleed-header
display: inline-block;
background-repeat: no-repeat;
background-size: 100%;
box-shadow: {$borderinset};
width: 50px;
height: 50px;
border-radius: 3px;
}
.phui-header-image-href {
position: relative;
display: block;
}
.phui-header-image-edit {
display: none;
}
.device-desktop .phui-header-image-href:hover .phui-header-image-edit {
display: block;
position: absolute;
left: 0;
background: rgba(0,0,0,0.4);
color: #fff;
font-weight: normal;
bottom: 4px;
padding: 4px 8px;
font-size: 12px;
}
.device-desktop .phui-header-image-edit:hover {
text-decoration: underline;
}
.phui-header-subheader {