@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
Always scale images to fit in Pholio
Summary:
Ref T2641. Currently, we scale images to fit horizontally, but let them have arbitrary vertical size. This is nice in theory but kind of sucks in practice because it makes everything below the stage jump around when you switch images. It would also make swiping through images on mobile super weird.
Instead, scale to fit in both dimensions. This feels a lot better and more application-like to me. (I also think most mocks are not especially tall?)
Test Plan:
{F34648}
(Note that the image is enormous.)
Reviewers: chad
Reviewed By: chad
CC: aran
Maniphest Tasks: T2641
Differential Revision: https://secure.phabricator.com/D5233
+21
-14
+1
-1
src/__celerity_resource_map__.php
+1
-1
src/__celerity_resource_map__.php
···
1891
1891
),
1892
1892
'javelin-behavior-pholio-mock-view' =>
1893
1893
array(
1894
-
'uri' => '/res/45324e3b/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
1894
+
'uri' => '/res/10573d54/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
1895
1895
'type' => 'js',
1896
1896
'requires' =>
1897
1897
array(
+20
-13
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
+20
-13
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
···
166
166
}
167
167
168
168
function redraw_image() {
169
+
170
+
// Force the stage to scale as a function of the viewport size. Broadly,
171
+
// we make the stage 95% of the height of the viewport, then scale images
172
+
// to fit within it.
173
+
var new_y = (JX.Vector.getViewport().y * 0.90) - 150;
174
+
new_y = Math.max(320, new_y);
175
+
panel.style.height = new_y + 'px';
176
+
169
177
if (!active_image || !active_image.tag) {
170
178
return;
171
179
}
172
180
173
181
var tag = active_image.tag;
174
182
175
-
// If the image is too wide for the viewport, scale it down so it fits.
176
-
// (If it is too tall, we just let the user scroll.)
183
+
// If the image is too wide or tall for the viewport, scale it down so it
184
+
// fits.
177
185
var w = JX.Vector.getDim(panel);
178
186
w.x -= 40;
187
+
w.y -= 40;
188
+
var scale = 1;
179
189
if (w.x < tag.naturalWidth) {
180
-
var scale = w.x / tag.naturalWidth;
190
+
scale = Math.min(scale, w.x / tag.naturalWidth);
191
+
}
192
+
if (w.y < tag.naturalHeight) {
193
+
scale = Math.min(scale, w.y / tag.naturalHeight);
194
+
}
195
+
196
+
if (scale < 1) {
181
197
tag.width = Math.floor(scale * tag.naturalWidth);
182
198
tag.height = Math.floor(scale * tag.naturalHeight);
183
199
} else {
···
185
201
tag.height = tag.naturalHeight;
186
202
}
187
203
188
-
var new_y = (JX.Vector.getViewport().y * 0.85) - 150;
189
-
new_y = Math.max(320, new_y);
190
-
191
-
if (tag.height + 40 < new_y) {
192
-
panel.style.height = new_y + 'px';
193
-
viewport.style.top = Math.floor(((new_y + 40) - tag.height) / 2) + 'px';
194
-
} else {
195
-
panel.style.height = '';
196
-
viewport.style.top = '';
197
-
}
204
+
viewport.style.top = Math.floor((new_y - tag.height) / 2) + 'px';
198
205
199
206
stage.endLoad();
200
207