diff --git a/src/applications/pholio/view/PholioMockImagesView.php b/src/applications/pholio/view/PholioMockImagesView.php index a1f1d96a03..b6ddca8182 100644 --- a/src/applications/pholio/view/PholioMockImagesView.php +++ b/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'), - 'downloadIcon' => id(new PHUIIconView())->setIconFont('fa-download'), + 'fullIcon' => hsprintf('%s', $full_icon), + 'downloadIcon' => hsprintf('%s', $download_icon), ); Javelin::initBehavior('pholio-mock-view', $config); diff --git a/webroot/rsrc/css/application/pholio/pholio.css b/webroot/rsrc/css/application/pholio/pholio.css index 679327e8a5..f1e21a2978 100644 --- a/webroot/rsrc/css/application/pholio/pholio.css +++ b/webroot/rsrc/css/application/pholio/pholio.css @@ -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}; } diff --git a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js index 2e99636a76..d0255e8bab 100644 --- a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js +++ b/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 - // 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'