mirror of
https://we.phorge.it/source/phorge.git
synced 2025-01-14 08:41:07 +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:
parent
cb1c3424a8
commit
19f4e8631f
4 changed files with 77 additions and 8 deletions
|
@ -7,7 +7,7 @@
|
||||||
*/
|
*/
|
||||||
return array(
|
return array(
|
||||||
'names' => array(
|
'names' => array(
|
||||||
'core.pkg.css' => '92f16374',
|
'core.pkg.css' => '956d6a9f',
|
||||||
'core.pkg.js' => '573e6664',
|
'core.pkg.js' => '573e6664',
|
||||||
'darkconsole.pkg.js' => 'e7393ebb',
|
'darkconsole.pkg.js' => 'e7393ebb',
|
||||||
'differential.pkg.css' => '2de124c9',
|
'differential.pkg.css' => '2de124c9',
|
||||||
|
@ -133,7 +133,7 @@ return array(
|
||||||
'rsrc/css/phui/phui-fontkit.css' => '9cda225e',
|
'rsrc/css/phui/phui-fontkit.css' => '9cda225e',
|
||||||
'rsrc/css/phui/phui-form-view.css' => '4a1a0f5e',
|
'rsrc/css/phui/phui-form-view.css' => '4a1a0f5e',
|
||||||
'rsrc/css/phui/phui-form.css' => '0b98e572',
|
'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-set-selector.css' => '1ab67aad',
|
||||||
'rsrc/css/phui/phui-icon.css' => '3f33ab57',
|
'rsrc/css/phui/phui-icon.css' => '3f33ab57',
|
||||||
'rsrc/css/phui/phui-image-mask.css' => '5a8b09c8',
|
'rsrc/css/phui/phui-image-mask.css' => '5a8b09c8',
|
||||||
|
@ -808,7 +808,7 @@ return array(
|
||||||
'phui-fontkit-css' => '9cda225e',
|
'phui-fontkit-css' => '9cda225e',
|
||||||
'phui-form-css' => '0b98e572',
|
'phui-form-css' => '0b98e572',
|
||||||
'phui-form-view-css' => '4a1a0f5e',
|
'phui-form-view-css' => '4a1a0f5e',
|
||||||
'phui-header-view-css' => '235f0d7d',
|
'phui-header-view-css' => 'd53cc835',
|
||||||
'phui-icon-set-selector-css' => '1ab67aad',
|
'phui-icon-set-selector-css' => '1ab67aad',
|
||||||
'phui-icon-view-css' => '3f33ab57',
|
'phui-icon-view-css' => '3f33ab57',
|
||||||
'phui-image-mask-css' => '5a8b09c8',
|
'phui-image-mask-css' => '5a8b09c8',
|
||||||
|
|
|
@ -31,6 +31,15 @@ final class PhabricatorProjectProfileController
|
||||||
$header->setStatus('fa-ban', 'red', pht('Archived'));
|
$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);
|
$properties = $this->buildPropertyListView($project);
|
||||||
|
|
||||||
$watch_action = $this->renderWatchAction($project);
|
$watch_action = $this->renderWatchAction($project);
|
||||||
|
|
|
@ -8,6 +8,7 @@ final class PHUIHeaderView extends AphrontTagView {
|
||||||
private $tags = array();
|
private $tags = array();
|
||||||
private $image;
|
private $image;
|
||||||
private $imageURL = null;
|
private $imageURL = null;
|
||||||
|
private $imageEditURL = null;
|
||||||
private $subheader;
|
private $subheader;
|
||||||
private $headerIcon;
|
private $headerIcon;
|
||||||
private $noBackground;
|
private $noBackground;
|
||||||
|
@ -57,6 +58,11 @@ final class PHUIHeaderView extends AphrontTagView {
|
||||||
return $this;
|
return $this;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public function setImageEditURL($url) {
|
||||||
|
$this->imageEditURL = $url;
|
||||||
|
return $this;
|
||||||
|
}
|
||||||
|
|
||||||
public function setSubheader($subheader) {
|
public function setSubheader($subheader) {
|
||||||
$this->subheader = $subheader;
|
$this->subheader = $subheader;
|
||||||
return $this;
|
return $this;
|
||||||
|
@ -174,16 +180,45 @@ final class PHUIHeaderView extends AphrontTagView {
|
||||||
}
|
}
|
||||||
|
|
||||||
protected function getTagContent() {
|
protected function getTagContent() {
|
||||||
|
|
||||||
$image = null;
|
$image = null;
|
||||||
if ($this->image) {
|
if ($this->image) {
|
||||||
|
$image_href = null;
|
||||||
|
if ($this->imageURL) {
|
||||||
|
$image_href = $this->imageURL;
|
||||||
|
} else if ($this->imageEditURL) {
|
||||||
|
$image_href = $this->imageEditURL;
|
||||||
|
}
|
||||||
|
|
||||||
$image = phutil_tag(
|
$image = phutil_tag(
|
||||||
($this->imageURL ? 'a' : 'span'),
|
'span',
|
||||||
array(
|
array(
|
||||||
'href' => $this->imageURL,
|
|
||||||
'class' => 'phui-header-image',
|
'class' => 'phui-header-image',
|
||||||
'style' => 'background-image: url('.$this->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();
|
$viewer = $this->getUser();
|
||||||
|
|
|
@ -128,9 +128,34 @@ body .phui-header-shell.phui-bleed-header
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
box-shadow: {$borderinset};
|
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 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 {
|
.phui-header-subheader {
|
||||||
|
|
Loading…
Reference in a new issue