Make the Pholio download button actually download

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

src/applications/pholio/view/PholioMockImagesView.php

@@ -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'),
+      'fullIcon' => hsprintf('%s', $full_icon),
-      'downloadIcon' => id(new PHUIIconView())->setIconFont('fa-download'),
+      'downloadIcon' => hsprintf('%s', $download_icon),
     );
     Javelin::initBehavior('pholio-mock-view', $config);
 

webroot/rsrc/css/application/pholio/pholio.css

@@ -192,19 +192,29 @@
   font-size: 24px;
 }
 
-a.pholio-image-button-link:hover {
+button.pholio-image-button-link,
-  background: {$darkgreybackground};
+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 {
+.pholio-image-button-active .pholio-image-button-link .phui-icon-view {
-  color: {$darkgreybackground};
-}
-
-a.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};
 }
 

webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js

@@ -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
+    classes = ['pholio-image-button', 'pholio-image-button-active'];
-    // just takes the user to the info page.
+
     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'