@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
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
+46
-15
+13
-3
src/applications/pholio/view/PholioMockImagesView.php
+13
-3
src/applications/pholio/view/PholioMockImagesView.php
···
88
88
? $file->getBestURI()
89
89
: $nonimage_uri),
90
90
'pageURI' => $this->getImagePageURI($image, $mock),
91
-
'downloadURI' => $file->getInfoURI(),
91
+
'downloadURI' => $file->getDownloadURI(),
92
92
'historyURI' => $history_uri,
93
93
'width' => $x,
94
94
'height' => $y,
···
105
105
$navsequence[] = $image->getID();
106
106
}
107
107
108
+
$full_icon = array(
109
+
javelin_tag('span', array('aural' => true), pht('View Raw File')),
110
+
id(new PHUIIconView())->setIconFont('fa-file-image-o'),
111
+
);
112
+
113
+
$download_icon = array(
114
+
javelin_tag('span', array('aural' => true), pht('Download File')),
115
+
id(new PHUIIconView())->setIconFont('fa-download'),
116
+
);
117
+
108
118
$login_uri = id(new PhutilURI('/login/'))
109
119
->setQueryParam('next', (string) $this->getRequestURI());
110
120
$config = array(
···
117
127
'loggedIn' => $this->getUser()->isLoggedIn(),
118
128
'logInLink' => (string) $login_uri,
119
129
'navsequence' => $navsequence,
120
-
'fullIcon' => id(new PHUIIconView())->setIconFont('fa-arrows-alt'),
121
-
'downloadIcon' => id(new PHUIIconView())->setIconFont('fa-download'),
130
+
'fullIcon' => hsprintf('%s', $full_icon),
131
+
'downloadIcon' => hsprintf('%s', $download_icon),
122
132
);
123
133
Javelin::initBehavior('pholio-mock-view', $config);
124
134
+16
-6
webroot/rsrc/css/application/pholio/pholio.css
+16
-6
webroot/rsrc/css/application/pholio/pholio.css
···
192
192
font-size: 24px;
193
193
}
194
194
195
-
a.pholio-image-button-link:hover {
196
-
background: {$darkgreybackground};
195
+
button.pholio-image-button-link,
196
+
button.pholio-image-button-link:active {
197
+
/* Remove button styles. */
198
+
box-shadow: none;
199
+
text-shadow: none;
200
+
border: none;
201
+
border-radius: 0;
197
202
}
198
203
199
-
span.pholio-image-button-link .phui-icon-view {
204
+
.pholio-image-button-active .pholio-image-button-link .phui-icon-view {
205
+
color: {$lightgreytext};
206
+
}
207
+
208
+
.pholio-image-button-disabled .pholio-image-button-link .phui-icon-view {
200
209
color: {$darkgreybackground};
201
210
}
202
211
203
-
a.pholio-image-button-link .phui-icon-view {
204
-
color: {$lightgreytext};
212
+
.pholio-image-button-active .pholio-image-button-link:hover {
213
+
background: {$darkgreybackground};
205
214
}
206
215
207
-
.device-desktop a.pholio-image-button-link:hover .phui-icon-view {
216
+
.device-desktop .pholio-image-button-active
217
+
.pholio-image-button-link:hover .phui-icon-view {
208
218
color: {$sky};
209
219
}
210
220
+17
-6
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
+17
-6
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
···
591
591
592
592
var buttons = [];
593
593
594
+
var classes = ['pholio-image-button'];
595
+
596
+
if (image.isViewable) {
597
+
classes.push('pholio-image-button-active');
598
+
} else {
599
+
classes.push('pholio-image-button-disabled');
600
+
}
601
+
594
602
buttons.push(
595
603
JX.$N(
596
604
'div',
597
605
{
598
-
className: 'pholio-image-button'
606
+
className: classes.join(' ')
599
607
},
600
608
JX.$N(
601
609
image.isViewable ? 'a' : 'span',
···
606
614
},
607
615
JX.$H(config.fullIcon))));
608
616
609
-
// TODO: This should be a form which performs the download; for now, it
610
-
// just takes the user to the info page.
617
+
classes = ['pholio-image-button', 'pholio-image-button-active'];
618
+
611
619
buttons.push(
612
620
JX.$N(
613
-
'div',
621
+
'form',
614
622
{
615
-
className: 'pholio-image-button'
623
+
className: classes.join(' '),
624
+
action: image.downloadURI,
625
+
method: 'POST',
626
+
sigil: 'download'
616
627
},
617
628
JX.$N(
618
-
'a',
629
+
'button',
619
630
{
620
631
href: image.downloadURI,
621
632
className: 'pholio-image-button-link'