revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-18 19:40:55 +01:00
Code Issues Releases Wiki Activity

Make the Pholio download button actually download

Browse source 
Summary:
  - When the button is clicked, actually download the file or image.
  - Add aural hints for the icon-only buttons.
  - Use a "photo" icon for "view raw image", so the "arrows pointing outward" icon can be used for "fullscreen" some day.

Test Plan: Clicked link, got a download.

Reviewers: chad

Reviewed By: chad

Subscribers: epriestley

Differential Revision: https://secure.phabricator.com/D9574
This commit is contained in:
epriestley 2014-06-16 09:15:25 -07:00
parent b12e2a4cc7
commit 0efa1ca643
3 changed files with 48 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/applications/pholio/view/PholioMockImagesView.php
View file

@ -88,7 +88,7 @@ final class PholioMockImagesView extends AphrontView {
? $file->getBestURI()
: $nonimage_uri),
'pageURI' => $this->getImagePageURI($image, $mock),
'downloadURI' => $file->getInfoURI(),
'downloadURI' => $file->getDownloadURI(),
'historyURI' => $history_uri,
'width' => $x,
'height' => $y,
@ -105,6 +105,16 @@ final class PholioMockImagesView extends AphrontView {
$navsequence[] = $image->getID();
}
$full_icon = array(
javelin_tag('span', array('aural' => true), pht('View Raw File')),
id(new PHUIIconView())->setIconFont('fa-file-image-o'),
);
$download_icon = array(
javelin_tag('span', array('aural' => true), pht('Download File')),
id(new PHUIIconView())->setIconFont('fa-download'),
);
$login_uri = id(new PhutilURI('/login/'))
->setQueryParam('next', (string) $this->getRequestURI());
$config = array(
@ -117,8 +127,8 @@ final class PholioMockImagesView extends AphrontView {
'loggedIn' => $this->getUser()->isLoggedIn(),
'logInLink' => (string) $login_uri,
'navsequence' => $navsequence,
'fullIcon' => id(new PHUIIconView())->setIconFont('fa-arrows-alt'),
'downloadIcon' => id(new PHUIIconView())->setIconFont('fa-download'),
'fullIcon' => hsprintf('%s', $full_icon),
'downloadIcon' => hsprintf('%s', $download_icon),
);
Javelin::initBehavior('pholio-mock-view', $config);

26
webroot/rsrc/css/application/pholio/pholio.css
View file

@ -192,19 +192,29 @@
font-size: 24px;
}
a.pholio-image-button-link:hover {
background: {$darkgreybackground};
button.pholio-image-button-link,
button.pholio-image-button-link:active {
/* Remove button styles. */
box-shadow: none;
text-shadow: none;
border: none;
border-radius: 0;
}
span.pholio-image-button-link .phui-icon-view {
color: {$darkgreybackground};
}
a.pholio-image-button-link .phui-icon-view {
.pholio-image-button-active .pholio-image-button-link .phui-icon-view {
color: {$lightgreytext};
}
.device-desktop a.pholio-image-button-link:hover .phui-icon-view {
.pholio-image-button-disabled .pholio-image-button-link .phui-icon-view {
color: {$darkgreybackground};
}
.pholio-image-button-active .pholio-image-button-link:hover {
background: {$darkgreybackground};
}
.device-desktop .pholio-image-button-active
.pholio-image-button-link:hover .phui-icon-view {
color: {$sky};
}

23
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
View file

@ -591,11 +591,19 @@ JX.behavior('pholio-mock-view', function(config) {
var buttons = [];
var classes = ['pholio-image-button'];
if (image.isViewable) {
classes.push('pholio-image-button-active');
} else {
classes.push('pholio-image-button-disabled');
}
buttons.push(
JX.$N(
'div',
{
className: 'pholio-image-button'
className: classes.join(' ')
},
JX.$N(
image.isViewable ? 'a' : 'span',
@ -606,16 +614,19 @@ JX.behavior('pholio-mock-view', function(config) {
},
JX.$H(config.fullIcon))));
// TODO: This should be a form which performs the download; for now, it
// just takes the user to the info page.
classes = ['pholio-image-button', 'pholio-image-button-active'];
buttons.push(
JX.$N(
'div',
'form',
{
className: 'pholio-image-button'
className: classes.join(' '),
action: image.downloadURI,
method: 'POST',
sigil: 'download'
},
JX.$N(
'a',
'button',
{
href: image.downloadURI,
className: 'pholio-image-button-link'